@extends('adminlte::page')

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

@section('content_header')
    <h1>Tambah Konten Baru</h1>
@stop

@section('content')
<div class="card">
    <div class="card-body">
        <form action="{{ route('sekolah.website.posts.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="form-group">
                <label>Tipe Postingan</label>
                <select name="type" id="typeSelect" class="form-control">
                    <option value="berita" {{ $type == 'berita' ? 'selected' : '' }}>Berita Sekolah</option>
                    <option value="artikel" {{ $type == 'artikel' ? 'selected' : '' }}>Artikel / Karya Tulis</option>
                    <option value="agenda" {{ $type == 'agenda' ? 'selected' : '' }}>Agenda Kegiatan</option>
                    <option value="pengumuman" {{ $type == 'pengumuman' ? 'selected' : '' }}>Pengumuman</option>
                    <option value="mading" {{ $type == 'mading' ? 'selected' : '' }}>Mading Online</option>
                    
                    <option value="slider" {{ $type == 'slider' ? 'selected' : '' }}>Slider Beranda (Banner)</option>
                </select>
                <small class="text-muted">Pilih "Slider Beranda" untuk mengubah gambar besar di halaman utama.</small>
            </div>

            <div class="form-group">
                <label>Judul / Headline</label>
                <input type="text" name="title" class="form-control" placeholder="Masukkan judul utama..." required>
            </div>

            <div class="form-group" id="dateGroup" style="{{ $type == 'agenda' ? '' : 'display:none;' }}">
                <label>Tanggal Kegiatan</label>
                <input type="date" name="event_date" class="form-control w-25">
                <small class="text-muted">Wajib diisi jika tipe adalah Agenda.</small>
            </div>

            <div class="form-group">
    <label>Gambar Cover / Thumbnail</label>
    <div class="row">
        <div class="col-md-2 mb-2">
            <img id="img-preview" src="{{ asset('images/no-image.png') }}" class="img-thumbnail w-100" style="height: 100px; object-fit: cover;">
        </div>
        <div class="col-md-10">
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="thumbnail" name="thumbnail" accept="image/*" onchange="previewImage()">
                <label class="custom-file-label" for="thumbnail">Pilih file gambar...</label>
            </div>
            <small class="text-muted">Format: JPG, PNG. Maks: 2MB.</small>
        </div>
    </div>
</div>

            <div class="form-group">
                <label>Konten / Deskripsi Singkat</label>
                <textarea id="summernote" name="content"></textarea>
                <small class="text-muted">Untuk Slider, isi bagian ini sebagai teks kecil di bawah judul (Opsional).</small>
            </div>

            <div class="form-group text-right">
                <a href="{{ route('sekolah.website.posts.index', ['type' => $type]) }}" class="btn btn-secondary">Batal</a>
                <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Simpan & Terbitkan</button>
            </div>
        </form>
    </div>
</div>
@stop

@section('js')
<script>
    $(document).ready(function() {
        // Init Summernote
        $('#summernote').summernote({
            height: 300,
            placeholder: 'Tulis konten lengkap atau deskripsi di sini...',
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link', 'picture']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ]
        });

        // Init Custom File Input (Agar nama file muncul saat dipilih)
        bsCustomFileInput.init();

        // Logic Tampilan Form Tanggal (Interaktif)
        $('#typeSelect').change(function() {
            var selectedType = $(this).val();
            if(selectedType === 'agenda') {
                $('#dateGroup').slideDown(); // Munculkan tanggal
                $('input[name="event_date"]').prop('required', true); // Wajib isi
            } else {
                $('#dateGroup').slideUp();   // Sembunyikan tanggal
                $('input[name="event_date"]').prop('required', false); // Tidak wajib
            }
        });
    });
    function previewImage() {
    const image = document.querySelector('#thumbnail');
    const imgPreview = document.querySelector('#img-preview');

    const oFReader = new FileReader();
    oFReader.readAsDataURL(image.files[0]);

    oFReader.onload = function(oFREvent) {
        imgPreview.src = oFREvent.target.result;
    }
}
</script>
@stop