@extends('backend.layouts.master')
@section('title', 'Edit Home — Sections')
@section('content')
@php
  $s = $sections;
  $media = fn ($path) => \App\Support\BreadcrumbImage::mediaUrl($path) ?: $path;
@endphp
<div class="page-content">
  <div class="container-fluid">
    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
      <h4 class="mb-sm-0">Home — Section Content</h4>
      <ol class="breadcrumb m-0">
        <li class="breadcrumb-item"><a href="{{ route('admin.menus.index') }}">Menu CMS</a></li>
        <li class="breadcrumb-item active">Home</li>
      </ol>
    </div>

    @include('backend.partials.alerts')

    <form method="POST" action="{{ route('admin.pages.update', $menu) }}" enctype="multipart/form-data" id="homeSectionsForm">
      @csrf
      @method('PUT')

      <div class="row">
        <div class="col-xl-9">
          <div class="card">
            <div class="card-header">
              <ul class="nav nav-tabs-custom card-header-tabs border-bottom-0 flex-wrap" role="tablist">
                <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#sec-hero">Hero</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-journey">Journey</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-uni">Universities</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-elig">Eligibility</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-uk">UK Services</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-finance">Finance</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-videos">Videos</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-achieve">Achievements</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-why">Why FBA</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-process">Process</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-blog">Blog/FAQ headers</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-seo">SEO</a></li>
              </ul>
            </div>
            <div class="card-body">
              <div class="tab-content">
                {{-- HERO --}}
                <div class="tab-pane active" id="sec-hero">
                  <div class="mb-3"><label class="form-label">Title</label>
                    <input type="text" name="sections[hero][title]" class="form-control" value="{{ old('sections.hero.title', $s['hero']['title']) }}"></div>
                  <div class="mb-3"><label class="form-label">Intro text</label>
                    <textarea name="sections[hero][text]" class="form-control" rows="3">{{ old('sections.hero.text', $s['hero']['text']) }}</textarea></div>
                  <div class="row">
                    <div class="col-md-4 mb-3"><label class="form-label">Primary CTA label</label><input type="text" name="sections[hero][cta_primary_label]" class="form-control" value="{{ $s['hero']['cta_primary_label'] }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Primary CTA URL</label><input type="text" name="sections[hero][cta_primary_url]" class="form-control" value="{{ $s['hero']['cta_primary_url'] }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Intake badge</label><input type="text" name="sections[hero][intake_badge]" class="form-control" value="{{ $s['hero']['intake_badge'] }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Secondary CTA label</label><input type="text" name="sections[hero][cta_secondary_label]" class="form-control" value="{{ $s['hero']['cta_secondary_label'] }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Secondary CTA URL</label><input type="text" name="sections[hero][cta_secondary_url]" class="form-control" value="{{ $s['hero']['cta_secondary_url'] }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">WhatsApp URL</label><input type="text" name="sections[hero][cta_whatsapp_url]" class="form-control" value="{{ $s['hero']['cta_whatsapp_url'] }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">WhatsApp label</label><input type="text" name="sections[hero][cta_whatsapp_label]" class="form-control" value="{{ $s['hero']['cta_whatsapp_label'] }}"></div>
                  </div>
                  @php $heroMediaType = old('sections.hero.media_type', $s['hero']['media_type'] ?? 'video'); @endphp
                  <div class="mb-3">
                    <label class="form-label d-block">Hero media type</label>
                    <div class="btn-group" role="group" aria-label="Hero media type">
                      <input type="radio" class="btn-check" name="sections[hero][media_type]" id="hero_media_video" value="video" autocomplete="off" @checked($heroMediaType === 'video')>
                      <label class="btn btn-outline-primary" for="hero_media_video">Video</label>
                      <input type="radio" class="btn-check" name="sections[hero][media_type]" id="hero_media_image" value="image" autocomplete="off" @checked($heroMediaType === 'image')>
                      <label class="btn btn-outline-primary" for="hero_media_image">Image</label>
                    </div>
                  </div>
                  <div id="hero-video-wrap" class="mb-3" @if($heroMediaType !== 'video') style="display:none" @endif>
                    <label class="form-label">Video URL (optional)</label>
                    <input type="text" name="sections[hero][video_url]" id="hero_video_url" class="form-control mb-2" value="{{ $s['hero']['video_url'] }}" placeholder="assets/videos/hero-banner.mp4 or leave blank if uploading">
                    @if(!empty($s['hero']['video_url']))
                      <div class="mb-2 small text-muted">
                        Current:
                        <a href="{{ $media($s['hero']['video_url']) }}" target="_blank" rel="noopener">{{ basename($s['hero']['video_url']) }}</a>
                      </div>
                    @endif
                    <label class="form-label">Upload video (MP4)</label>
                    <input type="file" name="hero_video_file" id="hero_video_file" class="form-control" accept="video/mp4,.mp4">
                    <div class="form-text">MP4 only. Max 50MB. Upload replaces the video URL.</div>
                    <div class="mt-3">
                      <label class="form-label">Poster image (shown before video plays)</label>
                      @if(!empty($s['hero']['poster']))
                        <div class="mb-2"><img src="{{ $media($s['hero']['poster']) }}" alt="" style="max-height:100px" class="rounded"></div>
                      @endif
                      <input type="file" name="hero_poster_file" class="form-control" accept="image/*">
                    </div>
                  </div>
                  <div id="hero-image-wrap" class="mb-3" @if($heroMediaType !== 'image') style="display:none" @endif>
                    <label class="form-label">Hero image</label>
                    @if(!empty($s['hero']['poster']))
                      <div class="mb-2"><img src="{{ $media($s['hero']['poster']) }}" alt="" style="max-height:100px" class="rounded"></div>
                    @endif
                    <input type="file" name="hero_image_file" id="hero_image_file" class="form-control" accept="image/*">
                    <div class="form-text">JPG, PNG or WEBP. Max 5MB.</div>
                  </div>
                  <input type="hidden" name="sections[hero][poster]" value="{{ $s['hero']['poster'] }}">
                  <h6 class="mb-2">Features</h6>
                  @foreach($s['hero']['features'] as $i => $feat)
                    <div class="row g-2 mb-2">
                      <div class="col-md-4"><input type="text" name="sections[hero][features][{{ $i }}][icon]" class="form-control" value="{{ $feat['icon'] }}" placeholder="Icon class"></div>
                      <div class="col-md-8"><input type="text" name="sections[hero][features][{{ $i }}][text]" class="form-control" value="{{ $feat['text'] }}"></div>
                    </div>
                  @endforeach
                  <h6 class="mt-3 mb-2">Stats bar</h6>
                  @foreach($s['hero']['stats'] as $i => $stat)
                    <div class="row g-2 mb-2">
                      <div class="col-md-4"><input type="text" name="sections[hero][stats][{{ $i }}][icon]" class="form-control" value="{{ $stat['icon'] }}"></div>
                      <div class="col-md-8"><input type="text" name="sections[hero][stats][{{ $i }}][text]" class="form-control" value="{{ $stat['text'] }}"></div>
                    </div>
                  @endforeach
                </div>

                {{-- JOURNEY --}}
                <div class="tab-pane" id="sec-journey">
                  <div class="row">
                    <div class="col-md-6 mb-3"><label class="form-label">Heading</label><input type="text" name="sections[journey][heading]" class="form-control" value="{{ $s['journey']['heading'] }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Accent</label><input type="text" name="sections[journey][heading_accent]" class="form-control" value="{{ $s['journey']['heading_accent'] }}"></div>
                  </div>
                  <div class="mb-3"><label class="form-label">Subtitle</label><input type="text" name="sections[journey][subtitle]" class="form-control" value="{{ $s['journey']['subtitle'] }}"></div>
                  @foreach($s['journey']['cards'] as $i => $card)
                    <div class="border rounded p-3 mb-3">
                      <strong>Card {{ $i + 1 }}</strong>
                      <div class="row g-2 mt-1">
                        <div class="col-md-6"><input type="text" name="sections[journey][cards][{{ $i }}][title]" class="form-control" value="{{ $card['title'] }}" placeholder="Title"></div>
                        <div class="col-md-3"><input type="text" name="sections[journey][cards][{{ $i }}][icon]" class="form-control" value="{{ $card['icon'] }}" placeholder="Icon"></div>
                        <div class="col-md-3"><input type="text" name="sections[journey][cards][{{ $i }}][style]" class="form-control" value="{{ $card['style'] }}" placeholder="teal/blue/amber/purple"></div>
                        <div class="col-md-8"><input type="text" name="sections[journey][cards][{{ $i }}][text]" class="form-control" value="{{ $card['text'] }}" placeholder="Text"></div>
                        <div class="col-md-4"><input type="text" name="sections[journey][cards][{{ $i }}][url]" class="form-control" value="{{ $card['url'] }}" placeholder="URL"></div>
                      </div>
                    </div>
                  @endforeach
                </div>

                {{-- UNIVERSITIES --}}
                <div class="tab-pane" id="sec-uni">
                  <div class="mb-3"><label class="form-label">Badge</label><input type="text" name="sections[universities][badge]" class="form-control" value="{{ $s['universities']['badge'] }}"></div>
                  <div class="row">
                    <div class="col-md-6 mb-3"><label class="form-label">Heading</label><input type="text" name="sections[universities][heading]" class="form-control" value="{{ $s['universities']['heading'] }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Accent</label><input type="text" name="sections[universities][heading_accent]" class="form-control" value="{{ $s['universities']['heading_accent'] }}"></div>
                  </div>
                  <div class="mb-3"><label class="form-label">Subtitle</label><textarea name="sections[universities][subtitle]" class="form-control" rows="2">{{ $s['universities']['subtitle'] }}</textarea></div>
                  <div class="alert alert-info mb-0">
                    University cards are managed in <a href="{{ route('admin.course-categories.index') }}" class="alert-link">Courses → Course Categories</a>.
                    Enable <strong>Show on homepage universities</strong> on each category you want to display.
                  </div>
                </div>

                {{-- ELIGIBILITY --}}
                <div class="tab-pane" id="sec-elig">
                  <div class="mb-3"><label class="form-label">Badge</label><input type="text" name="sections[eligibility][badge]" class="form-control" value="{{ $s['eligibility']['badge'] }}"></div>
                  <div class="row">
                    <div class="col-md-6 mb-3"><label class="form-label">Heading</label><input type="text" name="sections[eligibility][heading]" class="form-control" value="{{ $s['eligibility']['heading'] }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Accent</label><input type="text" name="sections[eligibility][heading_accent]" class="form-control" value="{{ $s['eligibility']['heading_accent'] }}"></div>
                  </div>
                  <div class="mb-3"><label class="form-label">Subtitle</label><textarea name="sections[eligibility][subtitle]" class="form-control" rows="2">{{ $s['eligibility']['subtitle'] }}</textarea></div>
                  <div class="row">
                    <div class="col-md-4 mb-3"><label class="form-label">Submit button</label><input type="text" name="sections[eligibility][submit_label]" class="form-control" value="{{ $s['eligibility']['submit_label'] ?? 'Check Eligibility' }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Loading text</label><input type="text" name="sections[eligibility][loading_label]" class="form-control" value="{{ $s['eligibility']['loading_label'] ?? 'Checking...' }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Restart label</label><input type="text" name="sections[eligibility][restart_label]" class="form-control" value="{{ $s['eligibility']['restart_label'] ?? 'Check again' }}"></div>
                  </div>
                  <div class="mb-3"><label class="form-label">Validation message</label><input type="text" name="sections[eligibility][validation_message]" class="form-control" value="{{ $s['eligibility']['validation_message'] ?? '' }}"></div>
                  <div class="mb-3" style="max-width:180px;">
                    <label class="form-label">Minimum score (eligible if ≥)</label>
                    <input type="number" name="sections[eligibility][min_score]" class="form-control" min="0" value="{{ $s['eligibility']['min_score'] ?? 4 }}">
                  </div>

                  <hr class="my-4">
                  <h6 class="mb-2">Form fields &amp; options</h6>
                  <p class="text-muted small mb-3">Each option has a score. Total score is compared to the minimum above. Leave a field Name empty to remove it. Leave an option Value empty to hide that option.</p>
                  @php
                    $eligFields = $s['eligibility']['fields'] ?? [];
                    while (count($eligFields) < 6) {
                        $eligFields[] = ['name' => '', 'label' => '', 'icon' => 'fas fa-circle', 'placeholder' => 'Select', 'options' => []];
                    }
                  @endphp
                  @foreach($eligFields as $fi => $field)
                    <div class="border rounded p-3 mb-3">
                      <div class="row g-2 mb-2">
                        <div class="col-md-2"><label class="form-label small">Name (key)</label><input type="text" name="sections[eligibility][fields][{{ $fi }}][name]" class="form-control form-control-sm" value="{{ $field['name'] ?? '' }}" placeholder="age"></div>
                        <div class="col-md-3"><label class="form-label small">Label</label><input type="text" name="sections[eligibility][fields][{{ $fi }}][label]" class="form-control form-control-sm" value="{{ $field['label'] ?? '' }}"></div>
                        <div class="col-md-3"><label class="form-label small">Icon class</label><input type="text" name="sections[eligibility][fields][{{ $fi }}][icon]" class="form-control form-control-sm" value="{{ $field['icon'] ?? '' }}"></div>
                        <div class="col-md-4"><label class="form-label small">Placeholder</label><input type="text" name="sections[eligibility][fields][{{ $fi }}][placeholder]" class="form-control form-control-sm" value="{{ $field['placeholder'] ?? '' }}"></div>
                      </div>
                      <label class="form-label small">Options (value / label / score)</label>
                      @php
                        $opts = $field['options'] ?? [];
                        while (count($opts) < 8) {
                            $opts[] = ['value' => '', 'label' => '', 'score' => 0];
                        }
                      @endphp
                      @foreach($opts as $oi => $opt)
                        <div class="row g-2 mb-1">
                          <div class="col-md-3"><input type="text" name="sections[eligibility][fields][{{ $fi }}][options][{{ $oi }}][value]" class="form-control form-control-sm" value="{{ $opt['value'] ?? '' }}" placeholder="value"></div>
                          <div class="col-md-6"><input type="text" name="sections[eligibility][fields][{{ $fi }}][options][{{ $oi }}][label]" class="form-control form-control-sm" value="{{ $opt['label'] ?? '' }}" placeholder="label"></div>
                          <div class="col-md-3"><input type="number" name="sections[eligibility][fields][{{ $fi }}][options][{{ $oi }}][score]" class="form-control form-control-sm" value="{{ $opt['score'] ?? 0 }}" placeholder="score"></div>
                        </div>
                      @endforeach
                    </div>
                  @endforeach

                  <hr class="my-4">
                  <h6 class="mb-2">Result — Eligible</h6>
                  <p class="text-muted small">Use placeholders like <code>{course}</code> or <code>{location}</code> (field name keys) in the text.</p>
                  @php $er = $s['eligibility']['results']['eligible'] ?? []; @endphp
                  <div class="row">
                    <div class="col-md-4 mb-3"><label class="form-label">Eyebrow</label><input type="text" name="sections[eligibility][results][eligible][label]" class="form-control" value="{{ $er['label'] ?? '' }}"></div>
                    <div class="col-md-8 mb-3"><label class="form-label">Title</label><input type="text" name="sections[eligibility][results][eligible][title]" class="form-control" value="{{ $er['title'] ?? '' }}"></div>
                  </div>
                  <div class="mb-3"><label class="form-label">Body text</label><textarea name="sections[eligibility][results][eligible][text]" class="form-control" rows="2">{{ $er['text'] ?? '' }}</textarea></div>
                  <div class="row">
                    <div class="col-md-4 mb-3"><label class="form-label">Extra chip text</label><input type="text" name="sections[eligibility][results][eligible][chip_extra]" class="form-control" value="{{ $er['chip_extra'] ?? '' }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Chip icon</label><input type="text" name="sections[eligibility][results][eligible][chip_extra_icon]" class="form-control" value="{{ $er['chip_extra_icon'] ?? '' }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Chip style</label>
                      <select name="sections[eligibility][results][eligible][chip_extra_style]" class="form-select">
                        <option value="success" @selected(($er['chip_extra_style'] ?? '') === 'success')>success</option>
                        <option value="warn" @selected(($er['chip_extra_style'] ?? '') === 'warn')>warn</option>
                      </select>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-4 mb-3"><label class="form-label">Primary CTA</label><input type="text" name="sections[eligibility][results][eligible][primary_cta_label]" class="form-control" value="{{ $er['primary_cta_label'] ?? '' }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Primary URL</label><input type="text" name="sections[eligibility][results][eligible][primary_cta_url]" class="form-control" value="{{ $er['primary_cta_url'] ?? '' }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Primary icon</label><input type="text" name="sections[eligibility][results][eligible][primary_cta_icon]" class="form-control" value="{{ $er['primary_cta_icon'] ?? '' }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Secondary CTA</label><input type="text" name="sections[eligibility][results][eligible][secondary_cta_label]" class="form-control" value="{{ $er['secondary_cta_label'] ?? '' }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Secondary URL</label><input type="text" name="sections[eligibility][results][eligible][secondary_cta_url]" class="form-control" value="{{ $er['secondary_cta_url'] ?? '' }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Secondary icon</label><input type="text" name="sections[eligibility][results][eligible][secondary_cta_icon]" class="form-control" value="{{ $er['secondary_cta_icon'] ?? '' }}"></div>
                  </div>

                  <hr class="my-4">
                  <h6 class="mb-2">Result — Needs Assessment</h6>
                  @php $ar = $s['eligibility']['results']['assessment'] ?? []; @endphp
                  <div class="row">
                    <div class="col-md-4 mb-3"><label class="form-label">Eyebrow</label><input type="text" name="sections[eligibility][results][assessment][label]" class="form-control" value="{{ $ar['label'] ?? '' }}"></div>
                    <div class="col-md-8 mb-3"><label class="form-label">Title</label><input type="text" name="sections[eligibility][results][assessment][title]" class="form-control" value="{{ $ar['title'] ?? '' }}"></div>
                  </div>
                  <div class="mb-3"><label class="form-label">Body text</label><textarea name="sections[eligibility][results][assessment][text]" class="form-control" rows="2">{{ $ar['text'] ?? '' }}</textarea></div>
                  <div class="row">
                    <div class="col-md-4 mb-3"><label class="form-label">Extra chip text</label><input type="text" name="sections[eligibility][results][assessment][chip_extra]" class="form-control" value="{{ $ar['chip_extra'] ?? '' }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Chip icon</label><input type="text" name="sections[eligibility][results][assessment][chip_extra_icon]" class="form-control" value="{{ $ar['chip_extra_icon'] ?? '' }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Chip style</label>
                      <select name="sections[eligibility][results][assessment][chip_extra_style]" class="form-select">
                        <option value="success" @selected(($ar['chip_extra_style'] ?? '') === 'success')>success</option>
                        <option value="warn" @selected(($ar['chip_extra_style'] ?? '') === 'warn')>warn</option>
                      </select>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-4 mb-3"><label class="form-label">Primary CTA</label><input type="text" name="sections[eligibility][results][assessment][primary_cta_label]" class="form-control" value="{{ $ar['primary_cta_label'] ?? '' }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Primary URL</label><input type="text" name="sections[eligibility][results][assessment][primary_cta_url]" class="form-control" value="{{ $ar['primary_cta_url'] ?? '' }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Primary icon</label><input type="text" name="sections[eligibility][results][assessment][primary_cta_icon]" class="form-control" value="{{ $ar['primary_cta_icon'] ?? '' }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Secondary CTA</label><input type="text" name="sections[eligibility][results][assessment][secondary_cta_label]" class="form-control" value="{{ $ar['secondary_cta_label'] ?? '' }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Secondary URL</label><input type="text" name="sections[eligibility][results][assessment][secondary_cta_url]" class="form-control" value="{{ $ar['secondary_cta_url'] ?? '' }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Secondary icon</label><input type="text" name="sections[eligibility][results][assessment][secondary_cta_icon]" class="form-control" value="{{ $ar['secondary_cta_icon'] ?? '' }}"></div>
                  </div>

                  <div class="alert alert-info mb-0 mt-3">
                    Submissions appear under <a href="{{ route('admin.eligibility-checks.index') }}" class="alert-link">Eligibility Checks</a>.
                  </div>
                </div>

                {{-- UK SERVICES --}}
                <div class="tab-pane" id="sec-uk">
                  <div class="mb-3"><label class="form-label">Tag</label><input type="text" name="sections[uk_services][tag]" class="form-control" value="{{ $s['uk_services']['tag'] }}"></div>
                  <div class="mb-3"><label class="form-label">Orbit centre code</label><input type="text" name="sections[uk_services][hub_code]" class="form-control" value="{{ $s['uk_services']['hub_code'] ?? 'UK' }}" placeholder="UK" maxlength="4" style="max-width:120px;"></div>
                  <div class="mb-3"><label class="form-label">Title</label><input type="text" name="sections[uk_services][title]" class="form-control" value="{{ $s['uk_services']['title'] }}"></div>
                  <div class="mb-3"><label class="form-label">Text</label><textarea name="sections[uk_services][text]" class="form-control" rows="3">{{ $s['uk_services']['text'] }}</textarea></div>
                  <div class="row">
                    <div class="col-md-6 mb-3"><label class="form-label">CTA label</label><input type="text" name="sections[uk_services][cta_label]" class="form-control" value="{{ $s['uk_services']['cta_label'] }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">CTA URL</label><input type="text" name="sections[uk_services][cta_url]" class="form-control" value="{{ $s['uk_services']['cta_url'] }}"></div>
                  </div>
                  <label class="form-label">List items</label>
                  @foreach($s['uk_services']['items'] as $i => $item)
                    <input type="text" name="sections[uk_services][items][{{ $i }}]" class="form-control mb-2" value="{{ $item }}">
                  @endforeach

                  <hr class="my-4">
                  <h6 class="mb-2">Rotating orbit countries (right side)</h6>
                  <p class="text-muted small mb-3">These appear as the rotating circles. Leave Code empty to hide a row. Flag can be an emoji (🇬🇧) or leave blank to show the code.</p>
                  @php
                    $orbitCountries = $s['uk_services']['countries'] ?? [];
                    while (count($orbitCountries) < 10) {
                        $orbitCountries[] = ['code' => '', 'name' => '', 'flag' => ''];
                    }
                  @endphp
                  <div class="table-responsive">
                    <table class="table table-sm table-bordered align-middle mb-0">
                      <thead class="table-light">
                        <tr>
                          <th style="width:90px;">Code</th>
                          <th>Country name</th>
                          <th style="width:100px;">Flag</th>
                        </tr>
                      </thead>
                      <tbody>
                        @foreach($orbitCountries as $i => $c)
                          <tr>
                            <td><input type="text" name="sections[uk_services][countries][{{ $i }}][code]" class="form-control form-control-sm" value="{{ $c['code'] ?? '' }}" placeholder="GB" maxlength="4"></td>
                            <td><input type="text" name="sections[uk_services][countries][{{ $i }}][name]" class="form-control form-control-sm" value="{{ $c['name'] ?? '' }}" placeholder="United Kingdom"></td>
                            <td><input type="text" name="sections[uk_services][countries][{{ $i }}][flag]" class="form-control form-control-sm" value="{{ $c['flag'] ?? '' }}" placeholder="🇬🇧"></td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                </div>

                {{-- FINANCE --}}
                <div class="tab-pane" id="sec-finance">
                  <div class="mb-3"><label class="form-label">Label</label><input type="text" name="sections[finance][label]" class="form-control" value="{{ $s['finance']['label'] }}"></div>
                  <div class="row">
                    <div class="col-md-6 mb-3"><label class="form-label">Title</label><input type="text" name="sections[finance][title]" class="form-control" value="{{ $s['finance']['title'] }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Accent</label><input type="text" name="sections[finance][title_accent]" class="form-control" value="{{ $s['finance']['title_accent'] }}"></div>
                  </div>
                  <div class="mb-3"><label class="form-label">Lead text</label><textarea name="sections[finance][text]" class="form-control" rows="3">{{ $s['finance']['text'] }}</textarea></div>
                  <label class="form-label">Checklist</label>
                  @foreach($s['finance']['checklist'] as $i => $item)
                    <input type="text" name="sections[finance][checklist][{{ $i }}]" class="form-control mb-2" value="{{ $item }}">
                  @endforeach
                  <h6 class="mt-3">Finance cards</h6>
                  @foreach($s['finance']['cards'] as $i => $card)
                    <div class="row g-2 mb-2">
                      <div class="col-md-3"><input type="text" name="sections[finance][cards][{{ $i }}][icon]" class="form-control" value="{{ $card['icon'] }}"></div>
                      <div class="col-md-3"><input type="text" name="sections[finance][cards][{{ $i }}][title]" class="form-control" value="{{ $card['title'] }}"></div>
                      <div class="col-md-6"><input type="text" name="sections[finance][cards][{{ $i }}][text]" class="form-control" value="{{ $card['text'] }}"></div>
                    </div>
                  @endforeach
                  <h6 class="mt-3">Trust strip</h6>
                  @foreach($s['finance']['trust'] as $i => $t)
                    <div class="row g-2 mb-2">
                      <div class="col-md-4"><input type="text" name="sections[finance][trust][{{ $i }}][value]" class="form-control" value="{{ $t['value'] }}"></div>
                      <div class="col-md-8"><input type="text" name="sections[finance][trust][{{ $i }}][label]" class="form-control" value="{{ $t['label'] }}"></div>
                    </div>
                  @endforeach
                  <div class="row mt-2">
                    <div class="col-md-6 mb-3"><label class="form-label">Primary CTA</label><input type="text" name="sections[finance][cta_primary_label]" class="form-control" value="{{ $s['finance']['cta_primary_label'] }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Primary URL</label><input type="text" name="sections[finance][cta_primary_url]" class="form-control" value="{{ $s['finance']['cta_primary_url'] }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Secondary CTA</label><input type="text" name="sections[finance][cta_secondary_label]" class="form-control" value="{{ $s['finance']['cta_secondary_label'] }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Secondary URL</label><input type="text" name="sections[finance][cta_secondary_url]" class="form-control" value="{{ $s['finance']['cta_secondary_url'] }}"></div>
                  </div>
                </div>

                {{-- VIDEOS --}}
                <div class="tab-pane" id="sec-videos">
                  <div class="mb-3"><label class="form-label">Label</label><input type="text" name="sections[videos][label]" class="form-control" value="{{ $s['videos']['label'] }}"></div>
                  <div class="row">
                    <div class="col-md-6 mb-3"><label class="form-label">Heading</label><input type="text" name="sections[videos][heading]" class="form-control" value="{{ $s['videos']['heading'] }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Accent</label><input type="text" name="sections[videos][heading_accent]" class="form-control" value="{{ $s['videos']['heading_accent'] }}"></div>
                  </div>
                  <div class="mb-3"><label class="form-label">Subtitle</label><input type="text" name="sections[videos][subtitle]" class="form-control" value="{{ $s['videos']['subtitle'] }}"></div>
                  <div class="alert alert-info mb-0">
                    Student video cards are managed in <a href="{{ route('admin.testimonials.index') }}" class="alert-link">Testimonials</a>. Only section titles are edited here.
                  </div>
                </div>

                {{-- ACHIEVEMENTS --}}
                <div class="tab-pane" id="sec-achieve">
                  <div class="mb-3"><label class="form-label">Badge</label><input type="text" name="sections[achievements][badge]" class="form-control" value="{{ $s['achievements']['badge'] }}"></div>
                  <div class="mb-3"><label class="form-label">Title</label><input type="text" name="sections[achievements][title]" class="form-control" value="{{ $s['achievements']['title'] }}"></div>
                  @foreach($s['achievements']['stats'] as $i => $stat)
                    <div class="row g-2 mb-2">
                      <div class="col-md-2"><input type="text" name="sections[achievements][stats][{{ $i }}][count]" class="form-control" value="{{ $stat['count'] }}" placeholder="Count"></div>
                      <div class="col-md-2"><input type="text" name="sections[achievements][stats][{{ $i }}][suffix]" class="form-control" value="{{ $stat['suffix'] }}" placeholder="+"></div>
                      <div class="col-md-3"><input type="text" name="sections[achievements][stats][{{ $i }}][label]" class="form-control" value="{{ $stat['label'] }}"></div>
                      <div class="col-md-5"><input type="text" name="sections[achievements][stats][{{ $i }}][desc]" class="form-control" value="{{ $stat['desc'] }}"></div>
                    </div>
                  @endforeach
                </div>

                {{-- WHY FBA --}}
                <div class="tab-pane" id="sec-why">
                  <div class="row">
                    <div class="col-md-6 mb-3"><label class="form-label">Heading</label><input type="text" name="sections[why_fba][heading]" class="form-control" value="{{ $s['why_fba']['heading'] }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Accent</label><input type="text" name="sections[why_fba][heading_accent]" class="form-control" value="{{ $s['why_fba']['heading_accent'] }}"></div>
                  </div>
                  <div class="mb-3"><label class="form-label">Subtitle</label><textarea name="sections[why_fba][subtitle]" class="form-control" rows="2">{{ $s['why_fba']['subtitle'] }}</textarea></div>
                  <h6>Side stats</h6>
                  @foreach($s['why_fba']['side_stats'] as $i => $stat)
                    <div class="row g-2 mb-2">
                      <div class="col-md-3"><input type="text" name="sections[why_fba][side_stats][{{ $i }}][icon]" class="form-control" value="{{ $stat['icon'] }}"></div>
                      <div class="col-md-3"><input type="text" name="sections[why_fba][side_stats][{{ $i }}][value]" class="form-control" value="{{ $stat['value'] }}"></div>
                      <div class="col-md-3"><input type="text" name="sections[why_fba][side_stats][{{ $i }}][label]" class="form-control" value="{{ $stat['label'] }}"></div>
                      <div class="col-md-3"><input type="text" name="sections[why_fba][side_stats][{{ $i }}][color]" class="form-control" value="{{ $stat['color'] }}"></div>
                    </div>
                  @endforeach
                  <h6 class="mt-3">Cards</h6>
                  @foreach($s['why_fba']['cards'] as $i => $card)
                    <div class="row g-2 mb-2">
                      <div class="col-md-3"><input type="text" name="sections[why_fba][cards][{{ $i }}][title]" class="form-control" value="{{ $card['title'] }}"></div>
                      <div class="col-md-4"><input type="text" name="sections[why_fba][cards][{{ $i }}][text]" class="form-control" value="{{ $card['text'] }}"></div>
                      <div class="col-md-3"><input type="text" name="sections[why_fba][cards][{{ $i }}][icon]" class="form-control" value="{{ $card['icon'] }}"></div>
                      <div class="col-md-2"><input type="text" name="sections[why_fba][cards][{{ $i }}][style]" class="form-control" value="{{ $card['style'] }}"></div>
                    </div>
                  @endforeach
                </div>

                {{-- PROCESS --}}
                <div class="tab-pane" id="sec-process">
                  <div class="mb-3"><label class="form-label">Badge</label><input type="text" name="sections[process][badge]" class="form-control" value="{{ $s['process']['badge'] }}"></div>
                  <div class="row">
                    <div class="col-md-6 mb-3"><label class="form-label">Heading</label><input type="text" name="sections[process][heading]" class="form-control" value="{{ $s['process']['heading'] }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Accent</label><input type="text" name="sections[process][heading_accent]" class="form-control" value="{{ $s['process']['heading_accent'] }}"></div>
                  </div>
                  <div class="mb-3"><label class="form-label">Subtitle</label><input type="text" name="sections[process][subtitle]" class="form-control" value="{{ $s['process']['subtitle'] }}"></div>
                  @foreach($s['process']['steps'] as $i => $step)
                    <div class="row g-2 mb-2">
                      <div class="col-md-3"><input type="text" name="sections[process][steps][{{ $i }}][title]" class="form-control" value="{{ $step['title'] }}"></div>
                      <div class="col-md-5"><input type="text" name="sections[process][steps][{{ $i }}][text]" class="form-control" value="{{ $step['text'] }}"></div>
                      <div class="col-md-2"><input type="text" name="sections[process][steps][{{ $i }}][icon]" class="form-control" value="{{ $step['icon'] }}"></div>
                      <div class="col-md-2"><input type="text" name="sections[process][steps][{{ $i }}][style]" class="form-control" value="{{ $step['style'] }}"></div>
                    </div>
                  @endforeach
                </div>

                {{-- BLOG / FAQ headers --}}
                <div class="tab-pane" id="sec-blog">
                  <h6>Blog section header</h6>
                  <div class="mb-3"><label class="form-label">Label</label><input type="text" name="sections[blog][label]" class="form-control" value="{{ $s['blog']['label'] }}"></div>
                  <div class="row">
                    <div class="col-md-4 mb-3"><input type="text" name="sections[blog][heading]" class="form-control" value="{{ $s['blog']['heading'] }}" placeholder="Heading"></div>
                    <div class="col-md-4 mb-3"><input type="text" name="sections[blog][heading_accent]" class="form-control" value="{{ $s['blog']['heading_accent'] }}" placeholder="Accent"></div>
                    <div class="col-md-4 mb-3"><input type="text" name="sections[blog][cta_label]" class="form-control" value="{{ $s['blog']['cta_label'] }}" placeholder="CTA"></div>
                  </div>
                  <div class="mb-4"><textarea name="sections[blog][subtitle]" class="form-control" rows="2">{{ $s['blog']['subtitle'] }}</textarea></div>
                  <h6>FAQ section header</h6>
                  <div class="mb-3"><label class="form-label">Badge</label><input type="text" name="sections[faq][badge]" class="form-control" value="{{ $s['faq']['badge'] }}"></div>
                  <div class="row">
                    <div class="col-md-6 mb-3"><input type="text" name="sections[faq][heading]" class="form-control" value="{{ $s['faq']['heading'] }}"></div>
                    <div class="col-md-6 mb-3"><input type="text" name="sections[faq][heading_accent]" class="form-control" value="{{ $s['faq']['heading_accent'] }}"></div>
                  </div>
                  <textarea name="sections[faq][subtitle]" class="form-control" rows="2">{{ $s['faq']['subtitle'] }}</textarea>
                  <p class="text-muted small mt-2">Blog posts and FAQ answers are managed in Blog / FAQs modules.</p>
                </div>

                {{-- SEO --}}
                <div class="tab-pane" id="sec-seo">
                  <div class="mb-3"><label class="form-label">Page Title</label><input type="text" name="page_title" class="form-control" value="{{ old('page_title', $page->page_title) }}" required></div>
                  <div class="mb-3"><label class="form-label">Page Heading</label><input type="text" name="page_heading" class="form-control" value="{{ old('page_heading', $page->page_heading) }}"></div>
                  <div class="mb-3"><label class="form-label">Page Subheading</label><textarea name="page_subheading" class="form-control" rows="2">{{ old('page_subheading', $page->page_subheading) }}</textarea></div>
                  <div class="mb-3"><label class="form-label">Meta Title</label><input type="text" name="meta_title" class="form-control" value="{{ old('meta_title', $page->meta_title) }}"></div>
                  <div class="mb-3"><label class="form-label">Meta Description</label><textarea name="meta_description" class="form-control" rows="2">{{ old('meta_description', $page->meta_description) }}</textarea></div>
                  <div class="mb-3"><label class="form-label">Meta Keywords</label><input type="text" name="meta_keywords" class="form-control" value="{{ old('meta_keywords', $page->meta_keywords) }}"></div>
                  <div class="mb-3"><label class="form-label">Robots</label><input type="text" name="meta_robots" class="form-control" value="{{ old('meta_robots', $page->meta_robots) }}"></div>
                  <div class="mb-3"><label class="form-label">Canonical URL</label><input type="text" name="canonical_url" class="form-control" value="{{ old('canonical_url', $page->canonical_url) }}"></div>
                  <div class="mb-3"><label class="form-label">OG Title</label><input type="text" name="og_title" class="form-control" value="{{ old('og_title', $page->og_title) }}"></div>
                  <div class="mb-3"><label class="form-label">OG Description</label><textarea name="og_description" class="form-control" rows="2">{{ old('og_description', $page->og_description) }}</textarea></div>
                  <div class="mb-3"><label class="form-label">OG Image URL</label><input type="text" name="og_image" class="form-control" value="{{ old('og_image', $page->og_image) }}"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xl-3">
          <div class="card">
            <div class="card-header"><h5 class="mb-0">Publish</h5></div>
            <div class="card-body">
              <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" name="status" value="1" id="status" @checked(old('status', $page->status))>
                <label class="form-check-label" for="status">Published</label>
              </div>
              <button class="btn btn-primary w-100">Save Home Sections</button>
              <a href="{{ route('home') }}" target="_blank" class="btn btn-soft-success w-100 mt-2">View Homepage</a>
              <a href="{{ route('admin.menus.index') }}" class="btn btn-light w-100 mt-2">Back</a>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
  var videoWrap = document.getElementById('hero-video-wrap');
  var imageWrap = document.getElementById('hero-image-wrap');
  var videoFile = document.getElementById('hero_video_file');
  var imageFile = document.getElementById('hero_image_file');
  if (!videoWrap || !imageWrap) return;

  function syncHeroMedia() {
    var isVideo = document.getElementById('hero_media_video').checked;
    videoWrap.style.display = isVideo ? '' : 'none';
    imageWrap.style.display = isVideo ? 'none' : '';
    if (isVideo) {
      if (imageFile) imageFile.value = '';
    } else if (videoFile) {
      videoFile.value = '';
    }
  }

  document.querySelectorAll('input[name="sections[hero][media_type]"]').forEach(function (el) {
    el.addEventListener('change', syncHeroMedia);
  });
  syncHeroMedia();
})();
</script>
@endpush