@extends('backend.layouts.master')
@section('title', 'Edit Page — '.$menu->title)
@section('content')
@php $s = $sections; @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">{{ $menu->title }} — 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">{{ $menu->title }}</li>
      </ol>
    </div>

    @include('backend.partials.alerts')

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

      <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-body">Main Content</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-sidebar">Sidebar</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-actions">Buttons</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">
                <div class="tab-pane active" id="sec-hero">
                  <div class="mb-3"><label class="form-label">Breadcrumb label</label><input type="text" name="sections[hero][breadcrumb]" class="form-control" value="{{ $s['hero']['breadcrumb'] ?? '' }}"></div>
                  <div class="row">
                    <div class="col-md-6 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-6 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="img-fluid rounded" style="max-height:120px;"></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 image</label>
                      </div>
                    @endif
                    <input type="file" name="breadcrumb_image_file" class="form-control" accept="image/*">
                  </div>
                </div>

                <div class="tab-pane" id="sec-body">
                  <p class="text-muted small">Edit headings, paragraphs, lists and tables for the main article.</p>
                  <textarea name="sections[body_html]" class="form-control js-ckeditor" data-height="420" rows="18">{{ $s['body_html'] ?? '' }}</textarea>
                </div>

                <div class="tab-pane" id="sec-sidebar">
                  @php $sb = $s['sidebar'] ?? []; @endphp
                  <div class="mb-3"><label class="form-label">Title</label><input type="text" name="sections[sidebar][title]" class="form-control" value="{{ $sb['title'] ?? '' }}"></div>
                  <div class="mb-3"><label class="form-label">Text</label><textarea name="sections[sidebar][text]" class="form-control" rows="2">{{ $sb['text'] ?? '' }}</textarea></div>
                  <label class="form-label">List items</label>
                  @php
                    $items = $sb['items'] ?? [];
                    while (count($items) < 6) { $items[] = ''; }
                  @endphp
                  @foreach($items as $i => $item)
                    <input type="text" name="sections[sidebar][items][{{ $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[sidebar][cta_label]" class="form-control" value="{{ $sb['cta_label'] ?? '' }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">CTA URL</label><input type="text" name="sections[sidebar][cta_url]" class="form-control" value="{{ $sb['cta_url'] ?? '' }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Phone</label><input type="text" name="sections[sidebar][phone]" class="form-control" value="{{ $sb['phone'] ?? '' }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Email</label><input type="email" name="sections[sidebar][email]" class="form-control" value="{{ $sb['email'] ?? '' }}"></div>
                  </div>
                </div>

                <div class="tab-pane" id="sec-actions">
                  @php $act = $s['actions'] ?? []; @endphp
                  <div class="row">
                    <div class="col-md-6 mb-3"><label class="form-label">Primary button label</label><input type="text" name="sections[actions][primary_label]" class="form-control" value="{{ $act['primary_label'] ?? '' }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Primary button URL</label><input type="text" name="sections[actions][primary_url]" class="form-control" value="{{ $act['primary_url'] ?? '' }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Secondary button label</label><input type="text" name="sections[actions][secondary_label]" class="form-control" value="{{ $act['secondary_label'] ?? '' }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Secondary button URL</label><input type="text" name="sections[actions][secondary_url]" class="form-control" value="{{ $act['secondary_url'] ?? '' }}"></div>
                  </div>
                </div>

                <div class="tab-pane" id="sec-seo">
                  @include('backend.pages.partials.seo-fields', ['page' => $page])
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xl-3">
          <div class="card">
            <div class="card-body">
              <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" name="status" value="1" id="page_status" @checked(old('status', $page->status))>
                <label class="form-check-label" for="page_status">Published</label>
              </div>
              <button type="submit" class="btn btn-primary w-100">Save Changes</button>
              @if(!empty($previewUrl))
                <a href="{{ $previewUrl }}" target="_blank" class="btn btn-soft-success w-100 mt-2">View Page</a>
              @endif
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection
@push('scripts')
<script src="{{ asset('backend/assets/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script>
<script src="{{ asset('backend/assets/js/ckeditor-helper.js') }}"></script>
<script>
document.querySelector('form')?.addEventListener('submit', function () {
    if (window.FbaCkEditor) window.FbaCkEditor.syncAll(this);
});
</script>
@endpush