@extends('backend.layouts.master')
@section('title', 'Edit About Us — 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">About Us — 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">About Us</li>
      </ol>
    </div>

    @include('backend.partials.alerts')

    <form method="POST" action="{{ route('admin.pages.update', $menu) }}" enctype="multipart/form-data" id="aboutSectionsForm">
      @csrf
      @method('PUT')
      <input type="hidden" name="page_title" value="{{ old('page_title', $page->page_title ?: 'About Us') }}">

      <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-story">Our Story</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-mvv">Mission / Vision</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-stats">Stats</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-timeline">Timeline</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-team">Team</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-why">Why Us</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="row">
                    <div class="col-md-7 mb-3"><label class="form-label">Title</label><input type="text" name="sections[hero][title]" class="form-control" value="{{ $s['hero']['title'] }}"></div>
                    <div class="col-md-5 mb-3"><label class="form-label">Title accent</label><input type="text" name="sections[hero][title_accent]" class="form-control" value="{{ $s['hero']['title_accent'] }}"></div>
                  </div>
                  <div class="mb-3"><label class="form-label">Subtitle</label><textarea name="sections[hero][subtitle]" class="form-control" rows="3">{{ $s['hero']['subtitle'] }}</textarea></div>
                  <div class="mb-0">
                    <label class="form-label">Breadcrumb / hero banner image</label>
                    @if($page->breadcrumb_image)
                      <div class="mb-2"><img src="{{ $page->breadcrumbImageUrl() }}" alt="" class="rounded" style="max-height:100px"></div>
                      <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" name="remove_breadcrumb_image" value="1" id="remove_breadcrumb_image">
                        <label class="form-check-label" for="remove_breadcrumb_image">Remove (use site default)</label>
                      </div>
                    @endif
                    <input type="file" name="breadcrumb_image_file" class="form-control" accept="image/*">
                  </div>
                </div>

                {{-- STORY --}}
                <div class="tab-pane" id="sec-story">
                  <div class="row">
                    <div class="col-md-4 mb-3"><label class="form-label">Label</label><input type="text" name="sections[story][label]" class="form-control" value="{{ $s['story']['label'] }}"></div>
                    <div class="col-md-8 mb-3"><label class="form-label">Title</label><input type="text" name="sections[story][title]" class="form-control" value="{{ $s['story']['title'] }}"></div>
                  </div>
                  <div class="row">
                    <div class="col-md-6 mb-3"><label class="form-label">Badge title</label><input type="text" name="sections[story][badge_title]" class="form-control" value="{{ $s['story']['badge_title'] }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Badge text</label><input type="text" name="sections[story][badge_text]" class="form-control" value="{{ $s['story']['badge_text'] }}"></div>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">Story image</label>
                    @if(!empty($s['story']['image']))
                      <div class="mb-2"><img src="{{ $media($s['story']['image']) }}" alt="" class="rounded" style="max-height:100px"></div>
                    @endif
                    <input type="hidden" name="sections[story][image]" value="{{ $s['story']['image'] }}">
                    <input type="file" name="story_image_file" class="form-control" accept="image/*">
                    <input type="text" name="sections[story][image_alt]" class="form-control mt-2" value="{{ $s['story']['image_alt'] }}" placeholder="Image alt text">
                  </div>
                  <label class="form-label">Paragraphs</label>
                  @foreach($s['story']['paragraphs'] as $i => $para)
                    <textarea name="sections[story][paragraphs][{{ $i }}]" class="form-control mb-2" rows="2">{{ $para }}</textarea>
                  @endforeach
                  @for($i = count($s['story']['paragraphs']); $i < count($s['story']['paragraphs']) + 1; $i++)
                    <textarea name="sections[story][paragraphs][{{ $i }}]" class="form-control mb-2" rows="2" placeholder="Extra paragraph (optional)"></textarea>
                  @endfor
                  <label class="form-label mt-2">Checklist</label>
                  @php
                    $checks = $s['story']['checklist'];
                    while (count($checks) < 8) { $checks[] = ''; }
                  @endphp
                  @foreach($checks as $i => $item)
                    <input type="text" name="sections[story][checklist][{{ $i }}]" class="form-control mb-2" value="{{ $item }}">
                  @endforeach
                  <div class="row mt-2">
                    <div class="col-md-6 mb-3"><label class="form-label">CTA label</label><input type="text" name="sections[story][cta_label]" class="form-control" value="{{ $s['story']['cta_label'] }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">CTA URL</label><input type="text" name="sections[story][cta_url]" class="form-control" value="{{ $s['story']['cta_url'] }}"></div>
                  </div>
                </div>

                {{-- MVV --}}
                <div class="tab-pane" id="sec-mvv">
                  <div class="row">
                    <div class="col-md-4 mb-3"><label class="form-label">Label</label><input type="text" name="sections[mvv][label]" class="form-control" value="{{ $s['mvv']['label'] }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Heading</label><input type="text" name="sections[mvv][heading]" class="form-control" value="{{ $s['mvv']['heading'] }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Accent</label><input type="text" name="sections[mvv][heading_accent]" class="form-control" value="{{ $s['mvv']['heading_accent'] }}"></div>
                  </div>
                  <div class="mb-3"><label class="form-label">Subtitle</label><textarea name="sections[mvv][subtitle]" class="form-control" rows="2">{{ $s['mvv']['subtitle'] }}</textarea></div>
                  @foreach($s['mvv']['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-2"><input type="text" name="sections[mvv][cards][{{ $i }}][number]" class="form-control" value="{{ $card['number'] }}" placeholder="01"></div>
                        <div class="col-md-3"><input type="text" name="sections[mvv][cards][{{ $i }}][style]" class="form-control" value="{{ $card['style'] }}" placeholder="mission|vision|values"></div>
                        <div class="col-md-3"><input type="text" name="sections[mvv][cards][{{ $i }}][icon]" class="form-control" value="{{ $card['icon'] }}"></div>
                        <div class="col-md-2"><input type="text" name="sections[mvv][cards][{{ $i }}][icon_style]" class="form-control" value="{{ $card['icon_style'] }}" placeholder="blue"></div>
                        <div class="col-md-2"><input type="text" name="sections[mvv][cards][{{ $i }}][tag_style]" class="form-control" value="{{ $card['tag_style'] }}" placeholder="tag style"></div>
                        <div class="col-md-6"><input type="text" name="sections[mvv][cards][{{ $i }}][title]" class="form-control" value="{{ $card['title'] }}" placeholder="Title"></div>
                        <div class="col-md-6"><input type="text" name="sections[mvv][cards][{{ $i }}][tag]" class="form-control" value="{{ $card['tag'] }}" placeholder="Tag"></div>
                        <div class="col-12"><textarea name="sections[mvv][cards][{{ $i }}][text]" class="form-control" rows="2">{{ $card['text'] }}</textarea></div>
                      </div>
                    </div>
                  @endforeach
                </div>

                {{-- STATS --}}
                <div class="tab-pane" id="sec-stats">
                  <div class="row">
                    <div class="col-md-4 mb-3"><label class="form-label">Badge</label><input type="text" name="sections[stats][badge]" class="form-control" value="{{ $s['stats']['badge'] }}"></div>
                    <div class="col-md-8 mb-3"><label class="form-label">Heading</label><input type="text" name="sections[stats][heading]" class="form-control" value="{{ $s['stats']['heading'] }}"></div>
                  </div>
                  @foreach($s['stats']['items'] as $i => $item)
                    <div class="border rounded p-3 mb-3">
                      <strong>Stat {{ $i + 1 }}</strong>
                      <div class="row g-2 mt-1">
                        <div class="col-md-2"><input type="text" name="sections[stats][items][{{ $i }}][count]" class="form-control" value="{{ $item['count'] }}" placeholder="5000"></div>
                        <div class="col-md-2"><input type="text" name="sections[stats][items][{{ $i }}][suffix]" class="form-control" value="{{ $item['suffix'] }}" placeholder="+"></div>
                        <div class="col-md-2"><input type="text" name="sections[stats][items][{{ $i }}][format]" class="form-control" value="{{ $item['format'] }}" placeholder="compact"></div>
                        <div class="col-md-6"><input type="text" name="sections[stats][items][{{ $i }}][label]" class="form-control" value="{{ $item['label'] }}" placeholder="Label"></div>
                        <div class="col-12"><textarea name="sections[stats][items][{{ $i }}][desc]" class="form-control" rows="2">{{ $item['desc'] }}</textarea></div>
                      </div>
                    </div>
                  @endforeach
                </div>

                {{-- TIMELINE --}}
                <div class="tab-pane" id="sec-timeline">
                  <div class="row">
                    <div class="col-md-4 mb-3"><label class="form-label">Label</label><input type="text" name="sections[timeline][label]" class="form-control" value="{{ $s['timeline']['label'] }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Heading</label><input type="text" name="sections[timeline][heading]" class="form-control" value="{{ $s['timeline']['heading'] }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Accent</label><input type="text" name="sections[timeline][heading_accent]" class="form-control" value="{{ $s['timeline']['heading_accent'] }}"></div>
                  </div>
                  @foreach($s['timeline']['items'] as $i => $item)
                    <div class="border rounded p-3 mb-3">
                      <strong>Milestone {{ $i + 1 }}</strong>
                      <div class="row g-2 mt-1">
                        <div class="col-md-2"><input type="text" name="sections[timeline][items][{{ $i }}][year]" class="form-control" value="{{ $item['year'] }}"></div>
                        <div class="col-md-4"><input type="text" name="sections[timeline][items][{{ $i }}][icon]" class="form-control" value="{{ $item['icon'] }}"></div>
                        <div class="col-md-4"><input type="text" name="sections[timeline][items][{{ $i }}][title]" class="form-control" value="{{ $item['title'] }}"></div>
                        <div class="col-md-2">
                          <div class="form-check mt-2">
                            <input type="hidden" name="sections[timeline][items][{{ $i }}][active]" value="0">
                            <input class="form-check-input" type="checkbox" name="sections[timeline][items][{{ $i }}][active]" value="1" id="tl_active_{{ $i }}" @checked(!empty($item['active']))>
                            <label class="form-check-label" for="tl_active_{{ $i }}">Active</label>
                          </div>
                        </div>
                        <div class="col-12"><textarea name="sections[timeline][items][{{ $i }}][text]" class="form-control" rows="2">{{ $item['text'] }}</textarea></div>
                      </div>
                    </div>
                  @endforeach
                </div>

                {{-- TEAM --}}
                <div class="tab-pane" id="sec-team">
                  <div class="row">
                    <div class="col-md-3 mb-3"><label class="form-label">Label</label><input type="text" name="sections[team][label]" class="form-control" value="{{ $s['team']['label'] }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Heading</label><input type="text" name="sections[team][heading]" class="form-control" value="{{ $s['team']['heading'] }}"></div>
                    <div class="col-md-5 mb-3"><label class="form-label">Accent</label><input type="text" name="sections[team][heading_accent]" class="form-control" value="{{ $s['team']['heading_accent'] }}"></div>
                  </div>
                  <div class="mb-3"><label class="form-label">Subtitle</label><textarea name="sections[team][subtitle]" class="form-control" rows="2">{{ $s['team']['subtitle'] }}</textarea></div>
                  <div class="alert alert-info mb-0">
                    Advisors are managed in <a href="{{ route('admin.team.index') }}" class="alert-link">Team</a>. Only section titles are edited here.
                  </div>
                </div>

                {{-- WHY --}}
                <div class="tab-pane" id="sec-why">
                  <div class="row">
                    <div class="col-md-4 mb-3"><label class="form-label">Label</label><input type="text" name="sections[why][label]" class="form-control" value="{{ $s['why']['label'] }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Heading</label><input type="text" name="sections[why][heading]" class="form-control" value="{{ $s['why']['heading'] }}"></div>
                    <div class="col-md-4 mb-3"><label class="form-label">Accent</label><input type="text" name="sections[why][heading_accent]" class="form-control" value="{{ $s['why']['heading_accent'] }}"></div>
                  </div>
                  @foreach($s['why']['cards'] as $i => $card)
                    <div class="border rounded p-3 mb-3">
                      <strong>USP {{ $i + 1 }}</strong>
                      <div class="row g-2 mt-1">
                        <div class="col-md-2"><input type="text" name="sections[why][cards][{{ $i }}][number]" class="form-control" value="{{ $card['number'] }}"></div>
                        <div class="col-md-3"><input type="text" name="sections[why][cards][{{ $i }}][style]" class="form-control" value="{{ $card['style'] }}" placeholder="blue|teal|violet"></div>
                        <div class="col-md-4"><input type="text" name="sections[why][cards][{{ $i }}][icon]" class="form-control" value="{{ $card['icon'] }}"></div>
                        <div class="col-md-3">
                          <div class="form-check mt-2">
                            <input type="hidden" name="sections[why][cards][{{ $i }}][featured]" value="0">
                            <input class="form-check-input" type="checkbox" name="sections[why][cards][{{ $i }}][featured]" value="1" id="why_feat_{{ $i }}" @checked(!empty($card['featured']))>
                            <label class="form-check-label" for="why_feat_{{ $i }}">Featured</label>
                          </div>
                        </div>
                        <div class="col-12"><input type="text" name="sections[why][cards][{{ $i }}][title]" class="form-control" value="{{ $card['title'] }}"></div>
                        <div class="col-12"><textarea name="sections[why][cards][{{ $i }}][text]" class="form-control" rows="2">{{ $card['text'] }}</textarea></div>
                      </div>
                    </div>
                  @endforeach
                </div>

                {{-- SEO --}}
                <div class="tab-pane" id="sec-seo">
                  <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 About Sections</button>
              <a href="{{ route('about') }}" target="_blank" class="btn btn-soft-success w-100 mt-2">View About Page</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