<div class="row">
    <div class="bgc-white bd bdrs-3 p-20 mB-20">
        <!-- Title Field -->
        <div class="mb-3">
            <label for="title" class="form-label">Title</label>
            <input type="text" id="title" name="title" class="form-control @error('title') is-invalid @enderror" value="{{ old('title', $page->title ?? '') }}">
            @error('title')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <!-- Publish Checkbox -->
        <div class="mb-3 form-check">
            <input type="checkbox" id="is_published" name="is_published" class="form-check-input @error('is_published') is-invalid @enderror" value="1" {{ old('is_published', $page->is_published ?? 0) ? 'checked' : '' }}>
            <label for="is_published" class="form-check-label">Publish</label>
            @error('is_published')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <!-- Meta Title Field -->
        <div class="mb-3">
            <label for="meta_title" class="form-label">Meta Title</label>
            <input type="text" id="meta_title" name="meta_title" class="form-control @error('meta_title') is-invalid @enderror" value="{{ old('meta_title', $page->meta_title ?? '') }}">
            @error('meta_title')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <!-- Meta Description Field -->
        <div class="mb-3">
            <label for="meta_description" class="form-label">Meta Description</label>
            <textarea id="meta_description" name="meta_description" class="form-control @error('meta_description') is-invalid @enderror" rows="3">{{ old('meta_description', $page->meta_description ?? '') }}</textarea>
        </div>

        <!-- Content Field (with CKEditor) -->
        <div class="mb-3">
            <label for="content" class="form-label">Content</label>
            <textarea id="content" name="content" class="form-control @error('content') is-invalid @enderror">{{ old('content', $page->content ?? '') }}</textarea>
        </div>

        <!-- Action Buttons -->
        <a href="{{ route('ch-admin.pages.index') }}" class="btn btn-secondary">Cancel</a>
        <button type="submit" class="btn btn-primary">{{ $submitLabel }}</button>
    </div>
</div>


@push('head')
    <link rel="stylesheet" href="{{ url('assets/backend/css/jodit.min.css') }}">
    <script src="{{ url('assets/backend/js/vendors/jodit.min.js') }}"></script>
@endpush

@push('scripts')
    <script>
        const textAreas = ['#content'];
        textAreas.forEach((el) => {
            Jodit.make(el, {
                height: 550,
                buttons: 'bold,italic,underline,strikethrough,superscript,subscript,eraser,|,ul,ol,outdent,indent,|,paragraph,font,fontsize,lineHeight,brush,|,table,link,image,hr,symbols,|,align,|,find,|,source,preview,fullsize,|,undo,redo',
            });
        });
    </script>
@endpush
