<?= $this->extend('layouts/main') ?>

<?= $this->section('title') ?>Detail presensi<?= $this->endSection() ?>

<?= $this->section('content') ?>
<div class="mx-auto max-w-3xl space-y-6">
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-2xl font-semibold tracking-tight text-gray-900">Detail presensi</h1>
            <p class="mt-1 text-sm text-gray-500">Rekap satu baris presensi.</p>
        </div>
        <a href="<?= site_url('admin/presensi') ?>" class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm font-medium text-gray-800 shadow-sm hover:bg-gray-50">
            <i class="fa-solid fa-arrow-left text-xs text-gray-500"></i> Kembali ke daftar
        </a>
    </div>

    <?= view('layouts/partials/admin_alert', ['errors' => $errors ?? []]) ?>

    <?php if (is_array($row)) : ?>
        <dl class="grid gap-4 rounded-2xl border border-gray-200 bg-white p-6 text-sm shadow-sm sm:grid-cols-2">
            <?php foreach ($row as $k => $v) : ?>
                <?php if ($k === 'jadwal') : ?>
                    <div class="sm:col-span-2">
                        <dt class="text-xs font-semibold uppercase tracking-wide text-gray-500"><?= esc((string) $k) ?></dt>
                        <dd class="mt-1 break-all rounded-xl bg-gray-900 p-3 font-mono text-xs text-gray-100"><?= esc(is_scalar($v) ? (string) $v : json_encode($v, JSON_UNESCAPED_UNICODE)) ?></dd>
                    </div>
                <?php else : ?>
                    <div>
                        <dt class="text-xs font-semibold uppercase tracking-wide text-gray-500"><?= esc((string) $k) ?></dt>
                        <dd class="mt-1 font-medium text-gray-900"><?= esc(is_scalar($v) || $v === null ? (string) ($v ?? '') : json_encode($v, JSON_UNESCAPED_UNICODE)) ?></dd>
                    </div>
                <?php endif ?>
            <?php endforeach ?>
        </dl>
        <?php
        $photoM = $row['photo_masuk'] ?? '';
        $photoP = $row['photo_pulang'] ?? '';
        ?>
        <?php if ($photoM !== '' || $photoP !== '') : ?>
            <div class="grid gap-4 sm:grid-cols-2">
                <?php if ($photoM !== '') : ?>
                    <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
                        <h2 class="text-sm font-semibold text-gray-900">Foto masuk</h2>
                        <img src="<?= esc(site_url('admin/presensi/foto/masuk/' . rawurlencode($photoM))) ?>" alt="Foto masuk" class="mt-3 max-h-64 rounded-xl border border-gray-100 object-contain">
                    </div>
                <?php endif ?>
                <?php if ($photoP !== '') : ?>
                    <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
                        <h2 class="text-sm font-semibold text-gray-900">Foto pulang</h2>
                        <img src="<?= esc(site_url('admin/presensi/foto/pulang/' . rawurlencode($photoP))) ?>" alt="Foto pulang" class="mt-3 max-h-64 rounded-xl border border-gray-100 object-contain">
                    </div>
                <?php endif ?>
            </div>
        <?php endif ?>
    <?php else : ?>
        <div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
            <?= view('layouts/partials/empty_state', [
                'icon'  => 'fa-circle-question',
                'title' => 'Data tidak ditemukan',
                'hint'  => 'Presensi mungkin sudah dihapus atau ID tidak valid.',
            ]) ?>
        </div>
    <?php endif ?>
</div>
<?= $this->endSection() ?>
