@extends('layouts.admin.app')

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

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

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

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

                <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 flex flex-col space-y-5">

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

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

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

                <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/blog.form.status') }}</x-forms.label>
                            <x-forms.select id="status" name="status">
                                <option value="publish" {{ (isset($blog) && $blog->status === 'publish') ? 'selected' : '' }}>{{ __('buttons.publish') }}</option>
                                <option value="unpublish" {{ (isset($blog) && $blog->status === 'unpublish') ? 'selected' : '' }}>{{ __('buttons.unpublish') }}</option>
                                <option value="draft" {{ (!isset($blog) || $blog->status === 'draft') ? 'selected' : '' }}>{{ __('buttons.draft') }}</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/blog.form.meta_title') }}</x-forms.label>
                            <x-forms.input
                                type="text"
                                id="meta_title"
                                name="meta_title"
                                value="{{ old('meta_title', $blog?->meta_title ?? '') }}"
                                :placeholder="__('placeholders.please_enter', ['attribute' => __('pages/admin/blog.form.meta_title')])" />
                        </div>

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

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

                    </div>

                    {{-- Image Picker 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">
                            {{ __('pages/admin/blog.form.image') }}
                        </h2>

                        {{-- Square Image Picker --}}
                        <div class="space-y-3">
                            {{-- Preview Box (1:1 ratio) --}}
                            <div
                                class="relative w-full aspect-square rounded-xl border-2 border-dashed border-surface-300 dark:border-surface-600 overflow-hidden bg-surface-50 dark:bg-surface-900/40 transition-all duration-200 group"
                                :class="(imagePreview || existingImageUrl) ? 'border-primary-400 dark:border-primary-600' : 'border-surface-300 dark:border-surface-600 hover:border-primary-400 hover:bg-primary-50/30 dark:hover:border-primary-600 dark:hover:bg-primary-950/20'"
                                id="image-picker-box">
                                {{-- Empty State (no image selected) --}}
                                <label
                                    for="image"
                                    class="absolute inset-0 flex flex-col items-center justify-center cursor-pointer z-10 transition-opacity duration-200"
                                    :class="(imagePreview || existingImageUrl) ? 'opacity-0 pointer-events-none' : 'opacity-100'">
                                    <div class="flex flex-col items-center justify-center text-center px-4">
                                        <div class="w-14 h-14 rounded-full bg-surface-100 dark:bg-surface-800 flex items-center justify-center mb-3 group-hover:bg-primary-100 dark:group-hover:bg-primary-900/40 transition-colors duration-200">
                                            <x-heroicon-o-photo class="w-7 h-7 text-surface-400 group-hover:text-primary-500 transition-colors duration-200" />
                                        </div>
                                        <p class="text-sm font-medium text-surface-600 dark:text-surface-300">
                                            Click to upload image
                                        </p>
                                        <p class="text-xs text-surface-400 dark:text-surface-500 mt-1">
                                            Recommended: 1:1 ratio<br>PNG, JPG, GIF up to 5MB
                                        </p>
                                    </div>
                                </label>

                                {{-- Image Preview --}}
                                <template x-if="imagePreview || existingImageUrl">
                                    <div class="absolute inset-0 z-10">
                                        <img
                                            :src="imagePreview || existingImageUrl"
                                            alt="Preview"
                                            class="w-full h-full object-cover" />
                                        {{-- Overlay with actions on hover --}}
                                        <div class="absolute inset-0 bg-black/50 opacity-0 hover:opacity-100 transition-opacity duration-200 flex items-center justify-center gap-3">
                                            {{-- Change / Add New --}}
                                            <label
                                                for="image"
                                                class="cursor-pointer inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/90 hover:bg-white text-surface-700 shadow-lg transition-all duration-150 hover:scale-105"
                                                title="Change image">
                                                <x-heroicon-o-arrow-path class="w-5 h-5" />
                                            </label>
                                            {{-- Remove --}}
                                            <button
                                                type="button"
                                                @click.prevent="removeImage()"
                                                class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-red-500/90 hover:bg-red-500 text-white shadow-lg transition-all duration-150 hover:scale-105"
                                                title="Remove image">
                                                <x-heroicon-o-trash class="w-5 h-5" />
                                            </button>
                                        </div>
                                    </div>
                                </template>

                                {{-- Hidden file input --}}
                                <input
                                    id="image"
                                    name="image"
                                    type="file"
                                    accept="image/jpeg,image/png,image/jpg,image/gif,image/svg+xml"
                                    class="hidden"
                                    @change="onImageChange($event)" />
                            </div>

                            {{-- Image action strip (when image exists) --}}
                            <template x-if="imagePreview || existingImageUrl">
                                <div class="flex items-center justify-between gap-2 px-1">
                                    <p class="text-xs text-surface-500 dark:text-surface-400 truncate"></p>
                                    <div class="flex items-center gap-1.5 flex-shrink-0">
                                        <label for="image" class="cursor-pointer inline-flex items-center gap-1 text-xs text-primary-600 dark:text-primary-400 hover:text-primary-700 font-medium transition-colors">
                                            <x-heroicon-o-arrow-path class="w-3.5 h-3.5" />
                                            Change
                                        </label>
                                        <span class="text-surface-300 dark:text-surface-600">|</span>
                                        <button type="button" @click.prevent="removeImage()" class="inline-flex items-center gap-1 text-xs text-red-500 hover:text-red-600 font-medium transition-colors">
                                            <x-heroicon-o-trash class="w-3.5 h-3.5" />
                                            Remove
                                        </button>
                                    </div>
                                </div>
                            </template>

                            {{-- Removing indicator --}}
                            <template x-if="removingImage">
                                <div class="flex items-center justify-center gap-2 py-2">
                                    <x-heroicon-o-arrow-path class="w-4 h-4 animate-spin text-primary-500" />
                                    <span class="text-xs text-surface-500">Removing image…</span>
                                </div>
                            </template>

                            <x-forms.error name="image" />
                        </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.blog.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($blog) ? __('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\Blog\BlogRequest', '#blog-form') !!}
@vite(['resources/js/admin/blog-form.js'])
@endpush