@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;
        }

        .info-section {
            background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }
    </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">Edit FAQ</li>
                        </ol>
                    </nav>
                    <div class="page-pretitle">
                        Manajemen FAQ
                    </div>
                    <h2 class="page-title">
                        <i class="ti ti-pencil me-2"></i>
                        Edit FAQ
                    </h2>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="{{ route('admin.faq.show', $faq) }}" class="btn btn-outline-info">
                            <i class="ti ti-eye me-1"></i>
                            Lihat Detail
                        </a>
                        <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>

    <div class="page-body">
        <div class="container-xl">
            <!-- FAQ Info -->
            <div class="info-section">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="d-flex align-items-center">
                            <span class="badge bg-primary fs-6 me-3">{{ $faq->order }}</span>
                            <div>
                                <div class="text-muted small">ID: {{ $faq->id }}</div>
                                <div class="fw-bold">
                                    Status:
                                    @if ($faq->is_active)
                                        <span class="badge bg-success">Aktif</span>
                                    @else
                                        <span class="badge bg-danger">Nonaktif</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-auto">
                        <div class="text-end">
                            <div class="text-muted small">Dibuat: {{ $faq->created_at->format('d M Y H:i') }}</div>
                            <div class="text-muted small">Diubah: {{ $faq->updated_at->format('d M Y H:i') }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <form action="{{ route('admin.faq.update', $faq) }}" method="POST" id="faqForm">
                @csrf
                @method('PUT')
                <div class="row">
                    <div class="col-md-8">
                        <!-- Main Form -->
                        <div class="card form-card">
                            <div class="card-header">
                                <h3 class="card-title">Edit 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', $faq->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', $faq->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', $faq->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', $faq->is_active) ? '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', $faq->order) }}" 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">
                                                {{ $faq->question }}
                                            </div>
                                            <div class="preview-answer" id="previewAnswer">
                                                {!! nl2br(e($faq->answer)) !!}
                                            </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>
                                                Update FAQ
                                            </button>
                                            <button type="button" class="btn btn-outline-warning"
                                                onclick="resetToOriginal()">
                                                <i class="ti ti-refresh me-1"></i>
                                                Reset ke Asli
                                            </button>
                                            <button type="button" class="btn btn-outline-danger" onclick="deleteFaq()">
                                                <i class="ti ti-trash me-1"></i>
                                                Hapus FAQ
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Store original data for reset functionality
        const originalData = {
            question: @json($faq->question),
            answer: @json($faq->answer),
            is_active: {{ $faq->is_active ? 'true' : 'false' }},
            order: {{ $faq->order }}
        };

        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 || originalData.question;
                previewAnswer.innerHTML = answer ? answer.replace(/\n/g, '<br>') : originalData.answer.replace(
                    /\n/g, '<br>');
            }

            // 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 diupdate',
                    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);

            // Track changes for unsaved warning
            let hasUnsavedChanges = false;

            [questionInput, answerInput, document.querySelector('input[name="order"]'),
                document.querySelector('input[name="is_active"]')
            ].forEach(input => {
                input.addEventListener('change', () => {
                    hasUnsavedChanges = true;
                });
            });

            // Warn user about unsaved changes
            window.addEventListener('beforeunload', function(e) {
                if (hasUnsavedChanges) {
                    e.preventDefault();
                    e.returnValue = '';
                }
            });

            // Clear warning after form submission
            form.addEventListener('submit', () => {
                hasUnsavedChanges = false;
            });
        });

        // Reset to original values
        function resetToOriginal() {
            Swal.fire({
                title: 'Reset ke Data Asli?',
                text: 'Semua perubahan yang belum disimpan akan hilang',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Reset!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Reset form to original values
                    document.querySelector('textarea[name="question"]').value = originalData.question;
                    document.querySelector('textarea[name="answer"]').value = originalData.answer;
                    document.querySelector('input[name="is_active"]').checked = originalData.is_active;
                    document.querySelector('input[name="order"]').value = originalData.order;

                    // Update preview
                    document.getElementById('previewQuestion').textContent = originalData.question;
                    document.getElementById('previewAnswer').innerHTML = originalData.answer.replace(/\n/g, '<br>');

                    Swal.fire('Reset!', 'Data telah dikembalikan ke nilai asli', 'success');
                }
            });
        }

        // Delete FAQ function
        function deleteFaq() {
            Swal.fire({
                title: 'Hapus FAQ?',
                text: 'FAQ ini akan dihapus secara permanen dan tidak dapat dikembalikan!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Create and submit delete form
                    const deleteForm = document.createElement('form');
                    deleteForm.method = 'POST';
                    deleteForm.action = '{{ route('admin.faq.destroy', $faq) }}';

                    const csrfToken = document.createElement('input');
                    csrfToken.type = 'hidden';
                    csrfToken.name = '_token';
                    csrfToken.value = '{{ csrf_token() }}';

                    const methodField = document.createElement('input');
                    methodField.type = 'hidden';
                    methodField.name = '_method';
                    methodField.value = 'DELETE';

                    deleteForm.appendChild(csrfToken);
                    deleteForm.appendChild(methodField);
                    document.body.appendChild(deleteForm);

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

                    deleteForm.submit();
                }
            });
        }

        // Auto-save functionality (optional)
        let autoSaveTimer;
        let lastSaveData = '';

        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);
            const currentData = JSON.stringify(data);

            // Only save if data actually changed
            if (currentData === lastSaveData) return;

            lastSaveData = currentData;
            localStorage.setItem('faq_edit_{{ $faq->id }}', currentData);

            // Show brief notification
            showAutoSaveNotification();
        }

        function showAutoSaveNotification() {
            // Remove existing notifications
            document.querySelectorAll('.auto-save-notification').forEach(el => el.remove());

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

            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => toast.remove(), 300);
            }, 2000);
        }

        // Load draft on page load
        function loadDraft() {
            const draft = localStorage.getItem('faq_edit_{{ $faq->id }}');
            if (draft) {
                const data = JSON.parse(draft);

                // Ask user if they want to load draft
                Swal.fire({
                    title: 'Draft Ditemukan',
                    text: 'Ditemukan draft yang belum disimpan. Muat draft tersebut?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Muat Draft',
                    cancelButtonText: 'Tidak, Hapus Draft'
                }).then((result) => {
                    if (result.isConfirmed) {
                        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'));

                        Swal.fire('Draft Dimuat!', 'Data draft telah dimuat', 'success');
                    } else {
                        localStorage.removeItem('faq_edit_{{ $faq->id }}');
                    }
                });
            }
        }

        // 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_edit_{{ $faq->id }}');
        });

        // Load draft if exists
        // setTimeout(loadDraft, 1000);

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