{{-- resources/views/admin/berita/create.blade.php --}}
@extends('admin.layouts.app') 
@section('title', 'Tulis Artikel Baru')

@push('styles')
<!-- Summernote CSS -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<style>
    /* Memastikan mode fullscreen summernote tidak tertutup oleh sidebar/topbar */
    .note-editor.note-frame.fullscreen {
        z-index: 1050;
        background: white;
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-1 fw-bold">Tulis Artikel Baru</h4>
        <a href="{{ route('admin.berita.index') }}" class="btn btn-secondary btn-sm shadow-sm"><i class="bi bi-arrow-left"></i> Kembali</a>
    </div>

    @if($errors->any())
        <div class="alert alert-danger border-0 shadow-sm">
            <ul class="mb-0">@foreach($errors->all() as $err) <li>{{ $err }}</li> @endforeach</ul>
        </div>
    @endif

    <form action="{{ route('admin.berita.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        
        <!-- BLOK 1: EDITOR KONTEN UTAMA (FULL WIDTH) -->
        <div class="card border-0 shadow-sm mb-4 border-top border-primary" style="border-top-width: 4px !important;">
            <div class="card-body p-4">
                <div class="mb-4">
                    <label class="form-label fw-bold fs-5 text-dark">Judul Artikel <span class="text-danger">*</span></label>
                    <input type="text" name="judul" class="form-control form-control-lg fw-bold" value="{{ old('judul') }}" placeholder="Masukkan judul yang menarik di sini..." required>
                </div>
                <div class="mb-2">
                    <label class="form-label fw-bold text-dark">Isi Konten <span class="text-danger">*</span></label>
                    <textarea name="konten" id="summernote" required>{{ old('konten') }}</textarea>
                </div>
            </div>
        </div>

        <!-- BLOK 2: PENGATURAN & SEO (DI BAWAH EDITOR) -->
        <div class="row g-4 mb-4">
            
            <!-- Kolom Pengaturan Publikasi -->
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white py-3 border-bottom">
                        <h6 class="mb-0 fw-bold text-primary"><i class="bi bi-gear-fill me-2"></i>Pengaturan Publikasi & Gambar</h6>
                    </div>
                    <div class="card-body p-4 bg-light">
                        <div class="mb-4 bg-white p-3 border rounded shadow-sm">
                            <label class="form-label fw-bold">Gambar Utama (Thumbnail) <span class="text-danger">*</span></label>
                            <div class="d-flex align-items-center gap-3">
                                <img id="previewThumb" src="https://dummyimage.com/300x200/f8f9fa/6c757d.png&text=Pilih+Gambar" class="img-fluid rounded border cursor-pointer object-fit-cover" style="width: 120px; height: 90px; cursor: pointer;" onclick="document.getElementById('thumbnail').click();" alt="Preview Thumbnail">
                                <div class="w-100">
                                    <input type="file" name="thumbnail" id="thumbnail" class="form-control mb-1" accept="image/*" required onchange="previewImage(this);">
                                    <div class="form-text mt-0" style="font-size: 12px;">Rekomendasi 800x600px. Gambar otomatis dikonversi ke format <b>WebP</b>.</div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Kategori Artikel <span class="text-danger">*</span></label>
                                <select name="kategori_berita_id" class="form-select border-primary shadow-sm" required>
                                    <option value="">-- Pilih Kategori --</option>
                                    @foreach($kategoris as $k)
                                        <option value="{{ $k->id }}" {{ old('kategori_berita_id') == $k->id ? 'selected' : '' }}>{{ $k->nama_kategori }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Status Publikasi</label>
                                <select name="status" class="form-select shadow-sm">
                                    <option value="publish" {{ old('status') == 'publish' ? 'selected' : '' }}>Publikasikan Segera</option>
                                    <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>Simpan Sebagai Draft</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Kolom SEO -->
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white py-3 border-bottom">
                        <h6 class="mb-0 fw-bold text-success"><i class="bi bi-google me-2"></i>Konfigurasi SEO (Opsional)</h6>
                    </div>
                    <div class="card-body p-4 bg-light">
                        <div class="mb-3">
                            <label class="form-label fw-medium">SEO Title</label>
                            <input type="text" name="seo_title" class="form-control" value="{{ old('seo_title') }}" placeholder="Judul khusus untuk hasil pencarian Google (Maks 60 Karakter)">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-medium">Meta Description</label>
                            <textarea name="seo_description" class="form-control" rows="2" placeholder="Deskripsi singkat untuk cuplikan pencarian... Maks 160 karakter">{{ old('seo_description') }}</textarea>
                        </div>
                        <div class="mb-0">
                            <label class="form-label fw-medium">Meta Keywords</label>
                            <input type="text" name="seo_keywords" class="form-control" value="{{ old('seo_keywords') }}" placeholder="Contoh: pendaftaran, madrasah, prestasi siswa">
                            <div class="form-text" style="font-size: 11px;">Pisahkan antar kata kunci dengan tanda koma (,).</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="card border-0 shadow-sm mb-5">
            <div class="card-body p-3 bg-white rounded text-end border">
                <button type="reset" class="btn btn-outline-secondary me-2 px-4 shadow-sm">Reset Form</button>
                <button type="submit" class="btn btn-primary fw-bold px-5 shadow-sm"><i class="bi bi-send-fill me-2"></i> Simpan & Terbitkan Artikel</button>
            </div>
        </div>

    </form>
</div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<script>
    function previewImage(input) {
        if (input.files && input.files[0]) {
            let reader = new FileReader();
            reader.onload = function(e) { document.getElementById('previewThumb').src = e.target.result; }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $(document).ready(function() {
        $('#summernote').summernote({
            placeholder: 'Mulai menulis artikel atau berita Anda di sini...',
            tabsize: 2,
            height: 500, // Tinggi default editor diperbesar
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['fontname', ['fontname']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video', 'hr']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ],
            callbacks: {
                onImageUpload: function(files) {
                    for(let i=0; i < files.length; i++) { uploadImage(files[i]); }
                },
                onMediaDelete: function(target) { deleteImage(target[0].src); }
            }
        });

        function uploadImage(file) {
            let data = new FormData();
            data.append("file", file);
            data.append("_token", "{{ csrf_token() }}");
            $.ajax({
                url: "{{ route('admin.berita.uploadImage') }}",
                cache: false, contentType: false, processData: false,
                data: data, type: "POST",
                success: function(url) {
                    let image = $('<img>').attr('src', url.url).addClass('img-fluid rounded my-2 shadow-sm');
                    $('#summernote').summernote("insertNode", image[0]);
                },
                error: function(data) { console.log("Gagal mengunggah gambar", data); }
            });
        }

        function deleteImage(src) {
            $.ajax({
                data: {src: src, _token: "{{ csrf_token() }}"},
                type: "POST", url: "{{ route('admin.berita.deleteImage') }}",
                cache: false,
                success: function(response) { console.log('Gambar dihapus dari server'); }
            });
        }
    });
</script>
@endpush