<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['title' => 'Data Instansi']); ?>

<?php $__env->startPush('styles'); ?>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --p:      #4f46e5;
    --pd:     #3730a3;
    --pl:     #eef2ff;
    --pm:     rgba(79,70,229,.12);
    --ok:     #059669;
    --okl:    #ecfdf5;
    --err:    #dc2626;
    --errl:   #fef2f2;
    --warn:   #d97706;
    --warnl:  #fffbeb;
    --sky:    #0284c7;
    --skyl:   #e0f2fe;
    --txt:    #0f172a;
    --muted:  #64748b;
    --muted2: #94a3b8;
    --border: #e2e8f0;
    --bg:     #f0f4ff;
    --bg2:    #f8fafc;
    --white:  #ffffff;
    --sh:     0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
    --sh2:    0 8px 32px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.06);
    --r:      14px;
    --rs:     9px;
    --rl:     20px;
}

body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: var(--txt); }

/* ════ WRAPPER — mobile first ════ */
.pg {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 14px 12px 48px;
}
@media (min-width: 600px)  { .pg { padding: 20px 18px 52px; } }
@media (min-width: 900px)  { .pg { padding: 28px 24px 52px; } }

/* ════ PAGE HEADER ════ */
.pg-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}
@media (min-width: 600px) {
    .pg-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 26px;
    }
}

.pg-header-l { display: flex; align-items: center; gap: 12px; min-width: 0; }

