@extends('layouts.theevent')

@section('title', 'Accueil')
@section('description', 'Découvrez les événements technologiques et professionnels au Togo')

@section('content')

@if($currentEvent)
    <!-- Hero Section avec Événement -->
    <section id="hero" class="hero section dark-background">
        <img src="{{ $currentEvent->image ? Storage::url($currentEvent->image) : asset('TheEvent/assets/img/hero-bg.jpg') }}" alt="" data-aos="fade-in">
        <div class="container">
            <div class="row justify-content-center text-center" data-aos="fade-up" data-aos-delay="100">
                <div class="col-xl-6 col-lg-8">
                    <h2>{{ $currentEvent->title }}<span>.</span></h2>
                    <p>{{ $currentEvent->description }}</p>
                </div>
            </div>

            <div class="row gy-4 mt-5 justify-content-center" data-aos="fade-up" data-aos-delay="200">
                <div class="col-xl-2 col-md-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="info-item">
                        <i class="bi bi-geo-alt"></i>
                        <h3>Lieu</h3>
                        <p>{{ $currentEvent->location }}</p>
                    </div>
                </div>
                <div class="col-xl-2 col-md-4" data-aos="fade-up" data-aos-delay="400">
                    <div class="info-item">
                        <i class="bi bi-calendar-check"></i>
                        <h3>Date</h3>
                        <p>{{ $currentEvent->start_date->format('d/m/Y') }}</p>
                    </div>
                </div>
                <div class="col-xl-2 col-md-4" data-aos="fade-up" data-aos-delay="500">
                    <div class="info-item">
                        <i class="bi bi-clock"></i>
                        <h3>Heure</h3>
                        <p>{{ $currentEvent->start_date->format('H:i') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if($currentEvent->sections->count() > 0)
    <!-- About Event Section -->
    <section id="about" class="about section">
        <div class="container" data-aos="fade-up">
            <div class="row gy-4">
                <div class="col-lg-6">
                    <h3>À propos de l'événement</h3>
                    <p>{{ $currentEvent->description }}</p>
                    
                    @if($currentEvent->registration_url)
                        <a href="{{ $currentEvent->registration_url }}" class="btn-get-started" target="_blank">S'inscrire maintenant</a>
                    @endif
                </div>
                <div class="col-lg-6">
                    @if($currentEvent->image)
                        <img src="{{ Storage::url($currentEvent->image) }}" class="img-fluid" alt="{{ $currentEvent->title }}">
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!-- Event Details Section -->
    <section id="event-details" class="event-details section">
        <div class="container" data-aos="fade-up">
            <div class="section-header">
                <h2>Programme de l'événement</h2>
                <p>Découvrez le programme détaillé de notre événement</p>
            </div>
            <div class="row">
                @foreach($currentEvent->sections as $section)
                <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                    <div class="event-item">
                        @if($section->image)
                            <img src="{{ Storage::url($section->image) }}" alt="{{ $section->title }}" class="img-fluid">
                        @endif
                        <h3>{{ $section->title }}</h3>
                        <p>{{ $section->description }}</p>
                        @if($section->start_time)
                            <p class="event-time">
                                <i class="bi bi-clock"></i> {{ $section->start_time->format('H:i') }}
                                @if($section->end_time)
                                    - {{ $section->end_time->format('H:i') }}
                                @endif
                            </p>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    @if($speakers->count() > 0)
    <!-- Speakers Section -->
    <section id="speakers" class="speakers section">
        <div class="container section-title" data-aos="fade-up">
            <h2>Nos Intervenants</h2>
            <p>Rencontrez nos experts et professionnels</p>
        </div>
        <div class="container">
            <div class="row gy-4">
                @foreach($speakers as $speaker)
                <div class="col-xl-3 col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                    <div class="member">
                        @if($speaker->photo)
                            <img src="{{ Storage::url($speaker->photo) }}" class="img-fluid" alt="{{ $speaker->name }}">
                        @endif
                        <div class="member-info">
                            <div class="member-info-content">
                                <h4>{{ $speaker->name }}</h4>
                                <span>{{ $speaker->title }}</span>
                                <p>{{ $speaker->bio }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    @if($scheduleItems->count() > 0)
    <!-- Schedule Section -->
    <section id="schedule" class="schedule section">
        <div class="container section-title" data-aos="fade-up">
            <h2>Programme Détaillé</h2>
            <p>Voici le planning complet de l'événement</p>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12" data-aos="fade-up" data-aos-delay="200">
                    <h3 class="sub-heading">Programme</h3>
                    @foreach($scheduleItems as $item)
                    <div class="row schedule-item">
                        <div class="col-md-2"><time>{{ $item->start_time->format('H:i') }}</time></div>
                        <div class="col-md-10">
                            <h4>{{ $item->title }}</h4>
                            @if($item->description)
                                <p>{{ $item->description }}</p>
                            @endif
                            @if($item->speaker)
                                <p><strong>Intervenant :</strong> {{ $item->speaker->name }}</p>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    @endif

@else
    <!-- Hero Section sans événement -->
    <section id="hero" class="hero section dark-background">
        <img src="{{ asset('TheEvent/assets/img/hero-bg.jpg') }}" alt="" data-aos="fade-in">
        <div class="container">
            <div class="row justify-content-center text-center" data-aos="fade-up" data-aos-delay="100">
                <div class="col-xl-8 col-lg-10">
                    <h2>Events<span>.</span></h2>
                    <p>Votre plateforme dédiée aux événements</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact section">
        <div class="container section-title" data-aos="fade-up">
            <h2>Contactez-nous</h2>
            <p>Prêt à organiser votre prochain événement ? Contactez-nous dès maintenant</p>
        </div>
        <div class="container" data-aos="fade-up" data-aos-delay="100">
            <div class="row gy-4">
                <div class="col-lg-6">
                    <div class="row gy-4">
                        <div class="col-md-6">
                            <div class="info-item" data-aos="fade" data-aos-delay="200">
                                <i class="bi bi-geo-alt"></i>
                                <h3>Adresse</h3>
                                <p>262 BKK, Bè-Klikamé</p>
                                <p>Lomé, TOGO</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item" data-aos="fade" data-aos-delay="300">
                                <i class="bi bi-telephone"></i>
                                <h3>Appelez-nous</h3>
                                <p>(+228) 96055353</p>
                                <p>(+228) 93055353</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item" data-aos="fade" data-aos-delay="400">
                                <i class="bi bi-envelope"></i>
                                <h3>Email</h3>
                                <p>infos@logexit.com</p>
                                <p>societelogex@gmail.com</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item" data-aos="fade" data-aos-delay="500">
                                <i class="bi bi-clock"></i>
                                <h3>Horaires</h3>
                                <p>Lundi - Vendredi</p>
                                <p>8:00 - 18:00</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <form action="#" method="post" class="php-email-form" data-aos="fade-up" data-aos-delay="200">
                        <div class="row gy-4">
                            <div class="col-md-6">
                                <input type="text" name="name" class="form-control" placeholder="Votre nom" required="">
                            </div>
                            <div class="col-md-6">
                                <input type="email" class="form-control" name="email" placeholder="Votre email" required="">
                            </div>
                            <div class="col-12">
                                <input type="text" class="form-control" name="subject" placeholder="Sujet" required="">
                            </div>
                            <div class="col-12">
                                <textarea class="form-control" name="message" rows="6" placeholder="Message" required=""></textarea>
                            </div>
                            <div class="col-12 text-center">
                                <div class="loading">Chargement</div>
                                <div class="error-message"></div>
                                <div class="sent-message">Votre message a été envoyé. Merci !</div>
                                <button type="submit">Envoyer</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="about section">
        <div class="container" data-aos="fade-up">
            <div class="row gy-4">
                <div class="col-lg-6">
                    <h3>À propos de notre plateforme</h3>
                    <p>Events est la plateforme de référence pour les événements. Nous connectons les professionnels, entrepreneurs et passionnés autour d'événements de qualité.</p>
                    <ul class="list-unstyled">
                        <li><i class="bi bi-check-circle"></i> <span>Événements technologiques innovants</span></li>
                        <li><i class="bi bi-check-circle"></i> <span>Networking professionnel</span></li>
                        <li><i class="bi bi-check-circle"></i> <span>Formations spécialisées</span></li>
                        <li><i class="bi bi-check-circle"></i> <span>Conférences d'experts</span></li>
                    </ul>
                </div>
                <div class="col-lg-6">
                    <img src="{{ asset('TheEvent/assets/img/about.jpg') }}" class="img-fluid" alt="">
                </div>
            </div>
        </div>
    </section>
@endif

@endsection

@push('scripts')
@if($currentEvent && $currentEvent->start_date->isFuture())
<script>
// Compte à rebours pour l'événement
const eventDate = new Date('{{ $currentEvent->start_date->format('Y-m-d H:i:s') }}').getTime();

function updateCountdown() {
    const now = new Date().getTime();
    const distance = eventDate - now;

    if (distance > 0) {
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        console.log(`Événement dans: ${days}j ${hours}h ${minutes}m ${seconds}s`);
    }
}

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