<?= message_box('success'); ?>
<?= message_box('error'); ?>
<?php
$edited = can_action('99', 'edited');
$created = can_action('99', 'created');
$deleted = can_action('99', '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>

<?php if (empty($switch)) { ?>
<div class="space-y-4">
    <div id="award_list" class="space-y-4">
        <div class="rounded-2xl border border-border bg-card shadow-sm">
            <div class="p-5">
                <div class="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 hidden-print">
                            <div class="flex flex-wrap gap-2">
                                <?php foreach ($all_employee_award as $key => $v_award) :
                                    $month_name = date('F', safe_strtotime($selected_year . '-' . $key));
                                    $is_active = ($current_month == $key);
                                    ?>
                                    <span
                                        class="js-month-pill rounded-full px-3 py-1 text-xs font-semibold <?= $is_active ? '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 action="<?= base_url() ?>admin/award" method="post" class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-end">
                                <label for="award-year" class="block w-full space-y-1 text-sm font-medium text-foreground sm:max-w-[180px]">                                    
                                    <input id="award-year" name="year" type="text"
                                           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="Y">
                                </label>
                                <div class="sm:self-end">
                                    <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 bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 sm:w-auto">
                                        <i data-lucide="search" class="h-4 w-4"></i>
                                        <?= lang('search') ?>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="">
                        <?php foreach ($all_employee_award as $key => $v_award) :
                            $month_name = date('F', safe_strtotime($selected_year . '-' . $key));
                            ?>
                            <div class="js-month-panel" data-month="<?= $month_name ?>">
                                <div class="rounded-xl border border-border bg-card shadow-sm">
                                    <div class="border-b border-border px-4 py-3">
                                        <div class="flex flex-wrap items-center justify-between gap-2 text-sm font-semibold text-foreground">
                                            <span class="inline-flex items-center gap-2">
                                                <i data-lucide="calendar" class="h-4 w-4"></i>
                                                <?= $month_name . ' ' . $selected_year ?>
                                            </span>
                                            <div class="hidden-print">
                                                <?= btn_pdf('admin/award/employee_award_pdf/' . $selected_year . '/' . $key) ?>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="overflow-x-auto">
                                        <table class="min-w-full text-sm">
                                            <thead class="bg-muted/40 text-xs uppercase tracking-wide text-muted-foreground">
                                            <tr>
                                                <th class="px-4 py-3 text-left"><?= lang('emp_id') ?></th>
                                                <th class="px-4 py-3 text-left"><?= lang('name') ?></th>
                                                <th class="px-4 py-3 text-left"><?= lang('award_name') ?></th>
                                                <th class="px-4 py-3 text-left"><?= lang('gift') ?></th>
                                                <th class="px-4 py-3 text-left"><?= lang('amount') ?></th>
                                                <th class="px-4 py-3 text-left"><?= lang('month') ?></th>
                                                <th class="px-4 py-3 text-left"><?= lang('award_date') ?></th>
                                                <?php if (!empty($edited) || !empty($deleted)) { ?>
                                                    <th class="px-4 py-3 text-left"><?= lang('action') ?></th>
                                                <?php } ?>
                                            </tr>
                                            </thead>
                                            <tbody class="divide-y divide-border [&>tr>td]:px-4 [&>tr>td]:py-3">
                                            <?php if (!empty($v_award)) : ?>
                                                <?php foreach ($v_award as $k => $award_info) :
                                                    $staff_details = get_staff_details($award_info->user_id);
                                                    ?>
                                                    <tr id="table_<?= $k ?>">
                                                        <td><?= !empty($staff_details->employment_id) ? $staff_details->employment_id : '-' ?></td>
                                                        <td><?= !empty($staff_details->fullname) ? $staff_details->fullname : lang('unknown') ?></td>
                                                        <td><?= html_escape($award_info->award_name) ?></td>
                                                        <td><?= html_escape($award_info->gift_item) ?></td>
                                                        <td><?= display_money($award_info->award_amount, default_currency()) ?></td>
                                                        <td><?= date('M Y', safe_strtotime($award_info->award_date)) ?></td>
                                                        <td><?= display_date($award_info->given_date) ?></td>
                                                        <?php if (!empty($edited) || !empty($deleted)) { ?>
                                                            <td>
                                                                <div class="inline-flex items-center gap-0">
                                                                    <?php if (!empty($edited)) { ?>
                                                                        <?= btn_modal(
                                                                            'admin/award/give_award/' . $award_info->employee_award_id,
                                                                            '',
                                                                            lang('edit'),
                                                                            'md',
                                                                            'edit',
                                                                            array('class' => 'inline-flex items-center justify-center rounded-lg bg-indigo-500 p-2 text-white hover:bg-indigo-600 mb-1 h-7')
                                                                        ) ?>
                                                                    <?php } ?>
                                                                    <?php if (!empty($deleted)) { ?>
                                                                        <?= ajax_anchor(
                                                                            base_url('admin/award/delete_employee_award/' . $award_info->employee_award_id),
                                                                            '',
                                                                            array(
                                                                                'class' => 'inline-flex items-center justify-center rounded-lg bg-rose-500 p-2 text-white hover:bg-rose-600',
                                                                                'title' => lang('delete'),
                                                                                'data-fade-out-on-success' => '#table_' . $k
                                                                            )
                                                                        ) ?>
                                                                    <?php } ?>
                                                                </div>
                                                            </td>
                                                        <?php } ?>
                                                    </tr>
                                                <?php endforeach; ?>
                                            <?php else : ?>
                                                <tr>
                                                    <td colspan="<?= (!empty($edited) || !empty($deleted)) ? 8 : 7 ?>">
                                                        <strong><?= lang('nothing_to_display') ?></strong>
                                                    </td>
                                                </tr>
                                            <?php endif; ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php } else { ?>
<div class="space-y-4">
    <div class="rounded-2xl border border-border bg-card shadow-sm">
        <div class="p-5">
            <div class="overflow-x-auto rounded-xl border border-border">
                <table class="min-w-full text-sm" id="DataTables" cellspacing="0" width="100%">
                    <thead class="bg-muted/40 text-xs uppercase tracking-wide text-muted-foreground">
                    <tr>
                        <th class="px-4 py-3 text-left"><?= lang('emp_id') ?></th>
                        <th class="px-4 py-3 text-left"><?= lang('name') ?></th>
                        <th class="px-4 py-3 text-left"><?= lang('award_name') ?></th>
                        <th class="px-4 py-3 text-left"><?= lang('gift') ?></th>
                        <th class="px-4 py-3 text-left"><?= lang('amount') ?></th>
                        <th class="px-4 py-3 text-left"><?= lang('month') ?></th>
                        <th class="px-4 py-3 text-left"><?= lang('award_date') ?></th>
                        <th class="px-4 py-3 text-left"><?= lang('action') ?></th>
                    </tr>
                    </thead>
                    <tbody class="divide-y divide-border [&>tr>td]:px-4 [&>tr>td]:py-3">
                    <script type="text/javascript">
                        $(document).ready(function () {
                            list = base_url + "admin/award/awardList";
                        });
                    </script>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<?php } ?>

<script>
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($selected_year . '-' . $current_month)) ?>';
    });
    if (current) {
        openPanel(current.getAttribute('data-month'));
    } else if (panels[0]) {
        openPanel(panels[0].getAttribute('data-month'));
    }
});
</script>
