@extends('voyager::master')

@section('page_title', 'Home Page Content')

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

    /* Form Fields & Grouping */
    .form-section-group {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 18px 20px;
        margin-bottom: 20px;
    }
    .form-section-title {
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
        margin-top: 0;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .form-section-title .section-bread-link {
        font-size: 12px;
        font-weight: 500;
        color: #2563eb;
        text-decoration: none;
    }
    .form-section-title .section-bread-link:hover {
        text-decoration: underline;
    }
    .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;
    }

    /* Styling Box */
    .bg-options-box {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 16px;
    }
    .color-preview-bar {
        height: 18px;
        border-radius: 4px;
        margin-top: 6px;
        border: 1px solid #cbd5e1;
        transition: background-color 0.15s ease;
    }
    .readonly-path-input {
        background: #f1f5f9 !important;
        cursor: not-allowed !important;
        font-family: monospace;
        font-size: 12px !important;
        color: #475569 !important;
        border: 1px dashed #cbd5e1 !important;
    }
    .bg-preview-wrapper {
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 6px;
        background: #fff;
        text-align: center;
        min-height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bg-preview-thumbnail {
        max-height: 130px;
        max-width: 100%;
        border-radius: 4px;
        object-fit: contain;
    }
    .bg-preview-placeholder {
        padding: 18px 10px;
        color: #94a3b8;
        font-size: 13px;
    }

    /* Project Picker Checklist */
    .project-picker-list {
        max-height: 280px;
        overflow-y: auto;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 8px;
        background: #fff;
    }
    .project-picker-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 6px;
        margin-bottom: 4px;
        border: 1px solid #f1f5f9;
        transition: background 0.15s ease, border-color 0.15s ease;
    }
    .project-picker-item:hover {
        background: #f8fafc;
        border-color: #e2e8f0;
    }
    .project-picker-item input[type="checkbox"] {
        margin-right: 12px;
        width: 16px;
        height: 16px;
        cursor: pointer;
    }
    .project-picker-thumb {
        width: 44px;
        height: 32px;
        border-radius: 4px;
        object-fit: cover;
        margin-right: 12px;
        border: 1px solid #e2e8f0;
    }

    /* Sticky Bottom Save Bar */
    .save-bar-fixed {
        position: fixed;
        bottom: 0;
        left: 250px;
        right: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        border-top: 1px solid #e2e8f0;
        padding: 12px 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 999;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
    }
    .app-container:not(.expanded) .save-bar-fixed {
        left: 60px;
    }
    @media (max-width: 768px) {
        .save-bar-fixed {
            left: 0 !important;
            padding: 10px 15px;
        }
    }
</style>
@stop

