@php
    $isPersonal = get_demo_type() === 'personal';
    $isHospitality = get_demo_type() === 'hospitality';
    $isCorporate = get_demo_type() === 'corporate';
    $aboutLabel = $isHospitality ? 'Our Story' : ($isCorporate ? 'About' : config('site.about.page_title', $isPersonal ? 'Sobre Mí' : 'Empresa'));
@endphp
<x-base-layout>
    <x-admin-header module="site-data" />

    <div id="kt_content_container" class="container-xxl">
        <div class="card shadow-sm">
            <div class="card-header border-0 pt-6 pb-0">
                <div class="d-flex justify-content-between align-items-start w-100">
                    <div>
                        <h2 class="card-title fw-bold text-gray-800 mb-1">{{ $isHospitality ? 'Site Settings' : 'Datos del sitio' }}</h2>
                        <p class="text-gray-600 fs-6 mb-0">{{ $isHospitality ? 'Brand info, page content, contact details and logos. Changes will be reflected on your website.' : 'Información básica, contacto, redes sociales y logos. Los cambios se verán en tu sitio web.' }}</p>
                    </div>
                    <form action="{{ route('site-data.clear-cache') }}" method="POST" class="ms-3">
                        @csrf
                        <button type="submit" class="btn btn-sm btn-light-warning" title="Si los cambios no se reflejan, limpiá el cache">
                            <i class="ki-duotone ki-arrows-circle fs-4 me-1"><span class="path1"></span><span class="path2"></span></i>
                            Limpiar cache
                        </button>
                    </form>
                </div>
            </div>

            <div class="card-body pt-4">
                @if(session('success'))
                    <div class="alert alert-success d-flex align-items-center p-4 mb-6">
                        <i class="ki-duotone ki-shield-tick fs-2hx text-success me-3"><span class="path1"></span><span class="path2"></span></i>
                        <span>{{ session('success') }}</span>
                    </div>
                @endif
                @if(session('error'))
                    <div class="alert alert-danger d-flex align-items-center p-4 mb-6">
                        <i class="ki-duotone ki-information-5 fs-2hx text-danger me-3"><span class="path1"></span><span class="path2"></span></i>
                        <span>{{ session('error') }}</span>
                    </div>
                @endif
                @if($errors->any())
                    <div class="alert alert-danger p-4 mb-6">
                        <ul class="mb-0 ps-3">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                {{-- Tab navigation — Labels se adaptan al tipo de producto --}}
                {{-- Variables $isPersonal, $isHospitality, $aboutLabel defined at top of file --}}
                <ul class="nav nav-tabs nav-line-tabs nav-line-tabs-2x mb-6 fs-6" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {{ in_array(old('section', $activeTab ?? 'general'), ['general', 'appearance', 'logos']) ? 'active' : '' }}"
                           data-bs-toggle="tab" href="#tab_general" role="tab">
                            <i class="ki-duotone ki-abstract-26 fs-4 me-2"><span class="path1"></span><span class="path2"></span></i>
                            {{ $isHospitality ? 'Brand' : ($isPersonal ? 'Mi Marca' : 'La Marca') }}
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {{ old('section', $activeTab ?? 'general') === 'welcome' ? 'active' : '' }}"
                           data-bs-toggle="tab" href="#tab_welcome" role="tab">
                            <i class="ki-duotone ki-home-2 fs-4 me-2"><span class="path1"></span><span class="path2"></span></i>
                            {{ $isHospitality ? 'Home Page' : 'Inicio' }}
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {{ old('section', $activeTab ?? 'general') === 'about' ? 'active' : '' }}"
                           data-bs-toggle="tab" href="#tab_about" role="tab">
                            <i class="ki-duotone ki-profile-user fs-4 me-2"><span class="path1"></span><span class="path2"></span></i>
                            {{ $aboutLabel }}
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {{ in_array(old('section', $activeTab ?? 'general'), ['contact', 'social']) ? 'active' : '' }}"
                           data-bs-toggle="tab" href="#tab_contact" role="tab">
                            <i class="ki-duotone ki-phone fs-4 me-2"><span class="path1"></span><span class="path2"></span></i>
                            {{ $isHospitality ? 'Contact' : 'Contacto' }}
                        </a>
                    </li>
                </ul>

                {{-- Tab content --}}
                <div class="tab-content">

                    {{-- Tab: Mi Marca (identidad + logos + apariencia) --}}
                    <div class="tab-pane fade {{ in_array(old('section', $activeTab ?? 'general'), ['general', 'appearance', 'logos']) ? 'show active' : '' }}" id="tab_general" role="tabpanel">

                        {{-- Form 1: Identidad --}}
                        <h4 class="fw-bold text-gray-800 mb-4">Identidad</h4>
                        <form action="{{ route('site-data.update') }}" method="POST" class="form">
                            @csrf
                            <input type="hidden" name="section" value="general" />

                            <div class="row g-4 mb-6">
                                <div class="col-12 col-md-6">
                                    <label class="form-label">Nombre del sitio</label>
                                    <input type="text" name="name" class="form-control form-control-solid" value="{{ old('name', $siteData['name'] ?? '') }}" placeholder="Tu marca o nombre" />
                                    <span class="form-text">Aparece en el header, footer, SEO y redes.</span>
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Tagline</label>
                                    <input type="text" name="tagline" class="form-control form-control-solid" placeholder="Ej: Food that fits anywhere"
                                           value="{{ old('tagline', $siteData['tagline'] ?? '') }}" />
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Descripción</label>
                                    <textarea name="description" class="form-control form-control-solid" rows="3" placeholder="Breve descripción del negocio o sitio">{{ old('description', $siteData['description'] ?? '') }}</textarea>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end gap-2 pt-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ki-duotone ki-check fs-4 me-2"><span class="path1"></span><span class="path2"></span></i>
                                    Guardar información básica
                                </button>
                            </div>
                        </form>

                        <div class="separator separator-dashed my-8"></div>

                        {{-- Form 2: Logos --}}
                        <h4 class="fw-bold text-gray-800 mb-4">Logos</h4>
                        <form action="{{ route('site-data.update') }}" method="POST" enctype="multipart/form-data" class="form">
                            @csrf
                            <input type="hidden" name="section" value="logos" />

                            <p class="text-gray-600 fs-7 mb-4">Sube una imagen para reemplazar. Se guarda en la nube y se usa en todo el sitio.</p>

                            @php
                                $logos = [
                                    'main_logo' => ['label' => 'Logo principal', 'name' => 'assets_main_logo_file', 'current' => $siteData['assets']['main_logo'] ?? ''],
                                    'main_logo_sticky' => ['label' => 'Logo alternativo', 'name' => 'assets_main_logo_sticky_file', 'current' => $siteData['assets']['main_logo_sticky'] ?? $siteData['assets']['main_logo'] ?? ''],
                                    'loader_logo' => ['label' => 'Loader logo (logo-2)', 'name' => 'assets_loader_logo_file', 'current' => $siteData['assets']['loader_logo'] ?? ''],
                                    'footer_logo' => ['label' => 'Logo secundario (pie de página)', 'name' => 'assets_footer_logo_file', 'current' => $siteData['assets']['footer_logo'] ?? ''],
                                ];
                            @endphp
                            @foreach($logos as $assetKey => $config)
                                <div class="mb-6">
                                    <label class="form-label">{{ $config['label'] }}</label>
                                    <input type="hidden" name="assets[{{ $assetKey }}]" value="{{ old("assets.$assetKey", $config['current']) }}" />
                                    <div class="d-flex flex-column flex-sm-row align-items-start gap-3">
                                        @if(!empty($config['current']))
                                            <div class="flex-shrink-0 border rounded p-2 bg-white">
                                                <img src="{{ $config['current'] }}" alt="{{ $config['label'] }}" class="img-fluid" style="max-height: 80px; max-width: 200px; object-fit: contain;" onerror="this.parentElement.style.display='none'" />
                                            </div>
                                        @endif
                                        <div class="flex-grow-1">
                                            <input type="file" name="{{ $config['name'] }}" class="form-control form-control-solid" accept="image/*" />
                                            <div class="form-text">PNG, JPG o WebP. Máx. 5 MB</div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                            <div class="d-flex justify-content-end gap-2 pt-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ki-duotone ki-check fs-4 me-2"><span class="path1"></span><span class="path2"></span></i>
                                    Guardar logos
                                </button>
                            </div>
                        </form>

                        <div class="separator separator-dashed my-8"></div>

                        {{-- Form 3: Apariencia --}}
                        <h4 class="fw-bold text-gray-800 mb-4">Apariencia</h4>
                        <form action="{{ route('site-data.update') }}" method="POST" enctype="multipart/form-data" class="form">
                            @csrf
                            <input type="hidden" name="section" value="appearance" />

                            <div class="mb-8">
                                <h4 class="fw-bold text-gray-800 mb-1">Colores de marca</h4>
                                <p class="text-gray-600 fs-7 mb-4">Elegí los colores principales de tu sitio. Se aplican al instante.</p>
                                <div class="row g-4 mb-6">
                                    <div class="col-6 col-md-4 col-lg-2">
                                        <label class="form-label">Primary</label>
                                        <input type="color" name="primary_color" class="form-control form-control-solid p-1" style="height: 50px;" value="{{ old('primary_color', $siteData['_colors']['primary'] ?? '#0088CC') }}" />
                                        <span class="form-text">Botones, links, acentos</span>
                                    </div>
                                    <div class="col-6 col-md-4 col-lg-2">
                                        <label class="form-label">Secondary</label>
                                        <input type="color" name="secondary_color" class="form-control form-control-solid p-1" style="height: 50px;" value="{{ old('secondary_color', $siteData['_colors']['secondary'] ?? '#E36159') }}" />
                                        <span class="form-text">Fondos, contraste</span>
                                    </div>
                                    <div class="col-6 col-md-4 col-lg-2">
                                        <label class="form-label">Tertiary</label>
                                        <input type="color" name="tertiary_color" class="form-control form-control-solid p-1" style="height: 50px;" value="{{ old('tertiary_color', $siteData['_colors']['tertiary'] ?? '#FFFFFF') }}" />
                                        <span class="form-text">Backgrounds suaves</span>
                                    </div>
                                    <div class="col-6 col-md-4 col-lg-2">
                                        <label class="form-label">Quaternary</label>
                                        <input type="color" name="quaternary_color" class="form-control form-control-solid p-1" style="height: 50px;" value="{{ old('quaternary_color', $siteData['_colors']['quaternary'] ?? '#383F48') }}" />
                                        <span class="form-text">Detalles</span>
                                    </div>
                                    <div class="col-6 col-md-4 col-lg-2">
                                        <label class="form-label">Dark</label>
                                        <input type="color" name="dark_color" class="form-control form-control-solid p-1" style="height: 50px;" value="{{ old('dark_color', $siteData['_colors']['dark'] ?? '#212529') }}" />
                                        <span class="form-text">Textos oscuros</span>
                                    </div>
                                    <div class="col-6 col-md-4 col-lg-2">
                                        <label class="form-label">Light</label>
                                        <input type="color" name="light_color" class="form-control form-control-solid p-1" style="height: 50px;" value="{{ old('light_color', $siteData['_colors']['light'] ?? '#FFFFFF') }}" />
                                        <span class="form-text">Fondos claros</span>
                                    </div>
                                </div>
                            </div>

                            <div class="separator separator-dashed my-6"></div>

                            <div class="mb-8">
                                <h4 class="fw-bold text-gray-800 mb-1">Tipografía</h4>
                                <p class="text-gray-600 fs-7 mb-4">Elegí las fuentes tipográficas de tu sitio (Google Fonts).</p>
                                <div class="row g-4 mb-6">
                                    @php
                                        $fontOptions = ['Lexend', 'Inter', 'Poppins', 'Montserrat', 'Lato', 'Open Sans', 'Roboto', 'Playfair Display', 'Nunito Sans', 'Raleway', 'Work Sans', 'DM Sans', 'Source Sans Pro', 'Merriweather', 'Outfit', 'Plus Jakarta Sans', 'Josefin Sans', 'Cormorant Garamond', 'Space Grotesk', 'Oswald', 'Archivo', 'Barlow', 'Bitter', 'Cabin', 'Manrope'];
                                        $currentFonts = $siteData['_theme']['fonts'] ?? [];
                                        // Ensure current fonts appear in options even if not in the default list
                                        foreach (['primary', 'secondary', 'tertiary'] as $fk) {
                                            $cv = $currentFonts[$fk] ?? null;
                                            if ($cv && !in_array($cv, $fontOptions)) {
                                                $fontOptions[] = $cv;
                                            }
                                        }
                                        sort($fontOptions);
                                    @endphp
                                    <div class="col-12 col-md-4">
                                        <label class="form-label">Títulos (Primary)</label>
                                        <select name="font_primary" class="form-select form-select-solid">
                                            @foreach($fontOptions as $font)
                                                <option value="{{ $font }}" {{ ($currentFonts['primary'] ?? 'Lexend') === $font ? 'selected' : '' }}>{{ $font }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label class="form-label">Subtítulos (Secondary)</label>
                                        <select name="font_secondary" class="form-select form-select-solid">
                                            @foreach($fontOptions as $font)
                                                <option value="{{ $font }}" {{ ($currentFonts['secondary'] ?? 'Lexend') === $font ? 'selected' : '' }}>{{ $font }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label class="form-label">Cuerpo de texto (Tertiary)</label>
                                        <select name="font_tertiary" class="form-select form-select-solid">
                                            @foreach($fontOptions as $font)
                                                <option value="{{ $font }}" {{ ($currentFonts['tertiary'] ?? 'Open Sans') === $font ? 'selected' : '' }}>{{ $font }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="separator separator-dashed my-6"></div>

                            <div class="mb-8">
                                <h4 class="fw-bold text-gray-800 mb-1">Imagen Hero</h4>
                                <p class="text-gray-600 fs-7 mb-4">La imagen de fondo principal de tu página de inicio.</p>
                                <div class="row g-4">
                                    <div class="col-12 col-md-6">
                                        @if(!empty($siteData['assets']['welcome_hero_image']))
                                            <div class="mb-3">
                                                <img src="{{ $siteData['assets']['welcome_hero_image'] }}" class="img-fluid rounded" style="max-height: 150px;" alt="Hero actual" />
                                                <span class="d-block form-text mt-1">Imagen actual</span>
                                            </div>
                                        @endif
                                        <input type="file" name="hero_image_file" class="form-control form-control-solid" accept="image/*" />
                                        <span class="form-text">{{ $isHospitality ? '1920 x 1080 px — full-width hero background. Max 10MB.' : 'JPG o PNG, máximo 10MB. Recomendado: 1920 x 1080 px.' }}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end gap-2 pt-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ki-duotone ki-check fs-4 me-2"><span class="path1"></span><span class="path2"></span></i>
                                    Guardar apariencia
                                </button>
                            </div>
                        </form>

                    </div>

                    {{-- Tab: Contacto (datos de contacto + redes sociales) --}}
                    <div class="tab-pane fade {{ in_array(old('section', $activeTab ?? 'general'), ['contact', 'social']) ? 'show active' : '' }}" id="tab_contact" role="tabpanel">

                        {{-- Form 1: Datos de contacto --}}
                        <form action="{{ route('site-data.update') }}" method="POST" enctype="multipart/form-data" class="form">
                            @csrf
                            <input type="hidden" name="section" value="contact" />

                            @include('admin.site-data.contact._common')

                            {{-- Demo-specific contact fields --}}
                            @includeFirst([
                                'admin.site-data.contact.' . get_theme_demo(),
                                'admin.site-data.contact._default'
                            ])

                            <div class="d-flex justify-content-end gap-2 pt-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ki-duotone ki-check fs-4 me-2"><span class="path1"></span><span class="path2"></span></i>
                                    {{ $isHospitality ? 'Save contact page' : 'Guardar contacto' }}
                                </button>
                            </div>
                        </form>

                        <div class="separator separator-dashed my-8"></div>

                        {{-- Form 2: Redes sociales --}}
                        <h4 class="fw-bold text-gray-800 mb-4">Redes sociales</h4>
                        <form action="{{ route('site-data.update') }}" method="POST" class="form">
                            @csrf
                            <input type="hidden" name="section" value="social" />

                            <p class="text-gray-600 fs-7 mb-4">Activa las que uses y pega la URL de tu perfil. Así los visitantes podrán enlazar correctamente.</p>
                            @php
                                $socialNetworks = [
                                    'instagram' => 'Instagram',
                                    'facebook'  => 'Facebook',
                                    'tripadvisor' => 'Tripadvisor',
                                    'linkedin'  => 'LinkedIn',
                                    'youtube'   => 'YouTube',
                                    'whatsapp'  => 'WhatsApp',
                                ];
                            @endphp
                            @foreach($socialNetworks as $key => $label)
                                <div class="d-flex flex-column flex-md-row align-items-md-center gap-2 gap-md-3 mb-4 p-3 bg-light rounded">
                                    <div class="form-check form-switch form-check-custom form-check-solid flex-shrink-0">
                                        <input type="hidden" name="social_media[{{ $key }}][active]" value="0" />
                                        <input class="form-check-input" type="checkbox" name="social_media[{{ $key }}][active]" value="1"
                                               {{ old("social_media.$key.active", $siteData['social_media'][$key]['active'] ?? false) ? 'checked' : '' }} />
                                        <label class="form-check-label fw-semibold text-gray-700">{{ $label }}</label>
                                    </div>
                                    <input type="text" name="social_media[{{ $key }}][url]" class="form-control form-control-solid flex-grow-1"
                                           placeholder="https://... (opcional si está desactivado)" value="{{ old("social_media.$key.url", $siteData['social_media'][$key]['url'] ?? '') }}" />
                                </div>
                            @endforeach

                            <div class="d-flex justify-content-end gap-2 pt-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ki-duotone ki-check fs-4 me-2"><span class="path1"></span><span class="path2"></span></i>
                                    Guardar redes sociales
                                </button>
                            </div>
                        </form>

                    </div>

                    {{-- ═══════════════════════════════════════════════ --}}
                    {{-- Tab: Página de inicio (adaptado al demo activo) --}}
                    {{-- ═══════════════════════════════════════════════ --}}
                    <div class="tab-pane fade {{ old('section', $activeTab ?? 'general') === 'welcome' ? 'show active' : '' }}" id="tab_welcome" role="tabpanel">
                        <form action="{{ route('site-data.update') }}" method="POST" enctype="multipart/form-data" class="form">
                            @csrf
                            <input type="hidden" name="section" value="welcome" />

                            @include('admin.site-data.welcome._common')

                            {{-- Demo-specific welcome fields --}}
                            @includeFirst([
                                'admin.site-data.welcome.' . get_theme_demo(),
                                'admin.site-data.welcome._default'
                            ])

                            <div class="separator separator-dashed my-6"></div>

                            {{-- CTA del Header — común a todos los demos --}}
                            <div class="mb-8">
                                <h4 class="fw-bold text-gray-800 mb-1">Botón CTA del Header</h4>
                                <p class="text-gray-600 fs-7 mb-4">El botón de acción que aparece en la barra de navegación.</p>
                                <div class="row g-4 mb-6">
                                    <div class="col-12 col-md-2">
                                        <label class="form-label">Activo</label>
                                        <div class="form-check form-switch form-check-custom form-check-solid mt-2">
                                            <input type="hidden" name="cta_active" value="0" />
                                            <input class="form-check-input" type="checkbox" name="cta_active" value="1"
                                                   {{ old('cta_active', $siteData['header']['cta_button']['active'] ?? false) ? 'checked' : '' }} />
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-5">
                                        <label class="form-label">Texto del botón</label>
                                        <input type="text" name="cta_title" class="form-control form-control-solid" value="{{ old('cta_title', $siteData['header']['cta_button']['title'] ?? '') }}" placeholder="Solicitar información" />
                                    </div>
                                    <div class="col-12 col-md-5">
                                        <label class="form-label">URL destino</label>
                                        <input type="text" name="cta_url" class="form-control form-control-solid" value="{{ old('cta_url', $siteData['header']['cta_button']['url'] ?? '/contact') }}" placeholder="/contact" />
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end gap-2 pt-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ki-duotone ki-check fs-4 me-2"><span class="path1"></span><span class="path2"></span></i>
                                    Guardar página de inicio
                                </button>
                            </div>
                        </form>

                        {{-- Links a Banner y Logos — fuera del form --}}
                        <div class="separator separator-dashed my-6"></div>
                        @if(demo_has_feature('carousel'))
                        <div class="d-flex align-items-center p-4 mb-4 rounded" style="background: var(--bs-light);">
                            <i class="ki-duotone ki-picture fs-2hx text-primary me-4"><span class="path1"></span><span class="path2"></span></i>
                            <div class="flex-grow-1">
                                <span class="fw-bold text-gray-800">Banner Principal</span>
                                <span class="d-block text-gray-600 fs-7">Gestioná las imágenes del carousel de la homepage.</span>
                            </div>
                            <a href="{{ url('welcomecarousel') }}" class="btn btn-sm btn-light-primary">Editar banner</a>
                        </div>
                        @endif
                        <div class="d-flex align-items-center p-4 mb-4 rounded" style="background: var(--bs-light);">
                            <i class="ki-duotone ki-abstract-26 fs-2hx text-primary me-4"><span class="path1"></span><span class="path2"></span></i>
                            <div class="flex-grow-1">
                                <span class="fw-bold text-gray-800">Logos de Clientes</span>
                                <span class="d-block text-gray-600 fs-7">Logos de marcas o clientes que aparecen en la homepage.</span>
                            </div>
                            <a href="{{ url('admin/company-logos') }}" class="btn btn-sm btn-light-primary">Editar logos</a>
                        </div>
                    </div>

                    {{-- ═══════════════════════════════════════════════ --}}
                    {{-- Tab: Página Nosotros (adaptado al demo activo) --}}
                    {{-- ═══════════════════════════════════════════════ --}}
                    <div class="tab-pane fade {{ old('section', $activeTab ?? 'general') === 'about' ? 'show active' : '' }}" id="tab_about" role="tabpanel">
                        <form action="{{ route('site-data.update') }}" method="POST" enctype="multipart/form-data" class="form">
                            @csrf
                            <input type="hidden" name="section" value="about" />

                            @include('admin.site-data.about._common')

                            {{-- Demo-specific about fields --}}
                            @includeFirst([
                                'admin.site-data.about.' . get_theme_demo(),
                                'admin.site-data.about._default'
                            ])

                            <div class="d-flex justify-content-end gap-2 pt-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ki-duotone ki-check fs-4 me-2"><span class="path1"></span><span class="path2"></span></i>
                                    {{ $isHospitality ? 'Save Our Story page' : 'Guardar página Nosotros' }}
                                </button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</x-base-layout>