@extends('layouts.app')

@section('title', $featuredEvent->title)
@section('description', $featuredEvent->subtitle ?? 'Événements exceptionnels')

@section('content')
<!-- Featured Event Hero -->
<section id="hero" class="hero-section">
    <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-lg-10">
                <div class="hero-content">
                    <span class="badge bg-primary mb-3 p-2">Événement à la Une</span>
                    <h1 class="display-3 mb-4">{{ $featuredEvent->title }}</h1>
                    
                    @if($featuredEvent->subtitle)
                        <p class="lead mb-4">{{ $featuredEvent->subtitle }}</p>
                    @endif

                    <div class="event-details">
                        <div class="detail-item">
                            <i class="bi bi-calendar-event"></i>
                            <span>{{ $featuredEvent->start_date->format('d M Y') }}
                                @if($featuredEvent->start_date->format('Y-m-d') !== $featuredEvent->end_date->format('Y-m-d'))
                                    - {{ $featuredEvent->end_date->format('d M Y') }}
                                @endif
                            </span>
                        </div>
                        @if($featuredEvent->location)
                            <div class="detail-item">
                                <i class="bi bi-geo-alt"></i>
                                <span>{{ $featuredEvent->location }}</span>
                            </div>
                        @endif
                    </div>

                    @if($featuredEvent->start_date->isFuture())
                        <div class="countdown-section mt-5">
                            <h3 class="mb-4">L'événement commence dans</h3>
                            <div class="countdown" data-date="{{ $featuredEvent->start_date->toISOString() }}">
                                <div class="countdown-box">
                                    <h3 class="count-days">00</h3>
                                    <h6>Jours</h6>
                                </div>
                                <div class="countdown-box">
                                    <h3 class="count-hours">00</h3>
                                    <h6>Heures</h6>
                                </div>
                                <div class="countdown-box">
                                    <h3 class="count-minutes">00</h3>
                                    <h6>Minutes</h6>
                                </div>
                                <div class="countdown-box">
                                    <h3 class="count-seconds">00</h3>
                                    <h6>Secondes</h6>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Event Brief Content -->
@php
    $aboutSection = $featuredEvent->sections->where('section_type', 'about')->where('is_active', true)->first();
@endphp

@if($aboutSection || $featuredEvent->description)
<section class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <h2 class="mb-4">À propos de {{ $featuredEvent->title }}</h2>
                @if($aboutSection && $aboutSection->content)
                    <p class="lead">{{ Str::limit($aboutSection->content, 300) }}</p>
                @elseif($featuredEvent->description)
                    <p class="lead">{{ Str::limit($featuredEvent->description, 300) }}</p>
                @endif
                <a href="{{ route('event.show', $featuredEvent->id) }}" class="btn btn-outline-primary">
                    En savoir plus <i class="bi bi-arrow-right ms-1"></i>
                </a>
            </div>
        </div>
    </div>
</section>
@endif

@if($featuredEvent->speakers->count() > 0)
<!-- Featured Speakers Preview -->
<section class="bg-light-section">
    <div class="container">
        <div class="section-title">
            <h2>Quelques Intervenants</h2>
        </div>
        
        <div class="row g-4">
            @foreach($featuredEvent->speakers->take(3) as $speaker)
                <div class="col-lg-4">
                    <div class="speaker-card">
                        @if($speaker->image)
                            <img src="{{ asset('storage/' . $speaker->image) }}" alt="{{ $speaker->name }}" class="card-img-top" style="height: 200px; object-fit: cover;">
                        @else
                            <div class="bg-primary text-white d-flex align-items-center justify-content-center" style="height: 200px;">
                                <i class="bi bi-person-circle display-1"></i>
                            </div>
                        @endif
                        <div class="card-body text-center">
                            <h5 class="card-title">{{ $speaker->name }}</h5>
                            @if($speaker->title)
                                <p class="text-primary">{{ $speaker->title }}</p>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        
        @if($featuredEvent->speakers->count() > 3)
            <div class="text-center mt-4">
                <a href="{{ route('event.show', $featuredEvent->id) }}#speakers" class="btn btn-outline-primary">
                    Voir tous les intervenants ({{ $featuredEvent->speakers->count() }}) <i class="bi bi-arrow-right ms-1"></i>
                </a>
            </div>
        @endif
    </div>
</section>
@endif