@section('content')
<div class="page-content container-fluid">
    @include('voyager::alerts')

    <!-- Page Header -->
    <div style="margin-bottom: 20px;">
        <h1 class="page-title" style="margin: 0; font-size: 24px; font-weight: 700; color: #0f172a;">
            <i class="voyager-home" style="margin-right: 8px; color: #2563eb;"></i> Home Page Content
        </h1>
        <p class="text-muted" style="margin-top: 4px; font-size: 14px;">
            Configure text copy, video/poster media, buttons, and section backgrounds for each homepage section. (Data lists are managed in their dedicated BREAD tables in the sidebar).
        </p>
    </div>

    <!-- Main Accordion Form -->
    <form action="{{ route('voyager.home_contents.update', ['section' => $activeSection]) }}" method="POST" enctype="multipart/form-data" id="homeContentForm">
        @csrf
        @method('PUT')
        <input type="hidden" name="active_section" id="activeSectionInput" value="{{ $activeSection }}">

        <div class="panel-group home-accordion-wrapper" id="homeSectionsAccordion" role="tablist" aria-multiselectable="true">

            <!-- ==========================================
                 1. HERO SECTION
                 ========================================== -->
            <div class="panel panel-default panel-home-section {{ $activeSection === 'hero' ? 'is-active' : '' }}" id="section-panel-hero">
                <div class="panel-heading" data-toggle="collapse" data-parent="#homeSectionsAccordion" href="#collapseHero" data-section="hero">
                    <div class="panel-title">
                        <div class="section-header-left">
                            <span class="section-badge-num">1</span>
                            <div>
                                <div class="section-title-text">Hero Section</div>
                                <div class="section-subtitle">Heading lines, CTA button, background video stream/upload & fallback poster</div>
                            </div>
                        </div>
                        <i class="voyager-angle-down section-chevron"></i>
                    </div>
                </div>
                <div id="collapseHero" class="panel-collapse collapse {{ $activeSection === 'hero' ? 'in' : '' }}">
                    <div class="panel-body">
                        <div class="row">
                            <!-- Left: Headings & Buttons -->
                            <div class="col-md-7">
                                <div class="form-section-group">
                                    <div class="form-section-title"><i class="voyager-file-text"></i> Hero Headings & Actions</div>
                                    <div class="row">
                                        <div class="col-sm-4">
                                            <div class="form-group">
                                                <label>Line 1</label>
                                                <input type="text" class="form-control" name="values[hero_line_1]" value="{{ $home['hero_line_1'] ?? 'Flourishing Forests' }}">
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="form-group">
                                                <label>Line 2</label>
                                                <input type="text" class="form-control" name="values[hero_line_2]" value="{{ $home['hero_line_2'] ?? 'Thriving Farms' }}">
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="form-group">
                                                <label>Line 3</label>
                                                <input type="text" class="form-control" name="values[hero_line_3]" value="{{ $home['hero_line_3'] ?? 'Prospering People' }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Button Label</label>
                                                <input type="text" class="form-control" name="values[hero_cta_label]" value="{{ $home['hero_cta_label'] ?? 'Support Us' }}">
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Button URL</label>
                                                <input type="text" class="form-control" name="values[hero_cta_url]" value="{{ $home['hero_cta_url'] ?? '/support-us' }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Right: Hero Media & Background -->
                            <div class="col-md-5">
                                @php
                                    $heroType = $home['hero_bg_type'] ?? 'video';
                                    $heroVideoUrl = $home['hero_video_url'] ?? 'storage/website/index.m3u8';
                                    $heroPoster = $home['hero_video_poster'] ?? 'storage/website/poster.jpg';
                                    $heroColor = $home['hero_bg_color'] ?? '#09383a';
                                    $heroImage = $home['hero_bg_image'] ?? $heroPoster;
                                    $heroImgSrc = !empty($heroImage) ? asset($heroImage) : '';
                                    $posterSrc = !empty($heroPoster) ? asset($heroPoster) : '';
                                @endphp
                                <div class="bg-options-box">
                                    <div class="form-section-title"><i class="voyager-paint-bucket"></i> Hero Media & Background</div>

                                    <!-- Dropdown for Video, Image, or Color -->
                                    <div class="form-group" style="margin-bottom: 14px;">
                                        <label><i class="voyager-brush"></i> Background Media Type</label>
                                        <select class="form-control bg-type-select" name="values[hero_bg_type]" data-target="hero">
                                            <option value="video" {{ $heroType === 'video' ? 'selected' : '' }}>Video Stream / File</option>
                                            <option value="image" {{ $heroType === 'image' ? 'selected' : '' }}>Background Image</option>
                                            <option value="color" {{ $heroType === 'color' ? 'selected' : '' }}>Solid Color</option>
                                        </select>
                                    </div>

                                    <!-- Group 1: Video Option -->
                                    <div class="bg-group-video bg-group-hero-video" style="{{ $heroType === 'video' ? '' : 'display: none;' }}">
                                        <div class="form-group">
                                            <label>Video Stream / File URL</label>
                                            <input type="text" class="form-control" name="values[hero_video_url]" id="input_hero_video_url" value="{{ $heroVideoUrl }}">
                                            <span class="help-text">Direct <code>.mp4</code> video file or HLS <code>.m3u8</code> streaming link.</span>
                                        </div>
                                        <div class="form-group">
                                            <label>Upload New Video File (.mp4 / .webm)</label>
                                            <input type="file" class="form-control" name="hero_video_file" id="input_hero_video_file" accept="video/mp4,video/webm">
                                        </div>
                                        <div class="form-group">
                                            <label>Video Player Preview</label>
                                            <div style="border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px; background: #000; text-align: center;">
                                                <video id="hero_preview_video" controls playsinline muted preload="metadata" style="max-height: 140px; max-width: 100%; border-radius: 4px;" poster="{{ $posterSrc }}">
                                                    <source src="{{ asset($heroVideoUrl) }}" type="video/mp4">
                                                    Your browser does not support HTML5 video.
                                                </video>
                                            </div>
                                        </div>
                                        <div class="form-group" style="margin-top: 14px; padding-top: 14px; border-top: 1px dashed #cbd5e1;">
                                            <label>Upload Fallback Poster Image</label>
                                            <input type="file" class="form-control bg-file-input" name="hero_video_poster_file" accept="image/*" data-preview="#preview_img_hero_poster" data-path="#path_hero_video_poster" data-placeholder="#no_img_hero_poster">
                                        </div>
                                        <div class="form-group">
                                            <label>Poster Image Preview</label>
                                            <div class="bg-preview-wrapper">
                                                <img id="preview_img_hero_poster" src="{{ $posterSrc }}" alt="Poster Preview" class="bg-preview-thumbnail" style="{{ empty($posterSrc) ? 'display: none;' : '' }}">
                                                <div id="no_img_hero_poster" class="text-muted bg-preview-placeholder" style="{{ !empty($posterSrc) ? 'display: none;' : '' }}">
                                                    <i class="voyager-photo" style="font-size: 26px; display: block; margin-bottom: 4px; color: #94a3b8;"></i>
                                                    <span>No poster uploaded</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>Poster Image Path <span class="text-muted" style="font-size: 11px; text-transform: none;">(Read-only)</span></label>
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="voyager-link"></i></span>
                                                <input type="text" class="form-control readonly-path-input" id="path_hero_video_poster" name="values[hero_video_poster]" value="{{ $heroPoster }}" readonly>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Group 2: Image Option -->
                                    <div class="bg-group-image bg-group-hero-image" style="{{ $heroType === 'image' ? '' : 'display: none;' }}">
                                        <div class="form-group">
                                            <label>Upload Hero Background Image</label>
                                            <input type="file" class="form-control bg-file-input" name="hero_bg_image_file" accept="image/*" data-preview="#preview_img_hero" data-path="#path_hero_bg_image" data-placeholder="#no_img_hero">
                                            <small class="help-text">High-resolution banner image recommended (1920x1080).</small>
                                        </div>
                                        <div class="form-group" style="margin-top: 10px;">
                                            <label>Hero Image Preview</label>
                                            <div class="bg-preview-wrapper">
                                                <img id="preview_img_hero" src="{{ $heroImgSrc }}" alt="Hero Background Preview" class="bg-preview-thumbnail" style="{{ empty($heroImgSrc) ? 'display: none;' : '' }}">
                                                <div id="no_img_hero" class="text-muted bg-preview-placeholder" style="{{ !empty($heroImgSrc) ? 'display: none;' : '' }}">
                                                    <i class="voyager-photo" style="font-size: 26px; display: block; margin-bottom: 4px; color: #94a3b8;"></i>
                                                    <span>No hero image uploaded</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>Current Image Path <span class="text-muted" style="font-size: 11px; text-transform: none;">(Read-only)</span></label>
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="voyager-link"></i></span>
                                                <input type="text" class="form-control readonly-path-input" id="path_hero_bg_image" name="values[hero_bg_image]" value="{{ $heroImage }}" readonly>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Group 3: Color Option -->
                                    <div class="bg-group-color bg-group-hero-color" style="{{ $heroType === 'color' ? '' : 'display: none;' }}">
                                        <div class="form-group">
                                            <label>Hero Background Color</label>
                                            <div class="input-group">
                                                <span class="input-group-addon" style="padding: 2px 6px;">
                                                    <input type="color" id="picker_hero_bg_color" value="{{ $heroColor }}" oninput="document.getElementById('input_hero_bg_color').value = this.value; document.getElementById('swatch_hero').style.backgroundColor = this.value;" style="border: none; width: 28px; height: 28px; cursor: pointer;">
                                                </span>
                                                <input type="text" class="form-control" id="input_hero_bg_color" name="values[hero_bg_color]" value="{{ $heroColor }}" placeholder="#09383a" oninput="document.getElementById('picker_hero_bg_color').value = this.value; document.getElementById('swatch_hero').style.backgroundColor = this.value;">
                                            </div>
                                            <div class="color-preview-bar" id="swatch_hero" style="background-color: {{ $heroColor }};"></div>
                                            <small class="help-text">Click the swatch to pick a color or enter a HEX code.</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- ==========================================
                 2. ABOUT SECTION (MISSION)
                 ========================================== -->
            <div class="panel panel-default panel-home-section {{ $activeSection === 'about' ? 'is-active' : '' }}" id="section-panel-about">
                <div class="panel-heading" data-toggle="collapse" data-parent="#homeSectionsAccordion" href="#collapseAbout" data-section="about">
                    <div class="panel-title">
                        <div class="section-header-left">
                            <span class="section-badge-num">2</span>
                            <div>
                                <div class="section-title-text">About Section</div>
                                <div class="section-subtitle">Mission statement, 2030 impact targets & background styling</div>
                            </div>
                        </div>
                        <i class="voyager-angle-down section-chevron"></i>
                    </div>
                </div>
                <div id="collapseAbout" class="panel-collapse collapse {{ $activeSection === 'about' ? 'in' : '' }}">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="form-group">
                                    <label>Eyebrow</label>
                                    <input type="text" class="form-control" name="values[mission_eyebrow]" value="{{ $home['mission_eyebrow'] ?? 'Our Mission' }}">
                                </div>
                                <div class="form-group">
                                    <label>Mission Statement</label>
                                    <textarea name="values[mission_title]" class="form-control" rows="3">{{ $home['mission_title'] ?? 'Farmers for Forests (F4F) protects and restores biodiverse farms and forests...' }}</textarea>
                                </div>
                                <div class="form-group">
                                    <label>Highlight Target</label>
                                    <textarea name="values[mission_sub]" class="form-control" rows="2">{{ $home['mission_sub'] ?? 'By 2030, F4F will be sequestering 1 million tonnes of CO2 per year...' }}</textarea>
                                </div>

                            </div>
                            <div class="col-md-5">
                                @include('voyager.home-contents.partials.bg-styling', [
                                    'prefix' => 'about',
                                    'defaultType' => 'image',
                                    'defaultColor' => '#ffffff'
                                ])
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- ==========================================
                 3. OUR WORK ON GROUND (PROGRAMS)
                 ========================================== -->
            <div class="panel panel-default panel-home-section {{ $activeSection === 'programs' ? 'is-active' : '' }}" id="section-panel-programs">
                <div class="panel-heading" data-toggle="collapse" data-parent="#homeSectionsAccordion" href="#collapsePrograms" data-section="programs">
                    <div class="panel-title">
                        <div class="section-header-left">
                            <span class="section-badge-num">3</span>
                            <div>
                                <div class="section-title-text">Our Work on Ground</div>
                                <div class="section-subtitle">Section copy, intro paragraph, CTA button & background styling</div>
                            </div>
                        </div>
                        <i class="voyager-angle-down section-chevron"></i>
                    </div>
                </div>
                <div id="collapsePrograms" class="panel-collapse collapse {{ $activeSection === 'programs' ? 'in' : '' }}">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="form-group">
                                    <label>Eyebrow</label>
                                    <input type="text" class="form-control" name="values[programs_eyebrow]" value="{{ $home['programs_eyebrow'] ?? 'Our Work on the Ground' }}">
                                </div>
                                <div class="form-group">
                                    <label>Heading</label>
                                    <input type="text" class="form-control" name="values[programs_title]" value="{{ $home['programs_title'] ?? 'Five programs. One integrated vision.' }}">
                                </div>
                                <div class="form-group">
                                    <label>Intro Paragraph</label>
                                    <textarea name="values[programs_intro]" class="form-control" rows="4">{{ $home['programs_intro'] ?? 'Our work spans five interconnected programs...' }}</textarea>
                                </div>
                                <div class="form-group">
                                    <label>Learn More Button Label</label>
                                    <input type="text" class="form-control" name="values[our_work_learn_more_label]" value="{{ $home['our_work_learn_more_label'] ?? 'Learn More' }}">
                                </div>
                            </div>
                            <div class="col-md-5">
                                @include('voyager.home-contents.partials.bg-styling', [
                                    'prefix' => 'programs',
                                    'defaultType' => 'color',
                                    'defaultColor' => '#143823',
                                    'breadLink' => route('voyager.programs.index'),
                                    'breadLabel' => 'Programs BREAD (' . count($programs) . ')'
                                ])
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- ==========================================
                 4. OUR IMPACT
                 ========================================== -->
            <div class="panel panel-default panel-home-section {{ $activeSection === 'impact' ? 'is-active' : '' }}" id="section-panel-impact">
                <div class="panel-heading" data-toggle="collapse" data-parent="#homeSectionsAccordion" href="#collapseImpact" data-section="impact">
                    <div class="panel-title">
                        <div class="section-header-left">
                            <span class="section-badge-num">4</span>
                            <div>
                                <div class="section-title-text">Our Impact</div>
                                <div class="section-subtitle">Section copy, subtitle & background styling</div>
                            </div>
                        </div>
                        <i class="voyager-angle-down section-chevron"></i>
                    </div>
                </div>
                <div id="collapseImpact" class="panel-collapse collapse {{ $activeSection === 'impact' ? 'in' : '' }}">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="form-group">
                                    <label>Eyebrow</label>
                                    <input type="text" class="form-control" name="values[impact_eyebrow]" value="{{ $home['impact_eyebrow'] ?? 'Our Impact' }}">
                                </div>
                                <div class="form-group">
                                    <label>Heading</label>
                                    <input type="text" class="form-control" name="values[impact_title]" value="{{ $home['impact_title'] ?? 'Numbers that matter' }}">
                                </div>
                                <div class="form-group">
                                    <label>Sub-heading / Description</label>
                                    <input type="text" class="form-control" name="values[impact_sub]" value="{{ $home['impact_sub'] ?? 'Real outcomes for people, forests, and climate.' }}">
                                </div>
                            </div>
                            <div class="col-md-5">
                                @include('voyager.home-contents.partials.bg-styling', [
                                    'prefix' => 'impact',
                                    'defaultType' => 'color',
                                    'defaultColor' => '#ffffff',
                                    'breadLink' => route('voyager.impacts.index'),
                                    'breadLabel' => 'Impact Numbers BREAD (' . count($impacts) . ')'
                                ])
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- ==========================================
                 5. HOW WE WORK
                 ========================================== -->
            <div class="panel panel-default panel-home-section {{ $activeSection === 'how-we-work' ? 'is-active' : '' }}" id="section-panel-how-we-work">
                <div class="panel-heading" data-toggle="collapse" data-parent="#homeSectionsAccordion" href="#collapsePrinciples" data-section="how-we-work">
                    <div class="panel-title">
                        <div class="section-header-left">
                            <span class="section-badge-num">5</span>
                            <div>
                                <div class="section-title-text">How We Work</div>
                                <div class="section-subtitle">Methodology copy, CTA link & background styling</div>
                            </div>
                        </div>
                        <i class="voyager-angle-down section-chevron"></i>
                    </div>
                </div>
                <div id="collapsePrinciples" class="panel-collapse collapse {{ $activeSection === 'how-we-work' ? 'in' : '' }}">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="form-group">
                                    <label>Eyebrow</label>
                                    <input type="text" class="form-control" name="values[approach_eyebrow]" value="{{ $home['approach_eyebrow'] ?? 'How We Work' }}">
                                </div>
                                <div class="form-group">
                                    <label>Heading</label>
                                    <input type="text" class="form-control" name="values[approach_title]" value="{{ $home['approach_title'] ?? 'Our Approach' }}">
                                </div>
                                <div class="form-group">
                                    <label>Intro Paragraph</label>
                                    <textarea name="values[approach_intro]" class="form-control" rows="4">{{ $home['approach_intro'] ?? 'The evidence is unambiguous: nature-based solutions succeed...' }}</textarea>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>CTA Button Label</label>
                                            <input type="text" class="form-control" name="values[approach_cta_label]" value="{{ $home['approach_cta_label'] ?? 'Learn More About Our Approach' }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>CTA Button URL</label>
                                            <input type="text" class="form-control" name="values[approach_cta_url]" value="{{ $home['approach_cta_url'] ?? '/approach' }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-5">
                                @include('voyager.home-contents.partials.bg-styling', [
                                    'prefix' => 'approach',
                                    'defaultType' => 'color',
                                    'defaultColor' => '#fbfaf6',
                                    'breadLink' => route('voyager.how-we-work-items.index'),
                                    'breadLabel' => 'Principles BREAD (' . count($howWeWorkItems) . ')'
                                ])
                                <div class="alert alert-info" style="margin-top: 15px; padding: 10px 14px; font-size: 12px; border-radius: 6px;">
                                    <i class="voyager-info-circled"></i> <strong>Card Layout:</strong> Shows up to 3 active principles on the homepage. 3 active cards render in a balanced 3-column row; 2 active cards render as dual cards; 1 active card renders as a full-width showcase banner.
                                </div>
                            </div>

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


            <!-- ==========================================
                 6. ORGANISATIONS SUPPORTING OUR WORK
                 ========================================== -->
            <div class="panel panel-default panel-home-section {{ $activeSection === 'partners' ? 'is-active' : '' }}" id="section-panel-partners">
                <div class="panel-heading" data-toggle="collapse" data-parent="#homeSectionsAccordion" href="#collapsePartners" data-section="partners">
                    <div class="panel-title">
                        <div class="section-header-left">
                            <span class="section-badge-num">6</span>
                            <div>
                                <div class="section-title-text">Organisations Supporting Our Work</div>
                                <div class="section-subtitle">Partner marquee heading, CTA link & background styling</div>
                            </div>
                        </div>
                        <i class="voyager-angle-down section-chevron"></i>
                    </div>
                </div>
                <div id="collapsePartners" class="panel-collapse collapse {{ $activeSection === 'partners' ? 'in' : '' }}">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="form-group">
                                    <label>Eyebrow</label>
                                    <input type="text" class="form-control" name="values[partners_eyebrow]" value="{{ $home['partners_eyebrow'] ?? 'Organisations Supporting Our Work' }}">
                                </div>
                                <div class="form-group">
                                    <label>Heading</label>
                                    <input type="text" class="form-control" name="values[partners_title]" value="{{ $home['partners_title'] ?? 'Backed by partners who share our vision' }}">
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>CTA Button Label</label>
                                            <input type="text" class="form-control" name="values[partners_cta_label]" value="{{ $home['partners_cta_label'] ?? 'Meet Our Partners' }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>CTA Button Link</label>
                                            <input type="text" class="form-control" name="values[partners_cta_url]" value="{{ $home['partners_cta_url'] ?? '/our-partners' }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-5">
                                @include('voyager.home-contents.partials.bg-styling', [
                                    'prefix' => 'partners',
                                    'defaultType' => 'color',
                                    'defaultColor' => '#ffffff',
                                    'breadLink' => route('voyager.partners.index'),
                                    'breadLabel' => 'Partners BREAD (' . count($partners) . ')'
                                ])
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- ==========================================
                 7. OPEN SOURCE TECHNOLOGY
                 ========================================== -->
            <div class="panel panel-default panel-home-section {{ $activeSection === 'technology' ? 'is-active' : '' }}" id="section-panel-technology">
                <div class="panel-heading" data-toggle="collapse" data-parent="#homeSectionsAccordion" href="#collapseTech" data-section="technology">
                    <div class="panel-title">
                        <div class="section-header-left">
                            <span class="section-badge-num">7</span>
                            <div>
                                <div class="section-title-text">Open Source Technology</div>
                                <div class="section-subtitle">Headings, tech stack body description, action buttons, diagram tags & background styling</div>
                            </div>
                        </div>
                        <i class="voyager-angle-down section-chevron"></i>
                    </div>
                </div>
                <div id="collapseTech" class="panel-collapse collapse {{ $activeSection === 'technology' ? 'in' : '' }}">
                    <div class="panel-body">
                        <div class="row">
                            <!-- Left: Content & Buttons -->
                            <div class="col-md-7">
                                <div class="form-group">
                                    <label>Eyebrow</label>
                                    <input type="text" class="form-control" name="values[tech_eyebrow]" value="{{ $home['tech_eyebrow'] ?? 'Open-Source Technology' }}">
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Heading Line 1</label>
                                            <input type="text" class="form-control" name="values[tech_title_line1]" value="{{ $home['tech_title_line1'] ?? 'Built to verify.' }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Heading Line 2</label>
                                            <input type="text" class="form-control" name="values[tech_title_line2]" value="{{ $home['tech_title_line2'] ?? 'Built to scale.' }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Body Description</label>
                                    <textarea name="values[tech_body]" class="form-control" rows="4">{{ $home['tech_body'] ?? 'Manual tree counts were slow, and satellite data lacked the resolution we needed — so we built our own. Project Anāhitā is our open-source tech stack for farmer engagement, field operations, and AI-powered tree monitoring.' }}</textarea>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Primary Button Label</label>
                                            <input type="text" class="form-control" name="values[tech_cta_primary_label]" value="{{ $home['tech_cta_primary_label'] ?? 'Explore TreeLens' }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Primary Button URL</label>
                                            <input type="text" class="form-control" name="values[tech_cta_primary_url]" value="{{ $home['tech_cta_primary_url'] ?? 'https://farmersforforests.com/tree-lens/' }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Secondary Button Label</label>
                                            <input type="text" class="form-control" name="values[tech_cta_secondary_label]" value="{{ $home['tech_cta_secondary_label'] ?? 'Open Source' }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Secondary Button URL</label>
                                            <input type="text" class="form-control" name="values[tech_cta_secondary_url]" value="{{ $home['tech_cta_secondary_url'] ?? 'https://github.com/Farmers-For-Forests' }}">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Right: Diagram Tags & Background -->
                            <div class="col-md-5">
                                <div class="form-section-group" style="margin-bottom: 16px;">
                                    <div class="form-section-title"><i class="voyager-tag"></i> 4 Diagram Floating Tags</div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Tag 1 (Top)</label>
                                                <input type="text" class="form-control" name="values[tech_tag_1]" value="{{ $home['tech_tag_1'] ?? 'TreeLens' }}">
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Tag 2 (Right)</label>
                                                <input type="text" class="form-control" name="values[tech_tag_2]" value="{{ $home['tech_tag_2'] ?? 'FieldHQ' }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Tag 3 (Bottom)</label>
                                                <input type="text" class="form-control" name="values[tech_tag_3]" value="{{ $home['tech_tag_3'] ?? 'Impact Dashboard' }}">
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Tag 4 (Left)</label>
                                                <input type="text" class="form-control" name="values[tech_tag_4]" value="{{ $home['tech_tag_4'] ?? 'Chutki AI' }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                @include('voyager.home-contents.partials.bg-styling', [
                                    'prefix' => 'tech',
                                    'defaultType' => 'color',
                                    'defaultColor' => '#0c3540'
                                ])
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- ==========================================
                 8. OUR WORK IN ACTION (PROJECTS)
                 ========================================== -->
            <div class="panel panel-default panel-home-section {{ $activeSection === 'work-in-action' ? 'is-active' : '' }}" id="section-panel-work-in-action">
                <div class="panel-heading" data-toggle="collapse" data-parent="#homeSectionsAccordion" href="#collapseWorkInAction" data-section="work-in-action">
                    <div class="panel-title">
                        <div class="section-header-left">
                            <span class="section-badge-num">8</span>
                            <div>
                                <div class="section-title-text">Our Work in Action</div>
                                <div class="section-subtitle">Section copy, CTA button label, featured projects selector & background styling</div>
                            </div>
                        </div>
                        <i class="voyager-angle-down section-chevron"></i>
                    </div>
                </div>
                <div id="collapseWorkInAction" class="panel-collapse collapse {{ $activeSection === 'work-in-action' ? 'in' : '' }}">
                    <div class="panel-body">
                        <div class="row">
                            <!-- Left: Copy & Buttons & Background -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Eyebrow</label>
                                    <input type="text" class="form-control" name="values[projects_eyebrow]" value="{{ $home['projects_eyebrow'] ?? 'Our Work in Action' }}">
                                </div>
                                <div class="form-group">
                                    <label>Heading</label>
                                    <input type="text" class="form-control" name="values[projects_title]" value="{{ $home['projects_title'] ?? 'From degraded land to thriving agroforests' }}">
                                </div>
                                <div class="form-group">
                                    <label>Sub-heading</label>
                                    <input type="text" class="form-control" name="values[projects_sub]" value="{{ $home['projects_sub'] ?? 'See how our projects are transforming landscapes and livelihoods across India.' }}">
                                </div>
                                <div class="form-group">
                                    <label>Card Link Label</label>
                                    <input type="text" class="form-control" name="values[projects_link_label]" value="{{ $home['projects_link_label'] ?? 'View Project' }}">
                                </div>
                                <div class="form-group">
                                    <label>Button Label (Bottom CTA)</label>
                                    <input type="text" class="form-control" name="values[projects_cta_label]" value="{{ $home['projects_cta_label'] ?? 'View More Projects' }}">
                                </div>
                                <div class="form-group">
                                    <label>Button URL (Bottom CTA)</label>
                                    <input type="text" class="form-control" name="values[projects_cta_url]" value="{{ $home['projects_cta_url'] ?? route('projects') }}">
                                </div>

                                <div style="margin-top: 16px;">
                                    @include('voyager.home-contents.partials.bg-styling', [
                                        'prefix' => 'projects',
                                        'defaultType' => 'color',
                                        'defaultColor' => '#ffffff'
                                    ])
                                </div>
                            </div>

                            <!-- Right: Project Selection Checklist -->
                            <div class="col-md-6">
                                <div class="form-section-title">
                                    <span><i class="voyager-check-circle"></i> Select Featured Projects to Display (Max 3)</span>
                                    <a href="{{ route('voyager.projects.index') }}" target="_blank" class="section-bread-link">
                                        <i class="voyager-external"></i> Projects BREAD ({{ count($allProjects) }})
                                    </a>
                                </div>
                                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                                    <p class="text-muted" style="font-size: 13px; margin: 0;">
                                        Select up to <strong>3 projects</strong> to display on the homepage:
                                    </p>
                                    <span id="featured_projects_count_badge" class="badge" style="background: #22c55e; color: #fff; font-size: 12px; padding: 4px 10px; font-weight: 600;">
                                        <span id="featured_projects_count">{{ count($featuredProjectSlugs) }}</span> / 3 selected
                                    </span>
                                </div>
                                <div id="featured_projects_layout_hint" style="font-size: 12px; color: #64748b; margin-bottom: 10px; font-style: italic;"></div>
                                <div class="project-picker-list">
                                    @forelse($allProjects as $project)
                                        @php
                                            $checked = in_array($project->slug, $featuredProjectSlugs);
                                        @endphp
                                        <label class="project-picker-item">
                                            <input type="checkbox" name="featured_projects[]" value="{{ $project->slug }}" {{ $checked ? 'checked' : '' }}>
                                            @if($project->project_image)
                                                <img src="{{ $project->image_url }}" class="project-picker-thumb" alt="{{ $project->project_name }}">
                                            @else
                                                <span class="project-picker-thumb" style="display:inline-flex; align-items:center; justify-content:center; background:#e2e8f0;"><i class="voyager-leaf" style="color:#64748b;"></i></span>
                                            @endif
                                            <div style="flex: 1; min-width: 0;">
                                                <div style="font-size: 14px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                                    {{ $project->project_name ?: ($project->name ?: $project->slug) }}
                                                </div>
                                                <small class="text-muted">{{ $project->program->name ?? ($project->location ?: 'Featured Project') }}</small>
                                            </div>
                                        </label>
                                    @empty
                                        <div class="text-center text-muted" style="padding: 20px;">No projects found in database.</div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- ==========================================
                 9. STAY CONNECTED (NEWS & FIELD)
                 ========================================== -->
            <div class="panel panel-default panel-home-section {{ $activeSection === 'stay-connected' ? 'is-active' : '' }}" id="section-panel-stay-connected">
                <div class="panel-heading" data-toggle="collapse" data-parent="#homeSectionsAccordion" href="#collapseNews" data-section="stay-connected">
                    <div class="panel-title">
                        <div class="section-header-left">
                            <span class="section-badge-num">9</span>
                            <div>
                                <div class="section-title-text">Stay Connected</div>
                                <div class="section-subtitle">Section copy & background styling</div>
                            </div>
                        </div>
                        <i class="voyager-angle-down section-chevron"></i>
                    </div>
                </div>
                <div id="collapseNews" class="panel-collapse collapse {{ $activeSection === 'stay-connected' ? 'in' : '' }}">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="form-section-group">
                                    <div class="form-section-title"><i class="voyager-news"></i> News Header & Links</div>
                                    <div class="form-group">
                                        <label>Eyebrow</label>
                                        <input type="text" class="form-control" name="values[field_eyebrow]" value="{{ $home['field_eyebrow'] ?? 'Stay Connected' }}">
                                    </div>
                                    <div class="form-group">
                                        <label>Heading</label>
                                        <input type="text" class="form-control" name="values[field_title]" value="{{ $home['field_title'] ?? 'From the Field' }}">
                                    </div>
                                    <div class="form-group">
                                        <label>Sub-heading</label>
                                        <input type="text" class="form-control" name="values[field_sub]" value="{{ $home['field_sub'] ?? 'Stories, dispatches, and updates from our work on the ground.' }}">
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>View All Button Label</label>
                                                <input type="text" class="form-control" name="values[field_viewall_label]" value="{{ $home['field_viewall_label'] ?? 'View All Updates' }}">
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>View All Button URL</label>
                                                <input type="text" class="form-control" name="values[field_viewall_url]" value="{{ $home['field_viewall_url'] ?? '/news' }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-5">
                                @include('voyager.home-contents.partials.bg-styling', [
                                    'prefix' => 'field',
                                    'defaultType' => 'color',
                                    'defaultColor' => '#ffffff',
                                    'breadLink' => route('voyager.news.index'),
                                    'breadLabel' => 'News BREAD Manager'
                                ])
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div><!-- /.panel-group -->

        <!-- Sticky Bottom Save Bar -->
        <div class="save-bar-fixed">
            <div class="text-muted" style="font-size: 13px;">
                <i class="voyager-info-circled" style="color: #2563eb;"></i> Changes affect live homepage content immediately after saving.
            </div>
            <div>
                <button type="reset" class="btn btn-default" style="margin-right: 8px;">Reset Changes</button>
                <button type="submit" class="btn btn-primary" style="font-weight: 600; padding: 8px 24px;">
                    <i class="voyager-check"></i> Save Changes
                </button>
            </div>
        </div>
    </form>
