<?= $this->extend('admin-web/layout/template') ?>
<?= $this->section('content') ?>

<div class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-gray-100 min-h-[80vh]">
    
    <div class="flex items-center gap-3 mb-8">
        <div class="bg-red-100 p-3 rounded-lg text-red-700">
            <i class="fa-solid fa-house-chimney text-xl"></i>
        </div>
        <div>
            <h2 class="text-2xl font-bold text-gray-800">Kelola Halaman Home</h2>
            <p class="text-sm text-gray-500">Atur tampilan hero, slider, dan highlight menu utama.</p>
        </div>
    </div>

    <?php if(session()->getFlashdata('success')): ?>
        <div class="bg-emerald-50 border border-emerald-200 text-emerald-700 px-5 py-4 rounded-xl mb-6 flex items-center gap-3 shadow-sm">
            <i class="fa-solid fa-circle-check text-lg"></i>
            <span class="font-medium"><?= session()->getFlashdata('success') ?></span>
        </div>
    <?php endif; ?>
    <?php if(session()->getFlashdata('error')): ?>
        <div class="bg-red-50 border border-red-200 text-red-700 px-5 py-4 rounded-xl mb-6 flex items-center gap-3 shadow-sm">
            <i class="fa-solid fa-circle-exclamation text-lg"></i>
            <span class="font-medium"><?= session()->getFlashdata('error') ?></span>
        </div>
    <?php endif; ?>

    <div class="bg-gray-100/80 p-1.5 rounded-xl inline-flex mb-8 overflow-x-auto max-w-full">
        <button onclick="openTab(event, 'tab-about-slider')" class="tab-btn bg-white shadow-sm text-red-700 px-6 py-2.5 rounded-lg text-sm font-semibold transition-all duration-300 flex items-center gap-2 whitespace-nowrap">
            <i class="fa-solid fa-image"></i> Hero, About & Slider
        </button>
        <button onclick="openTab(event, 'tab-produk')" class="tab-btn text-gray-500 hover:text-gray-700 px-6 py-2.5 rounded-lg text-sm font-semibold transition-all duration-300 flex items-center gap-2 whitespace-nowrap">
            <i class="fa-solid fa-bowl-food"></i> Highlight Mie
        </button>
    </div>

    <div id="tab-about-slider" class="tab-content block animate-fade-in">
        <div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
            
            <div class="bg-white p-6 md:p-8 rounded-2xl border border-gray-200 shadow-sm">
                <div class="flex items-center gap-2 mb-6 border-b border-gray-100 pb-4">
                    <i class="fa-solid fa-pen-to-square text-red-600"></i>
                    <h3 class="text-lg font-bold text-gray-800">Pengaturan Teks & Hero</h3>
                </div>

                <form action="<?= base_url('/dashboard-adm/home/update-settings') ?>" method="POST" enctype="multipart/form-data" class="space-y-5">
                    
                    <div>
                        <label class="block font-semibold text-gray-700 mb-2 text-sm">Gambar Hero Saat Ini</label>
                        <div class="bg-gray-50 p-2 rounded-xl border border-gray-200 mb-3 inline-block">
                            <img src="<?= base_url($settings['hero_image'] ?? 'assets/img/gb_hero/hero.jpg') ?>" class="w-full max-w-xs h-36 object-cover rounded-lg shadow-sm">
                        </div>
                        <label class="block font-medium text-sm text-gray-600 mb-1">Upload Hero Baru <span class="text-xs text-gray-400 font-normal">(Kosongkan jika tidak ganti)</span></label>
                        <input type="file" name="hero_image" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-red-50 file:text-red-700 hover:file:bg-red-100 border border-gray-200 rounded-lg bg-gray-50 focus:outline-none cursor-pointer transition-colors" accept="image/*">
                    </div>
                    
                    <div>
                        <label class="block font-semibold text-gray-700 mb-1 text-sm">Judul About</label>
                        <p class="text-xs text-gray-500 mb-2">Gunakan <code>&lt;span class="text-red-600"&gt;teks&lt;/span&gt;</code> untuk warna merah</p>
                        <input type="text" name="about_title" class="w-full border border-gray-300 px-4 py-2.5 rounded-xl bg-gray-50 focus:bg-white focus:ring-2 focus:ring-red-500/20 focus:border-red-500 outline-none transition-all" value="<?= esc($settings['about_title'] ?? '') ?>" required>
                    </div>
                    
                    <div>
                        <label class="block font-semibold text-gray-700 mb-2 text-sm">Teks Deskripsi About</label>
                        <textarea name="about_text" class="w-full border border-gray-300 px-4 py-3 rounded-xl bg-gray-50 focus:bg-white focus:ring-2 focus:ring-red-500/20 focus:border-red-500 outline-none transition-all h-32 resize-none" required><?= esc($settings['about_text'] ?? '') ?></textarea>
                    </div>
                    
                    <button type="submit" class="w-full bg-red-700 hover:bg-red-800 text-white font-bold px-6 py-3 rounded-xl shadow-md shadow-red-700/20 transition-all flex justify-center items-center gap-2">
                        <i class="fa-solid fa-save"></i> Simpan Pengaturan
                    </button>
                </form>
            </div>

            <div class="bg-gray-50/50 p-6 md:p-8 rounded-2xl border border-gray-200 shadow-sm flex flex-col">
                <div class="flex items-center gap-2 mb-6 border-b border-gray-200 pb-4">
                    <i class="fa-solid fa-images text-blue-600"></i>
                    <h3 class="text-lg font-bold text-gray-800">Pengaturan Slider Galeri</h3>
                </div>
                
                <form action="<?= base_url('/dashboard-adm/home/add-slider') ?>" method="POST" enctype="multipart/form-data" class="bg-white p-5 rounded-xl border border-gray-200 shadow-sm flex flex-col sm:flex-row gap-4 items-end mb-6">
                    <div class="w-full sm:flex-1">
                        <label class="block font-semibold mb-2 text-sm text-gray-700">Tambah Slider Baru</label>
                        <input type="file" name="slider_image" required class="block w-full text-sm text-gray-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 border border-gray-200 rounded-lg focus:outline-none cursor-pointer transition-colors" accept="image/*">
                    </div>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-5 py-2.5 rounded-lg shadow-md shadow-blue-600/20 transition-all flex items-center gap-2 whitespace-nowrap h-[46px]">
                        <i class="fa-solid fa-cloud-arrow-up"></i> Upload
                    </button>
                </form>
                
                <label class="block font-semibold mb-3 text-sm text-gray-700">Galeri Slider Saat Ini</label>
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 overflow-y-auto max-h-[400px] pr-2 custom-scrollbar flex-1 content-start">
                    <?php if(!empty($sliders)): ?>
                        <?php foreach($sliders as $slider): ?>
                            <div class="relative rounded-xl overflow-hidden shadow-sm group bg-white border border-gray-200">
                                <img src="<?= base_url($slider['image']) ?>" class="w-full h-28 object-cover group-hover:scale-105 transition-transform duration-500">
                                <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                                    <a href="<?= base_url('/dashboard-adm/home/delete-slider/'.$slider['id']) ?>" onclick="return confirm('Yakin hapus gambar slider ini?')" class="bg-red-600 hover:bg-red-700 text-white w-10 h-10 rounded-full flex items-center justify-center shadow-lg transform scale-0 group-hover:scale-100 transition-transform duration-300">
                                        <i class="fa-solid fa-trash-can"></i>
                                    </a>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="col-span-full flex flex-col items-center justify-center p-8 border-2 border-dashed border-gray-300 rounded-xl bg-gray-50">
                            <i class="fa-regular fa-image text-4xl text-gray-300 mb-3"></i>
                            <p class="text-sm text-gray-500 italic">Belum ada gambar slider.</p>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

        </div>
    </div>

    <div id="tab-produk" class="tab-content hidden animate-fade-in">
        
        <div class="bg-gray-50 p-6 md:p-8 rounded-2xl border border-gray-200 mb-8 shadow-sm">
            <div class="flex items-center gap-2 mb-6 border-b border-gray-200 pb-4">
                <i class="fa-solid fa-circle-plus text-green-600"></i>
                <h3 class="text-lg font-bold text-gray-800">Tambah Highlight Menu Baru</h3>
            </div>

            <form action="<?= base_url('/dashboard-adm/home/add-product') ?>" method="POST" enctype="multipart/form-data" class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Nama Produk</label>
                    <input type="text" name="name" required class="w-full border border-gray-300 px-4 py-2.5 rounded-xl bg-white focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all" placeholder="Cth: MIE NYINYIR">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Subtitle</label>
                    <input type="text" name="subtitle" required class="w-full border border-gray-300 px-4 py-2.5 rounded-xl bg-white focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all" placeholder="Cth: Pedasnya Bikin Nagih">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Deskripsi Singkat</label>
                    <textarea name="description" required class="w-full border border-gray-300 px-4 py-2.5 rounded-xl bg-white focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all h-24 resize-none"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Bahan-bahan (Ingredients)</label>
                    <textarea name="ingredients" required class="w-full border border-gray-300 px-4 py-2.5 rounded-xl bg-white focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all h-24 resize-none"></textarea>
                </div>
                
                <div class="col-span-1 md:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Kategori Rasa</label>
                    <input type="text" name="kategori_rasa" required class="w-full border border-gray-300 px-4 py-2.5 rounded-xl bg-white focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all" placeholder="Cth: Pedas, Gurih, Asin">
                    <p class="text-[11px] text-gray-500 mt-1.5"><i class="fa-solid fa-circle-info mr-1"></i> Pisahkan dengan koma. Sistem akan mengubahnya menjadi ikon *badge* di halaman depan.</p>
                </div>

                <div class="col-span-1 md:col-span-2 flex flex-col sm:flex-row items-end gap-4 mt-2">
                    <div class="w-full sm:flex-1">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Gambar Produk</label>
                        <input type="file" name="product_image" required class="block w-full text-sm text-gray-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-gray-100 file:text-gray-700 hover:file:bg-gray-200 border border-gray-300 rounded-xl bg-white focus:outline-none cursor-pointer" accept="image/*">
                    </div>
                    <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-bold px-6 py-2.5 rounded-xl shadow-md shadow-green-600/20 transition-all flex items-center justify-center gap-2 h-[46px] w-full sm:w-auto">
                        <i class="fa-solid fa-plus"></i> Simpan Produk
                    </button>
                </div>
            </form>
        </div>

        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full border-collapse whitespace-nowrap md:whitespace-normal">
                    <thead class="bg-gray-50/80 text-gray-600 text-sm border-b border-gray-200">
                        <tr>
                            <th class="p-4 text-center font-semibold w-24">Gambar</th>
                            <th class="p-4 text-left font-semibold w-1/4">Info Menu</th>
                            <th class="p-4 text-left font-semibold">Deskripsi & Detail</th>
                            <th class="p-4 text-center font-semibold w-28">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        <?php if(!empty($products)): ?>
                            <?php foreach($products as $prod): ?>
                            <tr class="hover:bg-gray-50/50 transition-colors group">
                                <td class="p-4">
                                    <div class="w-16 h-16 rounded-xl border border-gray-200 overflow-hidden mx-auto shadow-sm bg-white">
                                        <img src="<?= base_url($prod['image']) ?>" class="w-full h-full object-cover">
                                    </div>
                                </td>
                                <td class="p-4 align-top">
                                    <div class="font-bold text-red-700 text-lg mb-0.5"><?= esc($prod['name']) ?></div>
                                    <div class="text-xs text-gray-500 font-medium tracking-wide bg-gray-100 inline-block px-2 py-1 rounded-md"><?= esc($prod['subtitle']) ?></div>
                                </td>
                                <td class="p-4 text-sm align-top">
                                    <div class="space-y-2">
                                        <p class="text-gray-600 line-clamp-2" title="<?= esc($prod['description']) ?>">
                                            <span class="font-semibold text-gray-800">Desc:</span> <?= esc($prod['description']) ?>
                                        </p>
                                        <p class="text-gray-600 line-clamp-1" title="<?= esc($prod['ingredients']) ?>">
                                            <span class="font-semibold text-gray-800">Ing:</span> <?= esc($prod['ingredients']) ?>
                                        </p>
                                        <div class="flex items-center gap-2 flex-wrap mt-1">
                                            <span class="font-semibold text-gray-800 text-xs">Rasa:</span>
                                            <?php 
                                                // Memecah kategori rasa jadi badge kecil jika ingin terlihat rapi
                                                $rasaArr = explode(',', $prod['kategori_rasa'] ?? '');
                                                foreach($rasaArr as $r): 
                                                    if(trim($r) !== ''):
                                            ?>
                                                <span class="bg-amber-100 border border-amber-200 text-amber-800 px-2.5 py-0.5 rounded-full text-[11px] font-bold shadow-sm">
                                                    <?= esc(trim($r)) ?>
                                                </span>
                                            <?php endif; endforeach; ?>
                                        </div>
                                    </div>
                                </td>
                            
                                <td class="p-4 align-middle">
                                    <div class="flex flex-col sm:flex-row items-center justify-center gap-2">
                                        <button onclick="openEditModal(<?= $prod['id'] ?>, '<?= esc($prod['name']) ?>', '<?= esc($prod['subtitle']) ?>', `<?= esc(htmlspecialchars($prod['description'], ENT_QUOTES)) ?>`, `<?= esc(htmlspecialchars($prod['ingredients'], ENT_QUOTES)) ?>`, `<?= esc(htmlspecialchars($prod['kategori_rasa'] ?? '', ENT_QUOTES)) ?>`)" class="w-8 h-8 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-600 hover:text-white flex items-center justify-center transition-colors shadow-sm" title="Edit">
                                            <i class="fa-solid fa-pen-to-square text-sm"></i>
                                        </button>

                                        <a href="<?= base_url('/dashboard-adm/home/delete-product/'.$prod['id']) ?>" onclick="return confirm('Hapus produk ini secara permanen?')" class="w-8 h-8 rounded-lg bg-red-50 text-red-600 hover:bg-red-600 hover:text-white flex items-center justify-center transition-colors shadow-sm" title="Hapus">
                                            <i class="fa-solid fa-trash-can text-sm"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <tr>
                                <td colspan="4" class="p-10 text-center text-gray-500">
                                    <div class="flex flex-col items-center justify-center">
                                        <i class="fa-solid fa-box-open text-4xl text-gray-300 mb-3"></i>
                                        <p class="font-medium">Belum ada highlight menu.</p>
                                        <p class="text-xs mt-1">Tambahkan menu baru melalui form di atas.</p>
                                    </div>
                                </td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<div id="editModal" class="fixed inset-0 bg-gray-900/60 z-50 hidden flex items-center justify-center backdrop-blur-sm transition-opacity opacity-0">
    <div id="editModalContent" class="bg-white p-6 md:p-8 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto transform scale-95 transition-transform duration-300">
        
        <div class="flex justify-between items-center mb-6 border-b border-gray-100 pb-4">
            <div class="flex items-center gap-3">
                <div class="bg-blue-100 text-blue-600 p-2 rounded-lg">
                    <i class="fa-solid fa-pen-to-square"></i>
                </div>
                <h3 class="font-bold text-xl text-gray-800">Edit Highlight Mie</h3>
            </div>
            <button onclick="closeEditModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 text-gray-500 hover:bg-red-100 hover:text-red-600 transition-colors">
                <i class="fa-solid fa-xmark text-lg"></i>
            </button>
        </div>
        
        <form id="editForm" action="" method="POST" enctype="multipart/form-data" class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Nama Produk</label>
                <input type="text" id="edit_name" name="name" required class="w-full border border-gray-300 px-4 py-2.5 rounded-xl bg-gray-50 focus:bg-white 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-1">Subtitle</label>
                <input type="text" id="edit_subtitle" name="subtitle" required class="w-full border border-gray-300 px-4 py-2.5 rounded-xl bg-gray-50 focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all">
            </div>
            <div class="col-span-1 md:col-span-2">
                <label class="block text-sm font-semibold text-gray-700 mb-1">Deskripsi Singkat</label>
                <textarea id="edit_description" name="description" required class="w-full border border-gray-300 px-4 py-2.5 rounded-xl bg-gray-50 focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all h-24 resize-none"></textarea>
            </div>
            <div class="col-span-1 md:col-span-2">
                <label class="block text-sm font-semibold text-gray-700 mb-1">Bahan-bahan (Ingredients)</label>
                <textarea id="edit_ingredients" name="ingredients" required class="w-full border border-gray-300 px-4 py-2.5 rounded-xl bg-gray-50 focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all h-24 resize-none"></textarea>
            </div>
            
            <div class="col-span-1 md:col-span-2">
                <label class="block text-sm font-semibold text-gray-700 mb-1">Kategori Rasa</label>
                <input type="text" id="edit_kategori_rasa" name="kategori_rasa" required class="w-full border border-gray-300 px-4 py-2.5 rounded-xl bg-gray-50 focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all" placeholder="Cth: Pedas Gila, Gurih, Asin">
            </div>

            <div class="col-span-1 md:col-span-2 bg-blue-50/50 p-4 rounded-xl border border-blue-100 mt-2">
                <div class="flex items-start gap-3">
                    <i class="fa-regular fa-image text-blue-500 text-lg mt-0.5"></i>
                    <div class="flex-1">
                        <label class="block text-sm font-bold mb-1 text-blue-900">Ganti Gambar Produk? (Opsional)</label>
                        <p class="text-xs text-blue-600/80 mb-3">Kosongkan bagian ini jika tidak ingin mengganti gambar yang lama.</p>
                        <input type="file" name="product_image" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-100 file:text-blue-700 hover:file:bg-blue-200 border border-white rounded-lg bg-white focus:outline-none cursor-pointer" accept="image/*">
                    </div>
                </div>
            </div>
            
            <div class="col-span-1 md:col-span-2 flex justify-end gap-3 mt-4 pt-5 border-t border-gray-100">
                <button type="button" onclick="closeEditModal()" class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold px-5 py-2.5 rounded-xl transition-colors">Batal</button>
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-6 py-2.5 rounded-xl shadow-md shadow-blue-600/20 transition-all flex items-center gap-2">
                    <i class="fa-solid fa-check"></i> Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>

<style>
    .animate-fade-in { animation: fadeIn 0.4s ease-in-out; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
    
    /* Scrollbar minimalis untuk area slider */
    .custom-scrollbar::-webkit-scrollbar { width: 6px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
</style>

<script>
    function openTab(evt, tabName) {
        // Sembunyikan semua konten tab
        document.querySelectorAll(".tab-content").forEach(tab => {
            tab.classList.remove("block"); 
            tab.classList.add("hidden");
        });
        
        // Reset warna semua tombol tab ke mode tidak aktif (Abu-abu, tanpa bg white)
        document.querySelectorAll(".tab-btn").forEach(btn => {
            btn.classList.remove("bg-white", "shadow-sm", "text-red-700");
            btn.classList.add("text-gray-500", "hover:text-gray-700");
        });
        
        // Tampilkan konten tab yang dipilih
        document.getElementById(tabName).classList.remove("hidden");
        document.getElementById(tabName).classList.add("block");
        
        // Warnai tombol tab yang aktif (Pill Putih & Merah)
        evt.currentTarget.classList.remove("text-gray-500", "hover:text-gray-700");
        evt.currentTarget.classList.add("bg-white", "shadow-sm", "text-red-700");
    }

    function openEditModal(id, name, subtitle, desc, ing, rasa) {
        const modal = document.getElementById('editModal');
        const modalContent = document.getElementById('editModalContent');
        
        modal.classList.remove('hidden');
        // Trigger reflow untuk animasi fade-in & scale
        void modal.offsetWidth; 
        modal.classList.remove('opacity-0');
        modalContent.classList.remove('scale-95');
        modalContent.classList.add('scale-100');

        document.getElementById('editForm').action = '<?= base_url('/dashboard-adm/home/update-product/') ?>' + id;
        document.getElementById('edit_name').value = name;
        document.getElementById('edit_subtitle').value = subtitle;
        document.getElementById('edit_description').value = desc;
        document.getElementById('edit_ingredients').value = ing;
        document.getElementById('edit_kategori_rasa').value = rasa; 
    }
    
    function closeEditModal() {
        const modal = document.getElementById('editModal');
        const modalContent = document.getElementById('editModalContent');
        
        // Animasi fade out
        modal.classList.add('opacity-0');
        modalContent.classList.remove('scale-100');
        modalContent.classList.add('scale-95');

        // Tunggu animasi selesai baru di-hidden
        setTimeout(() => {
            modal.classList.add('hidden');
        }, 300);
    }
</script>

<?= $this->endSection() ?>