<div class="container mx-auto px-4 py-4">
    <div class="flex justify-between items-center mb-4">
        <h1 class="text-xl font-bold text-[#333]">Sliding Banner</h1>
        <button type="button" id="btnAddBanner" class="px-4 py-2 bg-[#7A4397] text-sm text-white rounded-lg hover:bg-[#7A4397]">
            + Tambah Banner Baru
        </button>
    </div>

    <?php if ($this->session->flashdata('message')): ?>
        <div class="mb-4 alert flex items-center justify-between bg-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-100 border-l-4 border-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-500 text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-800 px-6 py-4 rounded-lg shadow-lg transition transform duration-300">
            <div class="flex items-center">
                <i data-feather="<?php echo $this->session->flashdata('message_type') === 'success' ? 'check-circle' : 'x-circle'; ?>" class="h-6 w-6 mr-3"></i>
                <span class="font-semibold"><?php echo $this->session->flashdata('message'); ?></span>
            </div>
            <button class="ml-4 text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-500 hover:text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-700 focus:outline-none" onclick="this.parentElement.style.display='none'">
                <i data-feather="x" class="h-5 w-5"></i>
            </button>
        </div>
    <?php endif; ?>

    <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
        <div class="p-4 bg-white border-b">
            <h2 class="text-base font-medium text-[#333]">Daftar Banner</h2>
            <p class="text-xs text-gray-500">Drag untuk mengubah urutan banner</p>
        </div>

        <?php if (empty($banners)): ?>
            <div class="p-8 text-center text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="mb-2">Belum ada banner yang ditambahkan</p>
                <a href="<?= base_url('admin/contents/banners/add') ?>" class="text-blue-600 hover:text-blue-800 font-medium">Tambah Banner Sekarang</a>
            </div>
        <?php else: ?>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Urutan</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Banner</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CTA</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200 banner-sortable" id="banner-list">
                        <?php foreach ($banners as $banner): ?>
                            <tr class="hover:bg-gray-50" data-id="<?= $banner->carousel_banner_id ?>">
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <span class="cursor-move text-gray-500 mr-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                                <path d="M5 8h10M5 12h10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                                            </svg>
                                        </span>
                                        <?= $banner->order_number ?>
                                    </div>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-16 w-36">
                                            <img
                                                class="h-16 w-36 object-cover rounded banner-click"
                                                src="<?= $banner->image_url ?>"
                                                data-image="<?= $banner->image_url ?>"
                                                data-alt="<?= $banner->cta_text ?>"
                                                alt="<?= $banner->cta_text ?>">
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="text-sm text-gray-900"><?= $banner->cta_text ?></div>
                                    <?php if (!empty($banner->cta_button_text)): ?>
                                        <div class="text-sm text-gray-500">
                                            Button: <?= $banner->cta_button_text ?>
                                            <?php if (!empty($banner->cta_button_link)): ?>
                                                <span class="ml-1 text-xs text-blue-600 hover:text-blue-800">
                                                    <a href="<?= $banner->cta_button_link ?>" target="_blank">(Link)</a>
                                                </span>
                                            <?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <?php if ($banner->is_active): ?>
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                            Aktif
                                        </span>
                                    <?php else: ?>
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                            Nonaktif
                                        </span>
                                    <?php endif; ?>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="<?= base_url('admin/contents/banners/edit/' . $banner->carousel_banner_id) ?>" class="text-blue-600 hover:text-blue-900 mr-3">Edit</a>
                                    <a href="<?= base_url('admin/contents/delete_banner/' . $banner->carousel_banner_id) ?>" class="text-red-600 hover:text-red-900 delete-banner" data-id="<?= $banner->carousel_banner_id ?>">Hapus</a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const CSRF_TOKEN = "<?= $this->security->get_csrf_token_name(); ?>";
        const CSRF_HASH = "<?= $this->security->get_csrf_hash(); ?>";
        // Initialize SortableJS for drag and drop reordering
        if (document.getElementById('banner-list')) {
            new Sortable(document.getElementById('banner-list'), {
                handle: '.cursor-move',
                animation: 150,
                onEnd: function() {
                    updateBannerOrder();
                }
            });
        }

        // Update banner order via AJAX
        function updateBannerOrder() {
            const items = [];
            document.querySelectorAll('#banner-list tr').forEach(function(row) {
                items.push(row.getAttribute('data-id'));
            });

            fetch('<?= base_url('admin/contents/update_banner_order') ?>', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: 'items=' + encodeURIComponent(JSON.stringify(items)) +
                        '&' + encodeURIComponent(CSRF_TOKEN) + '=' + encodeURIComponent(CSRF_HASH)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        document.querySelectorAll('#banner-list tr').forEach(function(row, index) {
                            row.querySelector('td:first-child').textContent = index + 1;
                        });
                        notyf.success(data.message);
                        setTimeout(() => {
                            location.reload();
                        }, 1500);
                    } else {
                        notyf.error(data.message || 'Gagal memperbarui urutan banner.');
                    }

                    // Perbarui token CSRF dari response kalau dikirim balik (opsional)
                    if (data.csrf_token && data.csrf_hash) {
                        window[`${data.csrf_token}`] = data.csrf_hash;
                    }
                })
                .catch(error => {
                    console.error('AJAX error:', error);
                    notyf.error('Terjadi kesalahan pada sistem.');
                });
        }

        document.querySelectorAll('.banner-click').forEach(function(img) {
            img.addEventListener('click', function() {
                const imageSrc = this.getAttribute('data-image');
                const imageAlt = this.getAttribute('data-alt');
                showImagePopup(imageSrc, imageAlt);
            });
        });

        document.getElementById('btnAddBanner').addEventListener('click', function() {
            window.open('<?= base_url('admin/contents/banners/add') ?>', '_blank');
        });

        function showImagePopup(imageSrc, imageAlt) {
            // Cek apakah sudah ada popup yang terbuka
            const existingPopup = document.getElementById('imagePopup');
            if (existingPopup) {
                existingPopup.remove();
            }

            // Buat elemen popup
            const popup = document.createElement('div');
            popup.id = 'imagePopup';
            popup.className = 'fixed inset-0 flex items-center justify-center z-[1000] bg-black bg-opacity-75 transition-opacity duration-300';

            // Buat konten popup
            popup.innerHTML = `
                <div class="relative max-w-4xl max-h-[90vh] rounded-lg overflow-hidden bg-white">
                    <div class="absolute top-4 right-4">
                        <button onclick="closeImagePopup()" class="text-white bg-gray-800 rounded-full p-2 hover:bg-gray-900 transition-colors">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>
                    <img src="${imageSrc}" alt="${imageAlt}" class="max-h-[85vh] object-contain">
                    <div class="p-4 bg-white">
                        <h3 class="text-lg font-medium text-gray-900">${imageAlt}</h3>
                    </div>
                </div>
            `;

            // Tambahkan popup ke body
            document.body.appendChild(popup);

            // Tambahkan event listener untuk menutup popup jika user klik di luar gambar
            popup.addEventListener('click', function(e) {
                if (e.target === popup) {
                    closeImagePopup();
                }
            });
        }
    });
    // Fungsi untuk menutup popup gambar
    function closeImagePopup() {
        const popup = document.getElementById('imagePopup');
        if (popup) {
            popup.classList.add('opacity-0');
            setTimeout(() => {
                popup.remove();
            }, 300);
        }
    }
</script>