@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-intro">Intro</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-cards">Service Cards</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sec-cta">CTA</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-intro">
                  <div class="mb-3"><label class="form-label">Title</label><input type="text" name="sections[intro][title]" class="form-control" value="{{ $s['intro']['title'] ?? '' }}"></div>
                  <div class="mb-0"><label class="form-label">Text</label><textarea name="sections[intro][text]" class="form-control" rows="5">{{ $s['intro']['text'] ?? '' }}</textarea></div>
                </div>

                <div class="tab-pane" id="sec-cards">
                  <p class="text-muted small mb-3">Leave Title empty to remove a card. Extra empty rows can be filled to add cards.</p>
                  @php
                    $cards = $s['cards'] ?? [];
                    while (count($cards) < count($s['cards'] ?? []) + 2) {
                        $cards[] = ['icon' => 'fas fa-circle', 'title' => '', 'text' => ''];
                    }
                    if (count($cards) < 10) {
                        while (count($cards) < 10) {
                            $cards[] = ['icon' => 'fas fa-circle', 'title' => '', 'text' => ''];
                        }
                    }
                  @endphp
                  @foreach($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-4"><input type="text" name="sections[cards][{{ $i }}][icon]" class="form-control" value="{{ $card['icon'] ?? '' }}" placeholder="Icon class"></div>
                        <div class="col-md-8"><input type="text" name="sections[cards][{{ $i }}][title]" class="form-control" value="{{ $card['title'] ?? '' }}" placeholder="Title"></div>
                        <div class="col-12"><textarea name="sections[cards][{{ $i }}][text]" class="form-control" rows="2" placeholder="Description">{{ $card['text'] ?? '' }}</textarea></div>
                      </div>
                    </div>
                  @endforeach
                </div>

                <div class="tab-pane" id="sec-cta">
                  @php $cta = $s['cta'] ?? []; @endphp
                  <div class="mb-3"><label class="form-label">Title</label><input type="text" name="sections[cta][title]" class="form-control" value="{{ $cta['title'] ?? '' }}"></div>
                  <div class="mb-3"><label class="form-label">Text</label><textarea name="sections[cta][text]" class="form-control" rows="2">{{ $cta['text'] ?? '' }}</textarea></div>
                  <div class="row">
                    <div class="col-md-6 mb-3"><label class="form-label">Primary label</label><input type="text" name="sections[cta][primary_label]" class="form-control" value="{{ $cta['primary_label'] ?? '' }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Primary URL</label><input type="text" name="sections[cta][primary_url]" class="form-control" value="{{ $cta['primary_url'] ?? '' }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Secondary label</label><input type="text" name="sections[cta][secondary_label]" class="form-control" value="{{ $cta['secondary_label'] ?? '' }}"></div>
                    <div class="col-md-6 mb-3"><label class="form-label">Secondary URL</label><input type="text" name="sections[cta][secondary_url]" class="form-control" value="{{ $cta['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