@extends('layouts.admin.app')

@section('title', isset($cms) ? __('buttons.edit') . ' ' . __('pages/admin/cms.heading.singular') : __('pages/common.add_new', ['resource' => __('pages/admin/cms.heading.singular')]))

@section('content')
<div class="animate-fade-in" x-data="cmsForm({
    storeUrl: '{{ isset($cms) ? route('admin.cms.update', $cms->id) : route('admin.cms.store') }}',
    isEdit: {{ isset($cms) ? 'true' : 'false' }},
    redirectUrl: '{{ route('admin.cms.index') }}'
})">
    {{-- Breadcrumb --}}
    <div class="px-4 py-4 flex-shrink-0">
        <x-layouts.admin.breadcrumb :items="[
            ['label' => __('pages/admin/cms.title'), 'url' => route('admin.cms.index')],
            ['label' => isset($cms) ? __('buttons.edit') . ' ' . __('pages/admin/cms.heading.singular') : __('pages/common.add_new', ['resource' => __('pages/admin/cms.heading.singular')])],
        ]" />
    </div>

    <div class="p-6">
        <form id="cms-form" @submit.prevent="submitForm">
            @if(isset($cms))
            @method('PUT')
            @endif

            {{-- Two-Column Flex Layout --}}
            <div class="flex flex-col lg:flex-row gap-6 items-start">

                {{-- LEFT: Title + Content --}}
                <div class="flex-1 min-w-0 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-6 space-y-5">

                    {{-- Title --}}
                    <div>
                        <x-forms.label for="title" required>{{ __('pages/admin/cms.form.title') }}</x-forms.label>
                        <x-forms.input
                            type="text"
                            id="title"
                            name="title"
                            value="{{ old('title', $cms?->title ?? '') }}"
                            :placeholder="__('placeholders.please_enter', ['attribute' => __('pages/admin/cms.form.title')])"
                            autocomplete="off" />
                    </div>

                    {{-- Content --}}
                    <div>
                        <x-forms.label for="content" required>{{ __('pages/admin/cms.form.content') }}</x-forms.label>
                        <x-forms.tinymce id="content" name="content" :value="$cms?->content ?? ''" :placeholder="__('placeholders.please_enter', ['attribute' => __('pages/admin/cms.form.content')])" rows="10"></x-forms.tinymce>
                    </div>
                </div>

                {{-- RIGHT: Status + Meta fields --}}
                <div class="w-full lg:w-80 xl:w-96 flex-shrink-0 space-y-5">

                    {{-- Status Card --}}
                    <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 space-y-4">
                        <div>
                            <x-forms.label for="status" required>{{ __('pages/admin/cms.form.status') }}</x-forms.label>
                            <x-forms.select id="status" name="status">
                                <option value="active" {{ (isset($cms) && $cms->status === 'active') || !isset($cms) ? 'selected' : '' }}>{{ __('pages/common.status.active') }}</option>
                                <option value="inactive" {{ (isset($cms) && $cms->status === 'inactive') ? 'selected' : '' }}>{{ __('pages/common.status.inactive') }}</option>
                            </x-forms.select>
                        </div>
                    </div>

                    {{-- SEO / Meta Card --}}
                    <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 space-y-4">
                        <h2 class="text-sm font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wider border-b border-surface-100 dark:border-surface-700 pb-3">
                            SEO / Meta
                        </h2>

                        {{-- Meta Title --}}
                        <div>
                            <x-forms.label for="meta_title">{{ __('pages/admin/cms.form.meta_title') }}</x-forms.label>
                            <x-forms.input
                                type="text"
                                id="meta_title"
                                name="meta_title"
                                value="{{ old('meta_title', $cms?->meta_title ?? '') }}"
                                :placeholder="__('placeholders.please_enter', ['attribute' => __('pages/admin/cms.form.meta_title')])" />
                        </div>

                        {{-- Meta Description --}}
                        <div>
                            <x-forms.label for="meta_description">{{ __('pages/admin/cms.form.meta_description') }}</x-forms.label>
                            <x-forms.textarea
                                id="meta_description"
                                name="meta_description"
                                value="{{ old('meta_description', $cms?->meta_description ?? '') }}"
                                :placeholder="__('placeholders.please_enter', ['attribute' => __('pages/admin/cms.form.meta_description')])"
                                rows="5"></x-forms.textarea>
                        </div>

                        {{-- Meta Keywords --}}
                        <div>
                            <x-forms.label for="meta_keywords">{{ __('pages/admin/cms.form.meta_keywords') }}</x-forms.label>
                            <x-forms.textarea
                                id="meta_keywords"
                                name="meta_keywords"
                                value="{{ old('meta_keywords', $cms?->meta_keywords ?? '') }}"
                                :placeholder="__('placeholders.please_enter', ['attribute' => __('pages/admin/cms.form.meta_keywords')])"
                                rows="2"></x-forms.textarea>
                        </div>

                    </div>
                </div>
            </div>

            {{-- Form Buttons — bottom-right --}}
            <div class="mt-6 flex items-center justify-end gap-3 border-t border-surface-200 dark:border-surface-700 pt-5">
                <a href="{{ route('admin.cms.index') }}" class="inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background disabled:pointer-events-none disabled:opacity-60 bg-surface-100 dark:bg-surface-800 text-surface-900 dark:text-surface-100 hover:bg-surface-200 dark:hover:bg-surface-700">
                    {{ __('buttons.cancel') }}
                </a>
                <x-buttons.primary type="submit" x-bind:disabled="submitting">
                    <span x-show="!submitting">{{ isset($cms) ? __('buttons.save_changes') : __('buttons.save') }}</span>
                    <span x-show="submitting" class="flex items-center gap-2">
                        <x-heroicon-o-arrow-path class="w-4 h-4 animate-spin" /> {{ __('buttons.saving') }}
                    </span>
                </x-buttons.primary>
            </div>
        </form>
    </div>
</div>
@endsection

@push('before-app-js')
{!! JsValidator::formRequest('App\Http\Requests\Admin\Page\PageRequest', '#cms-form') !!}
@vite(['resources/js/admin/cms-form.js'])
@endpush