@extends('front.layouts.app')
@section('content')
    @php
        $siteBranding = \App\Models\Setting::first();
        $footerLogo = $siteBranding?->site_logo_url ?: (isset($setting) && !empty($setting->site_logo) ? asset($setting->site_logo) : '');

        // Get sections with fallback to empty collection
        $hero = $homeSections['hero'] ?? null;
        $tents = $homeSections['tents'] ?? null;
        $events = $homeSections['events'] ?? null;
        $dining = $homeSections['dining'] ?? null;
        $gallery = $homeSections['gallery'] ?? null;
        $contact = $homeSections['contact'] ?? null;
    @endphp

    @if($hero && $hero->is_active)
        <section id="home" class="hero-section">
            <div id="heroSlider" class="carousel slide" data-bs-ride="carousel">

                <div class="carousel-inner">
                    @php
                        $banners = $hero->extra_data['banners'] ?? [];
                        $firstBanner = $hero->image_url ?? ($banners[0] ?? null);
                    @endphp
                    @if($firstBanner)
                        <div class="carousel-item active">
                            <img src="{{ asset($firstBanner) }}" class="hero-img" alt="Hero Banner 1">
                        </div>
                    @endif
                    @foreach(array_slice($banners, 1) as $banner)
                        <div class="carousel-item">
                            <img src="{{ asset($banner) }}" class="hero-img" loading="lazy" alt="Hero Banner">
                        </div>
                    @endforeach
                </div>

                <div class="hero-overlay"></div>

                <div class="hero-content">
                    <h1>{!! $hero->title !!}</h1>
                    <p>{{ $hero->description }}</p>
                    @if($hero->button_text)
                        <a href="{{ $hero->button_url }}" class="btn btn-warning mt-3">{{ $hero->button_text }}</a>
                    @endif
                </div>

                <button class="carousel-control-prev" type="button" data-bs-target="#heroSlider" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#heroSlider" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
            </div>
        </section>
    @endif

    @if($tents && $tents->is_active)
        <section id="tent" class="section dine-white">
            <div class="container">
                <div class="row align-items-center">

                    <div class="col-md-6 mb-4 mb-md-0">
                        @if($tents->image_url)
                            <img src="{{ asset($tents->image_url) }}" alt="{{ $tents->title }}"
                                class="img-fluid rounded shadow-lg dine-main-img" loading="lazy">
                        @endif
                    </div>

                    <div class="col-md-6">
                        <h2 class="section-title">{{ $tents->title }}</h2>
                        <p class="section-desc text-start mt-3">
                            {{ $tents->description }}
                        </p>
                        @if($tents->button_text)
                            <a href="{{ $tents->button_url }}" class="btn btn-warning mt-3">{{ $tents->button_text }}</a>
                        @endif
                    </div>

                </div>
            </div>
        </section>
    @endif

    @if($events && $events->is_active)
        <section id="event" class="section bg-dark text-white">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h2 class="section-title">{{ $events->title }}</h2>
                        <p>
                            {{ $events->description }}
                        </p>
                        @if($events->button_text)
                            <button class="btn btn-warning">{{ $events->button_text }}</button>
                        @endif
                    </div>
                    <div class="col-md-6">
                        @if($events->image_url)
                            <img src="{{ asset($events->image_url) }}" class="img-fluid rounded shadow" loading="lazy"
                                alt="{{ $events->title }}">
                        @endif
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if($dining && $dining->is_active)
        <section id="dinein" class="section dine-white">
            <div class="container">
                <div class="row align-items-center flex-md-row-reverse">
                    <div class="col-md-6">
                        <h2 class="section-title dark-title">{{ $dining->title }}</h2>
                        <p class="section-desc dark-desc">
                            {{ $dining->description }}
                        </p>
                        @if($dining->button_text)
                            <button class="btn btn-warning">{{ $dining->button_text }}</button>
                        @endif
                    </div>
                    <div class="col-md-6">
                        @if($dining->image_url)
                            <img src="{{ $dining->image_url }}" class="img-fluid rounded shadow" loading="lazy"
                                alt="{{ $dining->title }}">
                        @endif
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if($gallery && $gallery->is_active)
        <section id="gallery" class="gallery-section">
            <div class="container text-center">
                <h2 class="section-title text-white">{{ $gallery->title }}</h2>
                <p class="gallery-desc">
                    {{ $gallery->description }}
                </p>

                @php
                    $galleryImages = $gallery->extra_data['images'] ?? [];
                    $chunks = array_chunk($galleryImages, 3);
                @endphp

                @if(count($galleryImages) > 0)
                    <div id="gallerySlider" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2500">
                        <div class="carousel-inner">
                            @foreach($chunks as $index => $chunk)
                                <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                    <div class="row g-4">
                                        @foreach($chunk as $image)
                                            <div class="col-md-4">
                                                <img src="{{ asset($image) }}" class="gallery-img" loading="lazy" data-bs-toggle="modal"
                                                    data-bs-target="#imgModal" onclick="openImg(this.src)">
                                            </div>
                                        @endforeach
                                        @if(count($chunk) < 3)
                                            @for($i = count($chunk); $i < 3; $i++)
                                                <div class="col-md-4"></div>
                                            @endfor
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <button class="carousel-control-prev" type="button" data-bs-target="#gallerySlider" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#gallerySlider" data-bs-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </button>
                    </div>
                @endif
            </div>
        </section>
    @endif

    <div class="modal fade" id="imgModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content bg-dark">
                <div class="modal-body p-0">
                    <img id="modalImg" src="" class="w-100 rounded" alt="Modal Image">
                </div>
            </div>
        </div>
    </div>


    @if($contact && $contact->is_active)
        <section id="contact" class="contact-section">
            <div class="container">
                <h2 class="section-title text-center">{{ $contact->title }}</h2>

                @if (session('success'))
                    <div class="alert alert-success mt-4">
                        {{ session('success') }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger mt-4">
                        <ul class="mb-0 ps-3">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="row mt-5 align-items-center">
                    <div class="col-md-5">
                        <h5>21 Enduro Farms</h5>
                        @if(isset($contact->extra_data['address']))
                            <p>{{ $contact->extra_data['address'] }}</p>
                        @endif
                        @if(isset($contact->extra_data['email']))
                            <p><strong>Email:</strong> {{ $contact->extra_data['email'] }}</p>
                        @endif
                        @if(isset($contact->extra_data['phone']))
                            <p><strong>Phone:</strong> {{ $contact->extra_data['phone'] }}</p>
                        @endif
                        @if(isset($contact->extra_data['central_reservations']))
                            <p><strong>Central Reservations:</strong> {{ $contact->extra_data['central_reservations'] }}</p>
                        @endif

                        @if(isset($contact->extra_data['map_embed']))
                            <iframe src="{{ $contact->extra_data['map_embed'] }}" width="100%" height="220"
                                style="border-radius:12px;border:0;" allowfullscreen loading="lazy">
                            </iframe>
                        @endif
                    </div>

                    <div class="col-md-7">
                        <form method="POST" action="{{ route('contact.store') }}">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label">Name</label>
                                <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                    value="{{ old('name') }}">
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Email</label>
                                <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                                    value="{{ old('email') }}">
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Mobile</label>
                                <input type="text" name="phone" class="form-control @error('phone') is-invalid @enderror"
                                    value="{{ old('phone') }}">
                                @error('phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Booking Date</label>
                                <input type="date" name="booking_date"
                                    class="form-control @error('booking_date') is-invalid @enderror"
                                    value="{{ old('booking_date') }}">
                                @error('booking_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Booking Time</label>
                                <input type="time" name="booking_time"
                                    class="form-control @error('booking_time') is-invalid @enderror"
                                    value="{{ old('booking_time') }}">
                                @error('booking_time')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Message</label>
                                <textarea name="message" rows="3"
                                    class="form-control @error('message') is-invalid @enderror">{{ old('message') }}</textarea>
                                @error('message')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <button class="btn btn-warning w-100">Send Message</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <footer class="footer-section">
        <div class="container text-center">
            @if($footerLogo)
                <img src="{{ $footerLogo }}" class="footer-logo mb-3" alt="logo" loading="lazy">
            @endif

            <h5>21 Enduro Farms, Pune</h5>
            <p>Jambhulwadi Lake, Pune, Maharashtra 411046</p>
            @if($contact && isset($contact->extra_data['email']))
                <p>Email: {{ $contact->extra_data['email'] }} | Phone: {{ $contact->extra_data['phone'] ?? '' }}</p>
            @endif

            <div class="footer-icons mt-3">
                @if($contact && isset($contact->extra_data['social_links']))
                    @if(isset($contact->extra_data['social_links']['facebook']))
                        <a href="{{ $contact->extra_data['social_links']['facebook'] }}" class="social-icon" target="_blank"><i
                                class="bi bi-facebook"></i></a>
                    @endif
                    @if(isset($contact->extra_data['social_links']['instagram']))
                        <a href="{{ $contact->extra_data['social_links']['instagram'] }}" class="social-icon" target="_blank"><i
                                class="bi bi-instagram"></i></a>
                    @endif
                    @if(isset($contact->extra_data['social_links']['phone']))
                        <a href="{{ $contact->extra_data['social_links']['phone'] }}" class="social-icon"><i
                                class="bi bi-telephone"></i></a>
                    @endif
                @endif
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // JS helper for modal image loading
        function openImg(src) {
            document.getElementById('modalImg').src = src;
        }
    </script>
@endsection