<?php
// views/pengumuman/tambah.php
?>

<!-- Quill Editor CSS -->
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.min.css" rel="stylesheet"> -->
 <link href="<?= base_url('assets/css/quill.snow.min.css'); ?>" rel="stylesheet">

<style>
    /* Editor container styling */
    #editor-container {
        height: 350px;
        border-radius: 0 0 0.375rem 0.375rem;
        background: #fff;
        font-size: 1rem;
        font-family: inherit;
    }

    .ql-toolbar.ql-snow {
        border-radius: 0.375rem 0.375rem 0 0;
        border-color: #dee2e6;
        background: #f8f9fa;
    }

    .ql-container.ql-snow {
        border-color: #dee2e6;
        border-radius: 0 0 0.375rem 0.375rem;
    }

    /* Match Bootstrap focus style */
    .ql-container.ql-snow:focus-within {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        outline: none;
    }

    /* Word count badge */
    #word-count {
        font-size: 0.8rem;
        color: #6c757d;
    }

    /* Toolbar icons sizing */
    .ql-toolbar button {
        width: 28px;
        height: 28px;
    }
</style>

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0">
            <i class="bi bi-plus-circle me-2"></i>Tambah Pengumuman
        </h4>
        <a href="<?php echo base_url('pengumuman'); ?>" class="btn btn-secondary">
            <i class="bi bi-arrow-left me-2"></i>Kembali
        </a>
    </div>

    <?php if(validation_errors()): ?>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <?php echo validation_errors(); ?>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <?php endif; ?>

    <div class="card">
        <div class="card-body">
            <form method="post" action="<?php echo base_url('pengumuman/tambah'); ?>" enctype="multipart/form-data" id="formPengumuman">

                <!-- Judul -->
                <div class="mb-3">
                    <label for="judul" class="form-label">Judul Pengumuman <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="judul" name="judul"
                           value="<?php echo set_value('judul'); ?>"
                           placeholder="Masukkan judul pengumuman" required maxlength="200">
                    <div class="form-text">Maksimal 200 karakter</div>
                </div>

                <div class="row">
                    <!-- Kategori -->
                    <div class="col-md-6 mb-3">
                        <label for="kategori" class="form-label">Kategori <span class="text-danger">*</span></label>
                        <select class="form-select" id="kategori" name="kategori" required>
                            <option value="">Pilih Kategori</option>
                            <option value="umum" <?php echo set_select('kategori', 'umum'); ?>>Umum</option>
                            <option value="kegiatan" <?php echo set_select('kategori', 'kegiatan'); ?>>Kegiatan</option>
                            <option value="darurat" <?php echo set_select('kategori', 'darurat'); ?>>Darurat</option>
                            <option value="pembayaran" <?php echo set_select('kategori', 'pembayaran'); ?>>Pembayaran</option>
                        </select>
                    </div>

                    <!-- Untuk Role -->
                    <div class="col-md-6 mb-3">
                        <label for="untuk_role" class="form-label">Pengumuman Untuk</label>
                        <select class="form-select" id="untuk_role" name="untuk_role">
                            <option value="semua" <?php echo set_select('untuk_role', 'semua', true); ?>>Semua Warga</option>
                            <option value="warga" <?php echo set_select('untuk_role', 'warga'); ?>>Warga Saja</option>
                            <option value="rt" <?php echo set_select('untuk_role', 'rt'); ?>>Pengurus RT Saja</option>
                            <option value="admin" <?php echo set_select('untuk_role', 'admin'); ?>>Admin Saja</option>
                        </select>
                    </div>
                </div>

                <!-- Isi Pengumuman (Rich Text Editor) -->
                <div class="mb-3">
                    <label class="form-label">Isi Pengumuman <span class="text-danger">*</span></label>

                    <!-- Quill Editor -->
                    <div id="editor-container"><?php
                        $isi = set_value('isi');
                        if ($isi) echo $isi;
                    ?></div>

                    <!-- Hidden textarea to hold HTML value for form submission -->
                    <textarea id="isi" name="isi" style="display:none;"><?php echo set_value('isi'); ?></textarea>

                    <div class="d-flex justify-content-between mt-1">
                        <div class="form-text">Jelaskan pengumuman dengan lengkap dan jelas</div>
                        <span id="word-count">0 kata</span>
                    </div>
                </div>

                <div class="row">
                    <!-- Tanggal Publish -->
                    <div class="col-md-6 mb-3">
                        <label for="tanggal_publish" class="form-label">Tanggal Publish <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" id="tanggal_publish" name="tanggal_publish"
                               value="<?php echo set_value('tanggal_publish', date('Y-m-d')); ?>" required>
                        <div class="form-text">Tanggal pengumuman mulai ditampilkan</div>
                    </div>

                    <!-- Tanggal Expired -->
                    <div class="col-md-6 mb-3">
                        <label for="tanggal_expired" class="form-label">Tanggal Berakhir</label>
                        <input type="date" class="form-control" id="tanggal_expired" name="tanggal_expired"
                               value="<?php echo set_value('tanggal_expired'); ?>">
                        <div class="form-text">Kosongkan jika tidak ada batas waktu</div>
                    </div>
                </div>

                <!-- Lampiran -->
                <div class="mb-3">
                    <label for="lampiran" class="form-label">Lampiran (Opsional)</label>
                    <input type="file" class="form-control" id="lampiran" name="lampiran"
                           accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                    <div class="form-text">Format: PDF, DOC, DOCX, JPG, PNG. Maksimal 5MB</div>
                </div>

                <!-- Status -->
                <div class="mb-3">
                    <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                    <select class="form-select" id="status" name="status" required>
                        <option value="draft" <?php echo set_select('status', 'draft'); ?>>Draft (Belum Ditampilkan)</option>
                        <option value="publish" <?php echo set_select('status', 'publish', true); ?>>Publish (Tampilkan Sekarang)</option>
                    </select>
                    <div class="form-text">Draft = Pengumuman belum ditampilkan, Publish = Pengumuman ditampilkan</div>
                </div>

                <!-- Buttons -->
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-save me-2"></i>Simpan Pengumuman
                    </button>
                    <a href="<?php echo base_url('pengumuman'); ?>" class="btn btn-secondary">
                        <i class="bi bi-x-circle me-2"></i>Batal
                    </a>
                </div>

            </form>
        </div>
    </div>
