@extends('layouts.app')

@section('title', 'Settings — Add Content Page')
@section('page-title', 'Add 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">Add Content Page</h4>
        <div class="text-muted small">Fill in the page content and pick its Featured Properties, then save once.</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>

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

            <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') }}" 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') }}" required maxlength="200">
                    @error('slug')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="form-text text-muted">Auto-suggested from the title — edit freely if you need something different.</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') }}</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') }}</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') }}" 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') }}" 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>
                <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> Create Content Page
            </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 = slugInput.value.length > 0;

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

    titleInput.addEventListener('input', function () {
        if (slugEdited) return;
        slugInput.value = titleInput.value
            .toLowerCase()
            .trim()
            .replace(/[^a-z0-9]+/g, '-')
            .replace(/^-+|-+$/g, '');
    });

    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