@extends('backend.layouts.master')

@section('title', 'Edit Page — ' . $menu->title)

@section('content')
<div class="page-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">{{ $menu->title }} — Content &amp; SEO</h4>
                    <div class="page-title-right">
                        <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>
                </div>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

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

            <div class="row">
                <div class="col-xl-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Page Content</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Page Title <span class="text-danger">*</span></label>
                                <input type="text" name="page_title" class="form-control @error('page_title') is-invalid @enderror"
                                       value="{{ old('page_title', $page->page_title) }}" required>
                                @error('page_title') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </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">Content</label>
                                <textarea name="content" class="form-control js-ckeditor" data-height="220" rows="12" placeholder="Page body content...">{{ old('content', $page->content) }}</textarea>
                            </div>
                            <div class="form-check mb-0">
                                <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>
                        </div>
                    </div>
                </div>

                <div class="col-xl-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Breadcrumb Image</h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted small mb-2">Hero/breadcrumb banner for this page. If empty, the Site Settings default is used.</p>
                            @if($page->breadcrumb_image)
                                <div class="mb-2">
                                    <img src="{{ $page->breadcrumbImageUrl() }}" alt="Breadcrumb" class="img-fluid rounded" style="max-height:120px;">
                                </div>
                                <div class="form-check mb-3">
                                    <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 (use site default)</label>
                                </div>
                            @endif
                            <div class="mb-0">
                                <label class="form-label">Upload Breadcrumb Image</label>
                                <input type="file" name="breadcrumb_image_file" class="form-control" accept="image/*">
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">SEO Details</h5>
                        </div>
                        <div class="card-body">
                            <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="3">{{ 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-0">
                                <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 class="d-grid gap-2 mb-4">
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                        @if($menu->route_name && \Illuminate\Support\Facades\Route::has($menu->route_name))
                            <a href="{{ route($menu->route_name) }}" target="_blank" class="btn btn-soft-secondary">View Frontend Page</a>
                        @endif
                        <a href="{{ route('admin.menus.index') }}" class="btn btn-light">Back to Menus</a>
                    </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