@extends('layouts.app')

@section('subtitle', 'Tambah Berita Baru')

@section('css')
    @parent
    <!-- Summernote Editor CSS -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <style>
        .note-editor.note-frame {
            border: 1px solid #cbd5e1 !important;
            border-radius: 8px !important;
            overflow: hidden;
        }
        .note-toolbar {
            background-color: #f8fafc !important;
            border-bottom: 1px solid #cbd5e1 !important;
        }
    </style>
@endsection

@section('content_body')
    <!-- Header & Breadcrumbs -->
    <x-page-header 
        title="Tambah Berita Baru" 
        subtitle="Publikasikan pengumuman atau berita desa baru ke Portal Informasi."
        :breadcrumbs="[
            'Dashboard' => route('dashboard'),
            'Informasi Desa' => route('informasi-desa.index'),
            'Manajemen Berita' => route('admin.berita.index'),
            'Tambah Berita' => route('admin.berita.create')
        ]"
    >
        <x-slot name="buttons">
            <a href="{{ route('admin.berita.index') }}" class="btn btn-light border mr-2">
                <i class="fas fa-arrow-left mr-1"></i> Batal
            </a>
        </x-slot>
    </x-page-header>

    <div class="card border-0 shadow-sm rounded-xl mb-4" style="border-radius: 12px; background: #ffffff;">
        <div class="card-body p-4">
            <form action="{{ route('admin.berita.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <!-- Column Left: Form Fields -->
                    <div class="col-lg-8">
                        <div class="form-group mb-3">
                            <label for="judul" class="font-weight-bold text-secondary text-sm">Judul Berita <span class="text-danger">*</span></label>
                            <input type="text" name="judul" id="judul" class="form-control @error('judul') is-invalid @enderror" value="{{ old('judul') }}" placeholder="Tuliskan judul berita yang menarik..." required style="border-radius: 8px;">
                            @error('judul')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6 form-group mb-3">
                                <label for="kategori" class="font-weight-bold text-secondary text-sm">Kategori Berita <span class="text-danger">*</span></label>
                                <select name="kategori" id="kategori" class="form-control @error('kategori') is-invalid @enderror" required style="border-radius: 8px;">
                                    <option value="">-- Pilih Kategori --</option>
                                    <option value="Kegiatan Desa" {{ old('kategori') === 'Kegiatan Desa' ? 'selected' : '' }}>Kegiatan Desa</option>
                                    <option value="Pengumuman" {{ old('kategori') === 'Pengumuman' ? 'selected' : '' }}>Pengumuman</option>
                                    <option value="Kesehatan" {{ old('kategori') === 'Kesehatan' ? 'selected' : '' }}>Kesehatan (Posyandu)</option>
                                    <option value="Pembangunan" {{ old('kategori') === 'Pembangunan' ? 'selected' : '' }}>Pembangunan</option>
                                    <option value="Pemberdayaan" {{ old('kategori') === 'Pemberdayaan' ? 'selected' : '' }}>Pemberdayaan</option>
                                    <option value="Pertanian" {{ old('kategori') === 'Pertanian' ? 'selected' : '' }}>Pertanian</option>
                                </select>
                                @error('kategori')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 form-group mb-3">
                                <label for="tanggal_publikasi" class="font-weight-bold text-secondary text-sm">Tanggal Publikasi <span class="text-danger">*</span></label>
                                <input type="date" name="tanggal_publikasi" id="tanggal_publikasi" class="form-control @error('tanggal_publikasi') is-invalid @enderror" value="{{ old('tanggal_publikasi', date('Y-m-d')) }}" required style="border-radius: 8px;">
                                @error('tanggal_publikasi')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <label for="ringkasan" class="font-weight-bold text-secondary text-sm">Ringkasan Singkat <span class="text-danger">*</span></label>
                            <textarea name="ringkasan" id="ringkasan" rows="3" class="form-control @error('ringkasan') is-invalid @enderror" placeholder="Tuliskan ringkasan 1-2 kalimat untuk preview berita..." required style="border-radius: 8px;">{{ old('ringkasan') }}</textarea>
                            @error('ringkasan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group mb-3">
                            <label for="isi" class="font-weight-bold text-secondary text-sm">Isi Berita Lengkap <span class="text-danger">*</span></label>
                            <textarea name="isi" id="isi" class="form-control summernote @error('isi') is-invalid @enderror">{{ old('isi') }}</textarea>
                            @error('isi')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Column Right: Thumbnail Image Upload & Status -->
                    <div class="col-lg-4 border-left" style="border-color: #f1f5f9 !important;">
                        <div class="px-3">
                            <div class="form-group mb-4">
                                <label for="status" class="font-weight-bold text-secondary text-sm">Status Publikasi <span class="text-danger">*</span></label>
                                <select name="status" id="status" class="form-control @error('status') is-invalid @enderror" required style="border-radius: 8px;">
                                    <option value="Draft" {{ old('status') === 'Draft' ? 'selected' : '' }}>Draft (Sembunyikan)</option>
                                    <option value="Publish" {{ old('status', 'Publish') === 'Publish' ? 'selected' : '' }}>Publish (Tampilkan)</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <hr style="border-top: 1px solid #f1f5f9;">

                            <span class="text-xs font-weight-bold text-uppercase text-muted d-block mb-3">Gambar Utama Berita</span>
                            
                            <div class="d-block border bg-light shadow-xs mb-3 text-center p-2 rounded-xl" style="height: 180px; overflow: hidden; border-radius: 12px;">
                                <img id="thumbnailPreview" src="https://via.placeholder.com/350x180?text=Preview+Gambar" alt="Gambar Utama Preview" class="img-fluid rounded-lg" style="height: 100%; width: 100%; object-fit: cover;">
                            </div>

                            <div class="custom-file text-left mb-2">
                                <input type="file" name="gambar" class="custom-file-input @error('gambar') is-invalid @enderror" id="gambarInput" accept="image/png, image/jpg, image/jpeg, image/webp" onchange="previewFile(event)">
                                <label class="custom-file-label text-sm" for="gambarInput">Pilih gambar...</label>
                                @error('gambar')
                                    <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                                @enderror
                            </div>
                            <small class="text-xs text-muted d-block">Maksimal: 3 MB. Format: JPG, PNG, WEBP.</small>
                        </div>
                    </div>
                </div>

                <hr class="my-4" style="border-top: 1px solid #f1f5f9;">

                <!-- Submit Button -->
                <div class="text-right">
                    <a href="{{ route('admin.berita.index') }}" class="btn btn-light border mr-2">Batal</a>
                    <button type="submit" class="btn btn-primary font-weight-bold" style="border-radius: 8px; padding: 10px 24px;">
                        <i class="fas fa-save mr-1"></i> Simpan & Publikasikan
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('js')
<!-- Summernote Editor JS -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script>
    function previewFile(event) {
        var file = event.target.files[0];
        if (!file) return;

        var maxSize = 3 * 1024 * 1024; // 3 MB in bytes
        if (file.size > maxSize) {
            alert('Ukuran gambar melebihi batas maksimal 3 MB. Silakan pilih gambar yang lebih kecil.');
            event.target.value = '';
            return;
        }

        var reader = new FileReader();
        reader.onload = function(){
            var output = document.getElementById('thumbnailPreview');
            output.src = reader.result;
        };
        reader.readAsDataURL(file);

        var label = event.target.nextElementSibling;
        label.innerText = file.name;
    }

    $(document).ready(function() {
        $('.summernote').summernote({
            height: 300,
            placeholder: 'Tuliskan isi berita di sini secara detail...',
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear', 'italic']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ]
        });
    });
</script>
@endpush