<div class="rounded-2xl border border-border bg-card shadow-xl" data-modal-body>
    <div class="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
        <div>
            <h3 class="text-lg font-semibold text-foreground"><?= lang('edit') . ' ' . lang('time_log') ?></h3>
            <p class="mt-1 text-sm text-muted-foreground">Submit corrected clock times with an audit reason.</p>
        </div>
        <button type="button" class="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground transition hover:bg-muted" data-dismiss="modal">
            <i data-lucide="x" class="h-4 w-4"></i>
        </button>
    </div>

    <form action="<?= base_url() ?>admin/attendance/cheanged_mytime/<?= $clock_info->clock_id ?>" method="post" class="space-y-4 px-5 py-4">
        <div class="grid grid-cols-1 gap-4 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('old_time_in') ?></p>
                <p class="mt-2 text-base font-semibold text-foreground"><?= display_time($clock_info->clockin_time) ?></p>
            </div>
            <div>
                <label class="mb-2 block text-sm font-medium text-foreground"><?= lang('new_time_in') ?> <span class="text-destructive">*</span></label>
                <input type="text" required name="clockin_edit" value="<?= display_time($clock_info->clockin_time) ?>" class="ts-datepicker 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" data-type="time" data-format="H:i" autocomplete="off">
            </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('old_time_out') ?></p>
                <p class="mt-2 text-base font-semibold text-foreground"><?= display_time($clock_info->clockout_time) ?></p>
            </div>
            <div>
                <label class="mb-2 block text-sm font-medium text-foreground"><?= lang('new_time_out') ?> <span class="text-destructive">*</span></label>
                <input type="text" required name="clockout_edit" value="<?= display_time($clock_info->clockout_time) ?>" class="ts-datepicker 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" data-type="time" data-format="H:i" autocomplete="off">
            </div>
        </div>

        <div>
            <label class="mb-2 block text-sm font-medium text-foreground"><?= lang('edit_reason') ?> <span class="text-destructive">*</span></label>
            <textarea name="reason" rows="4" required class="w-full rounded-lg border border-input bg-background px-4 py-3 text-sm text-foreground shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/20"></textarea>
        </div>

        <div class="flex items-center justify-end gap-3 border-t border-border pt-4">
            <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-5 py-2.5 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90"><?= lang('request') . ' ' . lang('update') ?></button>
        </div>
    </form>
</div>
