@extends('admin.layouts.app')

@section('title', 'Tambah Artikel')

@section('content')
<div class="">

    {{-- Breadcrumb --}}
    <nav class="flex items-center gap-2 text-sm text-slate-500 mb-4">
        <a href="{{ route('admin.articles.index') }}" class="hover:text-indigo-600">Artikel</a>
        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
        <span class="text-slate-700 font-medium">Tambah</span>
    </nav>

    <h1 class="text-2xl font-bold text-slate-900 mb-6">Tambah Artikel</h1>

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

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            {{-- Main column --}}
            <div class="lg:col-span-2 space-y-6">
                <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-6 space-y-5">
                    <div>
                        <label for="title" class="block text-sm font-medium text-slate-700 mb-1.5">
                            Judul Artikel <span class="text-rose-500">*</span>
                        </label>
                        <input type="text" name="title" id="title" value="{{ old('title') }}" required
                            placeholder="Judul artikel yang menarik"
                            class="w-full px-3.5 py-2.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('title') border-rose-400 @else border-slate-300 @enderror">
                        @error('title')
                            <p class="mt-1.5 text-xs text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="excerpt" class="block text-sm font-medium text-slate-700 mb-1.5">Ringkasan</label>
                        <textarea name="excerpt" id="excerpt" rows="2" maxlength="300"
                            placeholder="Ringkasan singkat yang tampil pada daftar artikel (maks. 300 karakter)"
                            class="w-full px-3.5 py-2.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('excerpt') border-rose-400 @else border-slate-300 @enderror">{{ old('excerpt') }}</textarea>
                        @error('excerpt')
                            <p class="mt-1.5 text-xs text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="content" class="block text-sm font-medium text-slate-700 mb-1.5">
                            Konten <span class="text-rose-500">*</span>
                        </label>

                        {{-- Toolbar + editor area rendered by Quill --}}
                        <div class="border rounded-lg overflow-hidden @error('content') border-rose-400 @else border-slate-300 @enderror">
                            <div id="editor-toolbar" class="border-b border-slate-200 bg-slate-50"></div>
                            <div id="editor-container" style="height: 360px;">{!! old('content') !!}</div>
                        </div>

                        {{-- Hidden input that actually gets submitted --}}
                        <textarea name="content" id="content" class="hidden">{{ old('content') }}</textarea>

                        @error('content')
                            <p class="mt-1.5 text-xs text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            {{-- Sidebar column --}}
            <div class="space-y-6">
                <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-6 space-y-5">
                    <div>
                        <label for="category_article_id" class="block text-sm font-medium text-slate-700 mb-1.5">Kategori</label>
                        <select name="category_article_id" id="category_article_id"
                            class="w-full px-3.5 py-2.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('category_article_id') border-rose-400 @else border-slate-300 @enderror">
                            <option value="">Tanpa Kategori</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_article_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('category_article_id')
                            <p class="mt-1.5 text-xs text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="thumbnail" class="block text-sm font-medium text-slate-700 mb-1.5">Thumbnail</label>
                        <input type="file" name="thumbnail" id="thumbnail" accept="image/*"
                            class="w-full text-sm text-slate-600 file:mr-3 file:py-2 file:px-3 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-600 hover:file:bg-indigo-100">
                        <p class="mt-1.5 text-xs text-slate-400">Format JPG, PNG, WEBP. Maks. 2MB.</p>
                        @error('thumbnail')
                            <p class="mt-1.5 text-xs text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="flex items-center justify-between pt-1">
                        <label for="is_published" class="text-sm font-medium text-slate-700">Publikasikan sekarang</label>
                        <input type="hidden" name="is_published" value="0">
                        <button type="button" onclick="document.getElementById('is_published').checked = !document.getElementById('is_published').checked; this.classList.toggle('bg-indigo-600'); this.classList.toggle('bg-slate-200'); this.querySelector('span').classList.toggle('translate-x-5');"
                            class="relative inline-flex h-6 w-11 items-center rounded-full bg-slate-200 transition-colors">
                            <input type="checkbox" name="is_published" id="is_published" value="1" class="sr-only" {{ old('is_published') ? 'checked' : '' }}>
                            <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform translate-x-1"></span>
                        </button>
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <button type="submit"
                        class="inline-flex items-center justify-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium px-5 py-2.5 rounded-lg shadow-sm transition-colors">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        Simpan Artikel
                    </button>
                    <a href="{{ route('admin.articles.index') }}"
                        class="inline-flex items-center justify-center px-5 py-2.5 text-sm font-medium text-slate-600 hover:text-slate-800">
                        Batal
                    </a>
                </div>
            </div>
        </div>
    </form>
</div>

{{-- Quill.js — WYSIWYG editor (gratis, tanpa API key) --}}
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
<script>
    const quill = new Quill('#editor-container', {
        theme: 'snow',
        placeholder: 'Tulis isi artikel di sini...',
        modules: {
            toolbar: {
                container: [
                    [{ header: [2, 3, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ list: 'ordered' }, { list: 'bullet' }],
                    ['blockquote', 'link', 'image'],
                    [{ align: [] }],
                    ['clean']
                ]
            }
        }
    });

    // Sinkronkan isi editor ke textarea tersembunyi sebelum form dikirim
    const contentForm = document.querySelector('#content').closest('form');
    contentForm.addEventListener('submit', function () {
        document.querySelector('#content').value = quill.root.innerHTML;
    });
</script>
@endsection