<?= message_box('success'); ?>
<?= message_box('error'); ?>
<?php
$created = can_action('71', 'created');
$edited = can_action('71', 'edited');
$deleted = can_action('71', 'deleted');
$selected_year = !empty($year) ? $year : date('Y');
?>
<style>
.js-month-pill {
    cursor: pointer;
}

.js-month-panel {
    display: none;
}

.js-month-panel[open] {
    display: block;
}
</style>

<div class="space-y-6">
    <div class="rounded-2xl border border-border bg-card shadow-sm">
        <div class="p-5 space-y-4">
            <div class="flex flex-col gap-4 border-b border-border pb-4 lg:flex-row lg:items-start lg:justify-between">
                <div class="min-w-0 flex-1">
                    <div class="flex flex-wrap gap-2">
                        <?php foreach ($all_holiday_list as $key => $v_holiday_list):
                            $month_name = date('F', safe_strtotime($selected_year . '-' . $key));
                            $active_month = ($current_month == $key);
                            ?>
                        <span
                            class="js-month-pill rounded-full px-3 py-1 text-xs font-semibold <?= $active_month ? 'bg-indigo-600 text-white shadow-sm' : ' text-muted-foreground' ?>"
                            data-month="<?= $month_name ?>">
                            <?= $month_name; ?>
                        </span>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div class="w-full lg:w-auto lg:min-w-[280px]">
                    <form id="existing_customer" action="<?php echo base_url() ?>admin/holiday" method="post"
                        class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-end">
                        <label for="holiday-year" class="block w-full space-y-1 text-sm font-medium text-foreground sm:max-w-[180px]">
                            <span><?= lang('year') ?> <span class="text-red-500">*</span></span>
                            <input id="holiday-year" name="year" type="text" required
                                value="<?= html_escape($selected_year) ?>"
                                class="years w-full rounded-lg border border-border bg-input px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/30 dark:focus:border-secondary dark:focus:ring-3 dark:focus:ring-secondary/30"
                                data-format="yyyy">
                        </label>

                        <button type="submit" data-toggle="tooltip" data-placement="top" title="<?= lang('search') ?>"
                            class="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-xs font-semibold text-foreground hover:bg-muted sm:w-auto sm:self-end">
                            <i data-lucide="search" class="h-4 w-4"></i>
                            <?= lang('search') ?>
                        </button>
                    </form>
                </div>
            </div>


            <div class="">
                <?php foreach ($all_holiday_list as $key => $v_holiday_list):
                    $month_name = date('F', safe_strtotime($selected_year . '-' . $key));
                    ?>
                <div class=" js-month-panel"
                    data-month="<?= $month_name ?>">
                    
                    <div class="p-1">
                        <?php if (!empty($v_holiday_list)): ?>
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                            <?php foreach ($v_holiday_list as $v_holiday) : ?>
                            <div class="rounded-xl border border-border bg-card p-4 shadow-sm space-y-3">
                                <div class="flex items-start justify-between gap-3">
                                    <div class="flex items-center gap-3">
                                        <span
                                            class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground">
                                            <?= strtoupper(substr($v_holiday->event_name, 0, 2)) ?>
                                        </span>
                                        <div>
                                            <div class="text-sm font-semibold text-foreground">
                                                <?= $v_holiday->event_name ?></div>
                                            <div class="text-xs text-muted-foreground">
                                                <?= display_date($v_holiday->start_date) ?> â†’
                                                <?= display_date($v_holiday->end_date) ?></div>
                                        </div>
                                    </div>
                                    <span style="background-color:<?= $v_holiday->color ?>"
                                        class="inline-flex h-4 w-4 rounded-full ring-1 ring-border mt-1"></span>
                                </div>
                                <?php if (!empty($v_holiday->location)) { ?>
                                <div class="text-xs text-muted-foreground"><?= $v_holiday->location ?></div>
                                <?php } ?>
                                <?php if (!empty($edited) || !empty($deleted)) { ?>
                                <div class="flex items-center pt-1">
                                    <?php if (!empty($edited)) { ?>
                                    <?= btn_modal('admin/holiday/add_holiday/' . $v_holiday->holiday_id, lang('edit'), lang('edit'), 'md', 'pencil', array(
                                                            'class' => 'inline-flex items-center gap-2 rounded-lg border border-border bg-card px-2.5 py-1.5 mb-1 text-xs font-semibold text-foreground hover:bg-muted'
                                                        )); ?>
                                    <?php } ?>
                                    <?php if (!empty($deleted)) { ?>
                                    <?= ajax_anchor(base_url('admin/holiday/delete_holiday/' . $v_holiday->holiday_id), "" . lang('delete') . "</span>", array("class" => "", "title" => lang('delete'))); ?>
                                    <?php } ?>
                                </div>
                                <?php } ?>
                            </div>
                            <?php endforeach; ?>
                        </div>
                        <?php else : ?>
                        <div
                            class="rounded-xl border border-border bg-muted/30 p-6 text-sm font-semibold text-muted-foreground">
                            <?= lang('nothing_to_display') ?>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    var panels = Array.prototype.slice.call(document.querySelectorAll('.js-month-panel'));
    var pills = Array.prototype.slice.call(document.querySelectorAll('.js-month-pill'));

    function setActivePill(month) {
        pills.forEach(function(pill) {
            var isActive = pill.getAttribute('data-month') === month;
            pill.classList.toggle('bg-indigo-600', isActive);
            pill.classList.toggle('text-white', isActive);
            pill.classList.toggle('shadow-sm', isActive);
            pill.classList.toggle('bg-gray-200', !isActive);
            pill.classList.toggle('dark:bg-gray-700', !isActive);
            pill.classList.toggle('text-muted-foreground', !isActive);
        });
    }

    function openPanel(month) {
        panels.forEach(function(panel) {
            var isActive = panel.getAttribute('data-month') === month;
            if (isActive) {
                panel.setAttribute('open', 'open');
            } else {
                panel.removeAttribute('open');
            }
        });
        setActivePill(month);
    }

    panels.forEach(function(panel) {
        panel.addEventListener('toggle', function() {
            if (panel.open) {
                openPanel(panel.getAttribute('data-month'));
            }
        });
    });

    pills.forEach(function(pill) {
        pill.addEventListener('click', function() {
            openPanel(pill.getAttribute('data-month'));
        });
    });

    panels.forEach(function(panel) {
        panel.removeAttribute('open');
    });
    var current = panels.find(function(panel) {
        return panel.getAttribute('data-month') ===
            '<?= date('F', safe_strtotime(date('Y') . '-' . $current_month)) ?>';
    });
    if (current) {
        openPanel(current.getAttribute('data-month'));
    } else if (panels[0]) {
        openPanel(panels[0].getAttribute('data-month'));
    }
});
</script>
