@extends('web.layouts.app')

@push('web.styles')
    @vite('resources/css/web/page/about.css')
@endpush

@php
    function isYoutubeUrl($url)
    {
        return preg_match('/(youtube\.com|youtu\.be)/i', $url);
    }
@endphp

@section('content')
    <div class="container">
        <section class="about-section">
            <!-- Header Image -->
            <div class="about-header-image">
                <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0"
                    alt="La Isla Social Club" class="w-100 h-100">
            </div>
            <div class="row g-4">
                <!-- Main Content Area -->
                <div class="col-12 col-md-7 col-lg-8 col-xl-8 col-xxl-9">

                    <!-- Title and Subtitle -->
                    <div class="about-content mb-4">
                        <h1 class="about-title">{{ $pageData->title }}</h1>

                        <!-- Article Text -->
                        <div class="about-article">
                            {!! $pageData->text !!}
                        </div>

                        <div class="about-article">
                            @if (session('success'))
                                <div id="sessionMessage" class="alert alert-success mt-4">{{ session('success') }}</div>
                            @elseif (session('error'))
                                <div id="sessionMessage" class="alert alert-danger mt-4">{{ session('error') }}</div>
                            @endif

                            <form action="{{ route('web.contact.post') }}" method="POST"
                                class="contact-form social-club-form">
                                @csrf

                                <div class="mb-3">
                                    <label for="name" class="form-label">NOM</label>
                                    <input id="name" name="name" type="text" class="form-control"
                                        value="{{ old('name') }}" required placeholder="Entrez votre nom">
                                    @error('name')
                                        <div class="text-danger small">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="email" class="form-label">EMAIL</label>
                                    <input id="email" name="email" type="email" class="form-control"
                                        value="{{ old('email') }}" required placeholder="Entrez votre adresse e-mail">
                                    @error('email')
                                        <div class="text-danger small">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="subject" class="form-label">SUBJECT</label>
                                    <input id="subject" name="subject" type="text" class="form-control"
                                        value="{{ old('subject') }}" placeholder="Entrez le sujet">
                                    @error('subject')
                                        <div class="text-danger small">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="message" class="form-label">MESSAGE</label>
                                    <textarea id="message" name="message" rows="6" class="form-control" required>{{ old('message') }}</textarea>
                                    @error('message')
                                        <div class="text-danger small">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <button type="submit" class="newsletter-modal-submit">Envoyer</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Share Section -->
                    <div class="about-share">
                        <div class="d-flex align-items-center gap-3">
                            <p class="share-label mb-0 pt-2">PARTAGEZ CETTE PAGE</p>
                            <button id="shareBtn" class="share-button border-0 bg-transparent"
                                aria-label="Share this page">
                                <img src="{{ asset('assets/images/share.png') }}" alt="Share Icon" class="w-100 h-100">
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-12 col-md-5 col-lg-4 col-xl-4 col-xxl-3">
                    @if ($allCategories->count() > 0)
                        <div class="about-sidebar">
                            <div class="sidebar-section">
                                <h2 class="sidebar-title">NOS EVENEMENTS</h2>
                                <div class="sidebar-items">
                                    <div class="row g-3">
                                        @foreach ($allCategories as $category)
                                            <div class="col-6 col-md-12 col-lg-12">
                                                <div class="sidebar-item d-flex gap-3">
                                                    <div class="sidebar-item-image flex-shrink-0">
                                                        <img src="{{ $category->hasMedia('event_category_image') ? $category->getFirstMediaUrl('event_category_image') : asset('assets/images/placeholder/event-finished.png') }}"
                                                            alt="{{ $category->name }}"
                                                            class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                            onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder/event-upcoming.png') }}';">
                                                    </div>
                                                    <div class="sidebar-item-content flex-grow-1">
                                                        <h3 class="sidebar-item-title mb-2">{{ $category->name }}</h3>
                                                        <a href="{{ route('web.event.category', $category->slug) }}"
                                                            class="sidebar-item-link">>> Voir la fiche</a>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="about-sidebar">
                        <!-- TV Section -->
                        <div class="sidebar-section">
                            <h2 class="sidebar-title">LA ISLA TV</h2>
                            <div class="sidebar-items">
                                <div class="row g-3">
                                    <div class="col-6 col-md-12 col-lg-12">
                                        <div class="sidebar-item d-flex gap-3">
                                            <div class="sidebar-item-image flex-shrink-0">
                                                <img src="{{ asset('assets/images/la-isla-tv/patrimoine.jpg') }}"
                                                    alt="LIVE DAN PATRIMOINE"
                                                    class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/la-isla-tv/patrimoine.jpg') }}';">
                                            </div>
                                            <div class="sidebar-item-content flex-grow-1">
                                                <h3 class="sidebar-item-title mb-2">LIVE DAN PATRIMOINE</h3>
                                                <a href="https://youtube.com/playlist?list=PL8I-aES2tLGsE51NWMBPS8wKgptwoOPK0&si=AONxMipWneJ06Tc8"
                                                    target="_blank" class="sidebar-item-link">>>
                                                    Voir
                                                    les vidéos</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-12 col-lg-12">
                                        <div class="sidebar-item d-flex gap-3">
                                            <div class="sidebar-item-image flex-shrink-0">
                                                <img src="{{ asset('assets/images/la-isla-tv/moris.jpg') }}"
                                                    alt="WE LOVE MORIS"
                                                    class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/la-isla-tv/moris.jpg') }}';">
                                            </div>
                                            <div class="sidebar-item-content flex-grow-1">
                                                <h3 class="sidebar-item-title mb-2">WE LOVE MORIS</h3>
                                                <a href="https://youtube.com/playlist?list=PL8I-aES2tLGsfhLwSRCxOUn8aHC5phmFl&si=i4p4NjAsSAv93UuO"
                                                    target="_blank" class="sidebar-item-link">>>
                                                    Voir
                                                    les vidéos</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-12 col-lg-12">
                                        <div class="sidebar-item d-flex gap-3">
                                            <div class="sidebar-item-image flex-shrink-0">
                                                <img src="{{ asset('assets/images/la-isla-tv/2068.jpg') }}"
                                                    alt="LA ISLA 2068"
                                                    class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/la-isla-tv/2068.jpg') }}';">
                                            </div>
                                            <div class="sidebar-item-content flex-grow-1">
                                                <h3 class="sidebar-item-title mb-2">LA ISLA 2068</h3>
                                                <a href="https://youtube.com/playlist?list=PL8I-aES2tLGu-Yy2aYXj7wxflQkBrZb0m&si=P4XZhW_Jl470stsQ"
                                                    target="_blank" class="sidebar-item-link">>>
                                                    Voir
                                                    les vidéos</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-12 col-lg-12">
                                        <div class="sidebar-item d-flex gap-3">
                                            <div class="sidebar-item-image flex-shrink-0">
                                                <img src="{{ asset('assets/images/la-isla-tv/semaine.jpg') }}"
                                                    alt="LE SON DE LA SEMAINE"
                                                    class="w-100 h-100 object-fit-cover event_poster_swiper_slide"
                                                    onerror="this.onerror=null;this.src='{{ asset('assets/images/la-isla-tv/semaine.jpg') }}';">
                                            </div>
                                            <div class="sidebar-item-content flex-grow-1">
                                                <h3 class="sidebar-item-title mb-2">LE SON DE LA SEMAINE</h3>
                                                <a href="https://youtube.com/playlist?list=PL8I-aES2tLGtWAqCTWo3KilqwfhE0dfTL&si=ZyXU3Me-ZZMZfNtP"
                                                    target="_blank" class="sidebar-item-link">>>
                                                    Voir
                                                    les vidéos</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Subscribe Bar -->
                    <div class="sidebar-subscribe">
                        <div class="d-flex align-items-center justify-content-between p-3">
                            <div class="d-flex align-items-center gap-3">
                                <div class="subscribe-icon-wrapper">
                                    <i class="bi bi-youtube text-white"></i>
                                </div>
                                <div>
                                    <div class="subscribe-title">LA ISLA TV</div>
                                    <div class="subscribe-count">11,200 subscribers</div>
                                </div>
                            </div>
                            <a href="{{ $general->youtube_link }}" target="_blank" class="subscribe-btn">SUBSCRIBE</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('web.scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sessionMessage = document.getElementById('sessionMessage');
            if (sessionMessage) {
                setTimeout(() => {
                    sessionMessage.style.display = 'none';
                }, 5000);
            }
        });
    </script>
@endpush