FileMgr

✏️ /home/mien4214/public_html/webcp/app/Views/admin-web/berita-setting.php

✕ Tutup

<?= $this->extend('admin-web/layout/template') ?>

<?= $this->section('content') ?>
<div class="p-6 md:p-8 lg:p-10 w-full max-w-screen-2xl mx-auto">

<div class="mb-8 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h2 class="text-3xl font-extrabold text-gray-900 tracking-tight">Kelola Berita & Pengumuman</h2>
            <p class="text-gray-500 mt-2 text-sm">Pengaturan mandiri. Tambah, simpan, matikan, atau edit data spesifik langsung pada kotak yang dipilih.</p>
        </div>
    </div>

<?php if (session()->getFlashdata('success')): ?>
        <div class="flex items-center gap-3 bg-green-50/80 border border-green-200 text-green-700 px-5 py-4 mb-8 rounded-xl shadow-sm animate-fadeIn">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            <p class="font-medium"><?= session()->getFlashdata('success') ?></p>
        </div>
    <?php endif; ?>

<div class="border-b border-gray-200 mb-8 overflow-x-auto hide-scrollbar">
        <nav class="flex space-x-2" aria-label="Tabs">
            <button type="button" onclick="openTab(event, 'tab-hero')" class="tab-btn active whitespace-nowrap py-4 px-6 border-b-2 font-bold text-sm transition-all duration-300 focus:outline-none flex items-center gap-2 rounded-t-xl bg-red-50/50 text-[#a11c12] border-[#a11c12]">
                <span class="bg-white text-[#a11c12] w-6 h-6 rounded-md flex items-center justify-center text-xs font-black shadow-sm border border-red-100">1</span> Banner Atas
            </button>
            <button type="button" onclick="openTab(event, 'tab-pengumuman')" class="tab-btn whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm transition-all duration-300 focus:outline-none flex items-center gap-2 rounded-t-xl text-gray-500 border-transparent hover:text-gray-700 hover:bg-gray-50">
                <span class="bg-gray-100 text-gray-500 w-6 h-6 rounded-md flex items-center justify-center text-xs font-black shadow-sm">2</span> Daftar Pengumuman
            </button>
            <button type="button" onclick="openTab(event, 'tab-berita')" class="tab-btn whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm transition-all duration-300 focus:outline-none flex items-center gap-2 rounded-t-xl text-gray-500 border-transparent hover:text-gray-700 hover:bg-gray-50">
                <span class="bg-gray-100 text-gray-500 w-6 h-6 rounded-md flex items-center justify-center text-xs font-black shadow-sm">3</span> Daftar Berita
            </button>
        </nav>
    </div>

