<?= message_box('success'); ?>
<?= message_box('error'); ?>
<?php
$pending_count = 0;
$accepted_count = 0;
$rejected_count = 0;
if (!empty($all_clock_history)) {
    foreach ($all_clock_history as $history) {
        if ($history->status == 1) {
            $pending_count++;
        } elseif ($history->status == 2) {
            $accepted_count++;
        } elseif ($history->status == 3) {
            $rejected_count++;
        }
    }
}
?>

<div class="space-y-4">
    <section class="overflow-hidden rounded-2xl border border-border bg-card shadow-sm">
        <div class="grid grid-cols-2 gap-3 border-b border-border px-5 py-4 lg:grid-cols-4">
            <button type="button" class="filter_by rounded-xl border border-border bg-background/70 p-3 text-left transition hover:border-primary/30 hover:bg-primary/5 active" id="">
                <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('all') ?></p>
                <p class="mt-1 text-lg font-semibold text-foreground"><?= count($all_clock_history) ?></p>
            </button>
            <button type="button" class="filter_by rounded-xl border border-border bg-background/70 p-3 text-left transition hover:border-amber-500/30 hover:bg-amber-500/5" id="pending">
                <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('pending') ?></p>
                <p class="mt-1 text-lg font-semibold text-amber-600 dark:text-amber-300"><?= $pending_count ?></p>
            </button>
            <button type="button" class="filter_by rounded-xl border border-border bg-background/70 p-3 text-left transition hover:border-emerald-500/30 hover:bg-emerald-500/5" id="accepted">
                <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('accepted') ?></p>
                <p class="mt-1 text-lg font-semibold text-emerald-600 dark:text-emerald-300"><?= $accepted_count ?></p>
            </button>
            <button type="button" class="filter_by rounded-xl border border-border bg-background/70 p-3 text-left transition hover:border-rose-500/30 hover:bg-rose-500/5" id="rejected">
                <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('rejected') ?></p>
                <p class="mt-1 text-lg font-semibold text-rose-600 dark:text-rose-300"><?= $rejected_count ?></p>
            </button>
        </div>

        <div class="px-5 py-4">
            <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                <div>
                    <h3 class="text-base font-semibold text-foreground"><?= lang('timechange_request') ?></h3>
                    <p class="text-sm text-muted-foreground">Review and approve change requests without leaving the attendance queue.</p>
                </div>
                <div class="inline-flex items-center gap-2 rounded-full border border-border bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
                    <i data-lucide="database" class="h-3.5 w-3.5"></i>
                    Attendance history ledger
                </div>
            </div>
        </div>

        <div class="p-5 pt-0">
            <div class="rounded-xl">
                <table class="table DataTables min-w-full text-sm" id="DataTables" width="100%">
                    <thead class="border-b border-border text-xs uppercase tracking-wide text-muted-foreground">
                    <tr>
                        <th><?= lang('emp_id') ?></th>
                        <th><?= lang('name') ?></th>
                        <th><?= lang('time_in') ?></th>
                        <th><?= lang('time_out') ?></th>
                        <th><?= lang('status') ?></th>
                        <th><?= lang('action') ?></th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </section>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        list = base_url + "admin/attendance/timechange_requestList";
        $('.filter_by').on('click', function () {
            $('.filter_by').removeClass('active border-primary bg-primary/5 border-amber-500/30 bg-amber-500/5 border-emerald-500/30 bg-emerald-500/5 border-rose-500/30 bg-rose-500/5');
            $(this).addClass('active');
            if (this.id === 'pending') {
                $(this).addClass('border-amber-500/30 bg-amber-500/5');
            } else if (this.id === 'accepted') {
                $(this).addClass('border-emerald-500/30 bg-emerald-500/5');
            } else if (this.id === 'rejected') {
                $(this).addClass('border-rose-500/30 bg-rose-500/5');
            } else {
                $(this).addClass('border-primary bg-primary/5');
            }
            var filter_by = $(this).attr('id') || '';
            table_url(base_url + "admin/attendance/timechange_requestList/" + filter_by);
        });
        $('.filter_by.active').addClass('border-primary bg-primary/5');
    });
</script>
