<style>
.form-card { background:#fff; border-radius:14px; border:1px solid #e9ecef; box-shadow:0 2px 12px rgba(0,0,0,0.06); padding:28px; margin-bottom:20px; }
.form-section-title { font-size:.88rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#64748b; margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid #f1f5f9; display:flex; align-items:center; gap:7px; }
.form-section-title i { color:#3b82f6; }
.ql-editor { min-height: 240px; font-size:.95rem; }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color:#dee2e6 !important; }
.ql-toolbar.ql-snow { border-radius:8px 8px 0 0; }
.ql-container.ql-snow { border-radius:0 0 8px 8px; }

/* Drop zone */
.upload-zone {
  border: 2px dashed #c7d2fe; border-radius: 12px;
  background: #f8f9ff; padding: 32px; text-align: center;
  cursor: pointer; transition: border-color .2s, background .2s;
}
.upload-zone:hover, .upload-zone.dragover { border-color: #3b82f6; background: #eff6ff; }
.upload-zone-icon { font-size: 2.2rem; color: #a5b4fc; margin-bottom: 8px; }

/* Preview grid */
#preview-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.preview-thumb {
  position: relative; width:110px; height:110px;
  border-radius:10px; overflow:hidden; background:#f1f5f9;
}
.preview-thumb img { width:100%; height:100%; object-fit:cover; }
.preview-thumb .remove-preview {
  position:absolute; top:4px; right:4px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(239,68,68,.9); color:#fff; border:none;
  font-size:.7rem; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}

/* Thumbnail preview */
#thumb-preview { width:100%; max-height:220px; object-fit:cover; border-radius:10px; display:none; margin-top:10px; }

.btn-submit { background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff; border:none; border-radius:50px; padding:11px 36px; font-weight:700; font-size:.95rem; transition: all .2s; }
.btn-submit:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 4px 16px rgba(99,102,241,.3); }
</style>

<!-- Quill CSS -->
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">

<!-- Back + Title -->
<div class="d-flex align-items-center gap-3 mb-4">
    <a href="<?php echo base_url('kegiatan'); ?>"
       class="btn btn-sm btn-outline-secondary" style="border-radius:50px; padding:6px 16px;">
        <i class="bi bi-arrow-left me-1"></i>Kembali
    </a>
    <div>
        <h5 class="fw-bold mb-0 text-dark">Buat Kegiatan Baru</h5>
        <small class="text-muted">Isi informasi kegiatan dan unggah foto galeri</small>
    </div>
</div>

<?php if($this->session->flashdata('error')): ?>
<div class="alert alert-danger alert-dismissible fade show" style="border-radius:10px;" role="alert">
    <i class="bi bi-exclamation-circle me-2"></i><?php echo $this->session->flashdata('error'); ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>

<form method="post" action="<?php echo base_url('kegiatan/tambah'); ?>" enctype="multipart/form-data" id="formKegiatan">

<div class="row g-3">
    <!-- LEFT -->
    <div class="col-lg-8">
        <!-- Info Dasar -->
        <div class="form-card">
            <div class="form-section-title"><i class="bi bi-info-circle"></i>Informasi Kegiatan</div>

            <div class="mb-3">
                <label class="form-label fw-semibold small">Judul Kegiatan <span class="text-danger">*</span></label>
                <input type="text" name="judul" class="form-control" style="border-radius:8px;"
                       value="<?php echo set_value('judul'); ?>" placeholder="Contoh: Gotong Royong RT 05"
                       <?php echo (validation_errors()) ? '' : ''; ?>>
                <?php echo form_error('judul','<small class="text-danger">','</small>'); ?>
            </div>

            <div class="mb-3">
                <label class="form-label fw-semibold small">Artikel / Isi Kegiatan <span class="text-danger">*</span></label>
                <div id="quill-editor" style="min-height:240px;"></div>
                <textarea name="isi" id="isi-hidden" style="display:none;"><?php echo set_value('isi'); ?></textarea>
                <?php echo form_error('isi','<small class="text-danger">','</small>'); ?>
            </div>
        </div>

        <!-- Galeri -->
        <div class="form-card">
            <div class="form-section-title"><i class="bi bi-images"></i>Galeri Foto</div>

            <div class="upload-zone" id="dropzone" onclick="document.getElementById('galeri-input').click()">
                <div class="upload-zone-icon">🖼️</div>
                <div class="fw-semibold text-muted mb-1">Klik atau drag & drop foto ke sini</div>
                <small class="text-muted">JPG, PNG, WEBP — maks. 5 MB per foto, bisa pilih banyak</small>
                <input type="file" name="galeri[]" id="galeri-input" multiple accept="image/*" style="display:none;">
            </div>
            <div id="preview-grid"></div>
        </div>
    </div>

    <!-- RIGHT -->
    <div class="col-lg-4">
        <!-- Publish -->
        <div class="form-card">
            <div class="form-section-title"><i class="bi bi-send"></i>Publikasi</div>

            <div class="mb-3">
                <label class="form-label fw-semibold small">Status</label>
                <select name="status" class="form-select" style="border-radius:8px;">
                    <option value="draft" <?php echo set_select('status','draft',true); ?>>📝 Draft</option>
                    <option value="publish" <?php echo set_select('status','publish'); ?>>✅ Publish</option>
                </select>
            </div>

            <div class="mb-3">
                <label class="form-label fw-semibold small">Kategori <span class="text-danger">*</span></label>
                <select name="kategori" class="form-select" style="border-radius:8px;">
                    <option value="">-- Pilih --</option>
                    <?php
                    $kats = ['sosial'=>'🤝 Sosial','olahraga'=>'⚽ Olahraga','kebersihan'=>'🧹 Kebersihan',
                             'keagamaan'=>'🕌 Keagamaan','pendidikan'=>'📚 Pendidikan',
                             'kesehatan'=>'❤️ Kesehatan','budaya'=>'🎭 Budaya','lainnya'=>'📌 Lainnya'];
                    foreach($kats as $k=>$v): ?>
                    <option value="<?php echo $k; ?>" <?php echo set_select('kategori',$k); ?>><?php echo $v; ?></option>
                    <?php endforeach; ?>
                </select>
                <?php echo form_error('kategori','<small class="text-danger">','</small>'); ?>
            </div>

            <div class="mb-3">
                <label class="form-label fw-semibold small">Tanggal Mulai <span class="text-danger">*</span></label>
                <input type="date" name="tanggal_mulai" class="form-control" style="border-radius:8px;"
                       value="<?php echo set_value('tanggal_mulai', date('Y-m-d')); ?>">
                <?php echo form_error('tanggal_mulai','<small class="text-danger">','</small>'); ?>
            </div>

            <div class="mb-3">
                <label class="form-label fw-semibold small">Tanggal Selesai <span class="text-muted">(opsional)</span></label>
                <input type="date" name="tanggal_selesai" class="form-control" style="border-radius:8px;"
                       value="<?php echo set_value('tanggal_selesai'); ?>">
            </div>

            <div class="mb-3">
                <label class="form-label fw-semibold small">Lokasi <span class="text-muted">(opsional)</span></label>
                <input type="text" name="lokasi" class="form-control" style="border-radius:8px;"
                       placeholder="Contoh: Balai RW 05"
                       value="<?php echo set_value('lokasi'); ?>">
            </div>

            <button type="submit" class="btn-submit w-100" id="btnSubmit">
                <i class="bi bi-check-lg me-2"></i>Simpan Kegiatan
            </button>
        </div>

        <!-- Thumbnail -->
        <div class="form-card">
            <div class="form-section-title"><i class="bi bi-image"></i>Thumbnail / Cover</div>
            <div class="mb-2">
                <label class="form-label fw-semibold small">Foto Utama</label>
                <input type="file" name="thumbnail" id="thumbnail-input" accept="image/*"
                       class="form-control" style="border-radius:8px;" onchange="previewThumb(this)">
                <small class="text-muted">JPG, PNG, WEBP — maks. 3 MB</small>
            </div>
            <img id="thumb-preview" src="" alt="Preview">
        </div>
    </div>
</div>

</form>

<!-- Quill JS -->
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
<script>
// ─── Quill ───────────────────────────────────
var quill = new Quill('#quill-editor', {
    theme: 'snow',
    placeholder: 'Tulis artikel kegiatan di sini…',
    modules: {
        toolbar: [
            [{ header: [2, 3, false] }],
            ['bold', 'italic', 'underline', 'strike'],
            [{ color: [] }, { background: [] }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block'],
            ['link', 'image'],
            ['clean']
        ]
    }
});
<?php if(set_value('isi')): ?>
quill.root.innerHTML = <?php echo json_encode(set_value('isi')); ?>;
<?php endif; ?>

document.getElementById('formKegiatan').addEventListener('submit', function() {
    document.getElementById('isi-hidden').value = quill.root.innerHTML;
});

// ─── Thumbnail Preview ───────────────────────
function previewThumb(input) {
    var prev = document.getElementById('thumb-preview');
    if(input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) { prev.src = e.target.result; prev.style.display = 'block'; };
        reader.readAsDataURL(input.files[0]);
    }
}

// ─── Galeri multi-upload preview ─────────────
var allFiles = [];

function renderPreviews() {
    var grid = document.getElementById('preview-grid');
    grid.innerHTML = '';
    allFiles.forEach(function(file, idx) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var div = document.createElement('div');
            div.className = 'preview-thumb';
            div.innerHTML = '<img src="'+e.target.result+'" alt="">' +
                '<button type="button" class="remove-preview" onclick="removeFile('+idx+')">&#x2715;</button>';
            grid.appendChild(div);
        };
        reader.readAsDataURL(file);
    });
    rebuildFileInput();
}

function rebuildFileInput() {
    var input = document.getElementById('galeri-input');
    var dt = new DataTransfer();
    allFiles.forEach(function(f) { dt.items.add(f); });
    input.files = dt.files;
}

function removeFile(idx) {
    allFiles.splice(idx, 1);
    renderPreviews();
}

document.getElementById('galeri-input').addEventListener('change', function(e) {
    Array.from(e.target.files).forEach(function(f) { allFiles.push(f); });
    renderPreviews();
});

// Drag & drop
var dz = document.getElementById('dropzone');
dz.addEventListener('dragover', function(e) { e.preventDefault(); dz.classList.add('dragover'); });
dz.addEventListener('dragleave', function() { dz.classList.remove('dragover'); });
dz.addEventListener('drop', function(e) {
    e.preventDefault(); dz.classList.remove('dragover');
    Array.from(e.dataTransfer.files).forEach(function(f) {
        if(f.type.startsWith('image/')) allFiles.push(f);
    });
    renderPreviews();
});
</script>