<div class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-gray-100 min-h-[400px] relative overflow-hidden mb-16">
        <div class="absolute top-0 left-0 w-full h-[6px] bg-gradient-to-r from-[#a11c12] to-[#fbbd42]"></div>
        
        <div id="tab-hero" class="tab-content block animate-fadeIn mt-2">
            <form action="<?= base_url('dashboard-adm/berita/update') ?>" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="action" value="hero">
                <h3 class="text-xl font-bold text-gray-800 mb-6">1. Pengaturan Banner Atas</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2.5">Kicker (Teks Kecil)</label>
                        <input type="text" name="berita_hero_kicker" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-[#a11c12]/20 focus:border-[#a11c12]" value="<?= esc($settings['berita_hero_kicker'] ?? "Stay Updated") ?>">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-gray-700 mb-2.5">Deskripsi Hero</label>
                        <textarea name="berita_hero_desc" rows="3" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-[#a11c12]/20 focus:border-[#a11c12]"><?= esc($settings['berita_hero_desc'] ?? "Dapatkan informasi terbaru seputar inovasi, acara mendatang, dan perkembangan terkini langsung dari dapur kami.") ?></textarea>
                    </div>
                    <div class="md:col-span-2 bg-gray-50/50 p-6 rounded-xl border border-dashed border-gray-300">
                        <label class="block text-sm font-semibold text-gray-700 mb-4">Gambar Background</label>
                        <?php if(!empty($settings['berita_hero_img'])): ?>
                            <div class="mb-5"><img src="<?= base_url('uploads/berita/' . $settings['berita_hero_img']) ?>" class="h-48 w-auto object-cover rounded-xl shadow-sm border border-gray-200"></div>
                        <?php endif; ?>
                        <input type="file" name="berita_hero_img" accept="image/*" class="w-full text-sm text-gray-600 file:mr-5 file:py-2.5 file:px-5 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-[#faebe6] file:text-[#a11c12] hover:file:bg-[#ffcfcf] cursor-pointer">
                    </div>
                    <div class="md:col-span-2 flex justify-end mt-2">
                        <button type="submit" class="bg-[#a11c12] text-white font-bold py-3 px-8 rounded-xl hover:bg-[#8b1c1c] transition-all shadow-md">Simpan Banner Hero</button>
                    </div>
                </div>
            </form>
        </div>

<div id="tab-pengumuman" class="tab-content hidden animate-fadeIn mt-2">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4 border-b border-gray-100 pb-4">
                <h3 class="text-xl font-bold text-gray-800">2. Daftar Pengumuman / Promo</h3>
                <button type="button" onclick="openAddModal('pengumuman')" class="flex items-center gap-2 bg-[#144a2a] text-white text-sm font-bold py-2.5 px-5 rounded-xl hover:bg-[#0f3820] shadow-sm transition-all hover:-translate-y-0.5">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" /></svg>
                    Tambah Baru
                </button>
            </div>
            
            <div class="space-y-4">
                <?php 
                $today = date('Y-m-d');
                $pengumumanList = isset($settings['pengumuman_list']) ? json_decode($settings['pengumuman_list'], true) : []; 
                foreach($pengumumanList as $index => $p): 
                    $isActive = isset($p['status']) ? $p['status'] : '1';
                    $isExpired = (!empty($p['end_date']) && $p['end_date'] < $today);
                    if ($isExpired) $isActive = '0'; 
                ?>
                <div class="item-box border border-gray-200 rounded-xl bg-white overflow-hidden shadow-sm transition-all hover:border-blue-200">
                    <div class="flex flex-col sm:flex-row items-center justify-between p-4 bg-gray-50/50 gap-4">
                        <div class="flex-1 flex items-center gap-3 w-full">
                            <div class="w-10 h-10 rounded-lg bg-gray-200 overflow-hidden flex-shrink-0">
                                <?php if(!empty($p['img'])): ?><img src="<?= base_url('uploads/berita/'.$p['img']) ?>" class="w-full h-full object-cover"><?php endif; ?>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 line-clamp-1"><?= esc($p['title']) ?></h4>
                                <div class="flex items-center gap-2 text-xs mt-1">
                                    <?php if($isExpired): ?>
                                        <span class="status-badge bg-red-100 text-red-600 px-2 py-0.5 rounded font-bold">EXPIRED</span>
                                    <?php else: ?>
                                        <span class="status-badge <?= $isActive == '1' ? 'bg-green-100 text-green-700' : 'bg-gray-200 text-gray-600' ?> px-2 py-0.5 rounded font-bold">
                                            <?= $isActive == '1' ? 'AKTIF' : 'NONAKTIF' ?>
                                        </span>
                                    <?php endif; ?>
                                    <span class="text-gray-500">Akan Berakhir: <?= !empty($p['end_date']) ? date('d M Y', strtotime($p['end_date'])) : 'Selamanya' ?></span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center gap-2 w-full sm:w-auto justify-end">
                            <label class="relative inline-flex items-center cursor-pointer mr-2" title="Aktif/Nonaktifkan Otomatis">
                                <input type="checkbox" class="sr-only peer toggle-checkbox" onchange="toggleStatusAjax('pengumuman', <?= $index ?>, this)" <?= $isActive == '1' ? 'checked' : '' ?> <?= $isExpired ? 'disabled' : '' ?>>
                                <div class="w-11 h-6 bg-gray-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500 <?= $isExpired ? 'opacity-50 cursor-not-allowed' : '' ?>"></div>
                            </label>
                            
                            <button type="button" 
                                onclick="openEditModal('pengumuman', <?= $index ?>, this)" 
                                data-title="<?= esc($p['title']) ?>"
                                data-date="<?= esc($p['date'] ?? '') ?>"
                                data-label="<?= esc($p['label'] ?? '') ?>"
                                data-start="<?= esc($p['start_date'] ?? '') ?>"
                                data-end="<?= esc($p['end_date'] ?? '') ?>"
                                data-desc="<?= esc($p['desc'] ?? '') ?>"
                                data-img="<?= !empty($p['img']) ? base_url('uploads/berita/'.$p['img']) : '' ?>"
                                class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg border border-blue-100 shadow-sm" title="Edit Data">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
                            </button>
                            
                            <form action="<?= base_url('dashboard-adm/berita/update') ?>" method="POST" class="inline">
                                <input type="hidden" name="action" value="delete">
                                <input type="hidden" name="item_type" value="pengumuman">
                                <input type="hidden" name="item_index" value="<?= $index ?>">
                                <button type="submit" onclick="return confirm('Hapus pengumuman ini secara permanen?')" class="p-2 text-red-600 hover:bg-red-50 rounded-lg border border-red-100 shadow-sm" title="Hapus"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg></button>
                            </form>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
                <?php if(empty($pengumumanList)): ?>
                    <div class="p-8 text-center border-2 border-dashed border-gray-200 rounded-xl text-gray-400">Belum ada data pengumuman.</div>
                <?php endif; ?>
            </div>
        </div>

<div id="tab-berita" class="tab-content hidden animate-fadeIn mt-2">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4 border-b border-gray-100 pb-4">
                <h3 class="text-xl font-bold text-gray-800">3. Daftar Berita / Artikel</h3>
                <button type="button" onclick="openAddModal('berita')" class="flex items-center gap-2 bg-[#144a2a] text-white text-sm font-bold py-2.5 px-5 rounded-xl hover:bg-[#0f3820] shadow-sm transition-all hover:-translate-y-0.5">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" /></svg>
                    Tambah Baru
                </button>
            </div>

<div class="space-y-4">
                <?php 
                $beritaList = isset($settings['berita_list']) ? json_decode($settings['berita_list'], true) : []; 
                foreach($beritaList as $index => $b): 
                    $isActive = isset($b['status']) ? $b['status'] : '1';
                    $isExpired = (!empty($b['end_date']) && $b['end_date'] < $today);
                    if ($isExpired) $isActive = '0';
                ?>
                <div class="item-box border border-gray-200 rounded-xl bg-white overflow-hidden shadow-sm transition-all hover:border-blue-200">
                    <div class="flex flex-col sm:flex-row items-center justify-between p-4 bg-gray-50/50 gap-4">
                        <div class="flex-1 flex items-center gap-3 w-full">
                            <div class="w-10 h-10 rounded-lg bg-gray-200 overflow-hidden flex-shrink-0">
                                <?php if(!empty($b['img'])): ?><img src="<?= base_url('uploads/berita/'.$b['img']) ?>" class="w-full h-full object-cover"><?php endif; ?>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 line-clamp-1"><?= esc($b['title']) ?></h4>
                                <div class="flex items-center gap-2 text-xs mt-1">
                                    <?php if($isExpired): ?>
                                        <span class="status-badge bg-red-100 text-red-600 px-2 py-0.5 rounded font-bold">EXPIRED</span>
                                    <?php else: ?>
                                        <span class="status-badge <?= $isActive == '1' ? 'bg-green-100 text-green-700' : 'bg-gray-200 text-gray-600' ?> px-2 py-0.5 rounded font-bold">
                                            <?= $isActive == '1' ? 'AKTIF' : 'NONAKTIF' ?>
                                        </span>
                                    <?php endif; ?>
                                    <span class="text-gray-500">Berakhir: <?= !empty($b['end_date']) ? date('d M Y', strtotime($b['end_date'])) : 'Selamanya' ?></span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center gap-2 w-full sm:w-auto justify-end">
                            <label class="relative inline-flex items-center cursor-pointer mr-2" title="Aktif/Nonaktifkan Otomatis">
                                <input type="checkbox" class="sr-only peer toggle-checkbox" onchange="toggleStatusAjax('berita', <?= $index ?>, this)" <?= $isActive == '1' ? 'checked' : '' ?> <?= $isExpired ? 'disabled' : '' ?>>
                                <div class="w-11 h-6 bg-gray-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 peer-checked:bg-green-500 <?= $isExpired ? 'opacity-50 cursor-not-allowed' : '' ?> transition-all"></div>
                            </label>
                            
                            <button type="button" 
                                onclick="openEditModal('berita', <?= $index ?>, this)" 
                                data-title="<?= esc($b['title']) ?>"
                                data-date="<?= esc($b['date'] ?? '') ?>"
                                data-read="<?= esc($b['read'] ?? '') ?>"
                                data-start="<?= esc($b['start_date'] ?? '') ?>"
                                data-end="<?= esc($b['end_date'] ?? '') ?>"
                                data-desc="<?= esc($b['desc'] ?? '') ?>"
                                data-img="<?= !empty($b['img']) ? base_url('uploads/berita/'.$b['img']) : '' ?>"
                                class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg border border-blue-100 shadow-sm" title="Edit Data">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
                            </button>
                            
                            <form action="<?= base_url('dashboard-adm/berita/update') ?>" method="POST" class="inline">
                                <input type="hidden" name="action" value="delete">
                                <input type="hidden" name="item_type" value="berita">
                                <input type="hidden" name="item_index" value="<?= $index ?>">
                                <button type="submit" onclick="return confirm('Hapus artikel berita ini permanen?')" class="p-2 text-red-600 hover:bg-red-50 rounded-lg border border-red-100 shadow-sm" title="Hapus"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg></button>
                            </form>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
                <?php if(empty($beritaList)): ?>
                    <div class="p-8 text-center border-2 border-dashed border-gray-200 rounded-xl text-gray-400">Belum ada data berita.</div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<div id="modalAdd" class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 opacity-0 transition-opacity duration-300">
    <div class="bg-white rounded-3xl w-full max-w-3xl max-h-[90vh] overflow-y-auto shadow-2xl transform scale-95 transition-transform duration-300 hide-scrollbar" id="modalAddContent">
        
        <div class="bg-green-50 text-green-800 font-bold px-6 py-4 border-b border-green-200 flex justify-between items-center sticky top-0 z-10 backdrop-blur-md">
            <span class="flex items-center gap-2 text-lg" id="modalAddTitleLabel">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" /></svg> 
                Tambah Data Baru
            </span>
            <button type="button" onclick="closeAddModal()" class="text-green-800 hover:text-red-600 bg-white p-1.5 rounded-full shadow-sm hover:bg-red-50 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>

<form id="formAdd" action="<?= base_url('dashboard-adm/berita/update') ?>" method="POST" enctype="multipart/form-data" class="p-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
            <input type="hidden" name="action" value="add">
            <input type="hidden" name="item_type" id="addItemType" value="">
            
            <div class="lg:col-span-2">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Judul Utama</label>
                <input type="text" name="title" required class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all">
            </div>
            
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Tanggal Info</label>
                <input type="date" name="date" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all">
            </div>
            
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2" id="addExtraLabel">Label Tambahan</label>
                <input type="text" id="addExtraInput" name="" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all">
            </div>

<div class="bg-yellow-50/50 p-4 rounded-xl border border-yellow-100">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Mulai Tayang (Opsional)</label>
                <input type="date" name="start_date" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg outline-none focus:border-yellow-400 focus:ring-2 focus:ring-yellow-200">
            </div>
            
            <div class="bg-yellow-50/50 p-4 rounded-xl border border-yellow-100">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Akhir Tayang (Opsional)</label>
                <input type="date" name="end_date" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg outline-none focus:border-yellow-400 focus:ring-2 focus:ring-yellow-200">
            </div>
            
            <div class="lg:col-span-2">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Deskripsi / Konten</label>
                <textarea name="desc" rows="3" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all"></textarea>
            </div>
            
            <div class="lg:col-span-2">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Gambar Cover</label>
                <input type="file" name="img" accept="image/*" class="w-full border border-gray-200 rounded-lg py-2 px-4 bg-gray-50 text-sm">
            </div>
            
            <div class="lg:col-span-2 flex justify-end gap-3 mt-4 border-t border-gray-100 pt-6">
                <button type="button" onclick="closeAddModal()" class="bg-gray-100 text-gray-700 font-bold py-2.5 px-6 rounded-xl hover:bg-gray-200 transition-colors">Batal</button>
                <button type="submit" class="bg-[#144a2a] text-white font-bold py-2.5 px-8 rounded-xl shadow-md hover:bg-[#0f3820] hover:-translate-y-0.5 transition-all">Simpan Data Baru</button>
            </div>
        </form>
    </div>
</div>

<form id="formEdit" action="<?= base_url('dashboard-adm/berita/update') ?>" method="POST" enctype="multipart/form-data" class="p-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
            <input type="hidden" name="action" value="edit">
            <input type="hidden" name="item_type" id="editItemType" value="">
            <input type="hidden" name="item_index" id="editItemIndex" value="">
            
            <div class="lg:col-span-2">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Judul Utama</label>
                <input type="text" name="title" id="editTitle" required class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all">
            </div>
            
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Tanggal Info</label>
                <input type="date" name="date" id="editDate" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all">
            </div>
            
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2" id="editExtraLabel">Label Tambahan</label>
                <input type="text" id="editExtraInput" name="" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all">
            </div>

<div class="bg-yellow-50/50 p-4 rounded-xl border border-yellow-100">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Mulai Tayang</label>
                <input type="date" name="start_date" id="editStartDate" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg outline-none focus:border-yellow-400 focus:ring-2 focus:ring-yellow-200">
            </div>
            
            <div class="bg-yellow-50/50 p-4 rounded-xl border border-yellow-100">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Akhir Tayang</label>
                <input type="date" name="end_date" id="editEndDate" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg outline-none focus:border-yellow-400 focus:ring-2 focus:ring-yellow-200">
            </div>
            
            <div class="lg:col-span-2">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Deskripsi / Konten</label>
                <textarea name="desc" id="editDesc" rows="3" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all"></textarea>
            </div>
            
            <div class="lg:col-span-2">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Ganti Gambar (opsional)</label>
                
                <div id="editImgPreviewContainer" class="mb-3 hidden">
                    <p class="text-xs text-gray-500 mb-1">Gambar saat ini:</p>
                    <img id="editImgPreview" src="" class="h-32 w-auto object-cover rounded-lg border border-gray-200 shadow-sm">
                </div>

<input type="file" name="img" accept="image/*" class="w-full border border-gray-200 rounded-lg py-2 px-4 bg-gray-50 text-sm">
            </div>
            
            <div class="lg:col-span-2 flex justify-end gap-3 mt-4 border-t border-gray-100 pt-6">
                <button type="button" onclick="closeEditModal()" class="bg-gray-100 text-gray-700 font-bold py-2.5 px-6 rounded-xl hover:bg-gray-200 transition-colors">Batal</button>
                <button type="submit" class="bg-blue-600 text-white font-bold py-2.5 px-8 rounded-xl shadow-md hover:bg-blue-700 hover:-translate-y-0.5 transition-all">Simpan Perubahan</button>
            </div>
        </form>
    </div>
</div>

document.getElementById(tabId).classList.remove('hidden'); document.getElementById(tabId).classList.add('block');
        const btn = evt.currentTarget;
        btn.classList.add('bg-red-50/50', 'text-[#a11c12]', 'border-[#a11c12]', 'font-bold');
        const activeBadge = btn.querySelector('span');
        if(activeBadge) { activeBadge.classList.add('bg-white', 'text-[#a11c12]', 'border-red-100'); activeBadge.classList.remove('bg-gray-100', 'text-gray-500'); }
    }

/* =======================================
       LOGIKA MODAL TAMBAH BARU 
       ======================================= */
    function openAddModal(type) {
        const modal = document.getElementById('modalAdd');
        const content = document.getElementById('modalAddContent');
        const form = document.getElementById('formAdd');
        
        form.reset(); // Bersihkan input sisaan
        document.getElementById('addItemType').value = type; // Set Tipe

const extraLabel = document.getElementById('addExtraLabel');
        const extraInput = document.getElementById('addExtraInput');
        const modalTitle = document.getElementById('modalAddTitleLabel');

if (type === 'pengumuman') {
            modalTitle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" /></svg> Tambah Pengumuman Baru';
            extraLabel.innerText = 'Label (Cth: Promo)';
            extraInput.name = 'label';
            extraInput.placeholder = 'Promo';
        } else {
            modalTitle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" /></svg> Tambah Berita Baru';
            extraLabel.innerText = 'Info Tambahan Waktu Baca';
            extraInput.name = 'read';
            extraInput.placeholder = 'Cth: 5 min read';
        }

modal.classList.remove('hidden');
        void modal.offsetWidth;
        modal.classList.remove('opacity-0');
        content.classList.remove('scale-95');
        content.classList.add('scale-100');
        document.body.style.overflow = 'hidden'; 
    }

function closeAddModal() {
        const modal = document.getElementById('modalAdd');
        const content = document.getElementById('modalAddContent');
        
        modal.classList.add('opacity-0');
        content.classList.remove('scale-100');
        content.classList.add('scale-95');
        
        setTimeout(() => {
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto'; 
        }, 300);
    }

/* =======================================
       LOGIKA MODAL EDIT DATA
       ======================================= */
    function openEditModal(type, index, btn) {
        const modal = document.getElementById('modalEdit');
        const content = document.getElementById('modalEditContent');

document.getElementById('editItemType').value = type;
        document.getElementById('editItemIndex').value = index;

document.getElementById('editTitle').value = btn.getAttribute('data-title');
        document.getElementById('editDate').value = btn.getAttribute('data-date');
        document.getElementById('editStartDate').value = btn.getAttribute('data-start');
        document.getElementById('editEndDate').value = btn.getAttribute('data-end');
        document.getElementById('editDesc').value = btn.getAttribute('data-desc');

// ==== LOGIKA PREVIEW GAMBAR ====
        const imgSrc = btn.getAttribute('data-img');
        const imgContainer = document.getElementById('editImgPreviewContainer');
        const imgPreview = document.getElementById('editImgPreview');

if (imgSrc && imgSrc.trim() !== '') {
            imgPreview.src = imgSrc;
            imgContainer.classList.remove('hidden');
        } else {
            imgPreview.src = '';
            imgContainer.classList.add('hidden');
        }
        // ==============================

const extraLabel = document.getElementById('editExtraLabel');
        const extraInput = document.getElementById('editExtraInput');
        const modalTitle = document.getElementById('modalEditTitleLabel');

if (type === 'pengumuman') {
            modalTitle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" /></svg> Edit Pengumuman';
            extraLabel.innerText = 'Label (Cth: Promo)';
            extraInput.name = 'label';
            extraInput.value = btn.getAttribute('data-label');
        } else {
            modalTitle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" /></svg> Edit Berita';
            extraLabel.innerText = 'Info Tambahan Waktu Baca';
            extraInput.name = 'read';
            extraInput.value = btn.getAttribute('data-read');
        }

modal.classList.remove('hidden');
        void modal.offsetWidth; 
        modal.classList.remove('opacity-0');
        content.classList.remove('scale-95');
        content.classList.add('scale-100');
        document.body.style.overflow = 'hidden'; 
    }

function closeEditModal() {
        const modal = document.getElementById('modalEdit');
        const content = document.getElementById('modalEditContent');
        
        modal.classList.add('opacity-0');
        content.classList.remove('scale-100');
        content.classList.add('scale-95');
        
        setTimeout(() => {
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto'; 
            document.getElementById('formEdit').reset(); 
            // Reset image preview saat ditutup
            document.getElementById('editImgPreviewContainer').classList.add('hidden');
            document.getElementById('editImgPreview').src = '';
        }, 300);
    }

/* =======================================
       LOGIKA AJAX STATUS TOGGLE 
       ======================================= */
    function toggleStatusAjax(type, index, checkbox) {
        const isChecked = checkbox.checked ? '1' : '0';
        checkbox.disabled = true; 
        
        const badge = checkbox.closest('.item-box').querySelector('.status-badge');
        if(badge && !badge.innerText.includes('EXPIRED')) {
            if(isChecked === '1') {
                badge.innerText = 'AKTIF';
                badge.className = 'status-badge bg-green-100 text-green-700 px-2 py-0.5 rounded font-bold';
            } else {
                badge.innerText = 'NONAKTIF';
                badge.className = 'status-badge bg-gray-200 text-gray-600 px-2 py-0.5 rounded font-bold';
            }
        }

fetch('<?= base_url("dashboard-adm/berita/update") ?>', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: new URLSearchParams({ action: 'toggle', type: type, index: index, status: isChecked })
        })
        .then(response => response.json())
        .then(data => {
            checkbox.disabled = false;
            if(!data.success) {
                alert('Gagal menyinkronkan status ke server.');
                checkbox.checked = !checkbox.checked; 
            }
        })
        .catch(err => {
            checkbox.disabled = false;
            checkbox.checked = !checkbox.checked; 
            alert('Terjadi kesalahan jaringan.');
        });
    }
