<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ isset($article) ? 'Edit Artikel' : 'Tulis Artikel Baru' }} | Admin Haji Apud</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    
    <!-- 1. Include CSS Quill.js (Tema Snow yang elegan) -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

    <style>
        /* Modifikasi agar toolbar dan editor menyatu dengan Tailwind */
        .ql-toolbar.ql-snow {
            border-radius: 0.75rem 0.75rem 0 0;
            border-color: #e7e5e4;
            background-color: #fafaf9;
            padding: 12px;
        }
        .ql-container.ql-snow {
            border-radius: 0 0 0.75rem 0.75rem;
            border-color: #e7e5e4;
            background-color: #ffffff;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 16px;
        }
        .ql-editor {
            min-height: 400px; /* Mencegah form mengecil */
            line-height: 1.5; /* Merapatkan jarak antar baris teks */
        }
        .ql-editor:focus {
            box-shadow: inset 0 0 0 2px rgba(245, 158, 11, 0.2);
        }
        
        /* --- PERBAIKAN KERAPATAN BARIS (SPACING) DI DALAM EDITOR --- */
        .ql-editor p {
            margin-bottom: 0.5rem; /* Mengurangi jarak bawah pada paragraf */
        }
        .ql-editor h1, .ql-editor h2, .ql-editor h3 {
            margin-top: 1rem; /* Jarak atas heading tidak terlalu jauh */
            margin-bottom: 0.25rem; /* Jarak bawah heading sangat rapat dengan teks di bawahnya */
        }
        .ql-editor ul, .ql-editor ol {
            margin-bottom: 0.5rem;
            padding-left: 1.5rem;
        }
        .ql-editor li {
            margin-bottom: 0.25rem; /* Merapatkan jarak antar list */
        }
    </style>
