@extends('admin.layouts.app')

@section('title', 'Add New Pooja Service')

@push('styles')
    <style>
        .ck-editor__editable {
            min-height: 300px !important;
            background-color: #0f172a !important;
            color: #d1d5db !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        .ck.ck-toolbar {
            background-color: #1e293b !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        .ck.ck-toolbar__items {
            background-color: #1e293b !important;
        }

        .ck.ck-button {
            background-color: #1e293b !important;
            color: #fff !important;
        }

        .ck.ck-button:hover {
            background-color: #334155 !important;
        }

        .ck.ck-button.ck-on {
            background-color: #3b82f6 !important;
        }

        .ck.ck-icon {
            color: #fff !important;
        }

        .ck.ck-dropdown__panel {
            background-color: #1e293b !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        .ck.ck-list {
            background-color: #1e293b !important;
        }

        .ck.ck-list__item {
            color: #fff !important;
        }

        .ck.ck-list__item:hover {
            background-color: #334155 !important;
        }
    </style>
@endpush

@section('content')
    <div class="mb-6">
        <a href="{{ route('admin.pooja-services.index') }}"
            class="text-slate-400 hover:text-white flex items-center gap-2 mb-2 transition-colors">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            Back to Services
        </a>
        <h1 class="text-2xl font-bold text-white">Add New Pooja Service</h1>
        <p class="text-slate-400 text-sm mt-1">Create a new ritual or service for your clients.</p>
    </div>

    <form action="{{ route('admin.pooja-services.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Left Side: Basic Info -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Service Details -->
                <div class="glass-card p-8 rounded-2xl border border-white/5 shadow-2xl">
                    <h3 class="text-lg font-bold text-white mb-6 flex items-center gap-2">
                        <i data-lucide="info" class="w-5 h-5 text-blue-500"></i>
                        General Information
                    </h3>

                    <div class="space-y-4">
                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Service
                                Name</label>
                            <input type="text" name="name" value="{{ old('name') }}" required
                                class="w-full bg-slate-900 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-blue-500 transition-all">
                            @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label
                                class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Description</label>
                            <textarea name="description" id="description" rows="10"
                                class="w-full bg-slate-900 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-blue-500 transition-all">{{ old('description') }}</textarea>
                            @error('description') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>
                </div>

                <!-- SEO Parameters -->
                <div class="glass-card p-8 rounded-2xl border border-white/5 shadow-2xl">
                    <h3 class="text-lg font-bold text-white mb-6 flex items-center gap-2">
                        <i data-lucide="search" class="w-5 h-5 text-yellow-500"></i>
                        SEO Parameters
                    </h3>

                    <div class="space-y-4">
                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Meta
                                Title</label>
                            <input type="text" name="meta_title" value="{{ old('meta_title') }}"
                                class="w-full bg-slate-900 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-blue-500 transition-all">
                        </div>

                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Meta
                                Description</label>
                            <textarea name="meta_description" rows="3"
                                class="w-full bg-slate-900 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-blue-500 transition-all">{{ old('meta_description') }}</textarea>
                        </div>

                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">SEO Meta Image</label>
                            <div class="relative group">
                                <div id="seo-image-preview"
                                    class="w-full h-32 rounded-xl bg-slate-900 border-2 border-dashed border-white/10 flex flex-col items-center justify-center text-slate-500 overflow-hidden group-hover:border-blue-500/50 transition-all cursor-pointer"
                                    onclick="document.getElementById('seo-image-input').click()">
                                    <i data-lucide="image" class="w-6 h-6 mb-1 opacity-20"></i>
                                    <span class="text-[10px]">Click to upload SEO image</span>
                                </div>
                                <input type="file" name="seo_image" id="seo-image-input" class="hidden" accept="image/*"
                                    onchange="previewSeoImage(event)">
                            </div>
                        </div>

                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">JSON-LD
                                Schema</label>
                            <textarea name="schema" rows="5"
                                placeholder='{"@@context": "https://schema.org", "@@type": "Service", "name": "..."}'
                                class="w-full bg-slate-900 border border-white/10 rounded-xl px-4 py-3 text-white font-mono text-sm focus:ring-2 focus:ring-blue-500 transition-all">{{ old('schema') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Side: Sidebar -->
            <div class="space-y-6">
                <!-- Publish Card -->
                <div class="glass-card p-8 rounded-2xl border border-white/5 shadow-2xl">
                    <h3 class="text-lg font-bold text-white mb-6">Status</h3>

                    <div class="flex items-center justify-between p-4 bg-slate-900 rounded-xl border border-white/5 mb-6">
                        <span class="text-sm font-medium text-slate-400">Published Status</span>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="status" class="sr-only peer" checked>
                            <div
                                class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:width-5 after:transition-all peer-checked:bg-green-600">
                            </div>
                        </label>
                    </div>

                    <button type="submit"
                        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-blue-600/20">
                        Create Service
                    </button>
                </div>

                <!-- Image Card -->
                <div class="glass-card p-8 rounded-2xl border border-white/5 shadow-2xl">
                    <h3 class="text-lg font-bold text-white mb-6 flex items-center gap-2">
                        <i data-lucide="image" class="w-5 h-5 text-purple-500"></i>
                        Cover Image
                    </h3>

                    <div class="space-y-4">
                        <div class="relative group">
                            <div id="image-preview"
                                class="w-full aspect-video rounded-xl bg-slate-900 border-2 border-dashed border-white/10 flex flex-col items-center justify-center text-slate-500 overflow-hidden group-hover:border-blue-500/50 transition-all cursor-pointer"
                                onclick="document.getElementById('image-input').click()">
                                <i data-lucide="upload-cloud" class="w-10 h-10 mb-2 opacity-20"></i>
                                <span class="text-xs">Click to upload image</span>
                            </div>
                            <input type="file" name="image" id="image-input" class="hidden" accept="image/*"
                                onchange="previewImage(event)">
                        </div>
                        <p class="text-[10px] text-slate-500 leading-relaxed italic text-center">
                            Recommended size: 1200x630. Formats: WEBP, PNG, JPG.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </form>

    @push('scripts')
        <script src="https://cdn.ckeditor.com/ckeditor5/35.1.0/classic/ckeditor.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                ClassicEditor
                    .create(document.querySelector('#description'), {
                        toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'insertTable', 'undo', 'redo'],
                    })
                    .catch(error => {
                        console.error(error);
                    });
            });

            function previewImage(event) {
                const reader = new FileReader();
                reader.onload = function () {
                    const output = document.getElementById('image-preview');
                    output.innerHTML = `<img src="${reader.result}" class="w-full h-full object-cover">`;
                    output.classList.remove('border-dashed');
                    output.classList.add('border-solid');
                }
                reader.readAsDataURL(event.target.files[0]);
            }

            function previewSeoImage(event) {
                const reader = new FileReader();
                reader.onload = function () {
                    const output = document.getElementById('seo-image-preview');
                    output.innerHTML = `<img src="${reader.result}" class="w-full h-full object-cover">`;
                    output.classList.remove('border-dashed');
                    output.classList.add('border-solid');
                }
                reader.readAsDataURL(event.target.files[0]);
            }
        </script>
    @endpush
@endsection