<?= $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 sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h2 class="text-3xl font-extrabold text-gray-900 tracking-tight">Kelola Galeri</h2>
            <p class="text-gray-500 mt-2 text-sm">Upload dan atur foto untuk halaman galeri MIE NYINYIR.</p>
        </div>
        <button type="button" onclick="bukaModalGaleri()" class="flex items-center justify-center gap-2 bg-[#a11c12] text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-[#a11c12]/30 hover:bg-[#8b1c1c] hover:-translate-y-0.5 transition-all duration-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
            </svg>
            Tambah Foto
        </button>
    </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">
            <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="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        
        <?php if(empty($galeriList)): ?>
            <div class="col-span-full flex flex-col items-center justify-center py-16 px-4 border-2 border-dashed border-gray-300 rounded-2xl bg-gray-50/50">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-400 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                <p class="text-gray-500 font-medium text-center">Belum ada foto di galeri.</p>
                <button type="button" onclick="bukaModalGaleri()" class="mt-4 text-[#a11c12] font-semibold text-sm hover:underline">Upload foto pertama</button>
            </div>
        <?php endif; ?>

        <?php foreach($galeriList as $g): ?>
            <div class="bg-white rounded-2xl shadow-sm hover:shadow-md border border-gray-100 overflow-hidden relative group transition-shadow duration-300 flex flex-col">
                <div class="relative w-full aspect-[4/3] overflow-hidden bg-gray-100">
                    <img src="<?= base_url('assets/img/gb_galery/' . $g['img']) ?>" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    
                    <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-3 backdrop-blur-sm z-10">
                        <button type="button" onclick="editModalGaleri('<?= $g['id'] ?>', '<?= addslashes(esc($g['title'])) ?>', '<?= addslashes(esc($g['desc'])) ?>', '<?= $g['img'] ?>')" class="flex items-center justify-center bg-white/90 text-gray-800 p-2.5 rounded-xl hover:bg-white hover:text-[#144a2a] hover:scale-110 transition-all shadow-sm" title="Edit">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                            </svg>
                        </button>
                        <form action="<?= base_url('dashboard-adm/galeri/delete/' . $g['id']) ?>" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus foto ini?');" class="m-0">
                            <button type="submit" class="flex items-center justify-center bg-white/90 text-gray-800 p-2.5 rounded-xl hover:bg-red-500 hover:text-white hover:scale-110 transition-all 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" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" 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 class="p-5 flex-1 flex flex-col justify-between">
                    <div>
                        <h3 class="font-bold text-gray-800 text-lg mb-1 line-clamp-1" title="<?= esc($g['title']) ?>"><?= esc($g['title']) ?></h3>
                        <p class="text-sm text-gray-500 mb-4 line-clamp-2" title="<?= esc($g['desc']) ?>"><?= esc($g['desc']) ?></p>
                    </div>
                    <div>
                        <span class="inline-block text-[11px] font-bold tracking-wider uppercase bg-[#faebe6] text-[#a11c12] px-2.5 py-1 rounded-md">
                            By: <?= esc($g['source'] ?? 'Admin') ?>
                        </span>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>

<div id="galeriModal" class="hidden fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm transition-opacity">
    <div class="absolute inset-0" onclick="tutupModalGaleri()"></div>
    
    <div class="bg-white w-full max-w-lg rounded-2xl shadow-2xl relative z-10 mx-4 overflow-hidden transform scale-95 transition-transform duration-300" id="modalBox">
        <div class="absolute top-0 left-0 w-full h-1.5 bg-gradient-to-r from-[#a11c12] to-[#fbbd42]"></div>
        
        <button type="button" onclick="tutupModalGaleri()" class="absolute top-5 right-5 z-20 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-full p-1 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
        
        <div class="p-6 md:p-8">
            <h3 id="modalTitle" class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
                Tambah Foto
            </h3>
            
            <form action="<?= base_url('dashboard-adm/galeri/save') ?>" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="id" id="inputId">
                <input type="hidden" name="old_img" id="inputOldImg">
                
                <div class="space-y-5">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2.5">Judul Foto</label>
                        <input type="text" name="title" id="inputTitle" required 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] transition-all" placeholder="Contoh: Suasana Dine-in">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2.5">Deskripsi Singkat</label>
                        <textarea name="desc" id="inputDesc" 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] transition-all resize-none" placeholder="Tuliskan cerita singkat tentang foto ini..."></textarea>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2.5">Pilih Gambar</label>
                        <div class="bg-gray-50/50 p-4 rounded-xl border border-dashed border-gray-300">
                            <img id="previewImg" src="" class="hidden w-full h-40 object-cover rounded-lg shadow-sm border border-gray-200 mb-4">
                            <input type="file" name="img" id="inputFile" accept="image/*" class="w-full text-sm text-gray-600 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-[#faebe6] file:text-[#a11c12] hover:file:bg-[#ffcfcf] transition-all cursor-pointer">
                            <p class="text-xs text-gray-500 mt-3">* Jika mengedit, biarkan kosong jika tidak ingin mengubah foto saat ini.</p>
                        </div>
                    </div>
                </div>
                
                <div class="mt-8 flex justify-end">
                    <button type="submit" class="w-full sm:w-auto px-8 py-3 bg-[#a11c12] text-white font-bold rounded-xl shadow-lg hover:bg-[#8b1c1c] hover:-translate-y-0.5 transition-all duration-300">
                        Simpan Foto
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function bukaModalGaleri() {
        const modal = document.getElementById('galeriModal');
        const modalBox = document.getElementById('modalBox');

        document.getElementById('inputId').value = '';
        document.getElementById('inputOldImg').value = '';
        document.getElementById('inputTitle').value = '';
        document.getElementById('inputDesc').value = '';
        document.getElementById('inputFile').required = true;
        
        let preview = document.getElementById('previewImg');
        preview.src = '';
        preview.classList.add('hidden');
        
        document.getElementById('modalTitle').innerText = 'Tambah Foto Baru';
        
        modal.classList.remove('hidden');
        setTimeout(() => {
            modalBox.classList.remove('scale-95');
            modalBox.classList.add('scale-100');
        }, 10);
    }

    function editModalGaleri(id, title, desc, img) {
        const modal = document.getElementById('galeriModal');
        const modalBox = document.getElementById('modalBox');

        document.getElementById('inputId').value = id;
        document.getElementById('inputOldImg').value = img;
        document.getElementById('inputTitle').value = title;
        document.getElementById('inputDesc').value = desc;
        document.getElementById('inputFile').required = false;
        
        let preview = document.getElementById('previewImg');
        preview.src = '<?= base_url('assets/img/gb_galery/') ?>' + img;
        preview.classList.remove('hidden');

        document.getElementById('modalTitle').innerText = 'Edit Foto';
        
        modal.classList.remove('hidden');
        setTimeout(() => {
            modalBox.classList.remove('scale-95');
            modalBox.classList.add('scale-100');
        }, 10);
    }

    function tutupModalGaleri() {
        const modal = document.getElementById('galeriModal');
        const modalBox = document.getElementById('modalBox');

        if (!modal || !modalBox) return; // Mencegah error jika elemen tidak ditemukan

        modalBox.classList.remove('scale-100');
        modalBox.classList.add('scale-95');
        
        setTimeout(() => {
            modal.classList.add('hidden');
        }, 300); 
    }
</script>
<?= $this->endSection() ?>