</head>
<body class="bg-stone-100 text-gray-800 font-sans min-h-screen p-4 md:p-8">

    <div class="max-w-7xl mx-auto bg-white rounded-3xl border border-stone-200 shadow-xl overflow-hidden">
        <div class="px-8 py-6 border-b border-stone-100 bg-stone-50 flex justify-between items-center">
            <h2 class="text-2xl font-bold text-gray-900">
                <i class="fas fa-pen-nib text-amber-600 mr-2"></i> 
                {{ isset($article) ? 'Edit Artikel' : 'Tulis Artikel Baru' }}
            </h2>
            <a href="{{ route('admin.article.index') }}" class="text-stone-500 hover:text-red-600 transition-colors">
                <i class="fas fa-times text-xl"></i>
            </a>
        </div>

        <form id="article-form" action="{{ isset($article) ? route('admin.article.update', $article->id) : route('admin.article.store') }}" method="POST" enctype="multipart/form-data" class="p-8">
            @csrf
            @if(isset($article)) @method('PUT') @endif

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                
                <div class="lg:col-span-2 space-y-6">
                    <div>
                        <label class="block text-sm font-bold text-stone-700 mb-2">Judul Artikel H1</label>
                        <input type="text" name="title" value="{{ isset($article) ? $article->title : old('title') }}" class="w-full bg-stone-50 border border-stone-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-amber-500 font-semibold text-lg" required placeholder="Tulis judul artikel di sini...">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-stone-700 mb-2">Isi Artikel</label>
                        
                        <div id="quill-editor">{!! isset($article) ? $article->content : old('content') !!}</div>
                        
                        <input type="hidden" name="content" id="content-input">
                    </div>
                </div>

                <div class="space-y-6">
                    
                    <div class="bg-stone-50 p-6 rounded-2xl border border-stone-200 shadow-sm">
                        <h3 class="font-bold text-gray-900 mb-4 border-b border-stone-200 pb-2">
                            <i class="fas fa-cog text-stone-500 mr-2"></i> Publikasi
                        </h3>
                        
                        <div class="mb-4">
                            <label class="block text-sm font-bold text-stone-700 mb-2">Status</label>
                            <select name="status" class="w-full bg-white border border-stone-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-amber-500 font-medium">
                                <option value="published" {{ (isset($article) && $article->status == 'published') ? 'selected' : '' }}>🟢 Published</option>
                                <option value="draft" {{ (isset($article) && $article->status == 'draft') ? 'selected' : '' }}>🟡 Draft</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-bold text-stone-700 mb-2">Cover Gambar Utama</label>
                            <input type="file" name="image" accept="image/*" class="w-full bg-white border border-stone-300 rounded-xl px-4 py-2 text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-amber-50 file:text-amber-700 hover:file:bg-amber-100">
                            @if(isset($article) && $article->image)
                                <div class="mt-3 relative rounded-lg overflow-hidden border border-stone-200">
                                    <img src="{{ asset('storage/' . $article->image) }}" class="w-full h-32 object-cover">
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="bg-blue-50 p-6 rounded-2xl border border-blue-200 shadow-sm">
                        <h3 class="font-bold text-blue-900 mb-4 border-b border-blue-200 pb-2 flex justify-between items-center">
                            <span><i class="fas fa-search text-blue-600 mr-2"></i> Optimasi SEO</span>
                        </h3>
                        
                        <div class="mb-4">
                            <label class="block text-xs font-bold text-stone-700 mb-1">Focus Keyword</label>
                            <input type="text" name="focus_keyword" value="{{ isset($article) ? $article->focus_keyword : old('focus_keyword') }}" class="w-full bg-white border border-stone-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
                        </div>

                        <div class="mb-4">
                            <label class="block text-xs font-bold text-stone-700 mb-1">Meta Title</label>
                            <input type="text" name="meta_title" value="{{ isset($article) ? $article->meta_title : old('meta_title') }}" class="w-full bg-white border border-stone-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-stone-700 mb-1">Meta Description</label>
                            <textarea name="meta_description" rows="3" class="w-full bg-white border border-stone-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">{{ isset($article) ? $article->meta_description : old('meta_description') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8 pt-6 border-t border-stone-200 flex justify-end gap-4">
                <a href="{{ route('admin.article.index') }}" class="px-6 py-3 rounded-xl font-bold text-stone-600 hover:bg-stone-200 transition-colors">Batal</a>
                <button type="submit" class="bg-gray-900 hover:bg-amber-600 text-white px-10 py-3 rounded-xl font-bold transition-colors shadow-lg flex items-center gap-2">
                    <i class="fas fa-paper-plane"></i> {{ isset($article) ? 'Simpan Perubahan' : 'Terbitkan Sekarang' }}
                </button>
            </div>
        </form>
    </div>

    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    
    <script>
        // --- A. Membuat Format Garis Pembatas Khusus ---
        var BlockEmbed = Quill.import('blots/block/embed');
        class DividerBlot extends BlockEmbed { }
        DividerBlot.blotName = 'divider';
        DividerBlot.tagName = 'hr';
        Quill.register(DividerBlot);

        // --- B. Inisialisasi Editor ---
        var quill = new Quill('#quill-editor', {
            theme: 'snow',
            placeholder: 'Tulis kelezatan menu Haji Apud di sini...',
            modules: {
                toolbar: {
                    container: [
                        [{ 'header': [1, 2, 3, false] }], 
                        ['bold', 'italic', 'underline', 'strike'], 
                        [{ 'color': [] }, { 'background': [] }], 
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }], 
                        [{ 'align': [] }], 
                        ['link', 'image', 'video'], 
                        ['blockquote', 'code-block'],
                        ['divider'], // Tombol garis pembatas
                        ['clean'] 
                    ],
                    handlers: {
                        // Logika saat tombol pembatas ditekan
                        'divider': function() {
                            var range = quill.getSelection(true);
                            quill.insertText(range.index, '\n', Quill.sources.USER);
                            quill.insertEmbed(range.index + 1, 'divider', true, Quill.sources.USER);
                            quill.setSelection(range.index + 2, Quill.sources.SILENT);
                        }
                    }
                }
            }
        });

        // --- C. Memasang Ikon Garis pada Tombol Baru ---
        var dividerButton = document.querySelector('.ql-divider');
        if(dividerButton) {
            dividerButton.innerHTML = '<svg viewBox="0 0 18 18"><line class="ql-stroke" x1="2" x2="16" y1="9" y2="9"></line></svg>';
        }

        // --- D. Sinkronisasi Form HTML ke Input Hidden ---
        var form = document.getElementById('article-form');
        var contentInput = document.getElementById('content-input');

        form.onsubmit = function() {
            var htmlContent = quill.root.innerHTML;
            contentInput.value = htmlContent;
        };
    </script>
</body>
</html>