</div>
@stop

@section('javascript')
<script>
    $(document).ready(function() {
        // 1. Accordion & Section URL Routing via pushState
        $('.panel-home-section > .panel-heading').on('click', function() {
            const section = $(this).data('section');
            if (section) {
                $('#activeSectionInput').val(section);
                if (window.history.pushState) {
                    const newUrl = '{{ url("admin/home-contents") }}/' + section;
                    window.history.pushState({ section: section }, '', newUrl);
                }
            }
        });

        $('#homeSectionsAccordion').on('shown.bs.collapse', function (e) {
            $(e.target).closest('.panel-home-section').addClass('is-active');
        });

        $('#homeSectionsAccordion').on('hidden.bs.collapse', function (e) {
            $(e.target).closest('.panel-home-section').removeClass('is-active');
        });

        // 2. Open section from URL if present
        const pathSegments = window.location.pathname.split('/');
        const lastSegment = pathSegments[pathSegments.length - 1];
        if (lastSegment && lastSegment !== 'home-contents') {
            const $targetPanel = $('#section-panel-' + lastSegment);
            if ($targetPanel.length) {
                $('.panel-home-section').removeClass('is-active');
                $('.panel-collapse').removeClass('in');
                $targetPanel.addClass('is-active');
                $targetPanel.find('.panel-collapse').addClass('in');
                $('#activeSectionInput').val(lastSegment);
            }
        }

        // 3. Dynamic background media type switcher
        $(document).on('change', '.bg-type-select', function() {
            const target = $(this).data('target');
            const type = $(this).val();

            if (target === 'hero') {
                $('.bg-group-hero-video').toggle(type === 'video');
                $('.bg-group-hero-image').toggle(type === 'image');
                $('.bg-group-hero-color').toggle(type === 'color');
            } else {
                $('.bg-group-' + target + '-color').toggle(type === 'color');
                $('.bg-group-' + target + '-image').toggle(type === 'image');
            }
        });

        // 4. Live image preview on file input selection
        $(document).on('change', '.bg-file-input', function(e) {
            const file = e.target.files && e.target.files[0];
            const previewSel = $(this).data('preview');
            const pathSel = $(this).data('path');
            const placeholderSel = $(this).data('placeholder');

            if (file) {
                if (previewSel) {
                    const reader = new FileReader();
                    reader.onload = function(evt) {
                        $(previewSel).attr('src', evt.target.result).show();
                        if (placeholderSel) {
                            $(placeholderSel).hide();
                        }
                    };
                    reader.readAsDataURL(file);
                }
                if (pathSel) {
                    $(pathSel).val('Pending upload: ' + file.name);
                }
            }
        });

        // 5. Hero video live preview on file input
        $('#input_hero_video_file').on('change', function(e) {
            const file = e.target.files && e.target.files[0];
            if (file) {
                const blobUrl = URL.createObjectURL(file);
                const $video = $('#hero_preview_video');
                $video.attr('src', blobUrl);
                if ($video[0]) {
                    $video[0].load();
                }
            }
        });

        // 6. Hero video live preview on URL input change
        $('#input_hero_video_url').on('change blur', function() {
            const url = $(this).val();
            if (url) {
                const fullUrl = (url.startsWith('http') || url.startsWith('/')) ? url : ('{{ asset("") }}' + url);
                const $video = $('#hero_preview_video');
                $video.attr('src', fullUrl);
                if ($video[0]) {
                    $video[0].load();
                }
            }
        });

        // 7. Enforce max 3 featured projects selection
        const MAX_FEATURED_PROJECTS = 3;
        function updateFeaturedProjectsState() {
            const checkedCount = $('input[name="featured_projects[]"]:checked').length;
            $('#featured_projects_count').text(checkedCount);

            const $badge = $('#featured_projects_count_badge');
            const $hint = $('#featured_projects_layout_hint');

            if (checkedCount === 3) {
                $badge.css('background', '#22c55e');
                $hint.text('✓ 3 projects selected: Section will display as a balanced 3-column row (matching How We Work).');
            } else if (checkedCount === 2) {
                $badge.css('background', '#3b82f6');
                $hint.text('✓ 2 projects selected: Section will display as a centered 2-column layout.');
            } else if (checkedCount === 1) {
                $badge.css('background', '#f59e0b');
                $hint.text('✓ 1 project selected: Section will display as a single centered featured card.');
            } else {
                $badge.css('background', '#ef4444');
                $hint.text('⚠ No projects selected: System will fallback to the top active projects.');
            }
        }

        $(document).on('change', 'input[name="featured_projects[]"]', function(e) {
            const checkedCount = $('input[name="featured_projects[]"]:checked').length;
            if (checkedCount > MAX_FEATURED_PROJECTS) {
                this.checked = false;
                if (typeof toastr !== 'undefined') {
                    toastr.warning('You can select a maximum of ' + MAX_FEATURED_PROJECTS + ' projects to display on the homepage.');
                } else {
                    alert('You can select a maximum of ' + MAX_FEATURED_PROJECTS + ' projects to display on the homepage.');
                }
            }
            updateFeaturedProjectsState();
        });

        updateFeaturedProjectsState();
    });
</script>
@stop