@extends('voyager::master')

@section('page_title', 'Header & Footer Settings')

@section('css')
<style>
    .hf-wrapper {
        margin-top: 15px;
        margin-bottom: 90px;
    }
    .panel-hf-section {
        border-radius: 8px;
        margin-bottom: 20px !important;
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 4px rgba(0,0,0,0.03);
        background: #fff;
        overflow: hidden;
        transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .panel-hf-section:hover {
        border-color: #cbd5e1;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .panel-hf-section > .panel-heading {
        background: #fcfdfd;
        padding: 18px 24px;
        border-bottom: 1px solid #f1f5f9;
        cursor: pointer;
        user-select: none;
        transition: background 0.15s ease;
    }
    .panel-hf-section > .panel-heading:hover {
        background: #f8fafc;
    }
    .panel-hf-section.is-active > .panel-heading {
        background: #f0f7ff;
        border-bottom-color: #dbeafe;
    }
    .panel-hf-section .panel-title {
        font-size: 16px;
        font-weight: 600;
        color: #1e293b;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
    }
    .panel-hf-section .section-header-left {
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .panel-hf-section .section-badge-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: #e2e8f0;
        color: #475569;
        font-size: 15px;
    }
    .panel-hf-section.is-active .section-badge-icon {
        background: #2563eb;
        color: #ffffff;
    }
    .panel-hf-section .section-title-text {
        font-size: 16px;
        font-weight: 600;
        color: #0f172a;
    }
    .panel-hf-section .section-subtitle {
        font-size: 12px;
        font-weight: 400;
        color: #64748b;
        margin-top: 2px;
    }
    .panel-hf-section .section-chevron {
        font-size: 18px;
        color: #94a3b8;
        transition: transform 0.2s ease;
    }
    .panel-hf-section.is-active .section-chevron {
        transform: rotate(180deg);
        color: #2563eb;
    }
    .panel-hf-section .panel-body {
        padding: 24px;
        background: #ffffff;
    }

    /* Sub-containers & groups */
    .form-section-card {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .form-section-card-title {
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
        margin-top: 0;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 10px;
    }
    .form-group label {
        font-size: 12px;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
    }
    .form-control {
        border-radius: 6px;
        border: 1px solid #cbd5e1;
        box-shadow: none;
        font-size: 14px;
        color: #1e293b;
        padding: 8px 12px;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .form-control:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
    }
    .help-text {
        font-size: 12px;
        color: #64748b;
        margin-top: 4px;
        display: block;
    }
    .badge-recommend {
        display: inline-block;
        background: #e0f2fe;
        color: #0369a1;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 4px;
        margin-top: 4px;
    }

    /* Color picker input group */
    .color-input-group {
        display: flex;
        align-items: center;
    }
    .color-input-group .color-preview-addon {
        width: 40px;
        height: 38px;
        padding: 2px;
        border: 1px solid #cbd5e1;
        border-right: none;
        border-radius: 6px 0 0 6px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .color-input-group .color-picker-input {
        width: 100%;
        height: 100%;
        border: none;
        padding: 0;
        cursor: pointer;
        background: none;
        border-radius: 4px;
    }
    .color-input-group .form-control {
        border-radius: 0 6px 6px 0;
    }

    /* Preview box */
    .preview-box {
        border: 1px dashed #cbd5e1;
        background: #f8fafc;
        border-radius: 6px;
        padding: 12px;
        text-align: center;
        margin-top: 8px;
        min-height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .preview-box img {
        max-width: 100%;
        max-height: 120px;
        object-fit: contain;
    }
    .preview-box.dark-bg {
        background: #09383a;
    }

    /* Quick Jump Cards to Menu Builder */
    .menu-link-card {
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 8px;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }
    .menu-link-card .menu-link-title {
        font-weight: 600;
        color: #1e40af;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .menu-link-card .btn-menu-jump {
        font-size: 12px;
        font-weight: 600;
        padding: 5px 12px;
        border-radius: 6px;
        background: #2563eb;
        color: #fff;
        text-decoration: none;
    }
    .menu-link-card .btn-menu-jump:hover {
        background: #1d4ed8;
        color: #fff;
    }

    /* Sticky Save Bar */
    .sticky-save-bar {
        position: fixed;
        bottom: 0;
        left: 260px;
        right: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        padding: 14px 30px;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
        border-top: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1000;
        transition: left 0.3s ease;
    }
    body.expanded .sticky-save-bar {
        left: 60px;
    }
    @media (max-width: 768px) {
        .sticky-save-bar {
            left: 0;
        }
    }
</style>
@stop

@section('content')
<div class="page-content container-fluid">
    <div class="row">
        <div class="col-md-12">

            <!-- Header Section -->
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
                <div>
                    <h1 class="page-title" style="margin: 0 0 6px 0; font-size: 24px; font-weight: 700; color: #0f172a;">
                        <i class="voyager-browser" style="color: #2563eb; margin-right: 8px;"></i> Header & Footer Manager
                    </h1>
                    <p class="text-muted" style="margin: 0; font-size: 13px;">
                        Configure header branding, sticky navigation, typography, colors, footer layout, CTA buttons, and newsletter styling.
                    </p>
                </div>
                <div>
                    <a href="{{ route('voyager.menus.index') }}" class="btn btn-default" style="font-weight: 600;">
                        <i class="voyager-list"></i> Voyager Menu Builder
                    </a>
                </div>
            </div>

            @include('voyager::alerts')

            <form action="{{ route('voyager.header_footer.update') }}" method="POST" enctype="multipart/form-data" id="headerFooterForm">
                @csrf
                @method('PUT')
                <input type="hidden" name="active_section" id="active_section_input" value="{{ $activeSection }}">

                <div class="hf-wrapper">

                    <!-- ========================================== -->
                    <!-- 1. HEADER SETTINGS -->
                    <!-- ========================================== -->
                    <div class="panel panel-hf-section {{ $activeSection === 'header' ? 'is-active' : '' }}" id="section-header">
                        <div class="panel-heading" onclick="toggleSection('header')">
                            <div class="panel-title">
                                <div class="section-header-left">
                                    <div class="section-badge-icon"><i class="voyager-window-list"></i></div>
                                    <div>
                                        <div class="section-title-text">Header & Navigation Bar</div>
                                        <div class="section-subtitle">Logo, Sticky Navbar, Font Typography, Menu Colors, and Hover/Active Effects</div>
                                    </div>
                                </div>
                                <i class="voyager-angle-down section-chevron"></i>
                            </div>
                        </div>

                        <div class="panel-body" style="{{ $activeSection === 'header' ? '' : 'display: none;' }}">

                            <!-- Quick Jump to Header Menu -->
                            @php
                                $headerMenu = \TCG\Voyager\Models\Menu::where('name', 'header-menu')->first();
                                $headerMenuUrl = $headerMenu ? route('voyager.menus.builder', $headerMenu->id) : route('voyager.menus.index');
                            @endphp
                            <div class="menu-link-card">
                                <div class="menu-link-title">
                                    <i class="voyager-list" style="font-size: 16px;"></i>
                                    <span>Navigation Links: Header menu items are managed in the <strong>Menu Builder</strong>.</span>
                                </div>
                                <a href="{{ $headerMenuUrl }}" target="_blank" class="btn-menu-jump">
                                    <i class="voyager-edit"></i> Edit Header Menu Items &rarr;
                                </a>
                            </div>

                            <div class="row">
                                <!-- Col 1: Logo & General -->
                                <div class="col-md-6">
                                    <div class="form-section-card">
                                        <div class="form-section-card-title">
                                            <i class="voyager-photo"></i> Logo & Branding
                                        </div>

                                        <div class="form-group">
                                            <label>Header Logo Image</label>
                                            <input type="file" name="header_logo_file" class="form-control" accept="image/*" onchange="previewImage(this, 'preview_header_logo')">
                                            <div class="badge-recommend">
                                                <i class="voyager-info-large"></i> Recommended: <strong>300 &times; 80 px</strong> (PNG or SVG with transparent background)
                                            </div>
                                            <span class="help-text">Leave blank to keep the current logo, or upload a new one to replace it.</span>

                                            @php
                                                $headerLogo = $contents['header_logo']->value ?? '';
                                                $defaultLogo = asset('storage/website/logo.jpg');
                                                $headerLogoUrl = !empty($headerLogo) ? asset($headerLogo) : $defaultLogo;
                                            @endphp
                                            <div class="preview-box" id="preview_header_logo_box" style="margin-top: 10px; background: #ffffff; padding: 16px; border: 1px dashed #cbd5e1;">
                                                <img src="{{ $headerLogoUrl }}" id="preview_header_logo" alt="Header Logo Preview" onerror="this.onerror=null;this.src='{{ $defaultLogo }}';" style="max-height: 70px; width: auto; object-fit: contain;">
                                            </div>
                                            @if(!empty($headerLogo) && $headerLogo !== 'storage/website/logo.jpg')
                                                <div style="margin-top: 6px;">
                                                    <label style="font-size: 12px; font-weight: normal; cursor: pointer; text-transform: none; color: #ef4444;">
                                                        <input type="checkbox" name="remove_header_logo" value="1">
                                                        Reset to default logo
                                                    </label>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Logo Alt Text</label>
                                                    <input type="text" name="values[header_logo_alt]" class="form-control" value="{{ $contents['header_logo_alt']->value ?? 'Farmers for Forests' }}">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Logo Display Width</label>
                                                    <input type="text" name="values[header_logo_width]" class="form-control" value="{{ $contents['header_logo_width']->value ?? '150px' }}" placeholder="e.g. 150px">
                                                    <span class="help-text">CSS width, e.g. 150px or 170px</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group" style="margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e2e8f0;">
                                            <label style="margin-bottom: 8px;">Sticky Header</label>
                                            <div class="checkbox" style="margin: 0;">
                                                <label style="font-size: 13px; font-weight: 600; text-transform: none; color: #1e293b;">
                                                    <input type="checkbox" name="values[header_sticky]" value="1" {{ ($contents['header_sticky']->value ?? '1') == '1' ? 'checked' : '' }}>
                                                    Enable sticky navbar fixed to top when scrolling
                                                </label>
                                            </div>
                                            <span class="help-text">When enabled, navbar stays fixed at top of screen with smooth background transition on scroll.</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- Col 2: Typography & Menu Styles -->
                                <div class="col-md-6">
                                    <div class="form-section-card">
                                        <div class="form-section-card-title">
                                            <i class="voyager-params"></i> Menu Typography & Appearance
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Menu Font Family</label>
                                                    <select name="values[header_font_family]" class="form-control">
                                                        @php $fontFam = $contents['header_font_family']->value ?? 'Inter'; @endphp
                                                        <option value="Inter" {{ $fontFam == 'Inter' ? 'selected' : '' }}>Inter (Default)</option>
                                                        <option value="Montserrat" {{ $fontFam == 'Montserrat' ? 'selected' : '' }}>Montserrat</option>
                                                        <option value="Roboto" {{ $fontFam == 'Roboto' ? 'selected' : '' }}>Roboto</option>
                                                        <option value="Open Sans" {{ $fontFam == 'Open Sans' ? 'selected' : '' }}>Open Sans</option>
                                                        <option value="Outfit" {{ $fontFam == 'Outfit' ? 'selected' : '' }}>Outfit</option>
                                                        <option value="inherit" {{ $fontFam == 'inherit' ? 'selected' : '' }}>Inherit Site Default</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Font Weight</label>
                                                    <select name="values[header_font_weight]" class="form-control">
                                                        @php $weight = $contents['header_font_weight']->value ?? '600'; @endphp
                                                        <option value="400" {{ $weight == '400' ? 'selected' : '' }}>400 (Regular)</option>
                                                        <option value="500" {{ $weight == '500' ? 'selected' : '' }}>500 (Medium)</option>
                                                        <option value="600" {{ $weight == '600' ? 'selected' : '' }}>600 (Semi-Bold)</option>
                                                        <option value="700" {{ $weight == '700' ? 'selected' : '' }}>700 (Bold)</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Font Size</label>
                                                    <input type="text" name="values[header_font_size]" class="form-control" value="{{ $contents['header_font_size']->value ?? '14px' }}" placeholder="e.g. 14px">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Text Transform</label>
                                                    <select name="values[header_text_transform]" class="form-control">
                                                        @php $trans = $contents['header_text_transform']->value ?? 'uppercase'; @endphp
                                                        <option value="uppercase" {{ $trans == 'uppercase' ? 'selected' : '' }}>UPPERCASE</option>
                                                        <option value="capitalize" {{ $trans == 'capitalize' ? 'selected' : '' }}>Capitalize</option>
                                                        <option value="none" {{ $trans == 'none' ? 'selected' : '' }}>None (Normal)</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Background & Text Colors -->
                                        <div class="row" style="margin-top: 10px;">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Navbar Background Color</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['header_bg_color']->value ?? '#ffffff' }}">
                                                        </span>
                                                        <input type="text" name="values[header_bg_color]" class="form-control color-text-input" value="{{ $contents['header_bg_color']->value ?? '#ffffff' }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Sticky / Scrolled BG Color</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['header_sticky_bg_color']->value ?? '#ffffff' }}">
                                                        </span>
                                                        <input type="text" name="values[header_sticky_bg_color]" class="form-control color-text-input" value="{{ $contents['header_sticky_bg_color']->value ?? '#ffffff' }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Menu Font Color</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['header_menu_color']->value ?? '#09383a' }}">
                                                        </span>
                                                        <input type="text" name="values[header_menu_color]" class="form-control color-text-input" value="{{ $contents['header_menu_color']->value ?? '#09383a' }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Menu Hover Color</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['header_hover_color']->value ?? '#7c4d25' }}">
                                                        </span>
                                                        <input type="text" name="values[header_hover_color]" class="form-control color-text-input" value="{{ $contents['header_hover_color']->value ?? '#7c4d25' }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Menu Hover Effect</label>
                                                    <select name="values[header_hover_style]" class="form-control">
                                                        @php $hoverStyle = $contents['header_hover_style']->value ?? 'color_only'; @endphp
                                                        <option value="color_only" {{ $hoverStyle == 'color_only' ? 'selected' : '' }}>Change Text Color Only</option>
                                                        <option value="underline" {{ $hoverStyle == 'underline' ? 'selected' : '' }}>Animated Bottom Underline</option>
                                                        <option value="background" {{ $hoverStyle == 'background' ? 'selected' : '' }}>Subtle Background Pill</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Active Menu Link Color</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['header_active_color']->value ?? '#1e5d2e' }}">
                                                        </span>
                                                        <input type="text" name="values[header_active_color]" class="form-control color-text-input" value="{{ $contents['header_active_color']->value ?? '#1e5d2e' }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label>Active Link Style (Main Navbar & Dropdowns)</label>
                                                    <select name="values[header_active_style]" class="form-control">
                                                        @php $activeStyle = $contents['header_active_style']->value ?? 'underline'; @endphp
                                                        <option value="underline" {{ $activeStyle == 'underline' ? 'selected' : '' }}>Underline — Sleek accent bottom bar</option>
                                                        <option value="color_only" {{ $activeStyle == 'color_only' ? 'selected' : '' }}>Color Only — Active link color</option>
                                                        <option value="pill" {{ $activeStyle == 'pill' ? 'selected' : '' }}>Pill — Soft translucent rounded highlight</option>
                                                        <option value="bold" {{ $activeStyle == 'bold' ? 'selected' : '' }}>Bold — Heavy font weight (800) + active color</option>
                                                        <option value="dot" {{ $activeStyle == 'dot' ? 'selected' : '' }}>Dot — Modern glowing dot indicator below text</option>
                                                    </select>
                                                    <span class="help-text">Automatically highlights the parent item in the main navbar even when a user visits child sub-pages (e.g. /team under About Us).</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div style="border-top: 1px dashed #e2e8f0; margin: 18px 0 14px 0; padding-top: 14px;">
                                            <div style="font-size: 13px; font-weight: 700; color: #1e293b; margin-bottom: 12px; display: flex; align-items: center; gap: 6px;">
                                                <i class="voyager-angle-down" style="color: #1e5d2e;"></i> Desktop Dropdown Submenu Appearance
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Dropdown UI Theme Style</label>
                                                        <select name="values[header_dropdown_style]" class="form-control">
                                                            @php $dropStyle = $contents['header_dropdown_style']->value ?? 'card'; @endphp
                                                            <option value="card" {{ $dropStyle == 'card' ? 'selected' : '' }}>Floating Modern Card (Soft Shadow & Rounded)</option>
                                                            <option value="minimal" {{ $dropStyle == 'minimal' ? 'selected' : '' }}>Clean Minimalist (Brand Accent Border)</option>
                                                            <option value="glass" {{ $dropStyle == 'glass' ? 'selected' : '' }}>Frosted Glassmorphism (Blur Backdrop)</option>
                                                            <option value="dark" {{ $dropStyle == 'dark' ? 'selected' : '' }}>Deep Forest Dark (Brand Dark Theme)</option>
                                                        </select>
                                                        <span class="help-text">Visual theme of desktop submenus.</span>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Dropdown Entrance Animation</label>
                                                        <select name="values[header_dropdown_animation]" class="form-control">
                                                            @php $dropAnim = $contents['header_dropdown_animation']->value ?? 'slide_down'; @endphp
                                                            <option value="slide_down" {{ $dropAnim == 'slide_down' ? 'selected' : '' }}>Slide Down from Top (Starts above and glides down)</option>
                                                            <option value="slide_up" {{ $dropAnim == 'slide_up' ? 'selected' : '' }}>Slide Up from Below (Starts below and glides up)</option>
                                                            <option value="zoom" {{ $dropAnim == 'zoom' ? 'selected' : '' }}>Zoom In (Scales smoothly up into place)</option>
                                                            <option value="flip" {{ $dropAnim == 'flip' ? 'selected' : '' }}>3D Flip Down (Perspective drop & reveal)</option>
                                                            <option value="fade" {{ $dropAnim == 'fade' ? 'selected' : '' }}>Smooth Fade In (Pure opacity fade)</option>
                                                        </select>
                                                        <span class="help-text">Visual transition when cursor hovers over a dropdown menu item.</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- ========================================== -->
                    <!-- 2. FOOTER MAIN CONTENT & BACKGROUND -->
                    <!-- ========================================== -->
                    <div class="panel panel-hf-section {{ $activeSection === 'footer' ? 'is-active' : '' }}" id="section-footer">
                        <div class="panel-heading" onclick="toggleSection('footer')">
                            <div class="panel-title">
                                <div class="section-header-left">
                                    <div class="section-badge-icon"><i class="voyager-window-dock"></i></div>
                                    <div>
                                        <div class="section-title-text">Footer Main & Background</div>
                                        <div class="section-subtitle">Footer Background (Color or Image), Heading, Mission Statement, Copyright, and Legal Notice</div>
                                    </div>
                                </div>
                                <i class="voyager-angle-down section-chevron"></i>
                            </div>
                        </div>

                        <div class="panel-body" style="{{ $activeSection === 'footer' ? '' : 'display: none;' }}">

                            <!-- Quick Jump Cards to Footer Menu & Legal Menu -->
                            @php
                                $footerMenu = \TCG\Voyager\Models\Menu::where('name', 'footer-menu')->first();
                                $footerMenuUrl = $footerMenu ? route('voyager.menus.builder', $footerMenu->id) : route('voyager.menus.index');

                                $legalMenu = \TCG\Voyager\Models\Menu::where('name', 'footer-legal-menu')->first();
                                $legalMenuUrl = $legalMenu ? route('voyager.menus.builder', $legalMenu->id) : route('voyager.menus.index');
                            @endphp
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="menu-link-card">
                                        <div class="menu-link-title">
                                            <i class="voyager-list"></i>
                                            <span><strong>Footer Navigation Menu</strong> (11 items)</span>
                                        </div>
                                        <a href="{{ $footerMenuUrl }}" target="_blank" class="btn-menu-jump">
                                            <i class="voyager-edit"></i> Edit Items &rarr;
                                        </a>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="menu-link-card">
                                        <div class="menu-link-title">
                                            <i class="voyager-certificate"></i>
                                            <span><strong>Footer Legal Menu</strong> (Policies & Terms)</span>
                                        </div>
                                        <a href="{{ $legalMenuUrl }}" target="_blank" class="btn-menu-jump">
                                            <i class="voyager-edit"></i> Edit Legal Links &rarr;
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Left: Content fields -->
                                <div class="col-md-7">
                                    <div class="form-section-card">
                                        <div class="form-section-card-title"><i class="voyager-file-text"></i> Footer Content & Copywriting</div>

                                        <div class="form-group">
                                            <label>Footer Heading</label>
                                            <input type="text" name="values[footer_heading]" class="form-control" value="{{ $contents['footer_heading']->value ?? 'Build your Impact Story with us!' }}">
                                        </div>

                                        <div class="form-group">
                                            <label>Footer Description / Mission Paragraph</label>
                                            <textarea name="values[footer_text]" class="form-control" rows="4">{{ $contents['footer_text']->value ?? '' }}</textarea>
                                            <span class="help-text">Displays directly below the main heading on desktop and mobile viewports.</span>
                                        </div>

                                        <div class="form-group">
                                            <label>Copyright Notice</label>
                                            <input type="text" name="values[footer_copyright_text]" class="form-control" value="{{ $contents['footer_copyright_text']->value ?? '© 2026 Farmers for Forests. All rights reserved.' }}">
                                        </div>
                                    </div>
                                </div>

                                <!-- Right: Background Switcher -->
                                <div class="col-md-5">
                                    <div class="form-section-card">
                                        <div class="form-section-card-title"><i class="voyager-paint-bucket"></i> Footer Background</div>

                                        @php
                                            $footerBgType = $contents['footer_bg_type']->value ?? 'color';
                                            $footerBgImg = $contents['footer_bg_image']->value ?? '';
                                            $footerBgImgUrl = $footerBgImg ? asset($footerBgImg) : '';
                                        @endphp

                                        <div class="form-group">
                                            <label>Background Type</label>
                                            <select name="values[footer_bg_type]" id="footer_bg_type" class="form-control" onchange="toggleFooterBgType(this.value)">
                                                <option value="color" {{ $footerBgType === 'color' ? 'selected' : '' }}>Solid Background Color</option>
                                                <option value="image" {{ $footerBgType === 'image' ? 'selected' : '' }}>Background Image</option>
                                            </select>
                                        </div>

                                        <!-- Color option -->
                                        <div class="form-group" id="footer_color_group">
                                            <label>Background Color</label>
                                            <div class="color-input-group">
                                                <span class="color-preview-addon">
                                                    <input type="color" class="color-picker-input" value="{{ $contents['footer_bg_color']->value ?? '#09383a' }}">
                                                </span>
                                                <input type="text" name="values[footer_bg_color]" class="form-control color-text-input" value="{{ $contents['footer_bg_color']->value ?? '#09383a' }}">
                                            </div>
                                        </div>

                                        <!-- Image option -->
                                        <div class="form-group" id="footer_image_group" style="{{ $footerBgType === 'image' ? '' : 'display: none;' }}">
                                            <label>Background Image Upload</label>
                                            <input type="file" name="footer_bg_image_file" class="form-control" accept="image/*" onchange="previewImage(this, 'preview_footer_bg')">
                                            <div class="badge-recommend">Recommended: 1920 &times; 1080 px (Dark or Textured)</div>

                                            <div class="preview-box dark-bg" id="preview_footer_bg_box" style="margin-top: 10px;">
                                                @if(!empty($footerBgImgUrl))
                                                    <img src="{{ $footerBgImgUrl }}" id="preview_footer_bg" alt="Footer Background Preview">
                                                @else
                                                    <span class="text-muted" id="preview_footer_bg_placeholder" style="color: #cbd5e1;">No background image selected</span>
                                                    <img src="" id="preview_footer_bg" style="display: none; max-height: 120px;">
                                                @endif
                                            </div>

                                            @if(!empty($footerBgImg))
                                                <div style="margin-top: 6px;">
                                                    <label style="font-size: 12px; font-weight: normal; cursor: pointer; text-transform: none; color: #ef4444;">
                                                        <input type="checkbox" name="remove_footer_bg_image" value="1">
                                                        Remove background image (revert to color)
                                                    </label>
                                                </div>
                                            @endif
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- ========================================== -->
                    <!-- 3. FOOTER CTA BUTTONS -->
                    <!-- ========================================== -->
                    <div class="panel panel-hf-section {{ $activeSection === 'buttons' ? 'is-active' : '' }}" id="section-buttons">
                        <div class="panel-heading" onclick="toggleSection('buttons')">
                            <div class="panel-title">
                                <div class="section-header-left">
                                    <div class="section-badge-icon"><i class="voyager-tag"></i></div>
                                    <div>
                                        <div class="section-title-text">Footer Call-to-Action Buttons</div>
                                        <div class="section-subtitle">Labels, Target URLs, Background & Text Colors, Hover Effects for Button 1 & Button 2</div>
                                    </div>
                                </div>
                                <i class="voyager-angle-down section-chevron"></i>
                            </div>
                        </div>

                        <div class="panel-body" style="{{ $activeSection === 'buttons' ? '' : 'display: none;' }}">
                            <div class="row">

                                <!-- Button 1 (e.g. Support Us) -->
                                <div class="col-md-6">
                                    <div class="form-section-card">
                                        <div class="form-section-card-title"><i class="voyager-check-circle"></i> Button 1 (Primary Action)</div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Button 1 Text</label>
                                                    <input type="text" name="values[footer_btn1_text]" class="form-control" value="{{ $contents['footer_btn1_text']->value ?? 'Support Us' }}">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Button 1 URL</label>
                                                    <input type="text" name="values[footer_btn1_url]" class="form-control" value="{{ $contents['footer_btn1_url']->value ?? '/support-us' }}">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Background Color</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['footer_btn1_bg_color']->value ?? '#86a34d' }}">
                                                        </span>
                                                        <input type="text" name="values[footer_btn1_bg_color]" class="form-control color-text-input" value="{{ $contents['footer_btn1_bg_color']->value ?? '#86a34d' }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Text Color</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['footer_btn1_text_color']->value ?? '#ffffff' }}">
                                                        </span>
                                                        <input type="text" name="values[footer_btn1_text_color]" class="form-control color-text-input" value="{{ $contents['footer_btn1_text_color']->value ?? '#ffffff' }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Hover Background</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['footer_btn1_hover_bg_color']->value ?? '#728c3f' }}">
                                                        </span>
                                                        <input type="text" name="values[footer_btn1_hover_bg_color]" class="form-control color-text-input" value="{{ $contents['footer_btn1_hover_bg_color']->value ?? '#728c3f' }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Hover Text Color</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['footer_btn1_hover_text_color']->value ?? '#ffffff' }}">
                                                        </span>
                                                        <input type="text" name="values[footer_btn1_hover_text_color]" class="form-control color-text-input" value="{{ $contents['footer_btn1_hover_text_color']->value ?? '#ffffff' }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Button 2 (e.g. Contact Us / Outline) -->
                                <div class="col-md-6">
                                    <div class="form-section-card">
                                        <div class="form-section-card-title"><i class="voyager-chat"></i> Button 2 (Secondary Action)</div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Button 2 Text</label>
                                                    <input type="text" name="values[footer_btn2_text]" class="form-control" value="{{ $contents['footer_btn2_text']->value ?? 'Contact Us' }}">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Button 2 URL</label>
                                                    <input type="text" name="values[footer_btn2_url]" class="form-control" value="{{ $contents['footer_btn2_url']->value ?? '/contact-us' }}">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Border Color</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['footer_btn2_border_color']->value ?? '#f4910f' }}">
                                                        </span>
                                                        <input type="text" name="values[footer_btn2_border_color]" class="form-control color-text-input" value="{{ $contents['footer_btn2_border_color']->value ?? '#f4910f' }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Background Color</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['footer_btn2_bg_color']->value !== 'transparent' ? ($contents['footer_btn2_bg_color']->value ?? '#09383a') : '#09383a' }}">
                                                        </span>
                                                        <input type="text" name="values[footer_btn2_bg_color]" class="form-control color-text-input" value="{{ $contents['footer_btn2_bg_color']->value ?? 'transparent' }}" placeholder="transparent or hex">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Text Color</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['footer_btn2_text_color']->value ?? '#ffffff' }}">
                                                        </span>
                                                        <input type="text" name="values[footer_btn2_text_color]" class="form-control color-text-input" value="{{ $contents['footer_btn2_text_color']->value ?? '#ffffff' }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Hover Background</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['footer_btn2_hover_bg_color']->value ?? '#f4910f' }}">
                                                        </span>
                                                        <input type="text" name="values[footer_btn2_hover_bg_color]" class="form-control color-text-input" value="{{ $contents['footer_btn2_hover_bg_color']->value ?? '#f4910f' }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Hover Text Color</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['footer_btn2_hover_text_color']->value ?? '#09383a' }}">
                                                        </span>
                                                        <input type="text" name="values[footer_btn2_hover_text_color]" class="form-control color-text-input" value="{{ $contents['footer_btn2_hover_text_color']->value ?? '#09383a' }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <!-- ========================================== -->
                    <!-- 4. NEWSLETTER CONTAINER -->
                    <!-- ========================================== -->
                    <div class="panel panel-hf-section {{ $activeSection === 'newsletter' ? 'is-active' : '' }}" id="section-newsletter">
                        <div class="panel-heading" onclick="toggleSection('newsletter')">
                            <div class="panel-title">
                                <div class="section-header-left">
                                    <div class="section-badge-icon"><i class="voyager-mail"></i></div>
                                    <div>
                                        <div class="section-title-text">Newsletter Container</div>
                                        <div class="section-subtitle">Headline, Subscribe Button, Background Color/Image, Button Styling</div>
                                    </div>
                                </div>
                                <i class="voyager-angle-down section-chevron"></i>
                            </div>
                        </div>

                        <div class="panel-body" style="{{ $activeSection === 'newsletter' ? '' : 'display: none;' }}">
                            <div class="row">
                                <!-- Col 1: Text & Actions -->
                                <div class="col-md-6">
                                    <div class="form-section-card">
                                        <div class="form-section-card-title"><i class="voyager-edit"></i> Newsletter Copy & Button Link</div>

                                        <div class="form-group">
                                            <label>Newsletter Heading</label>
                                            <input type="text" name="values[footer_newsletter_heading]" class="form-control" value="{{ $contents['footer_newsletter_heading']->value ?? 'SUBSCRIBE TO OUR NEWSLETTER !' }}">
                                            <span class="help-text">HTML like <code>&lt;br&gt;</code> is supported for line breaks.</span>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Button Label</label>
                                                    <input type="text" name="values[footer_newsletter_btn_text]" class="form-control" value="{{ $contents['footer_newsletter_btn_text']->value ?? 'SUBSCRIBE' }}">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Button Target URL</label>
                                                    <input type="text" name="values[footer_newsletter_btn_url]" class="form-control" value="{{ $contents['footer_newsletter_btn_url']->value ?? 'https://farmersforforests.substack.com/' }}">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" style="margin-top: 10px;">
                                            <div class="col-sm-4">
                                                <div class="form-group">
                                                    <label>Button BG Color</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['footer_newsletter_btn_bg_color']->value ?? '#f4910f' }}">
                                                        </span>
                                                        <input type="text" name="values[footer_newsletter_btn_bg_color]" class="form-control color-text-input" value="{{ $contents['footer_newsletter_btn_bg_color']->value ?? '#f4910f' }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group">
                                                    <label>Button Text Color</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['footer_newsletter_btn_text_color']->value ?? '#09383a' }}">
                                                        </span>
                                                        <input type="text" name="values[footer_newsletter_btn_text_color]" class="form-control color-text-input" value="{{ $contents['footer_newsletter_btn_text_color']->value ?? '#09383a' }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group">
                                                    <label>Button Hover BG</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $contents['footer_newsletter_btn_hover_bg_color']->value ?? '#df830c' }}">
                                                        </span>
                                                        <input type="text" name="values[footer_newsletter_btn_hover_bg_color]" class="form-control color-text-input" value="{{ $contents['footer_newsletter_btn_hover_bg_color']->value ?? '#df830c' }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Col 2: Card Background & Illustration -->
                                <div class="col-md-6">
                                    <div class="form-section-card">
                                        <div class="form-section-card-title"><i class="voyager-paint-bucket"></i> Container Background & Image</div>

                                        @php
                                            $nlBgType = $contents['footer_newsletter_bg_type']->value ?? 'color';
                                            $nlBgImg = $contents['footer_newsletter_bg_image']->value ?? '';
                                            $defaultNlImg = asset('storage/pages/footer_image.png');
                                            $nlBgImgUrl = !empty($nlBgImg) ? asset(\Illuminate\Support\Str::startsWith($nlBgImg, ['http://', 'https://', 'storage/', 'assets/']) ? $nlBgImg : 'storage/' . $nlBgImg) : $defaultNlImg;
                                            $nlCardBgColor = $contents['footer_newsletter_bg_color']->value ?? '#86A34D';
                                        @endphp

                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Background Type</label>
                                                    <select name="values[footer_newsletter_bg_type]" id="footer_newsletter_bg_type" class="form-control">
                                                        <option value="color" {{ $nlBgType === 'color' ? 'selected' : '' }}>Solid Color + Illustration</option>
                                                        <option value="image" {{ $nlBgType === 'image' ? 'selected' : '' }}>Full Background Image</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Card Background Color</label>
                                                    <div class="color-input-group">
                                                        <span class="color-preview-addon">
                                                            <input type="color" class="color-picker-input" value="{{ $nlCardBgColor }}">
                                                        </span>
                                                        <input type="text" name="values[footer_newsletter_bg_color]" id="input_nl_bg_color" class="form-control color-text-input" value="{{ $nlCardBgColor }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group" style="margin-top: 8px;">
                                            <label>Illustration / Background Image</label>
                                            <input type="file" name="footer_newsletter_bg_image_file" class="form-control" accept="image/*" onchange="previewImage(this, 'preview_nl_bg')">
                                            <div class="badge-recommend">Recommended: 600 &times; 300 px (PNG/WebP with transparent or subtle background)</div>

                                            <div class="preview-box dark-bg" id="preview_nl_bg_box" style="margin-top: 10px; background: {{ $nlCardBgColor }}; min-height: 120px; border-radius: 8px; padding: 12px; display: flex; align-items: center; justify-content: center;">
                                                <img src="{{ $nlBgImgUrl }}" id="preview_nl_bg" alt="Newsletter Illustration" onerror="this.onerror=null;this.src='{{ $defaultNlImg }}';" style="max-height: 110px; max-width: 100%; object-fit: contain;">
                                            </div>

                                            @if(!empty($nlBgImg) && $nlBgImg !== 'storage/pages/footer_image.png')
                                                <div style="margin-top: 6px;">
                                                    <label style="font-size: 12px; font-weight: normal; cursor: pointer; text-transform: none; color: #ef4444;">
                                                        <input type="checkbox" name="remove_footer_newsletter_bg_image" value="1">
                                                        Reset to default illustration
                                                    </label>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- ========================================== -->
                    <!-- 5. SAY HELLO & SOCIAL MEDIA -->
                    <!-- ========================================== -->
                    <div class="panel panel-hf-section {{ $activeSection === 'contact' ? 'is-active' : '' }}" id="section-contact">
                        <div class="panel-heading" onclick="toggleSection('contact')">
                            <div class="panel-title">
                                <div class="section-header-left">
                                    <div class="section-badge-icon"><i class="voyager-telephone"></i></div>
                                    <div>
                                        <div class="section-title-text">Say Hello & Social Media</div>
                                        <div class="section-subtitle">Support Email, Phone Number, Extra Link, and Social Media Icons</div>
                                    </div>
                                </div>
                                <i class="voyager-angle-down section-chevron"></i>
                            </div>
                        </div>

                        <div class="panel-body" style="{{ $activeSection === 'contact' ? '' : 'display: none;' }}">

                            <!-- Quick Jump Card to Social Media Menu -->
                            @php
                                $socialMenu = \TCG\Voyager\Models\Menu::where('name', 'footer-social-menu')->first();
                                $socialMenuUrl = $socialMenu ? route('voyager.menus.builder', $socialMenu->id) : route('voyager.menus.index');
                            @endphp
                            <div class="menu-link-card">
                                <div class="menu-link-title">
                                    <i class="voyager-share" style="font-size: 16px;"></i>
                                    <span>Social Media Channels: All social channels (WhatsApp, Facebook, LinkedIn, YouTube, Instagram, X) are managed in the <strong>Social Media Menu Builder</strong>.</span>
                                </div>
                                <a href="{{ $socialMenuUrl }}" target="_blank" class="btn-menu-jump">
                                    <i class="voyager-edit"></i> Edit Social Links &rarr;
                                </a>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-section-card">
                                        <div class="form-section-card-title"><i class="voyager-chat"></i> "Say Hello" Contact Block</div>

                                        <div class="row">
                                            <div class="col-sm-4">
                                                <div class="form-group">
                                                    <label>Heading</label>
                                                    <input type="text" name="values[footer_say_hello_title]" class="form-control" value="{{ $contents['footer_say_hello_title']->value ?? 'Say hello' }}">
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group">
                                                    <label>Support Email Address</label>
                                                    <input type="email" name="values[footer_say_hello_email]" class="form-control" value="{{ $contents['footer_say_hello_email']->value ?? 'hello@farmersforforests.org' }}">
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group">
                                                    <label>Phone Number</label>
                                                    <input type="text" name="values[footer_say_hello_phone]" class="form-control" value="{{ $contents['footer_say_hello_phone']->value ?? '+(91) 89991 18289' }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>

                <!-- Sticky Save Bar -->
                <div class="sticky-save-bar">
                    <div style="font-size: 13px; color: #475569;">
                        <i class="voyager-info-large" style="color: #2563eb;"></i> Changes affect the live website header & footer instantly upon saving.
                    </div>
                    <div>
                        <button type="submit" class="btn btn-primary" style="font-weight: 600; padding: 10px 24px; border-radius: 6px; box-shadow: 0 2px 6px rgba(37,99,235,0.3);">
                            <i class="voyager-check"></i> Save Header & Footer Settings
                        </button>
                    </div>
                </div>

            </form>

        </div>
    </div>
