@extends('layouts.admin')

@section('title', $page->exists ? 'Edit Page' : 'Add Page')
@section('page_title', $page->exists ? 'Edit Page' : 'Add Page')

@section('content')
<div class="kt-card max-w-4xl">
    <div class="kt-card-header">
        <h3 class="kt-card-title">{{ $page->exists ? 'Edit' : 'Create' }} Page</h3>
    </div>
    <form class="kt-card-content flex flex-col gap-5" method="POST"
          action="{{ $page->exists ? route('admin.pages.update', $page) : route('admin.pages.store') }}">
        @csrf
        @if($page->exists) @method('PUT') @endif

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex flex-col gap-1">
                <label class="kt-form-label" for="page-title">Title</label>
                <input class="kt-input" id="page-title" name="title" value="{{ old('title', $page->title) }}" required maxlength="120">
                @error('title')<div class="text-xs text-destructive">{{ $message }}</div>@enderror
            </div>
            <div class="flex flex-col gap-1">
                <label class="kt-form-label" for="page-slug">Address</label>
                <input class="kt-input" id="page-slug" name="slug" value="{{ old('slug', $page->slug) }}" required maxlength="80" placeholder="privacy-policy">
                @error('slug')<div class="text-xs text-destructive">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="flex flex-col gap-1">
            <label class="kt-form-label" for="page-content">Page content</label>
            <textarea class="kt-textarea" id="page-content" name="content" rows="12">{{ old('content', $page->content) }}</textarea>
            @error('content')<div class="text-xs text-destructive">{{ $message }}</div>@enderror
        </div>

        @include('admin.partials.seo-fields', [
            'metaTitle' => old('meta_title', $page->meta_title),
            'metaDescription' => old('meta_description', $page->meta_description),
            'metaKeywords' => old('meta_keywords', $page->meta_keywords),
            'ogTitle' => old('og_title', $page->og_title),
            'ogDescription' => old('og_description', $page->og_description),
            'robots' => old('robots', $page->robots ?: 'index,follow'),
            'showSocial' => true,
        ])

        <div class="flex flex-wrap items-center justify-between gap-3 border-t border-border pt-4">
            <div class="flex flex-wrap gap-4">
                <label class="flex items-center gap-2 text-sm">
                    <input class="kt-checkbox" type="checkbox" name="show_in_footer" value="1" @checked(old('show_in_footer', $page->show_in_footer))>
                    Show in footer
                </label>
                <label class="flex items-center gap-2 text-sm">
                    <input class="kt-checkbox" type="checkbox" name="is_active" value="1" @checked($errors->any() ? old('is_active') : ($page->exists ? $page->is_active : true))>
                    Active
                </label>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('admin.pages.index') }}" class="kt-btn kt-btn-light">Cancel</a>
                <button class="kt-btn kt-btn-primary" type="submit">Save Page</button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script src="assets/vendors/tinymce/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector: '#page-content',
        license_key: 'gpl',
        base_url: @json(asset('metronic/assets/vendors/tinymce')),
        suffix: '.min',
        height: 360,
        menubar: false,
        branding: false,
        promotion: false,
        plugins: 'autolink lists link advlist wordcount',
        toolbar: 'undo redo | blocks | bold italic underline | alignleft aligncenter alignright | bullist numlist | link | removeformat',
        toolbar_mode: 'sliding',
        relative_urls: false,
        convert_urls: false,
        content_style: 'body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; line-height: 1.5; }',
    });
    const title = document.getElementById('page-title');
    const slug = document.getElementById('page-slug');
    if (title && slug && slug.value === '') {
        title.addEventListener('input', () => {
            slug.value = title.value.toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
        });
    }
</script>
@endpush