<?= message_box('success'); ?>
<?= message_box('error'); ?>
<?php
$is_admin = ((int) $this->session->userdata('user_type') === 1);
$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-4">
    <div id="overtime_report" 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 if (!empty($all_overtime_info)) : ?>
                                    <?php foreach ($all_overtime_info as $key => $v_overtime) :
                                        $month_name = date('F', safe_strtotime($selected_year . '-' . $key));
                                        $is_active = ((int) $current_month === (int) $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="<?= html_escape($month_name) ?>">
                                            <?= html_escape($month_name) ?>
                                        </span>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </div>
                        </div>

                        <div class="w-full lg:w-auto lg:min-w-[280px]">
                            <form action="<?= base_url() ?>admin/utilities/overtime" method="post" class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-end">
                                <label for="overtime-year" class="block w-full space-y-1 text-sm font-medium text-foreground sm:max-w-[180px]">
                                    <input id="overtime-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>
                        <?php if (!empty($all_overtime_info)) : ?>
                            <?php foreach ($all_overtime_info as $key => $v_overtime) :
                                $month_name = date('F', safe_strtotime($selected_year . '-' . $key));
                                $total_entries = !empty($v_overtime) ? count($v_overtime) : 0;
                                $approved_count = 0;
                                $pending_count = 0;

                                if (!empty($v_overtime)) {
                                    foreach ($v_overtime as $month_overtime) {
                                        if (($month_overtime->status ?? '') === 'approved') {
                                            $approved_count++;
                                        } elseif (($month_overtime->status ?? '') === 'pending') {
                                            $pending_count++;
                                        }
                                    }
                                }
                                ?>
                                <div class="js-month-panel" data-month="<?= html_escape($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-3">
                                                <div class="space-y-2">
                                                    <div class="inline-flex items-center gap-2 text-sm font-semibold text-foreground">
                                                        <i data-lucide="calendar" class="h-4 w-4"></i>
                                                        <?= html_escape($month_name . ' ' . $selected_year) ?>
                                                    </div>
                                                    <div class="flex flex-wrap gap-2 text-xs">
                                                        <span class="inline-flex items-center rounded-full bg-slate-100 px-3 py-1 font-semibold text-slate-700 dark:bg-slate-800 dark:text-slate-200">
                                                            <?= lang('total') ?>: <?= (int) $total_entries ?>
                                                        </span>
                                                        <span class="inline-flex items-center rounded-full bg-emerald-100 px-3 py-1 font-semibold text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300">
                                                            <?= lang('approved') ?>: <?= (int) $approved_count ?>
                                                        </span>
                                                        <span class="inline-flex items-center rounded-full bg-amber-100 px-3 py-1 font-semibold text-amber-700 dark:bg-amber-950/40 dark:text-amber-300">
                                                            <?= lang('pending') ?>: <?= (int) $pending_count ?>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="hidden-print">
                                                    <?= btn_pdf('admin/utilities/overtime_report_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">SL</th>
                                                    <th class="px-4 py-3 text-left"><?= lang('name') ?></th>
                                                    <th class="px-4 py-3 text-left"><?= lang('overtime_date') ?></th>
                                                    <th class="px-4 py-3 text-left"><?= lang('overtime_hour') ?></th>
                                                    <th class="px-4 py-3 text-left"><?= lang('status') ?></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">
                                                <?php if (!empty($v_overtime)) : ?>
                                                    <?php $sl = 1; ?>
                                                    <?php foreach ($v_overtime as $overtime) : ?>
                                                        <?php
                                                        $name = !empty($overtime->fullname) ? $overtime->fullname : lang('unknown');
                                                        $status = !empty($overtime->status) ? $overtime->status : 'pending';
                                                        if ($status === 'approved') {
                                                            $status_badge = 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-300';
                                                        } elseif ($status === 'rejected') {
                                                            $status_badge = 'bg-rose-500/15 text-rose-700 dark:text-rose-300';
                                                        } else {
                                                            $status_badge = 'bg-amber-500/15 text-amber-700 dark:text-amber-300';
                                                        }
                                                        ?>
                                                        <tr id="overtime_row_<?= $overtime->overtime_id ?>">
                                                            <td><?= $sl++ ?></td>
                                                            <td class="font-medium text-foreground"><?= html_escape($name) ?></td>
                                                            <td><?= !empty($overtime->overtime_date) ? display_date($overtime->overtime_date) : '-' ?></td>
                                                            <td><?= html_escape($overtime->overtime_hours ?? '-') ?></td>
                                                            <td>
                                                                <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold <?= $status_badge ?>">
                                                                    <?= lang($status) ?>
                                                                </span>
                                                            </td>
                                                            <td>
                                                                <div class="inline-flex items-center gap-1.5">
                                                                    <?= btn_modal(
                                                                        'admin/utilities/add_overtime/' . $overtime->overtime_id,
                                                                        '',
                                                                        lang('edit'),
                                                                        'md',
                                                                        'edit',
                                                                        array('class' => 'inline-flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-500 p-0 text-white hover:bg-indigo-600')
                                                                    ) ?>

                                                                    <?php if ($is_admin) { ?>
                                                                        <details class="group relative inline-flex">
                                                                            <summary class="inline-flex h-8 w-8 cursor-pointer list-none items-center justify-center rounded-lg border border-border bg-input text-muted-foreground hover:text-foreground">
                                                                                <i data-lucide="chevron-down" class="h-4 w-4"></i>
                                                                            </summary>
                                                                            <ul class="absolute right-0 top-full z-20 mt-1 w-36 overflow-hidden rounded-lg border border-border bg-card py-1 text-xs shadow-lg">
                                                                                <li>
                                                                                    <form action="<?= base_url('admin/utilities/change_overtime_status') ?>" method="post" class="m-0">
                                                                                        <input type="hidden" name="status" value="approved">
                                                                                        <input type="hidden" name="overtime_id" value="<?= $overtime->overtime_id ?>">
                                                                                        <button type="submit" class="block w-full px-3 py-2 text-left text-emerald-600 hover:bg-muted dark:text-emerald-400">
                                                                                            <?= lang('approved') ?>
                                                                                        </button>
                                                                                    </form>
                                                                                </li>
                                                                                <li>
                                                                                    <form action="<?= base_url('admin/utilities/change_overtime_status') ?>" method="post" class="m-0">
                                                                                        <input type="hidden" name="status" value="rejected">
                                                                                        <input type="hidden" name="overtime_id" value="<?= $overtime->overtime_id ?>">
                                                                                        <button type="submit" class="block w-full px-3 py-2 text-left text-rose-600 hover:bg-muted dark:text-rose-400">
                                                                                            <?= lang('rejected') ?>
                                                                                        </button>
                                                                                    </form>
                                                                                </li>
                                                                            </ul>
                                                                        </details>
                                                                    <?php } ?>

                                                                    <?= ajax_anchor(
                                                                        base_url('admin/utilities/delete_overtime/' . $overtime->overtime_id),
                                                                        '',
                                                                        array(
                                                                            'class' => 'inline-flex h-8 w-8 items-center justify-center rounded-lg bg-rose-500 p-0 text-white hover:bg-rose-600',
                                                                            'title' => lang('delete'),
                                                                            'data-fade-out-on-success' => '#overtime_row_' . $overtime->overtime_id
                                                                        )
                                                                    ) ?>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    <?php endforeach; ?>
                                                <?php else : ?>
                                                    <tr>
                                                        <td colspan="6"><strong><?= lang('nothing_to_display') ?></strong></td>
                                                    </tr>
                                                <?php endif; ?>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        <?php else : ?>
                            <div class="rounded-xl border border-border bg-card p-4 text-sm text-muted-foreground"><?= lang('nothing_to_display') ?></div>
                        <?php endif; ?>
                    </div>
                </div>
            </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);
    }

    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>
