@extends('layouts.app')

@section('title', 'Hero Banner Management')

@section('content')
    <div class="page-header">
        <div>
            <h1 class="page-title">Executive Hero Banner Management</h1>
            <div class="page-subtitle">Configure homepage luxury hero headlines, background imagery, taglines, and primary
                CTA buttons.</div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm" role="alert"
            style="border-radius: 12px; background-color: #DCFCE7; color: #15803D;">
            <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
        </div>
    @endif

    <div class="row g-4">
        <!-- Form Settings Card -->
        <div class="col-lg-7">
            <div class="content-card h-100">
                <div class="content-card-header">
                    <h5 class="content-card-title"><i class="bi bi-sliders text-danger"></i> Hero Section Specifications
                    </h5>
                </div>
                <div class="content-card-body">
                    <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label class="form-label font-weight-bold">Hero Eyebrow Tagline</label>
                                <input type="text" name="hero_eyebrow" class="form-control"
                                    value="{{ \App\Models\Setting::get('hero_eyebrow', 'BEVERLY HILLS • GLOBAL DELIVERY') }}"
                                    required>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label font-weight-bold">Hero Main Heading</label>
                                <input type="text" name="hero_heading" class="form-control"
                                    value="{{ \App\Models\Setting::get('hero_heading', 'REDISCOVER DRIVING PERFECTION.') }}"
                                    required>
                            </div>

                            <div class="col-md-12">
                                <label class="form-label font-weight-bold">Hero Subtitle Paragraph</label>
                                <textarea name="hero_subtitle" class="form-control" rows="3"
                                    required>{{ \App\Models\Setting::get('hero_subtitle', 'Curated gallery of certified pre-owned supercars, luxury SUVs, and bespoke electric performance vehicles with white-glove global delivery & tailored financing.') }}</textarea>
                            </div>

                            <!-- Direct Image Upload System -->
                            <div class="col-md-12">
                                <label class="form-label font-weight-bold">Hero Background Image</label>
                                
                                <input type="hidden" name="hero_bg_image" id="heroBgImageInput"
                                    value="{{ \App\Models\Setting::get('hero_bg_image', 'https://images.unsplash.com/photo-1614162692292-7ac56d7f7f1e?auto=format&fit=crop&w=1920&q=80') }}">

                                <div class="card p-3 bg-light border" style="border-radius: 14px;">
                                    <div class="d-flex align-items-center gap-3 flex-wrap flex-md-nowrap">
                                        <!-- Active Preview Thumbnail -->
                                        <div style="position: relative; width: 140px; height: 85px; border-radius: 10px; overflow: hidden; border: 2px solid #cbd5e1; flex-shrink: 0; background: #000;">
                                            <img id="currentHeroPreview" 
                                                 src="{{ \App\Models\Setting::get('hero_bg_image', 'https://images.unsplash.com/photo-1614162692292-7ac56d7f7f1e?auto=format&fit=crop&w=1920&q=80') }}" 
                                                 alt="Hero Background Preview" 
                                                 style="width: 100%; height: 100%; object-fit: cover;">
                                        </div>

                                        <div class="flex-grow-1">
                                            <h6 class="fw-bold mb-1" style="font-size: 0.95rem;">Upload or Choose Hero Image</h6>
                                            <p class="text-muted small mb-2">Upload a new image directly from your gallery/device or choose from showroom photos.</p>

                                            <div class="d-flex gap-2 flex-wrap align-items-center">
                                                <!-- Direct Device File Upload Input Button -->
                                                <label for="heroBgFileInput" class="btn btn-luxury-red btn-sm px-3 py-2 cursor-pointer mb-0">
                                                    <i class="bi bi-cloud-arrow-up-fill me-1"></i> Upload From Device Gallery
                                                </label>
                                                <input type="file" name="hero_bg_file" id="heroBgFileInput" class="d-none" accept="image/*" onchange="handleHeroFileUpload(this)">

                                                <!-- Pick from Showroom Gallery Button -->
                                                <button type="button" class="btn btn-outline-dark btn-sm px-3 py-2" data-bs-toggle="modal" data-bs-target="#showroomGalleryModal">
                                                    <i class="bi bi-images me-1"></i> Choose From Showroom Gallery
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="fileSelectionBadge" class="mt-2 text-success fw-bold small d-none">
                                        <i class="bi bi-check-circle-fill me-1"></i> <span id="fileNameText">New image selected</span>
                                    </div>
                                </div>
                                <div class="form-text mt-1">Select or upload a high-resolution landscape image (1920x1080 recommended).</div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label font-weight-bold">Primary Button Text</label>
                                <input type="text" name="hero_btn1" class="form-control"
                                    value="{{ \App\Models\Setting::get('hero_btn1', 'Explore Inventory') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label font-weight-bold">Secondary Button Text</label>
                                <input type="text" name="hero_btn2" class="form-control"
                                    value="{{ \App\Models\Setting::get('hero_btn2', 'Book Private Appointment') }}"
                                    required>
                            </div>

                            <div class="col-12 mt-4 text-end">
                                <button type="submit" class="btn btn-luxury-red px-4 py-2">
                                    <i class="bi bi-check-circle-fill me-1"></i> Save Hero Specifications
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Live Premium Interactive Hero Card Preview -->
        <div class="col-lg-5">
            <div class="content-card h-100">
                <div class="content-card-header">
                    <h5 class="content-card-title"><i class="bi bi-eye-fill text-danger"></i> Live Homepage Hero Preview
                    </h5>
                </div>
                <div class="content-card-body p-0" style="background:#000;">
                    <div id="liveHeroPreviewCard"
                        style="position:relative; min-height:420px; width:100%; border-radius:0 0 16px 16px; overflow:hidden; background: linear-gradient(180deg, rgba(8,8,12,0.4) 0%, rgba(8,8,12,0.85) 70%, #0a0a0e 100%), url('{{ \App\Models\Setting::get('hero_bg_image', 'https://images.unsplash.com/photo-1614162692292-7ac56d7f7f1e?auto=format&fit=crop&w=1920&q=80') }}') center/cover no-repeat; padding: 30px; display:flex; flex-direction:column; justify-content:center; color:#FFF;">

                        <!-- Eyebrow Tag -->
                        <div
                            style="display:inline-flex; align-items:center; gap:8px; padding:6px 14px; background:rgba(225,6,0,0.15); border:1px solid rgba(225,6,0,0.4); border-radius:30px; width:fit-content; margin-bottom:16px; font-size:0.7rem; font-weight:800; letter-spacing:1px; color:#FF4D4D;">
                            <span style="width:6px; height:6px; background:#FF4D4D; border-radius:50%;"></span>
                            {{ \App\Models\Setting::get('hero_eyebrow', 'BEVERLY HILLS • GLOBAL DELIVERY') }}
                        </div>

                        <!-- Heading -->
                        <h3
                            style="font-family:'Montserrat', sans-serif; font-size:1.4rem; font-weight:800; line-height:1.25; margin-bottom:12px; background:linear-gradient(135deg, #FFF 0%, #E2E8F0 60%, #94A3B8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;">
                            {{ \App\Models\Setting::get('hero_heading', 'REDISCOVER DRIVING PERFECTION.') }}
                        </h3>

                        <!-- Subtitle -->
                        <p style="font-size:0.78rem; color:#CBD5E1; line-height:1.5; margin-bottom:20px; max-width:90%;">
                            {{ \App\Models\Setting::get('hero_subtitle', 'Curated gallery of certified pre-owned supercars, luxury SUVs, and bespoke electric performance vehicles.') }}
                        </p>

                        <!-- CTA Buttons Preview -->
                        <div style="display:flex; gap:10px; flex-wrap:wrap;">
                            <span class="btn btn-luxury-red btn-sm" style="font-size:0.75rem;">
                                {{ \App\Models\Setting::get('hero_btn1', 'Explore Inventory') }} &rarr;
                            </span>
                            <span class="btn btn-outline-light btn-sm"
                                style="font-size:0.75rem; background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.3);">
                                {{ \App\Models\Setting::get('hero_btn2', 'Book Private Appointment') }}
                            </span>
                        </div>

                        <!-- Feature Pills Preview -->
                        <div
                            style="display:flex; gap:12px; margin-top:24px; border-top:1px solid rgba(255,255,255,0.12); padding-top:14px; font-size:0.68rem; color:#94A3B8;">
                            <div><i class="bi bi-shield-check text-danger me-1"></i> 300-Pt Inspection</div>
                            <div><i class="bi bi-truck text-danger me-1"></i> Enclosed Delivery</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Showroom Gallery Selection Modal -->
    <div class="modal fade" id="showroomGalleryModal" tabindex="-1" aria-labelledby="showroomGalleryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content" style="border-radius: 16px;">
                <div class="modal-header border-bottom">
                    <h5 class="modal-title fw-bold" id="showroomGalleryModalLabel">
                        <i class="bi bi-images text-danger me-2"></i> Select Image from Showroom Gallery
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4" style="max-height: 480px; overflow-y: auto;">
                    @if(isset($galleries) && $galleries->count() > 0)
                        <div class="row g-3">
                            @foreach($galleries as $galleryItem)
                                <div class="col-md-3 col-6">
                                    <div class="gallery-select-card card h-100 overflow-hidden cursor-pointer border"
                                         style="border-radius: 12px; transition: all 0.2s;"
                                         onclick="selectGalleryImage('{{ $galleryItem->image }}')">
                                        <img src="{{ $galleryItem->image }}" class="card-img-top" alt="{{ $galleryItem->title }}" style="height: 110px; object-fit: cover;">
                                        <div class="card-body p-2 text-center bg-light">
                                            <div class="fw-bold small text-truncate" style="font-size: 0.78rem;">{{ $galleryItem->title }}</div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-4 text-muted">
                            <i class="bi bi-image fs-1 d-block mb-2"></i>
                            <p>No showroom gallery images found. You can upload an image directly from your device gallery using the upload button.</p>
                        </div>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Client-side Interactive Preview Scripts -->
    <script>
        function handleHeroFileUpload(input) {
            if (input.files && input.files[0]) {
                const file = input.files[0];
                const reader = new FileReader();
                reader.onload = function(e) {
                    const imgData = e.target.result;
                    // Update Thumbnail Preview
                    document.getElementById('currentHeroPreview').src = imgData;
                    
                    // Update Right side Live Homepage Hero Preview Card
                    const previewCard = document.getElementById('liveHeroPreviewCard');
                    if (previewCard) {
                        previewCard.style.backgroundImage = `linear-gradient(180deg, rgba(8,8,12,0.4) 0%, rgba(8,8,12,0.85) 70%, #0a0a0e 100%), url('${imgData}')`;
                    }

                    // Show badge feedback
                    const badge = document.getElementById('fileSelectionBadge');
                    document.getElementById('fileNameText').textContent = 'Device photo selected: ' + file.name;
                    badge.classList.remove('d-none');
                };
                reader.readAsDataURL(file);
            }
        }

        function selectGalleryImage(imageUrl) {
            // Set hidden input value
            document.getElementById('heroBgImageInput').value = imageUrl;
            
            // Clear file input so hidden URL is used on form submit
            document.getElementById('heroBgFileInput').value = '';

            // Update Thumbnail Preview
            document.getElementById('currentHeroPreview').src = imageUrl;

            // Update Right side Live Homepage Hero Preview Card
            const previewCard = document.getElementById('liveHeroPreviewCard');
            if (previewCard) {
                previewCard.style.backgroundImage = `linear-gradient(180deg, rgba(8,8,12,0.4) 0%, rgba(8,8,12,0.85) 70%, #0a0a0e 100%), url('${imageUrl}')`;
            }

            // Show badge feedback
            const badge = document.getElementById('fileSelectionBadge');
            document.getElementById('fileNameText').textContent = 'Selected from Showroom Gallery';
            badge.classList.remove('d-none');

            // Close Modal
            const modalEl = document.getElementById('showroomGalleryModal');
            const modal = bootstrap.Modal.getInstance(modalEl);
            if (modal) {
                modal.hide();
            }
        }
    </script>
@endsection