@extends('layouts.app')

@section('title', __('navigation.conferences'))

@section('content')

<!-- Header Start -->
<div class="container-fluid bg-primary py-5 mb-5 page-header">
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-10 text-center">
                <h1 class="display-3 text-white mb-3">{{ __('navigation.conferences') }}</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-center">
                        <li class="breadcrumb-item"><a class="text-white" href="{{ route('home', app()->getLocale()) }}">{{ __('navigation.Home') }}</a></li>
                        <li class="breadcrumb-item active text-white" aria-current="page">{{ __('navigation.conferences') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<!-- Header End -->

<!-- Conferences Start -->
<div class="container-xxl py-6">
    <div class="container">
        <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
            <h6 class="text-primary text-uppercase mb-2">{{ __('Upcoming Conferences') }}</h6>
            <h1 class="display-6 mb-4">{{ __('Join Our Featured Events') }}</h1>
        </div>

        @if($conferences->count() > 0)
        <div class="row g-4">
            @foreach($conferences as $conference)
            <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                <div class="conference-item bg-white shadow-lg rounded overflow-hidden h-100 position-relative">
                    <div class="position-relative">
                        <img class="img-fluid w-100" src="{{ $conference->image_url ? asset('storage/' . $conference->image_url) : asset('img/drivin/conference-default.jpg') }}" alt="{{ $conference->title }}" style="height: 250px; object-fit: cover;">
                        <div class="conference-overlay position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center opacity-0 hover-opacity-100 transition-all">
                            <div class="text-center">
                                <a href="{{ route('conferences.show', ['slug' => $conference->slug, 'locale' => app()->getLocale()]) }}" class="btn btn-primary me-2">{{ __('View Details') }}</a>
                                @if($conference->registration_url)
                                <a href="{{ $conference->registration_url }}" class="btn btn-outline-primary">{{ __('Register Now') }}</a>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="p-4">
                        <h5 class="mb-2">{{ $conference->title }}</h5>
                        <p class="text-muted mb-2"><i class="fa fa-calendar me-2"></i>{{ $conference->formatted_date }}</p>
                        <p class="text-muted mb-2"><i class="fa fa-map-marker me-2"></i>{{ $conference->location }}</p>
                        <p class="text-muted mb-2"><i class="fa fa-building me-2"></i>{{ $conference->venue }}</p>
                        <p class="mb-3">{{ Str::limit($conference->short_description, 100) }}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-primary fw-bold">{{ $conference->formatted_price }}</span>
                            <span class="badge {{ $conference->registration_status === 'open' ? 'bg-success' : 'bg-danger' }}">
                                {{ $conference->registration_status === 'open' ? __('Registration Open') : __('Registration Closed') }}
                            </span>
                        </div>
                    </div>
                    <div class="conference-actions p-3 bg-light">
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('conferences.show', ['slug' => $conference->slug, 'locale' => app()->getLocale()]) }}" class="btn btn-sm btn-primary">{{ __('View Details') }}</a>
                            @if($conference->registration_status === 'open')
                            <a href="{{ route('conferences.register', ['id' => $conference->id, 'locale' => app()->getLocale()]) }}" class="btn btn-sm btn-outline-primary">{{ __('Register Now') }}</a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="d-flex justify-content-center mt-5">
            {{ $conferences->links() }}
        </div>
        @else
        <div class="text-center">
            <h4>{{ __('No conferences available at the moment.') }}</h4>
            <p>{{ __('Please check back later for upcoming events.') }}</p>
        </div>
        @endif
    </div>
</div>
<!-- Conferences End -->

@endsection