@extends('admin.dashboard.layout', ['title' => 'Create Page'])
@section('content')
    <main class="body-wrapper">
        <x-admin.breadcrumb :items="[
            ['label' => 'Pages', 'url' => route('pages.index'), 'active' => false],
            ['label' => 'Create', 'url' => '', 'active' => true],
        ]" />
        <div class="page-wrapper">
            <form id="addCmsPageForm" autocomplete="off" method="post" action="{{ route('pages.store') }}"
                enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-8">
                        <div class="inner-wrapper py-3 mt-0 mb-3">
                            <div class="field mb-3">
                                <x-forms.label for="title" text="Title" :required="true" />
                                <input type="text" id="title" name="title" class="form-control"
                                    value="{{ old('title') }}" />
                                @error('title')
                                    <span class="server-error error">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="field mb-3">
                                <x-forms.label for="content" text="Page Content" :required="true" />
                                <div id="content-field">
                                    <textarea id="content_editor" name="content" class="form-control ckeditor" rows="5" style="display:none;">{{ old('content') }}</textarea>
                                    <input type="text" id="content_text" name="content" class="form-control"
                                        value="{{ old('content') }}" style="display:none;" />
                                </div>
                                @error('content')
                                    <span class="server-error error">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <!-- SEO Information Area -->
                        <h2 class="m-0">SEO Information</h2>
                        <div class="inner-wrapper py-3 mb-3">
                            <div class="field mb-3">
                                <x-forms.label for="seo_meta_title" text="Meta Title" :required="false" />
                                <input type="text" id="seo_meta_title" name="seo[title]" class="form-control"
                                    value="{{ old('seo.title') }}" />
                                @error('seo.title')
                                    <span class="error-message server-error error">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="field mb-3">
                                <x-forms.label for="seo_meta_description" text="Meta Description" :required="false" />
                                <input type="text" id="seo_meta_description" name="seo[description]" class="form-control"
                                    value="{{ old('seo.description') }}" />
                                @error('seo.description')
                                    <span class="error-message server-error error">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="field mb-3">
                                <label for="seo_meta_keywords">Meta Keywords :
                                    <span data-bs-toggle="tooltip" data-bs-placement="top"
                                        title="Separate keywords with ','">
                                        <span class="iconify" data-icon="material-symbols:info"></span>
                                    </span>
                                </label>
                                <input type="text" id="seo_meta_keywords" name="seo[keywords]" class="form-control"
                                    value="{{ old('seo.keywords') }}" />
                                @error('seo.keywords')
                                    <span class="error-message server-error error">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="inner-wrapper py-3">
                            <div class="field mb-3">
                                <x-forms.label for="type" text="Type" :required="true" />
                                <select id="type" name="type" class="js-select2">
                                    <option value="0" {{ old('type') == '0' ? 'selected' : '' }}>Page Content
                                    </option>
                                    <option value="1" {{ old('type') == '1' ? 'selected' : '' }}>Custom Link
                                    </option>
                                </select>
                                @error('type')
                                    <span class="server-error error">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="inner-wrapper py-3 mt-0">
                            <div class="field mb-3">
                                <x-forms.label for="status" text="Status" :required="true" />
                                <select id="status" name="status" class="js-select2">
                                    <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>
                                        Published</option>
                                    <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>Draft
                                    </option>
                                </select>
                                @error('status')
                                    <span class="server-error error">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="inner-wrapper py-3">
                            <div class="field mb-3">
                                <x-forms.label for="target" text="Target" :required="true" />
                                <select id="target" name="target" class="js-select2">
                                    <option value="_self" {{ old('target') == '_self' ? 'selected' : '' }}>Same Tab
                                    </option>
                                    <option value="_blank" {{ old('target') == '_blank' ? 'selected' : '' }}>New Tab
                                    </option>
                                </select>
                                @error('target')
                                    <span class="server-error error">{{ $message }}</span>
                                @enderror
                            </div>
                            <button type="submit" class="btn btn-secondary">Submit</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </main>
@endsection

@section('scripts')
    <script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
    <script src="{{ asset('admin/assets/js/view-scripts/cms-management/create.js') }}"></script>
@endsection