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

<?= $this->section('title') ?>Lokasi kerja<?= $this->endSection() ?>

<?php
$rows = is_array($payload) ? ($payload['rows'] ?? []) : [];
?>

<?= $this->section('content') ?>
<div class="space-y-6">
    <div>
        <h1 class="text-2xl font-semibold text-gray-900">Lokasi kerja (Kantor)</h1>
        <p class="mt-1 text-sm text-gray-500">Kelola data kantor atau cabang perusahaan.</p>
    </div>
    <?= view('layouts/partials/admin_alert', ['errors' => $errors ?? []]) ?>

    <section class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
        <h2 class="text-base font-semibold text-gray-900">Tambah / ubah</h2>
        <form method="post" action="<?= site_url('admin/perusahaan/kantor/save') ?>" class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <?= csrf_field() ?>
            <input type="hidden" name="id_kantor" id="f_id_kantor" value="">
            <div>
                <label class="mb-1 block text-xs font-medium text-gray-600">Kode kantor *</label>
                <input name="kode_kantor" id="f_kode" required class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm">
            </div>
            <div>
                <label class="mb-1 block text-xs font-medium text-gray-600">Nama *</label>
                <input name="nama_kantor" id="f_nama" required class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm">
            </div>
            <div>
                <label class="mb-1 block text-xs font-medium text-gray-600">Tipe *</label>
                <input name="tipe" id="f_tipe" required class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm">
            </div>
            <div class="sm:col-span-2">
                <label class="mb-1 block text-xs font-medium text-gray-600">Alamat *</label>
                <input name="alamat_kantor" id="f_alamat" required class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm">
            </div>
            <div>
                <label class="mb-1 block text-xs font-medium text-gray-600">Latitude *</label>
                <input name="lat" id="f_lat" required step="any" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm">
            </div>
            <div>
                <label class="mb-1 block text-xs font-medium text-gray-600">Longitude *</label>
                <input name="lng" id="f_lng" required step="any" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm">
            </div>
            <div>
                <label class="mb-1 block text-xs font-medium text-gray-600">Jarak rekam (m)</label>
                <input type="number" name="jarak_rekam_presensi" id="f_jarak" value="30" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm">
            </div>
            <div class="flex items-end gap-2">
                <button type="submit" class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">Simpan</button>
                <button type="button" onclick="document.getElementById('f_id_kantor').value='';this.form.reset();" class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Bersihkan</button>
            </div>
        </form>
    </section>

    <section class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
        <div class="border-b border-gray-200 px-5 py-4">
            <h2 class="text-base font-semibold text-gray-900">Daftar kantor</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 text-sm">
                <thead class="border-y border-gray-200 bg-gray-50 text-left text-xs font-semibold uppercase text-gray-500">
                    <tr>
                        <th class="px-5 py-3">Kode</th>
                        <th class="px-5 py-3">Nama</th>
                        <th class="px-5 py-3">Tipe</th>
                        <th class="px-5 py-3">Peta</th>
                        <th class="px-5 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <?php if ($rows === []) : ?>
                        <tr><td colspan="5" class="px-5 py-10 text-center text-gray-500">Belum ada data.</td></tr>
                    <?php else : ?>
                        <?php foreach ($rows as $k) : ?>
                            <?php if (! is_array($k)) {
                                continue;
                            } ?>
                            <?php
                            $lat = (float) ($k['lat'] ?? 0);
                            $lng = (float) ($k['lng'] ?? 0);
                            $map = ($lat != 0.0 || $lng != 0.0) ? 'https://www.google.com/maps/place/' . rawurlencode((string) $lat) . ',' . rawurlencode((string) $lng) : '';
                            ?>
                            <tr class="hover:bg-gray-50">
                                <td class="px-5 py-3 font-mono text-xs"><?= esc((string) ($k['kode_kantor'] ?? '')) ?></td>
                                <td class="px-5 py-3 font-medium text-gray-900"><?= esc((string) ($k['nama_kantor'] ?? '')) ?></td>
                                <td class="px-5 py-3"><?= esc((string) ($k['tipe'] ?? '')) ?></td>
                                <td class="px-5 py-3"><?= $map !== '' ? '<a href="' . esc($map) . '" target="_blank" rel="noopener" class="text-blue-600 hover:underline">Lihat</a>' : '—' ?></td>
                                <td class="whitespace-nowrap px-5 py-3">
                                    <button type="button" class="edit-kantor rounded-lg border border-gray-200 bg-white px-2 py-1 text-xs font-semibold text-gray-800 shadow-sm hover:bg-gray-50" data-row="<?= esc(json_encode($k, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT), 'attr') ?>">Edit</button>
                                    <form method="post" action="<?= site_url('admin/perusahaan/kantor/delete/' . (int) ($k['id_kantor'] ?? 0)) ?>" class="inline" onsubmit="return confirm('Hapus kantor ini?');">
                                        <?= csrf_field() ?>
                                        <button type="submit" class="ml-1 rounded-lg bg-red-50 px-2 py-1 text-xs font-semibold text-red-700 hover:bg-red-100">Hapus</button>
                                    </form>
                                </td>
                            </tr>
                        <?php endforeach ?>
                    <?php endif ?>
                </tbody>
            </table>
        </div>
    </section>
</div>
<script>
document.querySelectorAll('.edit-kantor').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var row = JSON.parse(this.getAttribute('data-row'));
    document.getElementById('f_id_kantor').value = row.id_kantor || '';
    document.getElementById('f_kode').value = row.kode_kantor || '';
    document.getElementById('f_nama').value = row.nama_kantor || '';
    document.getElementById('f_tipe').value = row.tipe || '';
    document.getElementById('f_alamat').value = row.alamat_kantor || '';
    document.getElementById('f_lat').value = row.lat || '';
    document.getElementById('f_lng').value = row.lng || '';
    document.getElementById('f_jarak').value = row.jarak_rekam_presensi || 30;
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
});
</script>
<?= $this->endSection() ?>
