@extends('admin.layouts.app')

@section('title', 'Create FAQ')

@section('content')
    <div class="mb-6">
        <a href="{{ route('admin.faqs.index') }}"
            class="text-slate-400 hover:text-white flex items-center gap-2 transition-colors">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            Back to FAQs
        </a>
        <h1 class="text-2xl font-bold text-white mt-4">Create FAQ</h1>
    </div>

    <div class="max-w-4xl mx-auto pb-20">
        @if ($errors->any())
            <div class="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 rounded-xl mb-6">
                <ul class="list-disc ml-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.faqs.store') }}" method="POST" class="space-y-6">
            @csrf

            <div class="glass-card rounded-2xl p-8 space-y-6">
                <!-- Category -->
                <div>
                    <label for="faq_category_id" class="block text-sm font-medium text-slate-300 mb-2">Category</label>
                    <select name="faq_category_id" id="faq_category_id"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all"
                        required>
                        <option value="">Select Category</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ old('faq_category_id') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Question -->
                <div>
                    <label for="question" class="block text-sm font-medium text-slate-300 mb-2">Question</label>
                    <textarea name="question" id="question" rows="2" placeholder="Enter the question"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all"
                        required>{{ old('question') }}</textarea>
                </div>

                <!-- Answer -->
                <div>
                    <label for="answer" class="block text-sm font-medium text-slate-300 mb-2">Answer</label>
                    <textarea name="answer" id="answer" rows="5" placeholder="Enter the answer"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">{{ old('answer') }}</textarea>
                </div>

                <!-- Sort Order -->
                <div>
                    <label for="sort_order" class="block text-sm font-medium text-slate-300 mb-2">Sort Order</label>
                    <input type="number" name="sort_order" id="sort_order" value="{{ old('sort_order', 0) }}"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                </div>

                <!-- Status -->
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-4">Status</label>
                    <div class="flex gap-6">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="status" value="active" {{ old('status', 'active') == 'active' ? 'checked' : '' }}
                                class="w-4 h-4 bg-slate-900 border-slate-700 text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-900">
                            <span class="text-sm text-slate-300">Active</span>
                        </label>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="status" value="inactive" {{ old('status') == 'inactive' ? 'checked' : '' }}
                                class="w-4 h-4 bg-slate-900 border-slate-700 text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-900">
                            <span class="text-sm text-slate-300">Inactive</span>
                        </label>
                    </div>
                </div>

                <div class="flex items-center gap-4 pt-4">
                    <button type="submit" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-xl shadow-lg shadow-blue-500/20 transition-all">
                        Create FAQ
                    </button>
                    <button type="submit" name="save_and_new" value="1" class="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 rounded-xl shadow-lg shadow-emerald-500/20 transition-all">
                        Create & Add Another
                    </button>
                    <a href="{{ route('admin.faqs.index') }}" class="px-6 py-3 rounded-xl border border-slate-600 text-slate-300 font-bold hover:bg-slate-800 hover:text-white transition-all text-center">Cancel</a>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('styles')
    <style>
        .ck-editor__editable {
            min-height: 200px !important;
            background-color: #0f172a !important;
            color: #fff !important;
            border-color: #334155 !important;
        }
        .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
            border-color: #334155 !important;
        }
        .ck.ck-toolbar {
            background-color: #1e293b !important;
            border-color: #334155 !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: #2563eb !important;
        }
        .ck.ck-icon {
            color: #fff !important;
        }
        .ck.ck-dropdown__panel {
            background-color: #1e293b !important;
            border-color: #334155 !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

@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('#answer'), {
                    toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'],
                })
                .catch(error => {
                    console.error(error);
                });
        });
    </script>
@endpush