@extends('layouts.public')

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

@section('content')
@if($currentEvent)
    <!-- Vue avec événement actuel -->
    <section class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="hero-content">
                        <h1 class="display-4 fw-bold mb-4">{{ $currentEvent->title }}</h1>
                        <p class="lead mb-4">{{ $currentEvent->description }}</p>
                        
                        <div class="d-flex flex-wrap gap-3 mb-4">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-calendar-event me-2"></i>
                                <span>{{ $currentEvent->start_date->format('d/m/Y') }}</span>
                            </div>
                            <div class="d-flex align-items-center">
                                <i class="bi bi-clock me-2"></i>
                                <span>{{ $currentEvent->start_date->format('H:i') }}</span>
                            </div>
                            <div class="d-flex align-items-center">
                                <i class="bi bi-geo-alt me-2"></i>
                                <span>{{ $currentEvent->location }}</span>
                            </div>
                        </div>

                        @if($currentEvent->registration_url)
                            <a href="{{ $currentEvent->registration_url }}" class="btn btn-primary btn-lg" target="_blank">
                                <i class="bi bi-calendar-plus me-2"></i>S'inscrire maintenant
                            </a>
                        @endif
                    </div>
                </div>
                <div class="col-lg-6">
                    @if($currentEvent->image)
                        <img src="{{ Storage::url($currentEvent->image) }}" alt="{{ $currentEvent->title }}" class="img-fluid rounded shadow-lg">
                    @endif
                </div>
            </div>
        </div>
    </section>

    @if($currentEvent->sections->count() > 0)
    <!-- Sections de l'événement -->
    <section class="py-5">
        <div class="container">
            <h2 class="section-title text-center mb-5">Programme de l'événement</h2>
            <div class="row">
                @foreach($currentEvent->sections as $section)
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card event-card h-100">
                        @if($section->image)
                            <img src="{{ Storage::url($section->image) }}" class="event-image" alt="{{ $section->title }}">
                        @endif
                        <div class="card-body">
                            <h5 class="card-title">{{ $section->title }}</h5>
                            <p class="card-text">{{ $section->description }}</p>
                            @if($section->start_time)
                                <small class="text-muted">
                                    <i class="bi bi-clock me-1"></i>{{ $section->start_time->format('H:i') }}
                                    @if($section->end_time)
                                        - {{ $section->end_time->format('H:i') }}
                                    @endif
                                </small>
                            @endif
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    @if($speakers->count() > 0)
    <!-- Intervenants -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="section-title text-center mb-5">Nos Intervenants</h2>
            <div class="row">
                @foreach($speakers as $speaker)
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card event-card h-100 text-center">
                        @if($speaker->photo)
                            <img src="{{ Storage::url($speaker->photo) }}" class="card-img-top" style="height: 250px; object-fit: cover;" alt="{{ $speaker->name }}">
                        @endif
                        <div class="card-body">
                            <h5 class="card-title">{{ $speaker->name }}</h5>
                            <p class="text-muted">{{ $speaker->title }}</p>
                            <p class="card-text">{{ $speaker->bio }}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    @if($scheduleItems->count() > 0)
    <!-- Programme détaillé -->
    <section class="py-5">
        <div class="container">
            <h2 class="section-title text-center mb-5">Programme Détaillé</h2>
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    @foreach($scheduleItems as $item)
                    <div class="card mb-3">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-3">
                                    <strong class="text-primary">
                                        {{ $item->start_time->format('H:i') }}
                                        @if($item->end_time)
                                            - {{ $item->end_time->format('H:i') }}
                                        @endif
                                    </strong>
                                </div>
                                <div class="col-md-9">
                                    <h6 class="mb-1">{{ $item->title }}</h6>
                                    @if($item->description)
                                        <p class="mb-1 text-muted">{{ $item->description }}</p>
                                    @endif
                                    @if($item->speaker)
                                        <small class="text-success">
                                            <i class="bi bi-person me-1"></i>{{ $item->speaker->name }}
                                        </small>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    @endif

@else
    <!-- Vue par défaut sans événement -->
    <section class="hero-section">
        <div class="container">
            <div class="row align-items-center min-vh-100">
                <div class="col-lg-8 mx-auto text-center">
                    <div class="hero-content">
                        <h1 class="display-3 fw-bold mb-4">Events</h1>
                        <p class="lead mb-5">Votre plateforme dédiée aux événements</p>

                        <div class="row g-4 mb-5">
                            <div class="col-md-4">
                                <div class="contact-card">
                                    <i class="bi bi-envelope-fill fs-2 mb-3 d-block"></i>
                                    <h5>Email</h5>
                                    <p class="mb-1 small">infos@logexit.com</p>
                                    <p class="mb-0 small">societelogex@gmail.com</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="contact-card">
                                    <i class="bi bi-telephone-fill fs-2 mb-3 d-block"></i>
                                    <h5>Téléphone</h5>
                                    <p class="mb-1 small">(+228) 96055353</p>
                                    <p class="mb-0 small">(+228) 93055353</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="contact-card">
                                    <i class="bi bi-geo-alt-fill fs-2 mb-3 d-block"></i>
                                    <h5>Siège social</h5>
                                    <p class="mb-0 small">262 BKK, Bè-Klikamé<br>Lomé - TOGO</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="contact-card">
                            <h3 class="mb-4">Restez informé de nos prochains événements</h3>
                            <p class="mb-4">Inscrivez-vous à notre newsletter pour être le premier à connaître nos événements à venir.</p>
                            
                            <form class="row g-3 justify-content-center">
                                <div class="col-auto">
                                    <input type="email" class="form-control" placeholder="Votre email" required>
                                </div>
                                <div class="col-auto">
                                    <button type="submit" class="btn btn-primary">S'abonner</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Section informations -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center">
                    <h2 class="section-title mb-4">À propos de notre plateforme</h2>
                    <p class="lead">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>

                    <div class="row g-4 mt-4">
                        <div class="col-md-4">
                            <i class="bi bi-people-fill text-primary fs-1 mb-3"></i>
                            <h5>Communauté</h5>
                            <p>Rejoignez une communauté dynamique de professionnels togolais</p>
                        </div>
                        <div class="col-md-4">
                            <i class="bi bi-lightbulb-fill text-primary fs-1 mb-3"></i>
                            <h5>Innovation</h5>
                            <p>Découvrez les dernières tendances et innovations technologiques</p>
                        </div>
                        <div class="col-md-4">
                            <i class="bi bi-award-fill text-primary fs-1 mb-3"></i>
                            <h5>Excellence</h5>
                            <p>Des événements de haute qualité avec des intervenants reconnus</p>
                        </div>
                    </div>
                </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