<?= message_box('success'); ?>
<?php
$check_head = $this->db->where('department_head_id', $this->session->userdata('user_id'))->get('tbl_departments')->row();
$role = $this->session->userdata('user_type');
$status_label = lang('pending');
$status_class = 'bg-amber-500/10 text-amber-600 dark:text-amber-300';
if ($clock_history->status == 2) {
    $status_label = lang('accepted');
    $status_class = 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-300';
} elseif ($clock_history->status == 3) {
    $status_label = lang('rejected');
    $status_class = 'bg-rose-500/10 text-rose-600 dark:text-rose-300';
}
?>

<div class="rounded-2xl border border-border bg-card shadow-xl">


    <form method="post" action="<?= base_url() ?>admin/attendance/set_time_status/<?= $clock_history->clock_history_id ?>">
        <div class="grid grid-cols-1 gap-4 px-5 py-4 xl:grid-cols-[minmax(0,1.35fr)_280px]">
            <div class="space-y-4">
                <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                    <div class="rounded-xl border border-border bg-background/70 p-4">
                        <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('emp_id') ?></p>
                        <p class="mt-2 text-sm font-semibold text-foreground"><?= html_escape($clock_history->employment_id) ?></p>
                    </div>
                    <div class="rounded-xl border border-border bg-background/70 p-4">
                        <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('name') ?></p>
                        <p class="mt-2 text-sm font-semibold text-foreground"><?= html_escape($clock_history->fullname) ?></p>
                    </div>
                </div>

                <div class="rounded-xl border border-border bg-background/70 p-4">
                    <h4 class="text-sm font-semibold text-foreground"><?= lang('timechange_request') ?></h4>
                    <div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-2">
                        <div class="rounded-lg border border-border bg-card p-4">
                            <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('old_time_in') ?></p>
                            <p class="mt-2 text-base font-semibold text-foreground"><?= $clock_history->clockin_time != '00:00:00' ? display_time($clock_history->clockin_time) : '-' ?></p>
                        </div>
                        <div class="rounded-lg border border-border bg-card p-4">
                            <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('new_time_in') ?></p>
                            <p class="mt-2 text-base font-semibold text-primary"><?= $clock_history->clockin_edit != '00:00:00' ? display_time($clock_history->clockin_edit) : '-' ?></p>
                        </div>
                        <div class="rounded-lg border border-border bg-card p-4">
                            <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('old_time_out') ?></p>
                            <p class="mt-2 text-base font-semibold text-foreground"><?= $clock_history->clockout_time != '00:00:00' ? display_time($clock_history->clockout_time) : '-' ?></p>
                        </div>
                        <div class="rounded-lg border border-border bg-card p-4">
                            <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('new_time_out') ?></p>
                            <p class="mt-2 text-base font-semibold text-primary"><?= $clock_history->clockout_edit != '00:00:00' ? display_time($clock_history->clockout_edit) : '-' ?></p>
                        </div>
                    </div>
                </div>

                <div class="rounded-xl border border-border bg-background/70 p-4">
                    <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('reason') ?></p>
                    <p class="mt-3 text-sm leading-6 text-foreground"><?= nl2br(html_escape($clock_history->reason)) ?></p>
                </div>
            </div>

            <div class="space-y-3">
                <div class="rounded-xl border border-border bg-background/85 p-4 shadow-sm">
                    <p class="text-xs font-semibold uppercase tracking-[0.22em] text-muted-foreground"><?= lang('status') ?></p>
                    <div class="mt-3">
                        <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold <?= $status_class ?>"><?= $status_label ?></span>
                    </div>
                    <p class="mt-3 text-sm leading-6 text-muted-foreground">Attendance managers and department heads can approve or reject submitted time adjustments from this panel.</p>
                </div>

                <?php if ($role == 1 || !empty($check_head)): ?>
                    <?php if ($clock_history->status != 2): ?>
                        <div class="rounded-xl border border-border bg-background/85 p-4 shadow-sm">
                            <label class="mb-2 block text-sm font-medium text-foreground"><?= lang('action') ?></label>
                            <select name="status" class="w-full rounded-lg border border-input bg-background px-4 py-2.5 text-sm text-foreground shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/20">
                                <option value="1" <?= $clock_history->status == 1 ? 'selected' : '' ?>><?= lang('pending') ?></option>
                                <option value="2" <?= $clock_history->status == 2 ? 'selected' : '' ?>><?= lang('accepted') ?></option>
                                <option value="3" <?= $clock_history->status == 3 ? 'selected' : '' ?>><?= lang('rejected') ?></option>
                            </select>
                            <div class="mt-4 flex items-center justify-end gap-3">
                                <button type="button" class="inline-flex items-center justify-center rounded-lg border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition hover:bg-muted" data-dismiss="modal"><?= lang('close') ?></button>
                                <button type="submit" class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90"><?= lang('update') ?></button>
                            </div>
                        </div>
                    <?php endif; ?>
                <?php endif; ?>
            </div>
        </div>

        <input type="hidden" name="clock_id" value="<?= $clock_history->clock_id ?>">
        <input type="hidden" name="clockin_time" value="<?= $clock_history->clockin_edit != '00:00:00' ? $clock_history->clockin_edit : '' ?>">
        <input type="hidden" name="clockout_time" value="<?= $clock_history->clockout_edit != '00:00:00' ? $clock_history->clockout_edit : '' ?>">
    </form>
</div>
