<x-app-layout title="Absensi Karyawan">

@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
    --primary:   #4f46e5;
    --primary-d: #3730a3;
    --primary-l: #eef2ff;
    --success:   #059669;
    --success-l: #ecfdf5;
    --danger:    #dc2626;
    --danger-l:  #fff1f1;
    --warning:   #d97706;
    --warning-l: #fffbeb;
    --text:      #0f172a;
    --muted:     #64748b;
    --muted2:    #94a3b8;
    --border:    #e2e8f0;
    --bg:        #f0f4ff;
    --white:     #ffffff;
    --card-sh:   0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

/* ── TOAST NOTIFIKASI ── */
.ab-toast-wrap {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    pointer-events: none;
}
.ab-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px 14px 16px;
    border-radius: 16px;
    min-width: 300px;
    max-width: 440px;
    box-shadow: 0 8px 32px rgba(0,0,0,.13);
    font-size: 13.5px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    animation: toastIn .4s cubic-bezier(.34,1.56,.64,1) both;
    position: relative;
    overflow: hidden;
}
.ab-toast.closing { animation: toastOut .35s ease forwards; }
.ab-toast.ok   { background: #fff; border: 1.5px solid #86efac; color: #065f46; }
.ab-toast.err  { background: #fff; border: 1.5px solid #fca5a5; color: #991b1b; }
.ab-toast.warn { background: #fff; border: 1.5px solid #fde68a; color: #92400e; }

.toast-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    border-radius: 0 0 16px 16px;
    animation: toastProgress linear forwards;
}
.ab-toast.ok   .toast-progress { background: #10b981; }
.ab-toast.err  .toast-progress { background: #ef4444; }
.ab-toast.warn .toast-progress { background: #f59e0b; }

.toast-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.ab-toast.ok   .toast-icon { background: #dcfce7; }
.ab-toast.err  .toast-icon { background: #fee2e2; }
.ab-toast.warn .toast-icon { background: #fef9c3; }

.toast-msg { flex: 1; line-height: 1.45; }

.toast-close {
    margin-left: auto;
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: .45;
    transition: opacity .15s;
    padding: 0;
    color: inherit;
}
.toast-close:hover { opacity: 1; background: rgba(0,0,0,.06); }

/* SVG draw animations */
.svg-circle { stroke-dasharray: 100; stroke-dashoffset: 100; animation: drawCircle .5s .1s ease forwards; }
.svg-check  { stroke-dasharray: 30;  stroke-dashoffset: 30;  animation: drawCheck  .3s .5s ease forwards; }
.svg-x1     { stroke-dasharray: 20;  stroke-dashoffset: 20;  animation: drawCheck .25s .55s ease forwards; }
.svg-x2     { stroke-dasharray: 20;  stroke-dashoffset: 20;  animation: drawCheck .25s  .7s ease forwards; }
.svg-warn   { stroke-dasharray: 20;  stroke-dashoffset: 20;  animation: drawCheck .25s .55s ease forwards; }

@keyframes toastIn      { from{opacity:0;transform:translateY(-20px) scale(.92)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes toastOut     { to{opacity:0;transform:translateY(-14px) scale(.94)} }
@keyframes toastProgress{ from{width:100%} to{width:0%} }
@keyframes drawCircle   { to{stroke-dashoffset:0} }
@keyframes drawCheck    { to{stroke-dashoffset:0} }

/* ── PAGE SHELL ── */
.ab-wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 32px 28px 56px;
}

/* ── PAGE HEADER ── */
.ab-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}
.ab-header-date {
    font-size: 11px; font-weight: 700;
    color: var(--primary); text-transform: uppercase;
    letter-spacing: 1.5px; margin-bottom: 5px;
}
.ab-header-title {
    font-size: 24px; font-weight: 800;
    letter-spacing: -.4px; color: var(--text);
}
.ab-header-title span { color: var(--primary); }
.ab-header-badge {
    display: flex; align-items: center; gap: 6px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 100px; padding: 6px 14px;
    font-size: 12px; font-weight: 700; color: var(--muted);
    box-shadow: var(--card-sh);
}
.ab-header-badge::before {
    content: ''; width: 7px; height: 7px;
    border-radius: 50%; background: var(--success);
    animation: blink 1.5s ease infinite;
}

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── LAYOUT GRID ── */
.ab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* ── CARD ── */
.ab-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--card-sh);
}
.ab-card-head {
    padding: 20px 24px 18px;
    border-bottom: 1px solid #f1f5f9;
    display: flex; align-items: center; justify-content: space-between;
}
.ab-card-title {
    font-size: 11px; font-weight: 800; color: var(--muted);
    text-transform: uppercase; letter-spacing: .9px;
}
.ab-card-ico {
    width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
}
.ab-card-ico svg { width: 18px; height: 18px; }
.ico-indigo { background: var(--primary-l); }
.ico-green  { background: var(--success-l); }

.ab-card-body { padding: 22px 24px; }

/* ── CLOCK ── */
.ab-clock-zone { text-align: center; padding: 8px 0 22px; }
.ab-clock {
    font-size: 54px; font-weight: 900;
    letter-spacing: -3px; color: var(--text);
    line-height: 1; font-variant-numeric: tabular-nums;
    margin-bottom: 5px;
}
.ab-clock-sub { font-size: 12px; color: var(--muted2); font-weight: 500; }

/* ── STATUS CHIP ── */
.ab-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 600;
    margin-bottom: 20px;
}
.ab-chip svg { width:14px; height:14px; flex-shrink:0; }
.chip-ok   { background:var(--success-l); border:1px solid #86efac; color:var(--success); }
.chip-warn { background:var(--warning-l); border:1px solid #fde68a; color:var(--warning); }
.chip-done { background:var(--primary-l); border:1px solid #c7d2fe; color:var(--primary); }

/* ── RECORD ROW ── */
.ab-rec {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 0; border-top: 1px solid #f1f5f9;
}
.ab-rec:first-of-type { border-top:none; padding-top:0; }
.ab-rec-ico {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ab-rec-ico svg { width:16px; height:16px; }
.ab-rec-lbl { font-size: 11px; color:var(--muted); font-weight:500; margin-bottom:2px; }
.ab-rec-val { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.ab-rec-val.sm { font-size: 13.5px; }
.ab-rec-tag { margin-left:auto; font-size:11px; font-weight:700; padding:3px 10px; border-radius:100px; white-space:nowrap; }
.tag-ok  { background:var(--success-l); color:var(--success); border:1px solid #86efac; }
.tag-wrn { background:var(--warning-l); color:var(--warning); border:1px solid #fde68a; }

/* ── FORM ── */
.ab-field { margin-bottom: 16px; }
.ab-label {
    display: block; font-size: 11px; font-weight: 700;
    color: var(--muted); text-transform: uppercase;
    letter-spacing: .6px; margin-bottom: 8px;
}
.ab-label-req { color:var(--danger); font-size:10px; margin-left:4px; }
.ab-loc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-input {
    width: 100%; padding: 9px 13px;
    background: #f8fafc; border: 1px solid var(--border);
    border-radius: 9px; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px; color: var(--muted); outline: none;
}
.ab-radius-row {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--muted); font-weight: 500;
    margin-top: 8px;
}
.ab-rdot { width:7px; height:7px; border-radius:50%; background:var(--muted2); flex-shrink:0; }
.ab-rdot.ok  { background:var(--success); }
.ab-rdot.err { background:var(--danger);  }

/* ── CAMERA ── */
.cam-outer {
    position: relative;
    background: #0a0e1a;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
    border: 2px solid var(--border);
}
.cam-outer video {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transform: scaleX(-1);
}
.cam-overlay {
    position: absolute; bottom:0; left:0; right:0;
    padding: 16px;
    background: linear-gradient(transparent, rgba(0,0,0,.6));
    display: flex; justify-content: center;
}
.cam-snap {
    background: white; color: var(--text); border: none;
    border-radius: 100px; padding: 10px 28px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; gap: 7px;
    transition: all .2s;
}
.cam-snap svg { width:15px; height:15px; }
.cam-snap:hover { background:#f0fdf4; transform:scale(1.04); }
.cam-preview {
    width:100%; aspect-ratio:4/3; object-fit:cover;
    border-radius:16px; border:2px solid #6ee7b7; display:none;
}
.cam-retake {
    width:100%; margin-top:9px; padding:9px;
    background:transparent; border:1px solid var(--border);
    border-radius:10px; font-family:'Plus Jakarta Sans',sans-serif;
    font-size:13px; font-weight:600; color:var(--muted);
    cursor:pointer; display:none;
    align-items:center; justify-content:center; gap:6px;
    transition: background .15s;
}
.cam-retake svg { width:13px; height:13px; }
.cam-retake:hover { background:#f8fafc; }
.cam-err {
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:10px; padding:28px 20px;
    aspect-ratio:4/3; background:var(--danger-l);
    border:2px dashed #fca5a5; border-radius:16px;
    color:var(--danger); font-size:13px; font-weight:600;
    text-align:center; line-height:1.5;
}
.cam-err svg { width:36px; height:36px; opacity:.5; }

/* ── BUTTONS ── */
.ab-btn {
    width:100%; padding:13px 20px; border:none; border-radius:12px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:14.5px; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition: all .2s;
}
.ab-btn svg { width:17px; height:17px; }
.btn-masuk  { background:var(--primary); color:white; box-shadow:0 4px 20px rgba(79,70,229,.3); }
.btn-masuk:hover:not(:disabled)  { background:var(--primary-d); transform:translateY(-1px); box-shadow:0 8px 28px rgba(79,70,229,.4); }
.btn-pulang { background:var(--success); color:white; box-shadow:0 4px 20px rgba(5,150,105,.28); }
.btn-pulang:hover:not(:disabled) { background:#047857; transform:translateY(-1px); }
.ab-btn:disabled { opacity:.42; cursor:not-allowed; }
.ab-done-box {
    width:100%; padding:13px; border-radius:12px;
    background:#f8fafc; color:var(--muted);
    font-size:13.5px; font-weight:600; text-align:center;
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; gap:7px;
}
.ab-done-box svg { width:15px; height:15px; }

/* ── LOCKED ── */
.ab-locked {
    display:flex; flex-direction:column; align-items:center;
    padding:52px 20px; gap:14px; text-align:center;
}
.ab-locked svg { opacity:.15; }
.ab-locked p { font-size:13.5px; color:var(--muted); font-weight:500; line-height:1.6; }

/* ── FOTO THUMB ── */
.ab-foto-thumb {
    width:100%; border-radius:10px; object-fit:cover;
    max-height:100px; border:1px solid var(--border); margin-top:4px;
}

/* ── INFO BAR ── */
.ab-info {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px 26px;
    box-shadow: var(--card-sh);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.ab-info-lbl {
    font-size: 10.5px; font-weight: 700;
    color: var(--muted2); text-transform: uppercase;
    letter-spacing: .7px; margin-bottom: 6px;
}
.ab-info-val { font-size: 16px; font-weight: 800; }
.c-primary { color: var(--primary); }
.c-success { color: var(--success); }
.c-warning { color: var(--warning); }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.fu1 { animation: fadeUp .4s .00s ease both; }
.fu2 { animation: fadeUp .4s .07s ease both; }
.fu3 { animation: fadeUp .4s .14s ease both; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
    .ab-info { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:720px) {
    .ab-wrap { padding: 18px 16px 40px; }
    .ab-grid { grid-template-columns: 1fr; }
    .ab-clock { font-size: 44px; }
    .ab-info { grid-template-columns: repeat(2,1fr); }
}
</style>
@endpush

{{-- TOAST CONTAINER — letakkan di luar .ab-wrap agar fixed benar --}}
<div id="ab-toast-wrap" class="ab-toast-wrap"></div>

<div class="ab-wrap">

    {{-- HEADER --}}
    <div class="ab-header fu1">
        <div>
            <div class="ab-header-date">{{ \Carbon\Carbon::now()->isoFormat('dddd, D MMMM YYYY') }}</div>
            <div class="ab-header-title">
                Selamat {{ \Carbon\Carbon::now()->hour < 11 ? 'Pagi' : (\Carbon\Carbon::now()->hour < 15 ? 'Siang' : (\Carbon\Carbon::now()->hour < 18 ? 'Sore' : 'Malam')) }},
                <span>{{ explode(' ', auth()->user()->name ?? 'Karyawan')[0] }}!</span>
            </div>
        </div>
        <div class="ab-header-badge" id="live-clock-badge">
            <span id="live-clock">--:--:--</span>
        </div>
    </div>

    {{-- GRID 2-KOLOM --}}
    <div class="ab-grid">

        {{-- ══ CARD MASUK ══ --}}
        <div class="ab-card fu2">
            <div class="ab-card-head">
                <span class="ab-card-title">Absen Masuk</span>
                <div class="ab-card-ico ico-indigo">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                </div>
            </div>
            <div class="ab-card-body">

                <div class="ab-clock-zone">
                    <div class="ab-clock" id="clock-display">--:--:--</div>
                    <div class="ab-clock-sub">Waktu saat ini</div>
                </div>

                @if($absensiHariIni && $absensiHariIni->jam_masuk)
                    <div class="ab-chip chip-ok">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        Absen masuk tercatat
                    </div>
                    <div class="ab-rec">
                        <div class="ab-rec-ico ico-indigo">
                            <svg viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        </div>
                        <div>
                            <div class="ab-rec-lbl">Jam Masuk</div>
                            <div class="ab-rec-val">{{ \Carbon\Carbon::parse($absensiHariIni->jam_masuk)->format('H:i') }}</div>
                        </div>
                        @if($absensiHariIni->status_waktu)
                        <span class="ab-rec-tag {{ $absensiHariIni->status_waktu === 'tepat_waktu' ? 'tag-ok' : 'tag-wrn' }}">
                            {{ $absensiHariIni->status_waktu === 'tepat_waktu' ? 'Tepat Waktu' : 'Terlambat '.$absensiHariIni->terlambat_menit.'m' }}
                        </span>
                        @endif
                    </div>
                    <div class="ab-rec">
                        <div class="ab-rec-ico" style="background:#f1f5f9;">
                            <svg viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                        </div>
                        <div>
                            <div class="ab-rec-lbl">Status Lokasi</div>
                            <div class="ab-rec-val sm">{{ $absensiHariIni->status_masuk === 'dalam_radius' ? '✓ Dalam Radius' : '✗ Luar Radius' }}</div>
                        </div>
                    </div>
                    @if($absensiHariIni->foto_masuk)
                    <div class="ab-rec">
                        <img src="{{ asset('storage/'.$absensiHariIni->foto_masuk) }}" class="ab-foto-thumb" alt="Foto Masuk">
                    </div>
                    @endif
                    <div class="ab-done-box">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        Sudah Absen Masuk
                    </div>

                @else
                    <div class="ab-chip chip-warn">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        Belum absen masuk hari ini
                    </div>

                    <form id="form-masuk" method="POST" action="{{ route('karyawan.absen.masuk') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="ab-field">
                            <label class="ab-label">Lokasi GPS</label>
                            <div class="ab-loc-row">
                                <input type="text" name="latitude"  id="lat-masuk" class="ab-input" placeholder="Latitude"  readonly>
                                <input type="text" name="longitude" id="lng-masuk" class="ab-input" placeholder="Longitude" readonly>
                            </div>
                            <div class="ab-radius-row" id="radius-masuk">
                                <span class="ab-rdot" id="rdot-masuk"></span>
                                <span id="rtxt-masuk">Mendeteksi lokasi GPS…</span>
                            </div>
                        </div>

                        <div class="ab-field">
                            <label class="ab-label">Foto Selfie <span class="ab-label-req">WAJIB</span></label>
                            <div class="cam-outer" id="cambox-masuk">
                                <video id="vid-masuk" autoplay playsinline muted></video>
                                <div class="cam-overlay" id="camovr-masuk">
                                    <button type="button" class="cam-snap" onclick="ambilFoto('masuk')">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
                                        Ambil Foto
                                    </button>
                                </div>
                            </div>
                            <canvas id="cnv-masuk" style="display:none;"></canvas>
                            <img id="prev-masuk" class="cam-preview" alt="Preview">
                            <button type="button" class="cam-retake" id="retake-masuk" onclick="retakeFoto('masuk')">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4"/></svg>
                                Ulangi Foto
                            </button>
                            <input type="hidden" name="foto_base64" id="b64-masuk">
                        </div>

                        <p id="hint-masuk" style="font-size:12px;color:#d97706;text-align:center;margin-bottom:8px;font-weight:600;">
                            ⬆ Klik <strong>"Ambil Foto"</strong> di atas terlebih dahulu, lalu tombol absen akan aktif.
                        </p>

                        @if($jamKerja)
                        @php
                            $jamMasuk        = \Carbon\Carbon::parse($jamKerja->jam_masuk);
                            $bolehAbsenDari  = $jamMasuk->copy()->subMinutes(60);
                            $sekarang        = now();
                            $belumWaktunya   = $sekarang->lt($bolehAbsenDari);
                        @endphp
                        <div id="banner-belum-waktu" style="display:{{ $belumWaktunya ? 'flex' : 'none' }};align-items:center;gap:10px;background:#fef9c3;border:1.5px solid #fde68a;border-radius:12px;padding:12px 16px;margin-bottom:12px;font-size:13px;font-weight:700;color:#92400e;">
                            <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px;stroke:#d97706;flex-shrink:0;"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                            <div>
                                Absen masuk baru bisa dilakukan mulai pukul <strong>{{ $bolehAbsenDari->format('H:i') }} WIB</strong>
                                <div id="countdown-txt" style="font-size:11.5px;font-weight:600;color:#a16207;margin-top:2px;"></div>
                            </div>
                        </div>
                        @endif

                        <button type="submit" class="ab-btn btn-masuk" id="btnsubmit-masuk" disabled>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                            Absen Masuk Sekarang
                        </button>
                    </form>
                @endif
            </div>
        </div>

        {{-- ══ CARD PULANG ══ --}}
        <div class="ab-card fu2" style="animation-delay:.1s;">
            <div class="ab-card-head">
                <span class="ab-card-title">Absen Pulang</span>
                <div class="ab-card-ico ico-green">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
                </div>
            </div>
            <div class="ab-card-body">

                @if($absensiHariIni && $absensiHariIni->jam_pulang)
                    <div class="ab-clock-zone">
                        <div class="ab-clock" style="color:var(--success);">{{ \Carbon\Carbon::parse($absensiHariIni->jam_pulang)->format('H:i') }}</div>
                        <div class="ab-clock-sub">Jam pulang tercatat</div>
                    </div>
                    <div class="ab-chip chip-done">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        Absensi hari ini selesai!
                    </div>
                    <div class="ab-rec">
                        <div class="ab-rec-ico ico-green">
                            <svg viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        </div>
                        <div>
                            <div class="ab-rec-lbl">Masuk → Pulang</div>
                            <div class="ab-rec-val sm">{{ \Carbon\Carbon::parse($absensiHariIni->jam_masuk)->format('H:i') }} → {{ \Carbon\Carbon::parse($absensiHariIni->jam_pulang)->format('H:i') }}</div>
                        </div>
                    </div>
                    @if($absensiHariIni->foto_pulang)
                    <div class="ab-rec">
                        <img src="{{ asset('storage/'.$absensiHariIni->foto_pulang) }}" class="ab-foto-thumb" alt="Foto Pulang">
                    </div>
                    @endif
                    <div class="ab-done-box">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        Sudah Absen Pulang
                    </div>

                @elseif($absensiHariIni && $absensiHariIni->jam_masuk)
                    <div class="ab-clock-zone">
                        <div class="ab-clock" id="durasi-kerja" style="font-size:36px;color:var(--success);">--j --m</div>
                        <div class="ab-clock-sub">Durasi kerja hari ini</div>
                    </div>
                    <div class="ab-chip chip-warn">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        Belum absen pulang
                    </div>

                    <form id="form-pulang" method="POST" action="{{ route('karyawan.absen.pulang') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="ab-field">
                            <label class="ab-label">Lokasi GPS</label>
                            <div class="ab-loc-row">
                                <input type="text" name="latitude"  id="lat-pulang" class="ab-input" placeholder="Latitude"  readonly>
                                <input type="text" name="longitude" id="lng-pulang" class="ab-input" placeholder="Longitude" readonly>
                            </div>
                            <div class="ab-radius-row" id="radius-pulang">
                                <span class="ab-rdot" id="rdot-pulang"></span>
                                <span id="rtxt-pulang">Mendeteksi lokasi GPS…</span>
                            </div>
                        </div>

                        <div class="ab-field">
                            <label class="ab-label">Foto Selfie <span class="ab-label-req">WAJIB</span></label>
                            <div class="cam-outer" id="cambox-pulang">
                                <video id="vid-pulang" autoplay playsinline muted></video>
                                <div class="cam-overlay" id="camovr-pulang">
                                    <button type="button" class="cam-snap" onclick="ambilFoto('pulang')">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
                                        Ambil Foto
                                    </button>
                                </div>
                            </div>
                            <canvas id="cnv-pulang" style="display:none;"></canvas>
                            <img id="prev-pulang" class="cam-preview" alt="Preview">
                            <button type="button" class="cam-retake" id="retake-pulang" onclick="retakeFoto('pulang')">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4"/></svg>
                                Ulangi Foto
                            </button>
                            <input type="hidden" name="foto_base64" id="b64-pulang">
                        </div>

                        <p id="hint-pulang" style="font-size:12px;color:#d97706;text-align:center;margin-bottom:8px;font-weight:600;">
                            ⬆ Klik <strong>"Ambil Foto"</strong> di atas terlebih dahulu, lalu tombol absen akan aktif.
                        </p>

                        @if($jamKerja)
                        @php
                            $jamPulangKerja   = \Carbon\Carbon::parse($jamKerja->jam_pulang);
                            $bolehPulangDari  = $jamPulangKerja->copy();
                            $sekarang         = now();
                            $belumWaktuPulang = $sekarang->lt($bolehPulangDari);
                        @endphp
                        <div id="banner-belum-waktu-pulang" style="display:{{ $belumWaktuPulang ? 'flex' : 'none' }};align-items:center;gap:10px;background:#fef9c3;border:1.5px solid #fde68a;border-radius:12px;padding:12px 16px;margin-bottom:12px;font-size:13px;font-weight:700;color:#92400e;">
                            <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px;stroke:#d97706;flex-shrink:0;"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                            <div>
                                Absen pulang baru bisa dilakukan mulai pukul <strong>{{ $bolehPulangDari->format('H:i') }} WIB</strong>
                                <div id="countdown-pulang-txt" style="font-size:11.5px;font-weight:600;color:#a16207;margin-top:2px;"></div>
                            </div>
                        </div>
                        @endif

                        <button type="submit" class="ab-btn btn-pulang" id="btnsubmit-pulang" disabled>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
                            Absen Pulang Sekarang
                        </button>
                    </form>

                @else
                    <div class="ab-locked">
                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                        <p>Absen masuk dulu sebelum<br>bisa absen pulang.</p>
                    </div>
                @endif

            </div>
        </div>
    </div>{{-- end grid --}}

    {{-- INFO JAM KERJA --}}
    <div class="ab-info fu3">
        <div>
            <div class="ab-info-lbl">Jam Masuk</div>
            <div class="ab-info-val c-primary">
                @if($jamKerja) {{ \Carbon\Carbon::parse($jamKerja->jam_masuk)->format('H:i') }} WIB @else — @endif
            </div>
        </div>
        <div>
            <div class="ab-info-lbl">Jam Pulang</div>
            <div class="ab-info-val c-success">
                @if($jamKerja) {{ \Carbon\Carbon::parse($jamKerja->jam_pulang)->format('H:i') }} WIB @else — @endif
            </div>
        </div>
        <div>
            <div class="ab-info-lbl">Toleransi Terlambat</div>
            <div class="ab-info-val c-warning">
                @if($jamKerja) {{ $jamKerja->toleransi_menit }} menit @else — @endif
            </div>
        </div>
        <div>
            <div class="ab-info-lbl">Status Hari Ini</div>
            @if(!$absensiHariIni)
                <div class="ab-info-val c-warning">Belum Absen</div>
            @elseif($absensiHariIni->jam_pulang)
                <div class="ab-info-val c-success">Selesai ✓</div>
            @else
                <div class="ab-info-val c-primary">Sedang Bekerja</div>
            @endif
        </div>
    </div>

</div>

@push('scripts')
<script>
/* ─────────────────────────────────
   TOAST SYSTEM
───────────────────────────────── */
function showToast(type, msg, duration) {
    duration = duration || 4500;
    var wrap = document.getElementById('ab-toast-wrap');
    if (!wrap) return;

    var icons = {
        ok: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" class="svg-circle"/><polyline points="7 13 10 16 17 9" class="svg-check"/></svg>',
        err: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" class="svg-circle"/><line x1="8" y1="8" x2="16" y2="16" class="svg-x1"/><line x1="16" y1="8" x2="8" y2="16" class="svg-x2"/></svg>',
        warn: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" class="svg-circle"/><line x1="12" y1="8" x2="12" y2="13" class="svg-warn"/><circle cx="12" cy="16" r="0.5" fill="#f59e0b"/></svg>'
    };

    var t = document.createElement('div');
    t.className = 'ab-toast ' + type;
    t.innerHTML =
        '<div class="toast-icon">' + (icons[type] || icons.ok) + '</div>' +
        '<span class="toast-msg">' + msg + '</span>' +
        '<button class="toast-close" onclick="closeToast(this.parentElement)">' +
            '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>' +
        '</button>' +
        '<div class="toast-progress" style="animation-duration:' + duration + 'ms;"></div>';

    wrap.prepend(t);
    setTimeout(function(){ closeToast(t); }, duration);
}

function closeToast(el) {
    if (!el || el.classList.contains('closing')) return;
    el.classList.add('closing');
    setTimeout(function(){ if(el.parentElement) el.remove(); }, 350);
}

/* Trigger dari session Laravel — hanya satu kali, hanya satu notif */
@if(session('success'))
    showToast('ok', '{{ addslashes(session('success')) }}');
@elseif(session('error'))
    showToast('err', '{{ addslashes(session('error')) }}');
@elseif(session('warning'))
    showToast('warn', '{{ addslashes(session('warning')) }}');
@endif

/* ─────────────────────────────────
   VALIDASI WAKTU ABSEN MASUK
───────────────────────────────── */
@if($jamKerja && !($absensiHariIni && $absensiHariIni->jam_masuk))
var BOLEH_ABSEN_DARI = '{{ \Carbon\Carbon::parse($jamKerja->jam_masuk)->subMinutes(60)->format("H:i") }}';

function canAbsenMasuk() {
    var now = new Date();
    var parts = BOLEH_ABSEN_DARI.split(':');
    var batas = new Date();
    batas.setHours(+parts[0], +parts[1], 0, 0);
    return now >= batas;
}

(function tickCountdown() {
    var now = new Date();
    var parts = BOLEH_ABSEN_DARI.split(':');
    var batas = new Date();
    batas.setHours(+parts[0], +parts[1], 0, 0);

    var banner = document.getElementById('banner-belum-waktu');
    var cdTxt  = document.getElementById('countdown-txt');
    var btn    = document.getElementById('btnsubmit-masuk');

    if (now < batas) {
        var diffMs  = batas - now;
        var diffMin = Math.floor(diffMs / 60000);
        var diffSec = Math.floor((diffMs % 60000) / 1000);
        if (cdTxt) cdTxt.textContent = 'Tersisa ' + (diffMin > 0 ? diffMin + ' menit ' : '') + diffSec + ' detik lagi';
        if (banner) banner.style.display = 'flex';
        setTimeout(tickCountdown, 1000);
    } else {
        if (banner) banner.style.display = 'none';
        if (cdTxt)  cdTxt.textContent = '';
        var b64 = document.getElementById('b64-masuk');
        if (btn && b64 && b64.value) btn.disabled = false;
    }
})();
@else
function canAbsenMasuk() { return true; }
@endif

/* ─────────────────────────────────
   VALIDASI WAKTU ABSEN PULANG
───────────────────────────────── */
@if($jamKerja && $absensiHariIni && $absensiHariIni->jam_masuk && !$absensiHariIni->jam_pulang)
var BOLEH_PULANG_DARI = '{{ \Carbon\Carbon::parse($jamKerja->jam_pulang)->format("H:i") }}';

function canAbsenPulang() {
    var now = new Date();
    var parts = BOLEH_PULANG_DARI.split(':');
    var batas = new Date();
    batas.setHours(+parts[0], +parts[1], 0, 0);
    return now >= batas;
}

(function tickCountdownPulang() {
    var now = new Date();
    var parts = BOLEH_PULANG_DARI.split(':');
    var batas = new Date();
    batas.setHours(+parts[0], +parts[1], 0, 0);

    var banner = document.getElementById('banner-belum-waktu-pulang');
    var cdTxt  = document.getElementById('countdown-pulang-txt');
    var btn    = document.getElementById('btnsubmit-pulang');

    if (now < batas) {
        var diffMs  = batas - now;
        var diffMin = Math.floor(diffMs / 60000);
        var diffSec = Math.floor((diffMs % 60000) / 1000);
        if (cdTxt) cdTxt.textContent = 'Tersisa ' + (diffMin > 0 ? diffMin + ' menit ' : '') + diffSec + ' detik lagi';
        if (banner) banner.style.display = 'flex';
        if (btn) btn.disabled = true;
        setTimeout(tickCountdownPulang, 1000);
    } else {
        if (banner) banner.style.display = 'none';
        if (cdTxt)  cdTxt.textContent = '';
        var b64 = document.getElementById('b64-pulang');
        if (btn && b64 && b64.value) btn.disabled = false;
    }
})();
@else
function canAbsenPulang() { return true; }
@endif

/* ─────────────────────────────────
   JAM REALTIME
───────────────────────────────── */
(function tick(){
    var p = function(n){ return String(n).padStart(2,'0'); };
    var n = new Date();
    var t = p(n.getHours())+':'+p(n.getMinutes())+':'+p(n.getSeconds());
    ['live-clock','clock-display'].forEach(function(id){
        var el = document.getElementById(id);
        if(el) el.textContent = t;
    });
    setTimeout(tick, 1000);
})();

/* ─────────────────────────────────
   DURASI KERJA
───────────────────────────────── */
@if($absensiHariIni && $absensiHariIni->jam_masuk && !$absensiHariIni->jam_pulang)
(function(){
    var parts = '{{ \Carbon\Carbon::parse($absensiHariIni->jam_masuk)->format("H:i:s") }}'.split(':');
    var masuk = new Date();
    masuk.setHours(+parts[0], +parts[1], +parts[2], 0);
    function upd(){
        var diff = Math.max(0, Math.floor((new Date()-masuk)/60000));
        var el = document.getElementById('durasi-kerja');
        if(el) el.textContent = Math.floor(diff/60)+'j '+String(diff%60).padStart(2,'0')+'m';
    }
    upd(); setInterval(upd, 30000);
})();
@endif

/* ─────────────────────────────────
   GPS
───────────────────────────────── */
var KAN_LAT = {{ $instansi?->latitude  ?? 'null' }};
var KAN_LNG = {{ $instansi?->longitude ?? 'null' }};
var KAN_RAD = {{ $instansi?->radius_meter ?? 100 }};

function jarak(la1,lo1,la2,lo2){
    var R=6371000, r=function(x){return x*Math.PI/180;};
    var a=Math.pow(Math.sin(r(la2-la1)/2),2)+Math.cos(r(la1))*Math.cos(r(la2))*Math.pow(Math.sin(r(lo2-lo1)/2),2);
    return R*2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a));
}

if(navigator.geolocation) {
    var gpsTimeout = setTimeout(function(){
        ['masuk','pulang'].forEach(function(t){
            var txt=document.getElementById('rtxt-'+t);
            var lat=document.getElementById('lat-'+t);
            if(txt && !lat.value) txt.textContent='⚠ GPS lambat. Pastikan GPS aktif dan coba refresh.';
        });
    }, 15000);

    navigator.geolocation.getCurrentPosition(function(pos){
        clearTimeout(gpsTimeout);
        var lat = pos.coords.latitude, lng = pos.coords.longitude;
        ['masuk','pulang'].forEach(function(t){
            var le=document.getElementById('lat-'+t), oe=document.getElementById('lng-'+t);
            if(le) le.value=lat.toFixed(7);
            if(oe) oe.value=lng.toFixed(7);
            var dot=document.getElementById('rdot-'+t), txt=document.getElementById('rtxt-'+t);
            if(!dot || !txt) return;
            if(KAN_LAT===null || KAN_LAT===undefined) {
                dot.className='ab-rdot ok';
                txt.textContent='✓ Lokasi terdeteksi ('+lat.toFixed(5)+', '+lng.toFixed(5)+')';
                return;
            }
            var d=jarak(lat,lng,KAN_LAT,KAN_LNG), ok=d<=KAN_RAD;
            dot.className='ab-rdot '+(ok?'ok':'err');
            txt.textContent = ok
                ? '✓ Dalam radius ('+Math.round(d)+'m dari kantor)'
                : '✗ Luar radius ('+Math.round(d)+'m dari kantor)';
        });
    }, function(err){
        clearTimeout(gpsTimeout);
        var msg = '⚠ Aktifkan GPS untuk melanjutkan';
        if(err.code===1) msg='⚠ Izin lokasi ditolak. Izinkan akses lokasi di browser.';
        else if(err.code===2) msg='⚠ GPS tidak tersedia.';
        else if(err.code===3) msg='⚠ GPS timeout. Coba refresh halaman.';
        ['masuk','pulang'].forEach(function(t){
            var txt=document.getElementById('rtxt-'+t);
            if(txt) txt.textContent=msg;
        });
    },{enableHighAccuracy:true,timeout:10000,maximumAge:30000});
} else {
    ['masuk','pulang'].forEach(function(t){
        var txt=document.getElementById('rtxt-'+t);
        if(txt) txt.textContent='⚠ Browser tidak mendukung GPS';
    });
}

/* ─────────────────────────────────
   KAMERA
───────────────────────────────── */
function showCameraError(box, type, message) {
    if(!box) return;
    box.outerHTML = '<div class="cam-err"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><line x1="1" y1="1" x2="23" y2="23"/></svg>' + message + '</div>';
}

async function startCamera(type){
    var vid = document.getElementById('vid-'+type);
    var box = document.getElementById('cambox-'+type);
    if(!vid || !box) return;

    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        showCameraError(box, type, 'Browser Anda tidak mendukung akses kamera.<br>Gunakan Chrome atau Firefox.');
        return;
    }

    try {
        if(vid._stream) vid._stream.getTracks().forEach(function(t){ t.stop(); });

        var stream = await navigator.mediaDevices.getUserMedia({
            video: { facingMode: 'user', width:{ideal:1280}, height:{ideal:720} },
            audio: false
        });

        vid.srcObject = stream;
        vid._stream = stream;

        await new Promise(function(resolve, reject){
            var timeout = setTimeout(function(){ reject(new Error('timeout')); }, 10000);
            vid.onloadedmetadata = function(){ clearTimeout(timeout); resolve(); };
            if(vid.readyState >= 2){ clearTimeout(timeout); resolve(); }
        });

        try { await vid.play(); }
        catch(e){ vid.muted=true; await vid.play(); }

    } catch(err) {
        var msg = 'Kamera tidak dapat diakses.';
        if(err.name==='NotAllowedError' || err.name==='PermissionDeniedError')
            msg = '<strong>Izin kamera ditolak</strong><br>Izinkan akses kamera di browser.';
        else if(err.name==='NotFoundError')
            msg = '<strong>Kamera tidak ditemukan</strong><br>Pastikan perangkat memiliki kamera.';
        else if(err.name==='NotReadableError')
            msg = '<strong>Kamera sedang digunakan</strong><br>Tutup aplikasi lain lalu refresh.';
        showCameraError(box, type, msg);
    }
}

function ambilFoto(type){
    var vid  = document.getElementById('vid-'+type);
    var cnv  = document.getElementById('cnv-'+type);
    var prev = document.getElementById('prev-'+type);
    var b64  = document.getElementById('b64-'+type);
    var box  = document.getElementById('cambox-'+type);
    var ret  = document.getElementById('retake-'+type);
    var btn  = document.getElementById('btnsubmit-'+type);
    var hint = document.getElementById('hint-'+type);

    if(!vid || vid.videoWidth === 0) {
        alert('Kamera belum siap, tunggu beberapa detik lalu coba lagi.');
        return;
    }

    cnv.width  = vid.videoWidth  || 640;
    cnv.height = vid.videoHeight || 480;
    var ctx = cnv.getContext('2d');
    ctx.translate(cnv.width, 0);
    ctx.scale(-1, 1);
    ctx.drawImage(vid, 0, 0);

    var dataUrl = cnv.toDataURL('image/jpeg', 0.88);
    b64.value  = dataUrl;
    prev.src   = dataUrl;
    prev.style.display = 'block';
    box.style.display  = 'none';
    ret.style.display  = 'flex';
    if(hint) hint.style.display = 'none';

    if(btn) {
        var okWaktu = (type==='masuk') ? canAbsenMasuk() : canAbsenPulang();
        if(okWaktu) btn.disabled = false;
    }
}

function retakeFoto(type){
    var prev = document.getElementById('prev-'+type);
    var b64  = document.getElementById('b64-'+type);
    var ret  = document.getElementById('retake-'+type);
    var box  = document.getElementById('cambox-'+type);
    var btn  = document.getElementById('btnsubmit-'+type);
    var hint = document.getElementById('hint-'+type);

    prev.style.display = 'none';
    prev.src = '';
    b64.value = '';
    ret.style.display = 'none';
    box.style.display = 'block';
    if(hint) hint.style.display = 'block';
    if(btn) btn.disabled = true;
}

/* ─────────────────────────────────
   INIT + SUBMIT
───────────────────────────────── */
['masuk','pulang'].forEach(function(type){
    var form = document.getElementById('form-'+type);
    startCamera(type);
    if(!form) return;

    form.addEventListener('submit', function(e){
        e.preventDefault();
        var b64v = document.getElementById('b64-'+type).value;
        if(!b64v){ alert('Foto selfie wajib diambil terlebih dahulu!'); return; }

        var latEl = document.getElementById('lat-'+type);
        var lngEl = document.getElementById('lng-'+type);
        if(!latEl.value || !lngEl.value){
            alert('Lokasi GPS belum terdeteksi. Pastikan GPS aktif lalu tunggu beberapa detik.');
            return;
        }

        var rdot = document.getElementById('rdot-'+type);
        if(rdot && rdot.classList.contains('err')) {
            var proceed = confirm('⚠ Anda berada di luar radius kantor.\n\nLanjutkan absen?');
            if(!proceed) return;
        }

        var btn = document.getElementById('btnsubmit-'+type);
        if(btn){ btn.disabled=true; btn.innerHTML='<span>Menyimpan…</span>'; }
        form.submit();
    });
});
</script>
@endpush

</x-app-layout>