@extends('layouts.app-admin')

@push('styles')
    <style>
        .form-card {
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
        }

        .form-label {
            font-weight: 600;
            color: #495057;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
            transform: translateY(-1px);
        }

        .preview-section {
            background-color: #f8f9fa;
            border-radius: 10px;
            border: 2px dashed #dee2e6;
        }

        .preview-question {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .preview-answer {
            color: #6c757d;
            line-height: 1.6;
        }

        .order-input {
            max-width: 100px;
        }

        .required-field::after {
            content: " *";
            color: #dc3545;
        }
    </style>
@endpush

@section('content')
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.dashboard') }}">Dashboard</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.faq.index') }}">FAQ</a>
                            </li>
                            <li class="breadcrumb-item active">Tambah Baru</li>
                        </ol>
                    </nav>
                    <div class="page-pretitle">
                        Manajemen FAQ
                    </div>
                    <h2 class="page-title">
                        <i class="ti ti-plus me-2"></i>
                        Tambah FAQ Baru
                    </h2>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <a href="{{ route('admin.faq.index') }}" class="btn btn-outline-secondary">
                        <i class="ti ti-arrow-left me-1"></i>
                        Kembali
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">
            <form action="{{ route('admin.faq.store') }}" method="POST" id="faqForm">
                @csrf
                <div class="row">
                    <div class="col-md-8">
                        <!-- Main Form -->
                        <div class="card form-card">
                            <div class="card-header">
                                <h3 class="card-title">Informasi FAQ</h3>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label class="form-label required-field">Pertanyaan</label>
                                            <textarea class="form-control @error('question') is-invalid @enderror" name="question" rows="3"
                                                placeholder="Masukkan pertanyaan FAQ..." required>{{ old('question') }}</textarea>
                                            @error('question')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-hint">Maksimal 500 karakter</small>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label class="form-label required-field">Jawaban</label>
                                            <textarea class="form-control @error('answer') is-invalid @enderror" name="answer" rows="8"
                                                placeholder="Masukkan jawaban FAQ..." required>{{ old('answer') }}</textarea>
                                            @error('answer')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-hint">
                                                Gunakan format teks biasa. Baris baru akan otomatis diubah menjadi
                                                paragraph.
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <!-- Sidebar -->
                        <div class="row">
                            <!-- Settings Card -->
                            <div class="col-12">
                                <div class="card form-card">
                                    <div class="card-header">
                                        <h3 class="card-title">Pengaturan</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label class="form-label required-field">Kategori</label>
                                            <select class="form-select @error('category') is-invalid @enderror"
                                                name="category" required>
                                                <option value="">Pilih Kategori</option>
                                                @foreach (\App\Models\Faq::getCategories() as $key => $label)
                                                    <option value="{{ $key }}"
                                                        {{ old('category') == $key ? 'selected' : '' }}>
                                                        {{ $label }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('category')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-hint">
                                                Pilih kategori yang sesuai untuk FAQ ini
                                            </small>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Status</label>
                                            <div>
                                                <label class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" name="is_active"
                                                        value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                                                    <span class="form-check-label">Aktif</span>
                                                </label>
                                            </div>
                                            <small class="form-hint">
                                                FAQ aktif akan ditampilkan di halaman publik
                                            </small>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label required-field">Urutan</label>
                                            <input type="number"
                                                class="form-control order-input @error('order') is-invalid @enderror"
                                                name="order" value="{{ old('order', $nextOrder) }}" min="0"
                                                required>
                                            @error('order')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-hint">
                                                Urutan tampilan FAQ (angka kecil tampil lebih dulu)
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Preview Card -->
                            <div class="col-12">
                                <div class="card form-card">
                                    <div class="card-header">
                                        <h3 class="card-title">Preview</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="preview-section p-3">
                                            <div class="preview-question" id="previewQuestion">
                                                Pertanyaan akan muncul di sini...
                                            </div>
                                            <div class="preview-answer" id="previewAnswer">
                                                Jawaban akan muncul di sini...
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="col-12">
                                <div class="card form-card">
                                    <div class="card-body">
                                        <div class="d-grid gap-2">
                                            <button type="submit" class="btn btn-primary">
                                                <i class="ti ti-device-floppy me-1"></i>
                                                Simpan FAQ
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary" onclick="resetForm()">
                                                <i class="ti ti-refresh me-1"></i>
                                                Reset Form
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const questionInput = document.querySelector('textarea[name="question"]');
            const answerInput = document.querySelector('textarea[name="answer"]');
            const previewQuestion = document.getElementById('previewQuestion');
            const previewAnswer = document.getElementById('previewAnswer');

            // Real-time preview update
            function updatePreview() {
                const question = questionInput.value.trim();
                const answer = answerInput.value.trim();

                previewQuestion.textContent = question || 'Pertanyaan akan muncul di sini...';
                previewAnswer.innerHTML = answer ? answer.replace(/\n/g, '<br>') : 'Jawaban akan muncul di sini...';
            }

            // Add event listeners for real-time preview
            questionInput.addEventListener('input', updatePreview);
            answerInput.addEventListener('input', updatePreview);

            // Character counter for question
            questionInput.addEventListener('input', function() {
                const currentLength = this.value.length;
                const maxLength = 500;
                const hint = this.parentNode.querySelector('.form-hint');

                if (currentLength > maxLength - 50) {
                    hint.innerHTML = `${maxLength - currentLength} karakter tersisa`;
                    hint.style.color = currentLength > maxLength ? '#dc3545' : '#f39c12';
                } else {
                    hint.innerHTML = 'Maksimal 500 karakter';
                    hint.style.color = '#6c757d';
                }
            });

            // Form validation
            const form = document.getElementById('faqForm');
            form.addEventListener('submit', function(e) {
                const question = questionInput.value.trim();
                const answer = answerInput.value.trim();

                if (!question) {
                    e.preventDefault();
                    Swal.fire('Peringatan', 'Pertanyaan harus diisi', 'warning');
                    questionInput.focus();
                    return;
                }

                if (!answer) {
                    e.preventDefault();
                    Swal.fire('Peringatan', 'Jawaban harus diisi', 'warning');
                    answerInput.focus();
                    return;
                }

                if (question.length > 500) {
                    e.preventDefault();
                    Swal.fire('Peringatan', 'Pertanyaan maksimal 500 karakter', 'warning');
                    questionInput.focus();
                    return;
                }

                // Show loading
                Swal.fire({
                    title: 'Menyimpan...',
                    text: 'Mohon tunggu, FAQ sedang disimpan',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
            });

            // Auto-resize textareas
            function autoResize(textarea) {
                textarea.style.height = 'auto';
                textarea.style.height = textarea.scrollHeight + 'px';
            }

            questionInput.addEventListener('input', () => autoResize(questionInput));
            answerInput.addEventListener('input', () => autoResize(answerInput));

            // Initial resize
            autoResize(questionInput);
            autoResize(answerInput);
        });

        // Reset form function
        function resetForm() {
            Swal.fire({
                title: 'Reset Form?',
                text: 'Semua data yang telah diisi akan dihapus',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Reset!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('faqForm').reset();
                    document.getElementById('previewQuestion').textContent = 'Pertanyaan akan muncul di sini...';
                    document.getElementById('previewAnswer').textContent = 'Jawaban akan muncul di sini...';

                    // Reset order to next available
                    document.querySelector('input[name="order"]').value = {{ $nextOrder }};

                    Swal.fire('Reset!', 'Form telah direset', 'success');
                }
            });
        }

        // Auto-save functionality (optional)
        let autoSaveTimer;

        function enableAutoSave() {
            const inputs = document.querySelectorAll('input, textarea, select');

            inputs.forEach(input => {
                input.addEventListener('input', () => {
                    clearTimeout(autoSaveTimer);
                    autoSaveTimer = setTimeout(() => {
                        saveFormData();
                    }, 5000); // Save after 5 seconds of inactivity
                });
            });
        }

        function saveFormData() {
            const formData = new FormData(document.getElementById('faqForm'));
            const data = Object.fromEntries(formData);

            localStorage.setItem('faq_draft', JSON.stringify(data));

            // Show brief notification
            const toast = document.createElement('div');
            toast.className = 'alert alert-info position-fixed';
            toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; opacity: 0.8;';
            toast.innerHTML = '<i class="ti ti-device-floppy me-1"></i> Draft tersimpan otomatis';
            document.body.appendChild(toast);

            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Load draft on page load
        function loadDraft() {
            const draft = localStorage.getItem('faq_draft');
            if (draft) {
                const data = JSON.parse(draft);

                Object.keys(data).forEach(key => {
                    const input = document.querySelector(`[name="${key}"]`);
                    if (input) {
                        if (input.type === 'checkbox') {
                            input.checked = data[key] === '1';
                        } else {
                            input.value = data[key];
                        }
                    }
                });

                // Update preview
                document.querySelector('textarea[name="question"]').dispatchEvent(new Event('input'));
                document.querySelector('textarea[name="answer"]').dispatchEvent(new Event('input'));
            }
        }

        // Clear draft after successful save
        window.addEventListener('beforeunload', () => {
            if (document.querySelector('.is-invalid')) {
                // Don't clear draft if there are validation errors
                return;
            }
            localStorage.removeItem('faq_draft');
        });

        // Enable auto-save
        // enableAutoSave();
    </script>
@endpush