<!-- Other Events Section -->
@if($otherEvents->count() > 0)
<section class="py-5">
    <div class="container">
        <div class="section-title">
            <h2>Nos autres événements</h2>
            <p>Découvrez également ces événements exceptionnels</p>
        </div>
        
        <div class="row g-4">
            @foreach($otherEvents as $event)
                <div class="col-lg-4 col-md-6">
                    <a href="{{ route('event.show', $event->id) }}" class="text-decoration-none">
                        <div class="card h-100 shadow-sm event-card hover-lift">
                            @if($event->image)
                                <img src="{{ asset('storage/' . $event->image) }}" class="card-img-top" alt="{{ $event->title }}" style="height: 200px; object-fit: cover;">
                            @else
                                <div class="bg-gradient-primary text-white d-flex align-items-center justify-content-center" style="height: 200px;">
                                    <i class="bi bi-calendar-event display-4"></i>
                                </div>
                            @endif
                            
                            <div class="card-body d-flex flex-column">
                                <div class="mb-3">
                                    @if($event->isOngoing())
                                        <span class="badge bg-success">En cours</span>
                                    @else
                                        <span class="badge bg-primary">À venir</span>
                                    @endif
                                </div>
                                
                                <h5 class="card-title text-dark">{{ $event->title }}</h5>
                                
                                @if($event->subtitle)
                                    <p class="card-text text-muted">{{ Str::limit($event->subtitle, 100) }}</p>
                                @endif
                                
                                <div class="event-meta mb-3 mt-auto">
                                    <small class="text-muted">
                                        <i class="bi bi-calendar3"></i> {{ $event->start_date->format('d M Y') }}
                                        @if($event->start_date->format('Y-m-d') !== $event->end_date->format('Y-m-d'))
                                            - {{ $event->end_date->format('d M Y') }}
                                        @endif
                                    </small>
                                    @if($event->location)
                                        <br><small class="text-muted">
                                            <i class="bi bi-geo-alt"></i> {{ $event->location }}
                                        </small>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- Quick Contact Section -->
<section class="bg-light-section" id="contact">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <h2 class="mb-4">Besoin d'informations ?</h2>
                <p class="lead mb-4">Notre équipe est à votre disposition pour répondre à toutes vos questions</p>
                
                <div class="row g-4">
                    <div class="col-md-4">
                        <div class="text-center">
                            <i class="bi bi-envelope display-6 text-primary mb-3"></i>
                            <h5>Email</h5>
                            <a href="mailto:contact@events.com" class="text-decoration-none">contact@events.com</a>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center">
                            <i class="bi bi-telephone display-6 text-primary mb-3"></i>
                            <h5>Téléphone</h5>
                            <a href="tel:+33123456789" class="text-decoration-none">+33 1 23 45 67 89</a>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center">
                            <i class="bi bi-chat-dots display-6 text-primary mb-3"></i>
                            <h5>Chat en direct</h5>
                            <button class="btn btn-outline-primary btn-sm">Nous contacter</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
    .hero-section {
        background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                    url('{{ $featuredEvent->background_image ? asset('storage/' . $featuredEvent->background_image) : asset('images/hero-bg.jpg') }}') center/cover;
    }

    .countdown-box {
        background: rgba(255,255,255,0.15);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        padding: 1.5rem;
        margin: 0.5rem;
        border: 1px solid rgba(255,255,255,0.2);
    }

    .event-details {
        display: flex;
        justify-content: center;
        gap: 2rem;
        margin: 2rem 0;
        flex-wrap: wrap;
    }

    .detail-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: rgba(255,255,255,0.1);
        padding: 0.75rem 1.5rem;
        border-radius: 25px;
        backdrop-filter: blur(5px);
    }

    .event-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .event-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
    }

    .speaker-card {
        transition: transform 0.3s ease;
        border: none;
        box-shadow: 0 2px 15px rgba(0,0,0,0.1);
        border-radius: 10px;
        overflow: hidden;
    }

    .speaker-card:hover {
        transform: translateY(-5px);
    }
</style>
@endpush

@push('scripts')
<script>
// Countdown Timer (même code que single-event)
function updateCountdown() {
    const countdownElement = document.querySelector('.countdown[data-date]');
    if (!countdownElement) return;
    
    const targetDate = new Date(countdownElement.getAttribute('data-date'));
    const now = new Date();
    const difference = targetDate - now;
    
    if (difference > 0) {
        const days = Math.floor(difference / (1000 * 60 * 60 * 24));
        const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((difference % (1000 * 60)) / 1000);
        
        document.querySelector('.count-days').textContent = days.toString().padStart(2, '0');
        document.querySelector('.count-hours').textContent = hours.toString().padStart(2, '0');
        document.querySelector('.count-minutes').textContent = minutes.toString().padStart(2, '0');
        document.querySelector('.count-seconds').textContent = seconds.toString().padStart(2, '0');
    } else {
        countdownElement.style.display = 'none';
    }
}

setInterval(updateCountdown, 1000);
updateCountdown();
</script>
@endpush