.pg-hico {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: var(--r);
    background: linear-gradient(135deg, var(--p), #818cf8);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px var(--pm);
}
.pg-hico svg { width: 22px; height: 22px; stroke: white; fill: none; }
@media (min-width: 600px) {
    .pg-hico { width: 50px; height: 50px; }
    .pg-hico svg { width: 24px; height: 24px; }
}

.pg-title { font-size: 1.15rem; font-weight: 900; color: var(--txt); letter-spacing: -.03em; margin-bottom: 2px; }
.pg-sub   { font-size: .78rem; font-weight: 500; color: var(--muted); }
@media (min-width: 600px) {
    .pg-title { font-size: 1.45rem; }
    .pg-sub   { font-size: .85rem; }
}

/* header button: full-width on mobile */
.pg-header > .btn-primary { width: 100%; justify-content: center; }
@media (min-width: 600px)  { .pg-header > .btn-primary { width: auto; } }

/* ── ALERT ── */
.alert {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 15px; border-radius: var(--r);
    margin-bottom: 16px; font-size: .875rem; font-weight: 600;
    animation: slideDown .3s ease;
}
@keyframes slideDown { from { opacity:0;transform:translateY(-8px); } to { opacity:1;transform:translateY(0); } }
.alert-ok { background: var(--okl); color: var(--ok); border: 1px solid #a7f3d0; }
.alert-ok svg { width:15px;height:15px;stroke:var(--ok);flex-shrink:0;fill:none; }

/* ════ KPI — 2 col mobile → 4 col desktop ════ */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
@media (min-width: 900px) {
    .kpi-row { grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
}

.kpi {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--r); padding: 13px 14px;
    box-shadow: var(--sh); position: relative; overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
@media (min-width: 600px) { .kpi { padding: 18px 20px; } }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh2); }
.kpi::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    border-radius: var(--r) var(--r) 0 0;
}
.kpi.kp::before { background: linear-gradient(90deg,var(--p),#818cf8); }
.kpi.ks::before { background: linear-gradient(90deg,var(--ok),#34d399); }
.kpi.kw::before { background: linear-gradient(90deg,var(--warn),#fbbf24); }
.kpi.kb::before { background: linear-gradient(90deg,var(--sky),#38bdf8); }

.kpi-lbl { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted2); margin-bottom: 5px; }
.kpi-val { font-size: 1.55rem; font-weight: 900; color: var(--txt); letter-spacing: -.04em; line-height: 1; }
.kpi-val span { font-size: .85rem; font-weight: 600; color: var(--muted); }
.kpi-sub { font-size: .7rem; color: var(--muted); font-weight: 500; margin-top: 3px; }

@media (min-width: 600px) {
    .kpi-lbl { font-size: .7rem; }
    .kpi-val { font-size: 2rem; }
    .kpi-sub { font-size: .78rem; }
}

/* ════ MAIN CARD ════ */
.card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--rl); box-shadow: var(--sh); overflow: hidden;
}

.card-head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 10px;
}
@media (min-width: 600px) {
    .card-head {
        flex-direction: row; align-items: center;
        justify-content: space-between; flex-wrap: wrap;
        padding: 18px 24px; gap: 12px;
    }
}

.card-head-l { display: flex; align-items: center; gap: 10px; }
.card-title  { font-size: .9rem; font-weight: 800; color: var(--txt); }
.count-badge {
    background: var(--pl); color: var(--p);
    font-size: .72rem; font-weight: 700;
    padding: 2px 9px; border-radius: 100px;
}

/* search + button row — full-width on mobile */
.card-head-r {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
}
@media (min-width: 600px) { .card-head-r { width: auto; flex-wrap: wrap; } }

/* ── SEARCH ── */
.search { position: relative; display: flex; align-items: center; flex: 1; }
.search svg { position: absolute; left:10px; width:15px;height:15px;stroke:var(--muted2);fill:none;pointer-events:none; }
.search input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: 1.5px solid var(--border); border-radius: var(--rs);
    font-size: .83rem; font-family: inherit; color: var(--txt);
    background: var(--bg2); outline: none; transition: all .2s;
}
.search input:focus {
    border-color: var(--p); background: var(--white);
    box-shadow: 0 0 0 3px var(--pm);
}
@media (min-width: 600px) {
    .search { flex: unset; }
    .search input { width: 210px; }
    .search input:focus { width: 250px; }
}

/* ── BUTTONS ── */
.btn-primary {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: var(--rs);
    background: var(--p); color: white; border: none;
    font-size: .875rem; font-weight: 700; font-family: inherit;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    box-shadow: 0 2px 10px var(--pm); transition: all .2s;
}
.btn-primary svg { width:15px;height:15px;stroke:white;fill:none; }
.btn-primary:hover { background: var(--pd); transform: translateY(-1px); box-shadow: 0 4px 16px var(--pm); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: var(--rs);
    background: transparent; color: var(--muted); border: 1.5px solid var(--border);
    font-size: .875rem; font-weight: 600; font-family: inherit; cursor: pointer;
    transition: all .2s; white-space: nowrap;
}
.btn-ghost:hover { background: var(--bg2); color: var(--txt); border-color: var(--muted2); }

/* card inner Tambah — shrink, don't grow */
.btn-head-add { padding: 8px 14px; font-size: .82rem; flex-shrink: 0; }

/* ── TABLE ── */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; min-width: 560px; }
.tbl thead tr { background: #fafbff; }
.tbl thead th {
    padding: 9px 12px; text-align: left;
    font-size: .67rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted2);
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
@media (min-width: 600px) { .tbl thead th { padding: 11px 20px; font-size: .7rem; } }
.tbl tbody tr { border-bottom: 1px solid #f1f5f9; transition: background .12s; }
.tbl tbody tr:last-child { border-bottom: none; }
.tbl tbody tr:hover { background: #fafbff; }
.tbl td { padding: 10px 12px; font-size: .82rem; color: var(--txt); vertical-align: middle; }
@media (min-width: 600px) { .tbl td { padding: 13px 20px; font-size: .875rem; } }

/* instansi cell */
.ins-cell { display: flex; align-items: center; gap: 9px; }
.ins-av {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--p), #818cf8);
    display: flex; align-items: center; justify-content: center;
    font-size: .73rem; font-weight: 800; color: white;
    box-shadow: 0 3px 10px rgba(79,70,229,.25);
}
@media (min-width: 600px) { .ins-av { width: 38px; height: 38px; font-size: .8rem; } }
.ins-name { font-size: .82rem; font-weight: 700; color: var(--txt); }
.ins-id   { font-size: .69rem; color: var(--muted2); font-weight: 500; margin-top: 1px; }
@media (min-width: 600px) { .ins-name { font-size: .875rem; } }

/* coord */
.coord {
    font-family: 'JetBrains Mono', monospace; font-size: .7rem;
    color: var(--muted); background: var(--bg2);
    padding: 2px 6px; border-radius: 5px; border: 1px solid var(--border);
    display: inline-block; white-space: nowrap;
}
@media (min-width: 600px) { .coord { font-size: .78rem; padding: 3px 9px; } }

/* radius badge */
.rad-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--pl); color: var(--p);
    font-size: .73rem; font-weight: 700;
    padding: 3px 8px; border-radius: 100px;
    border: 1px solid #c7d2fe;
}
.rad-badge svg { width:10px;height:10px;stroke:var(--p);fill:none; }

/* action buttons */
.act-cell { display: flex; gap: 5px; }
.act-btn {
    width: 29px; height: 29px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; transition: all .15s;
}
@media (min-width: 600px) { .act-btn { width: 32px; height: 32px; border-radius: 8px; } }
.act-btn svg { width: 13px; height: 13px; fill: none; }
@media (min-width: 600px) { .act-btn svg { width: 14px; height: 14px; } }
.act-edit { background: var(--pl);   border: 1px solid #c7d2fe; }
.act-edit svg { stroke: var(--p); }
.act-edit:hover { background: #e0e7ff; transform: scale(1.08); }
.act-del  { background: var(--errl); border: 1px solid #fecaca; }
.act-del  svg { stroke: var(--err); }
.act-del:hover  { background: #fee2e2; transform: scale(1.08); }
.act-view { background: var(--skyl); border: 1px solid #bae6fd; }
.act-view svg { stroke: var(--sky); }
.act-view:hover { background: #bae6fd; transform: scale(1.08); }

/* empty */
.empty { padding: 56px 24px; text-align: center; }
.empty svg { stroke: #dde3ef; fill: none; margin-bottom: 14px; }
.empty p { font-size: .9rem; color: var(--muted2); font-weight: 600; }

/* ════ MODAL ════ */
.modal {
    position: fixed; inset: 0;
    display: flex; align-items: flex-end; justify-content: center;   /* bottom sheet on mobile */
    z-index: 9000; padding: 0;
}
@media (min-width: 600px) { .modal { align-items: center; padding: 16px; } }

.modal-bg {
    position: absolute; inset: 0;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(6px);
}

.modal-box {
    position: relative; background: var(--white);
    width: 100%; max-width: 100%;
    max-height: 93vh;
    border-radius: var(--rl) var(--rl) 0 0;   /* bottom sheet: round top */
    overflow-y: auto;
    box-shadow: 0 -8px 40px rgba(0,0,0,.18);
    animation: slideUp .28s cubic-bezier(.34,1.2,.64,1);
}
@media (min-width: 600px) {
    .modal-box {
        max-width: 500px;
        border-radius: var(--rl);
        box-shadow: 0 24px 64px rgba(0,0,0,.18);
        animation: popIn .28s cubic-bezier(.34,1.4,.64,1);
    }
}
@keyframes slideUp { from { opacity:0;transform:translateY(50px); } to { opacity:1;transform:translateY(0); } }
@keyframes popIn   { from { opacity:0;transform:scale(.92) translateY(18px); } to { opacity:1;transform:scale(1) translateY(0); } }

/* drag pill — only visible on mobile */
.drag-pill {
    width: 36px; height: 4px; border-radius: 2px;
    background: var(--border); margin: 10px auto 0;
}
@media (min-width: 600px) { .drag-pill { display: none; } }

.modal-hd {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 11px;
}
@media (min-width: 600px) { .modal-hd { padding: 22px 24px 18px; gap: 13px; } }

.modal-hd-ico {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: var(--pl); display: flex; align-items: center; justify-content: center;
}
@media (min-width: 600px) { .modal-hd-ico { width: 42px; height: 42px; border-radius: 12px; } }
.modal-hd-ico svg { width:18px;height:18px;stroke:var(--p);fill:none; }
@media (min-width: 600px) { .modal-hd-ico svg { width:20px;height:20px; } }

.modal-hd-title { font-size: .93rem; font-weight: 800; color: var(--txt); margin-bottom: 2px; }
.modal-hd-sub   { font-size: .74rem; color: var(--muted); font-weight: 500; }
@media (min-width: 600px) { .modal-hd-title { font-size: 1rem; } }

.modal-x {
    margin-left: auto; flex-shrink: 0;
    background: none; border: none; cursor: pointer;
    width: 30px; height: 30px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted2); font-size: 20px; line-height: 1; transition: all .15s;
}
.modal-x:hover { background: var(--bg2); color: var(--txt); }

.modal-body { padding: 14px 16px; }
@media (min-width: 600px) { .modal-body { padding: 22px 24px; } }

.sec-lbl {
    font-size: .67rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; color: var(--muted2); margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
}
.sec-lbl::after { content:''; flex:1; height:1px; background:var(--border); }

/* form rows: 1 col mobile, 2 col ≥520px */
.frow { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 520px) { .frow { grid-template-columns: 1fr 1fr; gap: 14px; } }

.fg { display: flex; flex-direction: column; margin-bottom: 14px; }
.fg:last-child { margin-bottom: 0; }
.fg label {
    font-size: .78rem; font-weight: 700; color: var(--txt); margin-bottom: 6px;
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.fg label .req { color: var(--err); font-size: .7rem; }
.fg input, .fg select, .fg textarea {
    width: 100%;
    padding: 9px 13px;
    border: 1.5px solid var(--border); border-radius: var(--rs);
    font-size: .875rem; font-family: inherit; color: var(--txt);
    background: var(--white); outline: none; transition: all .2s;
}
.fg textarea { resize: vertical; }
.fg input:focus, .fg select:focus, .fg textarea:focus {
    border-color: var(--p); box-shadow: 0 0 0 3px var(--pm);
}
.fg input::placeholder, .fg textarea::placeholder { color: var(--muted2); }
.fg .hint { font-size: .71rem; color: var(--muted2); font-weight: 500; margin-top: 4px; }

.ferr { color:var(--err);font-size:.73rem;font-weight:600;margin-top:4px;display:flex;align-items:center;gap:4px; }
.ferr::before { content:'⚠'; }
.fdiv { height: 1px; background: var(--border); margin: 16px 0; }

/* password toggle */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 40px; }
.pw-toggle {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--muted2); padding: 4px; transition: color .15s;
}
.pw-toggle:hover { color: var(--txt); }
.pw-toggle svg { width:15px;height:15px;stroke:currentColor;fill:none;display:block; }

/* GPS row: 2 col with GPS full-width below on mobile, 3-col on wider */
.gps-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.gps-row .gps-btn-wrap { grid-column: 1 / -1; }
@media (min-width: 460px) {
    .gps-row { grid-template-columns: 1fr 1fr auto; }
    .gps-row .gps-btn-wrap { grid-column: auto; }
}

.btn-gps {
    width: 100%; padding: 9px 14px; border-radius: var(--rs);
    background: var(--okl); color: var(--ok); border: 1.5px solid #6ee7b7;
    font-size: .8rem; font-weight: 700; font-family: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    white-space: nowrap; transition: all .15s;
}
@media (min-width: 460px) { .btn-gps { width: auto; } }
.btn-gps svg { width:13px;height:13px;stroke:var(--ok);fill:none; }
.btn-gps:hover { background: #a7f3d0; }

/* sticky footer on mobile bottom sheet */
.modal-ft {
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 10px;
    background: var(--bg2);
    position: sticky; bottom: 0;
}
@media (min-width: 600px) { .modal-ft { padding: 16px 24px; position: static; } }

/* ════ DELETE MODAL ════ */
.del-modal-box {
    position: relative; background: var(--white);
    width: 100%; max-width: 100%;
    border-radius: var(--rl) var(--rl) 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,.18);
    animation: slideUp .24s cubic-bezier(.34,1.4,.64,1);
    padding: 12px 20px 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
    text-align: center;
}
@media (min-width: 600px) {
    .del-modal-box {
        max-width: 380px; border-radius: var(--rl);
        padding: 28px 26px 22px;
        box-shadow: 0 24px 64px rgba(0,0,0,.18);
        animation: popIn .24s cubic-bezier(.34,1.4,.64,1);
    }
}
.del-ico {
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--errl); display: flex; align-items: center; justify-content: center;
    margin: 12px auto 16px; border: 6px solid #fee2e2;
}
@media (min-width: 600px) { .del-ico { margin-top: 0; } }
.del-ico svg { width:24px;height:24px;stroke:var(--err);fill:none; }
.del-title { font-size: 1rem; font-weight: 800; color: var(--txt); margin-bottom: 6px; }
.del-sub   { font-size: .83rem; color: var(--muted); font-weight: 500; line-height: 1.55; margin-bottom: 20px; }
.del-name  { font-weight: 700; color: var(--err); }

.del-btns { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 380px) { .del-btns { flex-direction: row; justify-content: center; } }
.del-btns .btn-ghost,
.del-btns .btn-danger { width: 100%; justify-content: center; }
@media (min-width: 380px) { .del-btns .btn-ghost, .del-btns .btn-danger { width: auto; } }

.btn-danger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 20px; border-radius: var(--rs);
    background: var(--err); color: white; border: none;
    font-size: .875rem; font-weight: 700; font-family: inherit; cursor: pointer;
    box-shadow: 0 2px 10px rgba(220,38,38,.25); transition: all .2s;
}
.btn-danger svg { width:13px;height:13px;stroke:white;fill:none; }
.btn-danger:hover { background: #b91c1c; transform: translateY(-1px); }

/* ════ TOAST ════ */
.toast {
    position: fixed; z-index: 9999;
    left: 12px; right: 12px; bottom: 16px;   /* full-width mobile */
    background: var(--txt); color: white;
    padding: 12px 16px; border-radius: 12px;
    font-size: .85rem; font-weight: 600;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    animation: toastIn .3s cubic-bezier(.34,1.4,.64,1);
}
@media (min-width: 600px) { .toast { left: auto; right: 28px; bottom: 28px; max-width: 340px; } }
.toast svg { width:16px;height:16px;fill:none;flex-shrink:0; }
.toast.ok  { background:#0f4c35; border-left:3px solid var(--ok); }
.toast.ok  svg { stroke:#34d399; }
.toast.err { background:#4c0f0f; border-left:3px solid var(--err); }
.toast.err svg { stroke:#f87171; }
@keyframes toastIn { from{opacity:0;transform:translateY(16px) scale(.95);} to{opacity:1;transform:translateY(0) scale(1);} }

/* ── animations ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
.fu1 { animation: fadeUp .4s .00s ease both; }
.fu2 { animation: fadeUp .4s .06s ease both; }
.fu3 { animation: fadeUp .4s .12s ease both; }
</style>
<?php $__env->stopPush(); ?>



<div class="pg">

    
    <div class="pg-header fu1">
        <div class="pg-header-l">
            <div class="pg-hico">
                <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                    <polyline points="9 22 9 12 15 12 15 22"/>
                </svg>
            </div>
            <div>
                <h1 class="pg-title">Data Instansi</h1>
                <p class="pg-sub">Kelola instansi pengguna sistem absensi</p>
            </div>
        </div>
        <button onclick="openCreate()" class="btn-primary">
            <svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <line x1="12" y1="5" x2="12" y2="19"/>
                <line x1="5" y1="12" x2="19" y2="12"/>
            </svg>
            Tambah Instansi
        </button>
    </div>

    <?php if(session('success')): ?>
    <div class="alert alert-ok fu1">
        <svg viewBox="0 0 24 24" 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>
        <?php echo e(session('success')); ?>

    </div>
    <?php endif; ?>

    
    <div class="kpi-row fu2">
        <div class="kpi kp">
            <div class="kpi-lbl">Total Instansi</div>
            <div class="kpi-val"><?php echo e($instansis->count()); ?></div>
            <div class="kpi-sub">Instansi terdaftar</div>
        </div>
        <div class="kpi ks">
            <div class="kpi-lbl">Aktif Hari Ini</div>
            <div class="kpi-val" id="kpi-aktif">—</div>
            <div class="kpi-sub">Sudah ada absensi</div>
        </div>
        <div class="kpi kw">
            <div class="kpi-lbl">Rata-rata Radius</div>
            <div class="kpi-val">
                <?php echo e($instansis->count() ? round($instansis->avg('radius_meter')) : 0); ?><span> m</span>
            </div>
            <div class="kpi-sub">Radius absensi</div>
        </div>
        <div class="kpi kb">
            <div class="kpi-lbl">Total Karyawan</div>
            <div class="kpi-val"><?php echo e($instansis->sum('karyawans_count')); ?></div>
            <div class="kpi-sub">Di semua instansi</div>
        </div>
    </div>

    
    <div class="card fu3">
        <div class="card-head">
            <div class="card-head-l">
                <span class="card-title">Daftar Instansi</span>
                <span class="count-badge" id="count-badge"><?php echo e($instansis->count()); ?></span>
            </div>
            <div class="card-head-r">
                <div class="search">
                    <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="11" cy="11" r="8"/>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                    </svg>
                    <input type="text" id="search-input" placeholder="Cari instansi…" oninput="filterTable(this.value)">
                </div>
                <button onclick="openCreate()" class="btn-primary btn-head-add">
                    <svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="12" y1="5" x2="12" y2="19"/>
                        <line x1="5" y1="12" x2="19" y2="12"/>
                    </svg>
                    Tambah
                </button>
            </div>
        </div>

        <div class="tbl-wrap">
            <table class="tbl">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Instansi</th>
                        <th>Alamat</th>
                        <th>Koordinat</th>
                        <th>Radius</th>
                        <th>Karyawan</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody id="tbl-body">
                    <?php $__empty_1 = true; $__currentLoopData = $instansis; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $inst): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <tr id="row-<?php echo e($inst->id); ?>" data-name="<?php echo e(strtolower($inst->nama_instansi)); ?>">
                        <td style="color:var(--muted2);font-size:.75rem;font-weight:700;">
                            <?php echo e(str_pad($i+1, 2, '0', STR_PAD_LEFT)); ?>

                        </td>
                        <td>
                            <div class="ins-cell">
                                <div class="ins-av"><?php echo e(strtoupper(substr($inst->nama_instansi, 0, 2))); ?></div>
                                <div>
                                    <div class="ins-name"><?php echo e($inst->nama_instansi); ?></div>
                                    <div class="ins-id">ID #<?php echo e($inst->id); ?></div>
                                </div>
                            </div>
                        </td>
                        <td style="max-width:150px;">
                            <?php if($inst->alamat): ?>
                                <span style="font-size:.8rem;color:var(--muted);font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;" title="<?php echo e($inst->alamat); ?>">
                                    <?php echo e($inst->alamat); ?>

                                </span>
                            <?php else: ?>
                                <span style="color:var(--muted2);font-size:.78rem;">—</span>
                            <?php endif; ?>
                        </td>
                        <td>
                            <div style="display:flex;flex-direction:column;gap:3px;">
                                <span class="coord"><?php echo e($inst->latitude); ?></span>
                                <span class="coord"><?php echo e($inst->longitude); ?></span>
                            </div>
                        </td>
                        <td>
                            <span class="rad-badge">
                                <svg viewBox="0 0 24 24" stroke-width="2.5"><circle cx="12" cy="12" r="10"/></svg>
                                <?php echo e($inst->radius_meter); ?> m
                            </span>
                        </td>
                        <td>
                            <span style="font-size:.88rem;font-weight:800;color:var(--p);"><?php echo e($inst->karyawans_count ?? 0); ?></span>
                            <span style="font-size:.73rem;color:var(--muted2);font-weight:500;"> orang</span>
                        </td>
                        <td>
                            <div class="act-cell">
                                <button class="act-btn act-view" onclick="viewInstansi(<?php echo e($inst->id); ?>)" title="Lihat Detail">
                                    <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                        <circle cx="12" cy="12" r="3"/>
                                    </svg>
                                </button>
                                <button class="act-btn act-edit"
                                    onclick="openEdit(<?php echo e($inst->id); ?>,'<?php echo e(addslashes($inst->nama_instansi)); ?>','<?php echo e(addslashes($inst->alamat ?? '')); ?>','<?php echo e($inst->latitude); ?>','<?php echo e($inst->longitude); ?>',<?php echo e($inst->radius_meter); ?>)"
                                    title="Edit">
                                    <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                                    </svg>
                                </button>
                                <button class="act-btn act-del" onclick="openDelete(<?php echo e($inst->id); ?>,'<?php echo e(addslashes($inst->nama_instansi)); ?>')" title="Hapus">
                                    <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="3 6 5 6 21 6"/>
                                        <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
                                        <path d="M10 11v6"/><path d="M14 11v6"/>
                                        <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
                                    </svg>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <tr id="empty-row">
                        <td colspan="7">
                            <div class="empty">
                                <svg width="52" height="52" viewBox="0 0 24 24" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                                    <polyline points="9 22 9 12 15 12 15 22"/>
                                </svg>
                                <p>Belum ada instansi terdaftar</p>
                            </div>
                        </td>
                    </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

</div>



<div id="modal-form" class="modal" style="display:none;">
    <div class="modal-bg" onclick="closeForm()"></div>
    <div class="modal-box">
        <div class="drag-pill"></div>
        <div class="modal-hd">
            <div class="modal-hd-ico">
                <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                    <polyline points="9 22 9 12 15 12 15 22"/>
                </svg>
            </div>
            <div>
                <div class="modal-hd-title" id="mf-title">Tambah Instansi</div>
                <div class="modal-hd-sub">Isi semua data dengan lengkap dan benar</div>
            </div>
            <button class="modal-x" onclick="closeForm()">×</button>
        </div>

        <div class="modal-body">
            <form id="form-instansi" method="POST" action="<?php echo e(route('admin.instansi.store')); ?>">
                <?php echo csrf_field(); ?>
                <input type="hidden" name="_method" id="f-method" value="POST">
                <input type="hidden" name="_id"     id="f-id">

                <div class="sec-lbl">Informasi Akun</div>

                <div class="fg">
                    <label>Nama Instansi <span class="req">*</span></label>
                    <input type="text" name="nama_instansi" id="f-nama" placeholder="cth. Kantor Dinas Pendidikan" required>
                    <span class="ferr" id="err-nama" style="display:none;"></span>
                </div>

                <div class="fg">
                    <label>Alamat</label>
                    <textarea name="alamat" id="f-alamat" rows="2" placeholder="Jl. Contoh No. 123, Kota..."></textarea>
                    <span class="ferr" id="err-alamat" style="display:none;"></span>
                </div>

                <div class="frow">
                    <div class="fg">
                        <label>Email Login <span class="req">*</span></label>
                        <input type="email" name="email" id="f-email" placeholder="email@instansi.go.id" required>
                        <span class="ferr" id="err-email" style="display:none;"></span>
                    </div>
                    <div class="fg">
                        <label id="pw-label">Password <span class="req">*</span></label>
                        <div class="pw-wrap">
                            <input type="password" name="password" id="f-pw" placeholder="Min. 8 karakter">
                            <button type="button" class="pw-toggle" onclick="togglePw()">
                                <svg id="pw-eye" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                    <circle cx="12" cy="12" r="3"/>
                                </svg>
                            </button>
                        </div>
                        <span class="hint" id="pw-hint">Min. 8 karakter</span>
                        <span class="ferr" id="err-pw" style="display:none;"></span>
                    </div>
                </div>

                <div class="fdiv"></div>
                <div class="sec-lbl">Lokasi & Radius Absensi</div>

                <div class="gps-row">
                    <div class="fg" style="margin-bottom:0;">
                        <label>Latitude <span class="req">*</span></label>
                        <input type="text" name="latitude" id="f-lat" placeholder="-6.200000" required>
                        <span class="ferr" id="err-lat" style="display:none;"></span>
                    </div>
                    <div class="fg" style="margin-bottom:0;">
                        <label>Longitude <span class="req">*</span></label>
                        <input type="text" name="longitude" id="f-lng" placeholder="106.816666" required>
                        <span class="ferr" id="err-lng" style="display:none;"></span>
                    </div>
                    <div class="gps-btn-wrap">
                        <button type="button" class="btn-gps" onclick="getGPS()">
                            <svg viewBox="0 0 24 24" 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>
                            GPS
                        </button>
                    </div>
                </div>
                <div style="margin-top:8px;" id="gps-status"></div>

                <div class="fg" style="margin-top:14px;">
                    <label>Radius Absensi (meter) <span class="req">*</span></label>
                    <input type="number" name="radius_meter" id="f-radius" placeholder="cth. 100" min="10" max="5000" required>
                    <span class="hint">Jarak maksimal karyawan dari lokasi kantor saat absen</span>
                    <span class="ferr" id="err-radius" style="display:none;"></span>
                </div>
            </form>
        </div>

        <div class="modal-ft">
            <button type="button" class="btn-ghost" onclick="closeForm()">Batal</button>
            <button type="button" class="btn-primary" id="btn-submit" onclick="submitForm()">
                <svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span id="btn-submit-lbl">Simpan</span>
            </button>
        </div>
    </div>
</div>



<div id="modal-del" class="modal" style="display:none;">
    <div class="modal-bg" onclick="closeDel()"></div>
    <div class="del-modal-box">
        <div class="drag-pill"></div>
        <div class="del-ico">
            <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="3 6 5 6 21 6"/>
                <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
                <path d="M10 11v6"/><path d="M14 11v6"/>
            </svg>
        </div>
        <div class="del-title">Hapus Instansi?</div>
        <div class="del-sub">
            Anda akan menghapus <span class="del-name" id="del-name-lbl"></span>.<br>
            Semua data karyawan &amp; absensi terkait akan ikut terhapus.<br>
            Tindakan ini <strong>tidak dapat dibatalkan</strong>.
        </div>
        <div class="del-btns">
            <button class="btn-ghost" onclick="closeDel()">Batal</button>
            <button class="btn-danger" id="btn-del-confirm" onclick="doDelete()">
                <svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="3 6 5 6 21 6"/>
                    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
                </svg>
                Ya, Hapus
            </button>
        </div>
    </div>
</div>


<?php $__env->startPush('scripts'); ?>
<script>
const CSRF = () => document.querySelector('meta[name="csrf-token"]')?.content;

/* ── SEARCH ── */
function filterTable(q) {
    const rows = document.querySelectorAll('#tbl-body tr[data-name]');
    let vis = 0;
    rows.forEach(r => {
        const show = r.dataset.name.includes(q.toLowerCase());
        r.style.display = show ? '' : 'none';
        if (show) vis++;
    });
    document.getElementById('count-badge').textContent = vis;
    const empty = document.getElementById('empty-row');
    if (empty) empty.style.display = (vis === 0) ? '' : 'none';
}

/* ── TOGGLE PASSWORD ── */
function togglePw() {
    const inp = document.getElementById('f-pw');
    const show = inp.type === 'password';
    inp.type = show ? 'text' : 'password';
    document.getElementById('pw-eye').innerHTML = show
        ? '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/>'
        : '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>';
}

/* ── GPS ── */
function getGPS() {
    const st = document.getElementById('gps-status');
    st.innerHTML = '<span style="font-size:.75rem;color:var(--muted);font-weight:600;">🔍 Mendeteksi lokasi…</span>';
    navigator.geolocation?.getCurrentPosition(
        pos => {
            document.getElementById('f-lat').value = pos.coords.latitude.toFixed(7);
            document.getElementById('f-lng').value = pos.coords.longitude.toFixed(7);
            st.innerHTML = '<span style="font-size:.75rem;color:var(--ok);font-weight:700;">✓ Lokasi berhasil dideteksi</span>';
            setTimeout(() => st.innerHTML = '', 3000);
        },
        () => { st.innerHTML = '<span style="font-size:.75rem;color:var(--err);font-weight:600;">⚠ Tidak dapat mendeteksi GPS</span>'; },
        { enableHighAccuracy: true, timeout: 8000 }
    );
}

/* ── CLEAR ERRORS ── */
function clearErrors() {
    ['nama','alamat','email','pw','lat','lng','radius'].forEach(k => {
        const el = document.getElementById(`err-${k}`);
        if (el) { el.textContent = ''; el.style.display = 'none'; }
    });
}

/* ── OPEN CREATE ── */
function openCreate() {
    document.getElementById('mf-title').textContent       = 'Tambah Instansi';
    document.getElementById('f-method').value             = 'POST';
    document.getElementById('form-instansi').action       = '<?php echo e(route("admin.instansi.store")); ?>';
    document.getElementById('btn-submit-lbl').textContent = 'Simpan';
    document.getElementById('pw-label').innerHTML         = 'Password <span class="req">*</span>';
    document.getElementById('pw-hint').textContent        = 'Min. 8 karakter';
    document.getElementById('f-pw').required              = true;
    document.getElementById('form-instansi').reset();
    document.getElementById('gps-status').innerHTML = '';
    clearErrors();
    document.getElementById('modal-form').style.display = 'flex';
    setTimeout(() => document.getElementById('f-nama').focus(), 300);
}

/* ── OPEN EDIT ── */
function openEdit(id, nama, alamat, lat, lng, radius) {
    document.getElementById('mf-title').textContent       = 'Edit Instansi';
    document.getElementById('f-method').value             = 'PUT';
    document.getElementById('form-instansi').action       = `/admin/instansi/${id}`;
    document.getElementById('f-id').value                 = id;
    document.getElementById('f-nama').value               = nama;
    document.getElementById('f-alamat').value             = alamat;
    document.getElementById('f-lat').value                = lat;
    document.getElementById('f-lng').value                = lng;
    document.getElementById('f-radius').value             = radius;
    document.getElementById('f-email').value              = '';
    document.getElementById('f-pw').value                 = '';
    document.getElementById('f-pw').required              = false;
    document.getElementById('pw-label').innerHTML         = 'Password Baru <span style="font-size:.7rem;color:var(--muted2);font-weight:500;">(kosongkan jika tidak diubah)</span>';
    document.getElementById('pw-hint').textContent        = 'Isi jika ingin mengubah password';
    document.getElementById('btn-submit-lbl').textContent = 'Update';
    document.getElementById('gps-status').innerHTML = '';
    clearErrors();
    document.getElementById('modal-form').style.display = 'flex';
    setTimeout(() => document.getElementById('f-nama').focus(), 300);
}

/* ── CLOSE FORM ── */
function closeForm() {
    const modal = document.getElementById('modal-form');
    const box   = modal.querySelector('.modal-box');
    box.style.transition = 'opacity .18s, transform .18s';
    box.style.opacity    = '0';
    box.style.transform  = 'translateY(30px)';
    setTimeout(() => {
        modal.style.display  = 'none';
        box.style.transition = '';
        box.style.opacity    = '';
        box.style.transform  = '';
    }, 200);
}

/* ── SUBMIT ── */
function submitForm() {
    const form   = document.getElementById('form-instansi');
    const fd     = new FormData(form);
    const btn    = document.getElementById('btn-submit');
    const lbl    = document.getElementById('btn-submit-lbl');
    const method = document.getElementById('f-method').value;

    btn.disabled    = true;
    lbl.textContent = 'Menyimpan…';
    clearErrors();

    if (method !== 'POST') fd.append('_method', method);

    fetch(form.action, {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': CSRF() },
        body: fd
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            closeForm();
            showToast('ok', data.message || 'Data berhasil disimpan');
            setTimeout(() => location.reload(), 900);
        } else if (data.errors) {
            const map = { nama_instansi:'nama', alamat:'alamat', email:'email', password:'pw', latitude:'lat', longitude:'lng', radius_meter:'radius' };
            for (const [k, msgs] of Object.entries(data.errors)) {
                const el = document.getElementById(`err-${map[k] || k}`);
                if (el) { el.textContent = msgs.join(', '); el.style.display = 'flex'; }
            }
        } else {
            showToast('err', data.message || 'Terjadi kesalahan');
        }
    })
    .catch(() => showToast('err', 'Kesalahan jaringan, coba lagi'))
    .finally(() => {
        btn.disabled    = false;
        lbl.textContent = document.getElementById('f-method').value === 'POST' ? 'Simpan' : 'Update';
    });
}

/* ── DELETE ── */
let _delId = null;

function openDelete(id, nama) {
    _delId = id;
    document.getElementById('del-name-lbl').textContent = `"${nama}"`;
    document.getElementById('modal-del').style.display  = 'flex';
}

function closeDel() {
    document.getElementById('modal-del').style.display = 'none';
    _delId = null;
}

function doDelete() {
    if (!_delId) return;
    const btn = document.getElementById('btn-del-confirm');
    btn.disabled  = true;
    btn.innerHTML = '<span>Menghapus…</span>';

    fetch(`/admin/instansi/${_delId}`, {
        method: 'DELETE',
        headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': CSRF(), 'Accept': 'application/json' }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            const row = document.getElementById(`row-${_delId}`);
            if (row) {
                row.style.transition = 'opacity .25s, transform .25s';
                row.style.opacity    = '0';
                row.style.transform  = 'translateX(20px)';
                setTimeout(() => {
                    row.remove();
                    const b = document.getElementById('count-badge');
                    b.textContent = Math.max(0, parseInt(b.textContent) - 1);
                }, 260);
            }
            closeDel();
            showToast('ok', 'Instansi berhasil dihapus');
        } else {
            showToast('err', data.message || 'Gagal menghapus');
            btn.disabled = false;
        }
    })
    .catch(() => { showToast('err', 'Kesalahan jaringan'); btn.disabled = false; });
}

/* ── VIEW ── */
function viewInstansi(id) { window.location.href = `/admin/instansi/${id}`; }

/* ── TOAST ── */
function showToast(type, msg) {
    const old = document.querySelector('.toast');
    if (old) old.remove();
    const icon = type === 'ok'
        ? '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>'
        : '<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>';
    const t = document.createElement('div');
    t.className = `toast ${type}`;
    t.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">${icon}</svg><span>${msg}</span>`;
    document.body.appendChild(t);
    setTimeout(() => { t.style.transition = 'opacity .3s'; t.style.opacity = '0'; setTimeout(() => t.remove(), 300); }, 3500);
}

/* ── ESC KEY ── */
document.addEventListener('keydown', e => { if (e.key === 'Escape') { closeForm(); closeDel(); } });
</script>
<?php $__env->stopPush(); ?>

 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH C:\laragon\www\absen_gw\resources\views/admin/instansi/index.blade.php ENDPATH**/ ?>