</div>

<!-- Quill JS -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js"></script> -->
<script src="<?= base_url('assets/js/quill.min.js'); ?>"></script>

<script>
// ─── Initialize Quill Editor ──────────────────────────────────────────────────
var quill = new Quill('#editor-container', {
    theme: 'snow',
    placeholder: 'Tulis isi pengumuman di sini...',
    modules: {
        toolbar: [
            // Heading & font size
            [{ 'header': [1, 2, 3, false] }],
            [{ 'font': [] }],
            [{ 'size': ['small', false, 'large', 'huge'] }],

            // Text style
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'color': [] }, { 'background': [] }],

            // Paragraph
            [{ 'align': [] }],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'indent': '-1'}, { 'indent': '+1' }],

            // Block
            ['blockquote', 'code-block'],
            ['link'],

            // Clear
            ['clean']
        ]
    }
});

// ─── Word Count ────────────────────────────────────────────────────────────────
function updateWordCount() {
    var text = quill.getText().trim();
    var words = text.length > 0 ? text.split(/\s+/).length : 0;
    document.getElementById('word-count').textContent = words + ' kata';
}

quill.on('text-change', updateWordCount);

// ─── Sync editor HTML → hidden textarea before submit ─────────────────────────
document.getElementById('formPengumuman').addEventListener('submit', function(e) {
    var content = quill.root.innerHTML;

    // Treat empty editor as blank (avoid submitting "<p><br></p>")
    var plainText = quill.getText().trim();
    if (!plainText) {
        e.preventDefault();
        alert('Isi pengumuman tidak boleh kosong!');
        quill.focus();
        return;
    }

    document.getElementById('isi').value = content;
});

// ─── Date validation ──────────────────────────────────────────────────────────
document.getElementById('tanggal_expired').addEventListener('change', function() {
    var publishDate = document.getElementById('tanggal_publish').value;
    var expiredDate = this.value;

    if (publishDate && expiredDate) {
        if (new Date(expiredDate) < new Date(publishDate)) {
            alert('Tanggal berakhir tidak boleh lebih awal dari tanggal publish!');
            this.value = '';
        }
    }
});
</script>