</div>
@stop

@section('javascript')
<script>
    // Accordion Toggle
    function toggleSection(sectionKey) {
        var panel = document.getElementById('section-' + sectionKey);
        var body = panel.querySelector('.panel-body');
        var wasActive = panel.classList.contains('is-active');

        // Close all
        document.querySelectorAll('.panel-hf-section').forEach(function(p) {
            p.classList.remove('is-active');
            var b = p.querySelector('.panel-body');
            if (b) b.style.display = 'none';
        });

        // Toggle selected
        if (!wasActive) {
            panel.classList.add('is-active');
            if (body) body.style.display = 'block';
            document.getElementById('active_section_input').value = sectionKey;
        }
    }

    // Toggle footer background options
    function toggleFooterBgType(type) {
        var colorGroup = document.getElementById('footer_color_group');
        var imageGroup = document.getElementById('footer_image_group');
        if (type === 'image') {
            imageGroup.style.display = 'block';
        } else {
            imageGroup.style.display = 'none';
        }
    }

    // Live image preview
    function previewImage(input, previewElementId) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var preview = document.getElementById(previewElementId);
                if (preview) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                }
                var placeholder = document.getElementById(previewElementId + '_placeholder');
                if (placeholder) {
                    placeholder.style.display = 'none';
                }
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

    // Sync color inputs
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.color-input-group').forEach(function(group) {
            var picker = group.querySelector('.color-picker-input');
            var text = group.querySelector('.color-text-input');

            if (picker && text) {
                picker.addEventListener('input', function() {
                    text.value = picker.value;
                });
                text.addEventListener('input', function() {
                    if (/^#[0-9A-F]{6}$/i.test(text.value)) {
                        picker.value = text.value;
                    }
                });
            }
        });
    });
</script>
@stop