<?php
$kategori = $kategori ?? [];
$selectedIcon = old('icon_kategori', $kategori['icon_kategori'] ?? 'bi-box-seam');
$iconOptions = [
    'bi-box-seam',
    'bi-box-seam-fill',
    'bi-box',
    'bi-box-fill',
    'bi-boxes',
    'bi-archive',
    'bi-archive-fill',
    'bi-inboxes',
    'bi-inboxes-fill',
    'bi-tags',
    'bi-tags-fill',
    'bi-tag',
    'bi-tag-fill',
    'bi-bag',
    'bi-bag-fill',
    'bi-basket',
    'bi-basket-fill',
    'bi-cart',
    'bi-cart-fill',
    'bi-cart-check',
    'bi-cart-dash',
    'bi-cart-plus',
    'bi-truck',
    'bi-shop',
    'bi-shop-window',
    'bi-building',
    'bi-buildings',
    'bi-house',
    'bi-house-fill',
    'bi-tools',
    'bi-wrench',
    'bi-gear',
    'bi-gear-fill',
    'bi-cpu',
    'bi-cpu-fill',
    'bi-hdd',
    'bi-hdd-fill',
    'bi-printer',
    'bi-printer-fill',
    'bi-laptop',
    'bi-phone',
    'bi-tablet',
    'bi-display',
    'bi-keyboard',
    'bi-mouse',
    'bi-headphones',
    'bi-camera',
    'bi-camera-fill',
    'bi-webcam',
    'bi-lightbulb',
    'bi-lightbulb-fill',
    'bi-plug',
    'bi-plug-fill',
    'bi-battery-full',
    'bi-droplet',
    'bi-droplet-fill',
    'bi-cup-hot',
    'bi-cup-hot-fill',
    'bi-egg-fried',
    'bi-bicycle',
    'bi-car-front',
    'bi-car-front-fill',
    'bi-fuel-pump',
    'bi-fuel-pump-fill',
    'bi-gift',
    'bi-gift-fill',
    'bi-gem',
    'bi-watch',
    'bi-wallet2',
    'bi-credit-card',
    'bi-cash-coin',
    'bi-calculator',
    'bi-clipboard',
    'bi-clipboard-check',
    'bi-clipboard-data',
    'bi-journal-text',
    'bi-file-earmark-text',
    'bi-file-earmark-spreadsheet',
    'bi-folder',
    'bi-folder-fill',
    'bi-star',
    'bi-star-fill',
    'bi-heart',
    'bi-heart-fill',
    'bi-award',
    'bi-award-fill',
    'bi-shield-check',
    'bi-shield-fill-check',
    'bi-check2-circle',
    'bi-exclamation-triangle',
    'bi-exclamation-triangle-fill',
    'bi-info-circle',
    'bi-info-circle-fill',
    'bi-grid',
    'bi-grid-fill',
    'bi-grid-3x3-gap',
    'bi-collection',
    'bi-collection-fill',
    'bi-list-ul',
    'bi-diagram-3',
    'bi-diagram-3-fill',
    'bi-layers',
    'bi-layers-fill',
    'bi-kanban',
    'bi-kanban-fill',
    'bi-bar-chart',
    'bi-bar-chart-fill',
    'bi-pie-chart',
    'bi-pie-chart-fill',
];
?>

<section class="content-area">
    <?php $errors = session()->getFlashdata('errors'); ?>
    <?php if ($errors) : ?>
        <div class="alert alert-danger">
            <?php foreach ($errors as $error) : ?>
                <div><?= esc($error) ?></div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <div class="row">
        <div class="col-lg-6">
            <div class="panel p-4">
                <form action="<?= esc($action, 'attr') ?>" method="post">
                    <?= csrf_field() ?>

                    <div class="row g-4">
                        <div class="col-12 col-lg-12">
                            <label for="nama_kategori" class="form-label fw-semibold">Nama Kategori</label>
                            <input type="text" class="form-control" id="nama_kategori" name="nama_kategori" value="<?= esc(old('nama_kategori', $kategori['nama_kategori'] ?? ''), 'attr') ?>" required>
                        </div>

                        <div class="col-12 col-lg-12">
                            <label class="form-label fw-semibold">Icon Kategori</label>
                            <div class="d-flex align-items-center gap-3">
                                <div class="category-icon-preview" id="selectedIconPreview">
                                    <i class="bi <?= esc($selectedIcon, 'attr') ?>"></i>
                                </div>
                                <div class="min-w-0">
                                    <input type="hidden" id="icon_kategori" name="icon_kategori" value="<?= esc($selectedIcon, 'attr') ?>" required>
                                    <button type="button" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#iconPickerModal">
                                        <i class="bi bi-grid-3x3-gap me-1"></i>Pilih Icon
                                    </button>
                                    <div class="form-text">
                                        Terpilih: <span id="selectedIconName"><?= esc($selectedIcon) ?></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <br>

                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <a href="<?= site_url('admin/kategori') ?>" class="btn btn-light">Batal</a>
                        <button type="submit" class="btn btn-dark"><?= esc($submitLabel ?? 'Simpan') ?></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="iconPickerModal" tabindex="-1" aria-labelledby="iconPickerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="iconPickerModalLabel">Pilih Icon Kategori</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
            </div>
            <div class="modal-body">
                <input type="search" class="form-control mb-3" id="iconSearchInput" placeholder="Cari icon...">

                <div class="icon-picker-grid" id="iconPickerGrid">
                    <?php foreach ($iconOptions as $icon) : ?>
                        <button type="button" class="icon-picker-option btn d-flex flex-column align-items-center justify-content-center gap-2 <?= $icon === $selectedIcon ? 'is-selected' : '' ?>" data-icon="<?= esc($icon, 'attr') ?>">
                            <i class="bi <?= esc($icon, 'attr') ?>"></i>
                            <span class="text-truncate"><?= esc(str_replace('bi-', '', $icon)) ?></span>
                        </button>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const iconInput = document.getElementById('icon_kategori');
        const preview = document.getElementById('selectedIconPreview');
        const selectedName = document.getElementById('selectedIconName');
        const searchInput = document.getElementById('iconSearchInput');
        const iconButtons = Array.from(document.querySelectorAll('.icon-picker-option'));

        const setSelectedIcon = function (iconName) {
            iconInput.value = iconName;
            selectedName.textContent = iconName;
            preview.innerHTML = '<i class="bi ' + iconName + '"></i>';

            iconButtons.forEach(function (button) {
                button.classList.toggle('is-selected', button.dataset.icon === iconName);
            });
        };

        iconButtons.forEach(function (button) {
            button.addEventListener('click', function () {
                setSelectedIcon(button.dataset.icon);

                const modalElement = document.getElementById('iconPickerModal');
                const modal = window.bootstrap ? bootstrap.Modal.getInstance(modalElement) : null;

                if (modal) {
                    modal.hide();
                }
            });
        });

        if (searchInput) {
            searchInput.addEventListener('input', function () {
                const keyword = searchInput.value.trim().toLowerCase();

                iconButtons.forEach(function (button) {
                    const iconName = button.dataset.icon.toLowerCase();
                    button.classList.toggle('d-none', keyword !== '' && ! iconName.includes(keyword));
                });
            });
        }
    });
</script>
