@push('required-styles')
    @include('admin::vendor.select2.style')
@endpush

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-body">
                <div class="row" x-data="generateSlug()" x-init="title = '{{ addslashes(old('title', $post->title ?? '')) }}';
                slug = '{{ addslashes(old('slug', $post->slug ?? '')) }}'">
                    <div class="col-12">
                        <h6 class="fw-normal">1. Basic Details</h6>
                        <hr class="mt-0">
                    </div>
                    <div class="col-md-12" x-data="generateSlug()">
                        {{-- <div class="d-flex align-items-start align-items-sm-center gap-4">
                            <img src="{{ isset($post->image) ? $post->fullImage : asset('backend/uploads/images/no-Image.jpg') }}"
                                alt="destination-image input-file" class="d-block rounded show-image" height="100"
                                width="100" />
                            <div class="button-wrapper">
                                <label for="upload" class="btn btn-primary btn-sm me-2 mb-4" tabindex="0">
                                    <span class="d-none d-sm-block">Upload</span>
                                    <i class="bx bx-upload d-block d-sm-none"></i>
                                    <input type="file" id="upload" class="input-file" name="image" hidden
                                        accept="image/png, image/jpeg" />
                                </label>
                                <button type="button" class="btn btn-label-secondary btn-sm image-reset mb-4">
                                    <i class="bx bx-reset d-block d-sm-none"></i>
                                    <span class="d-none d-sm-block">Reset</span>
                                </button>
                                <p class="mb-0">Allowed JPG, GIF or PNG. Max size of 3Mb</p>
                            </div>
                        </div>
                        <hr class="mt-2" /> --}}
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Title <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" x-model="title" x-on:input="updateSlug()" name="title"
                            value="{{ old('title', $post->title ?? '') }}" placeholder="e.g. Hair Transplant" required />
                        @error('title')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Slug <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" x-model="slug" name="slug"
                            value="{{ old('slug', $post->slug ?? '') }}" placeholder="e.g. hair-transplant" required />
                        @error('slug')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-12 mb-3">
                        <label class="form-label">Short Detail</label>
                        <textarea class="form-control" rows="3" name="short_detail" placeholder="Short detail..">{{ old('short_detail', $post->short_detail ?? '') }}</textarea>
                        @error('short_detail')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-12 mb-3">
                        <label class="form-label">Full Detail</label>
                        <textarea class="form-control" rows="7" id="advance" name="full_detail" placeholder="Full details..">{!! old('full_detail', $post->full_detail ?? '') !!}</textarea>
                        @error('full_detail')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary">
                            @if (empty($post))
                                Save
                            @else
                                Save Changes
                            @endif
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card mb-4">
            <h5 class="card-header">Additional Details</h5>
            <div class="card-body">
                <div class="col-md-12 mb-3">
                    <label class="form-label">Page</label>
                    <select id="select2Basic" class="select2 form-select" name="page_id" data-allow-clear="true">
                        <option value=""></option>
                        @foreach ($pageList ?? [] as $pageId => $pageTitle)
                            <option value="{{ $pageId }}" {{ ($post->page_id ?? '') == $pageId ? 'selected' : '' }}>
                                {{ $pageTitle }}
                            </option>
                        @endforeach
                    </select>
                    @error('page_id')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-12 mb-3">
                    <label class="form-label">Order</label>
                    <input class="form-control" type="number" name="order"
                        value="{{ old('order', $post->order ?? '') }}" placeholder="e.g. 1" />
                    @error('order')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <div class="mb-3 col-md-12">
                    <label for="sidebarFlag" class="form-label">Show on Sidebar</label>
                    <div class="position-relative">
                        <select id="sidebarFlag select2Basic" class="select2 form-select select2-hidden-accessible"
                            data-select2-id="sidebarFlag" tabindex="-1" aria-hidden="true" name="sidebar_flag">
                            <option value="11"
                                {{ old('sidebar_flag', $post->sidebar_flag ?? '') == '11' ? 'selected' : '' }}>Yes
                            </option>
                            <option value="10"
                                {{ old('sidebar_flag', $post->sidebar_flag ?? '') == '10' ? 'selected' : '' }}>No
                            </option>
                        </select>
                    </div>
                </div>
                <div class="mb-3 col-md-12">
                    <label for="language" class="form-label">Show on Navbar</label>
                    <div class="position-relative">
                        <select id="language select2Basic" class="select2 form-select select2-hidden-accessible"
                            data-select2-id="language" tabindex="-1" aria-hidden="true" name="navbar_flag">
                            <option value="11"
                                {{ old('navbar_flag', $post->navbar_flag ?? '') == '11' ? 'selected' : '' }}>Yes
                            </option>
                            <option value="10"
                                {{ old('navbar_flag', $post->navbar_flag ?? '') == '10' ? 'selected' : '' }}>No
                            </option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="card mb-4">
            <h5 class="card-header">Meta Details</h5>
            <div class="card-body">
                <div class="mb-3 col-md-12">
                    <label for="exampleFormControlTextarea1" class="form-label">Meta Title</label>
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="meta_title" placeholder="Title..">{{ old('meta_title', $post->meta_title ?? '') }}</textarea>
                </div>
                <div class="mb-3 col-md-12">
                    <label for="exampleFormControlTextarea1" class="form-label">Meta Description</label>
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="meta_description" placeholder="Description..">{{ old('meta_description', $post->meta_description ?? '') }}</textarea>
                </div>
                <div class="mb-3 col-md-12">
                    <label for="exampleFormControlTextarea1" class="form-label">Meta Keywords</label>
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="meta_keywords" placeholder="Keywords..">{{ old('meta_keywords', $post->meta_keywords ?? '') }}</textarea>
                </div>
            </div>
        </div>
    </div>
</div>

@push('required-scripts')
    @include('admin::vendor.select2.script')
    @include('admin::vendor.tinymce.script')
@endpush