</script>
<?= $this->endSection() ?>

Batal

⬅ Views 11 item

Nama	Tipe	Ukuran	Diubah	Perm	Aksi
📁 layout	dir	—	27/04/26 10:19	0755	📂
🐘 about-setting.php	php	19.8 KB	24/04/26 11:59	0644	✏️ ⬇
🐘 berita-setting.php	php	37.9 KB	24/04/26 11:59	0644	✏️ ⬇
🐘 dashboard-adm.php	php	13.2 KB	11/05/26 10:46	0644	✏️ ⬇
🐘 galeri-setting.php	php	11.9 KB	16/05/26 15:38	0644	✏️ ⬇
🐘 home-setting.php	php	26.5 KB	24/04/26 11:59	0644	✏️ ⬇
🐘 karir-setting.php	php	35.7 KB	13/05/26 09:14	0644	✏️ ⬇
🐘 kedai-setting.php	php	8 KB	28/04/26 16:01	0644	✏️ ⬇
🐘 kritik-setting.php	php	8.5 KB	16/05/26 15:40	0644	✏️ ⬇
🐘 login.php	php	1.8 KB	24/04/26 11:59	0644	✏️ ⬇
🐘 menu-setting.php	php	18.9 KB	28/04/26 16:04	0644	✏️ ⬇

✏️ Rename

🔑 Ubah Permission