<?= $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 Tampilan Kedai / Outlet</h2>
            <p class="text-gray-500 mt-2 text-sm leading-relaxed max-w-3xl">
                Atur outlet mana saja yang ingin ditampilkan (On) atau disembunyikan (Off) dari website publik. 
                <span class="font-semibold text-green-600">Perubahan ini aman dan tidak akan merubah data master di POS Anda.</span>
            </p>
        </div>
    </div>

    <div class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-gray-100 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-[6px] bg-gradient-to-r from-[#a11c12] to-[#fbbd42]"></div>
        
        <h3 class="text-lg font-bold text-gray-800 mb-6 flex items-center gap-3 mt-2">
            <span class="bg-[#faebe6] text-[#a11c12] w-10 h-10 rounded-lg flex items-center justify-center shadow-sm">
                <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 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
            </span>
            Daftar Seluruh Cabang
        </h3>

        <div class="overflow-x-auto rounded-xl border border-gray-200">
            <table class="min-w-full bg-white border-collapse whitespace-nowrap">
                <thead>
                    <tr class="bg-gray-50 text-gray-500 uppercase text-xs tracking-wider border-b border-gray-200">
                        <th class="py-4 px-6 text-left font-bold w-24">Kode</th>
                        <th class="py-4 px-6 text-left font-bold">Nama Outlet</th>
                        <th class="py-4 px-6 text-left font-bold">Alamat Lengkap</th>
                        <th class="py-4 px-6 text-center font-bold w-40">Tampil di Web</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <?php if (!empty($list_toko)): ?>
                        <?php foreach ($list_toko as $ot): ?>
                            <?php
                            // PENGAMAN: Pastikan data bisa dibaca baik sebagai Object maupun Array
                            $kd_toko = is_object($ot) ? $ot->kd_toko : $ot['kd_toko'];
                            $nm_toko = is_object($ot) ? $ot->nm_toko : $ot['nm_toko'];
                            $almt_toko = is_object($ot) ? $ot->almt_toko : $ot['almt_toko'];
                            
                            // Cek apakah kedai ini masuk dalam daftar yang disembunyikan
                            $isHidden = in_array($kd_toko, $hiddenOutlets);
                            ?>
                            <tr class="hover:bg-gray-50/80 transition-colors group">
                                <td class="py-4 px-6 text-left">
                                    <span class="font-bold bg-gray-100 border border-gray-200 py-1.5 px-2.5 rounded-md text-xs text-gray-600 font-mono tracking-wider shadow-sm">
                                        <?= esc($kd_toko) ?>
                                    </span>
                                </td>
                                <td class="py-4 px-6 text-left">
                                    <span class="font-bold text-[#a11c12] text-base">
                                        <?= esc($nm_toko) ?>
                                    </span>
                                </td>
                                <td class="py-4 px-6 text-left">
                                    <div class="flex items-start gap-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                                        <span class="text-gray-500 text-sm whitespace-normal max-w-xs md:max-w-md line-clamp-2" title="<?= esc($almt_toko) ?>">
                                            <?= esc($almt_toko) ?>
                                        </span>
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-center">
                                    <label class="inline-flex relative items-center cursor-pointer shadow-sm rounded-full">
                                        <input type="checkbox" class="sr-only peer"
                                            onchange="toggleKedai(this, '<?= esc($kd_toko) ?>', this.checked)"
                                            <?= !$isHidden ? 'checked' : '' ?>>
                                        <div class="w-12 h-6 bg-gray-200 peer-focus:outline-none 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 shadow-inner">
                                        </div>
                                    </label>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="4" class="p-10 text-center text-gray-500 bg-gray-50/50">
                                <div class="flex flex-col items-center justify-center">
                                    <svg class="w-12 h-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
                                    <span class="font-semibold text-lg">Data outlet kosong.</span>
                                    <span class="text-sm mt-1">Tidak ada data kedai yang ditemukan di database.</span>
                                </div>
                            </td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    function toggleKedai(element, kd_toko, isChecked) {
        const isVisible = isChecked ? 1 : 0;
        
        element.disabled = true;
        
        const params = new URLSearchParams();
        params.append('kd_toko', kd_toko);
        params.append('is_visible', isVisible);

        fetch('<?= base_url('dashboard-adm/kedai/toggle-visibility') ?>', {
            method: 'POST',
            headers: {
                "X-Requested-With": "XMLHttpRequest",
                "Content-Type": "application/x-www-form-urlencoded" 
            },
            body: params.toString()
        })
        .then(response => response.json())
        .then(data => {
            if (!data.success) {
                alert('Gagal: ' + (data.message || 'Server menolak pembaruan data.'));
                element.checked = !isChecked; 
            }
        })
        .catch(error => {
            console.error('Error AJAX:', error);
            alert('Gagal terhubung ke server. Pastikan rute POST sudah didaftarkan.');
            element.checked = !isChecked;
        })
        .finally(() => {
            element.disabled = false;
        });
    }
</script>
<?= $this->endSection() ?>