@extends('layouts.app')

@section('title', 'Settings — Edit Content Page')
@section('page-title', 'Edit Content Page')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tinymce@5.10.9/skins/ui/oxide/skin.min.css">
@endpush

@section('content')

<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h4 class="fw-bold mb-0">Edit Content Page</h4>
        <div class="text-muted small">/pages/{{ $page->slug }}</div>
    </div>
    <a href="{{ route('admin.settings.content-pages.index') }}" class="btn btn-light">
        <i class="bi bi-arrow-left me-1"></i> Back to list
    </a>
</div>

@if(!empty($page->featured_image))
<form id="remove-image-form" method="POST" action="{{ route('admin.settings.content-pages.featured-image.remove', $page) }}"
      data-confirm="Remove the featured image?">
    @csrf @method('DELETE')
</form>
@endif

<div class="card border-0 shadow-sm mb-4">
    <div class="card-body p-4">
        <form action="{{ route('admin.settings.content-pages.update', $page) }}" method="POST" enctype="multipart/form-data">
            @csrf @method('PATCH')

            <div class="mb-3">
                <label class="form-label fw-medium">Title <span class="text-danger">*</span></label>
                <input type="text" name="title" id="title-input" class="form-control @error('title') is-invalid @enderror"
                       value="{{ old('title', $page->title) }}" required maxlength="200">
                @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="mb-3">
                <label class="form-label fw-medium">Slug <span class="text-danger">*</span></label>
                <div class="input-group">
                    <span class="input-group-text">/pages/</span>
                    <input type="text" name="slug" id="slug-input" class="form-control @error('slug') is-invalid @enderror"
                           value="{{ old('slug', $page->slug) }}" required maxlength="200">
                    @error('slug')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label fw-medium">Body</label>
                <textarea name="body" id="body-editor" class="form-control wysiwyg-editor">{{ old('body', $page->body) }}</textarea>
                @error('body')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
            </div>

            <div class="mb-3">
                <label class="form-label fw-medium">Footer SEO Content</label>
                <textarea name="footer_seo_content" class="form-control @error('footer_seo_content') is-invalid @enderror"
                          rows="4">{{ old('footer_seo_content', $page->footer_seo_content) }}</textarea>
                @error('footer_seo_content')<div class="invalid-feedback">{{ $message }}</div>@enderror
                <div class="form-text text-muted">
                    Plain text (no rich formatting) — rendered above the footer on this page only, with line
                    breaks preserved. Left blank, this section doesn't show at all.
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-medium">SEO Title</label>
                    <input type="text" name="seo_title" class="form-control @error('seo_title') is-invalid @enderror"
                           value="{{ old('seo_title', $page->seo_title) }}" maxlength="255">
                    @error('seo_title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-medium">SEO Description</label>
                    <input type="text" name="seo_description" class="form-control @error('seo_description') is-invalid @enderror"
                           value="{{ old('seo_description', $page->seo_description) }}" maxlength="255">
                    @error('seo_description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>

            <div class="mb-4">
                <label class="form-label fw-medium">Featured Image</label>
                <div class="d-flex align-items-center gap-3 mb-2">
                    @if(!empty($page->featured_image))
                        <img src="{{ asset('storage/' . $page->featured_image) }}" alt="{{ $page->title }}"
                             style="max-height:64px;max-width:200px;object-fit:contain;border:1px solid #dee2e6;border-radius:6px;padding:6px;background:#fff">
                        <button type="submit" form="remove-image-form" class="btn btn-sm btn-outline-danger">
                            <i class="bi bi-trash me-1"></i> Remove
                        </button>
                    @else
                        <div class="d-flex align-items-center justify-content-center bg-light rounded" style="width:80px;height:64px;border:1px solid #dee2e6">
                            <i class="bi bi-image text-muted fs-4"></i>
                        </div>
                    @endif
                </div>
                <input type="file" name="featured_image" class="form-control @error('featured_image') is-invalid @enderror"
                       accept="image/jpeg,image/jpg,image/png,image/webp">
                @error('featured_image')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="mb-4">
                @include('settings.content-pages._properties-picker')
            </div>

            <button type="submit" class="btn btn-primary">
                <i class="bi bi-check-lg me-1"></i> Save Changes
            </button>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tinymce@5.10.9/tinymce.min.js"></script>
<script>
(function () {
    var titleInput = document.getElementById('title-input');
    var slugInput  = document.getElementById('slug-input');
    var slugEdited = true; // editing an existing page — never auto-overwrite an existing slug

    slugInput.addEventListener('input', function () { slugEdited = true; });

    tinymce.init({
        selector: '.wysiwyg-editor',
        base_url: 'https://cdn.jsdelivr.net/npm/tinymce@5.10.9',
        suffix: '.min',
        height: 400,
        menubar: false,
        branding: false,
        plugins: 'advlist autolink lists link charmap searchreplace code table paste wordcount image',
        toolbar: 'undo redo | formatselect | bold italic underline strikethrough | ' +
            'forecolor backcolor | alignleft aligncenter alignright | ' +
            'bullist numlist | link image table | code | removeformat',
        content_style: 'body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; }',
        setup: function (editor) {
            editor.on('change input undo redo', function () { editor.save(); });
        }
    });
}());
</script>
@endpush