<?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' => 'Detail 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>
: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;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Plus Jakarta Sans',sans-serif; background:var(--bg); color:var(--txt); }

/* ── WRAPPER ── */
.pg { max-width:1000px; margin:0 auto; padding:28px 28px 52px; }

/* ── PAGE HEADER ── */
.pg-header {
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:16px; margin-bottom:26px;
}
.pg-header-l { display:flex; align-items:center; gap:14px; }
.pg-hico {
    width:50px; height:50px; 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); flex-shrink:0;
}
.pg-hico svg { width:24px;height:24px;stroke:white; }
.pg-title  { font-size:1.45rem;font-weight:900;color:var(--txt);letter-spacing:-.03em;margin-bottom:2px; }
.pg-sub    { font-size:.85rem;font-weight:500;color:var(--muted); }

/* ── 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; }
.btn-primary:hover { background:var(--pd); transform:translateY(-1px); }

.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; text-decoration:none; transition:all .2s;
}
.btn-ghost:hover { background:var(--bg2); color:var(--txt); border-color:var(--muted2); }

.btn-danger {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 16px; border-radius:var(--rs);
    background:var(--errl); color:var(--err); border:1.5px solid #fecaca;
    font-size:.875rem; font-weight:700; font-family:inherit;
    cursor:pointer; text-decoration:none; transition:all .2s;
}
.btn-danger svg { width:15px;height:15px;stroke:var(--err); }
.btn-danger:hover { background:#fee2e2; }

/* ── KPI ROW ── */
.kpi-row {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:14px; margin-bottom:24px;
}
.kpi {
    background:var(--white); border:1px solid var(--border);
    border-radius:var(--r); padding:18px 20px;
    box-shadow:var(--sh); position:relative; overflow:hidden;
    transition:transform .2s, box-shadow .2s;
}
.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-lbl { font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);margin-bottom:8px; }
.kpi-val { font-size:2rem;font-weight:900;color:var(--txt);letter-spacing:-.04em;line-height:1; }
.kpi-sub { font-size:.78rem;color:var(--muted);font-weight:500;margin-top:3px; }

/* ── MAIN GRID ── */
.main-grid {
    display:grid; grid-template-columns:1fr 320px;
    gap:20px; align-items:start;
}

/* ── CARD ── */
.card {
    background:var(--white); border:1px solid var(--border);
    border-radius:var(--rl); box-shadow:var(--sh); overflow:hidden;
}
.card-head {
    padding:16px 22px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:10px;
}
.card-head-ico {
    width:34px; height:34px; border-radius:10px;
    background:var(--pl); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.card-head-ico svg { width:17px;height:17px;stroke:var(--p); }
.card-title { font-size:.9rem;font-weight:800;color:var(--txt); }
.card-body { padding:22px; }

/* ── INFO LIST ── */
.info-list { display:flex; flex-direction:column; gap:14px; }
.info-item { display:flex; align-items:flex-start; gap:14px; }
.info-ico {
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    background:var(--bg); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
}
.info-ico svg { width:16px;height:16px;stroke:var(--muted); }
.info-lbl { font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted2);margin-bottom:3px; }
.info-val { font-size:.9rem;font-weight:600;color:var(--txt); }
.info-val.mono {
    font-family:'JetBrains Mono',monospace; font-size:.82rem;
    background:var(--bg2); padding:3px 9px; border-radius:6px;
    border:1px solid var(--border); display:inline-block;
}

/* ── DIVIDER ── */
.divider { height:1px; background:var(--border); margin:18px 0; }

/* ── AVATAR HEADER ── */
.inst-hero {
    background:linear-gradient(135deg,#2e1065,#4c1d95 50%,#5b21b6);
    border-radius:var(--rl) var(--rl) 0 0;
    padding:28px 28px 24px; position:relative; overflow:hidden;
}
.inst-hero-orb {
    position:absolute; border-radius:50%; pointer-events:none; filter:blur(60px);
}
.inst-hero-orb-1 { width:220px;height:220px;top:-80px;right:-50px;background:rgba(139,92,246,.25); }
.inst-hero-orb-2 { width:120px;height:120px;bottom:-40px;right:160px;background:rgba(196,181,253,.15); }
.inst-hero-content { position:relative;z-index:1;display:flex;align-items:center;gap:18px; }
.inst-av {
    width:64px; height:64px; border-radius:18px; flex-shrink:0;
    background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.25);
    display:flex; align-items:center; justify-content:center;
    font-size:1.6rem; font-weight:900; color:white;
}
.inst-hero-name { font-size:1.25rem;font-weight:900;color:white;letter-spacing:-.02em;margin-bottom:5px; }
.inst-hero-id { font-size:.78rem;font-weight:600;color:rgba(255,255,255,.55); font-family:'JetBrains Mono',monospace; }
.inst-hero-badges { display:flex;gap:8px;flex-wrap:wrap;margin-top:10px; }
.inst-badge {
    display:inline-flex;align-items:center;gap:5px;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
    border-radius:100px; padding:4px 11px;
    font-size:.72rem; font-weight:700; color:rgba(255,255,255,.8);
}
.inst-badge svg { width:11px;height:11px;stroke:rgba(255,255,255,.7); }
.inst-badge.green { background:rgba(52,211,153,.18);border-color:rgba(52,211,153,.3);color:#6ee7b7; }
.inst-badge.green svg { stroke:#6ee7b7; }

/* ── MAP CARD ── */
.map-wrap {
    border-radius:12px; overflow:hidden;
    border:1.5px solid var(--border); height:220px;
    background:var(--bg2);
}
.map-wrap iframe { width:100%;height:100%;border:none;display:block; }

/* ── RADIUS BADGE ── */
.rad-badge {
    display:inline-flex;align-items:center;gap:6px;
    background:var(--pl); color:var(--p);
    border:1px solid rgba(79,70,229,.2);
    border-radius:8px; padding:5px 12px;
    font-size:.82rem; font-weight:700;
}
.rad-badge svg { width:13px;height:13px;stroke:var(--p); }

/* ── KARYAWAN TABLE ── */
.tbl-wrap { overflow-x:auto; }
.tbl { width:100%;border-collapse:collapse;min-width:400px; }
.tbl thead tr { background:#fafbff; }
.tbl thead th {
    padding:10px 18px; text-align:left;
    font-size:.68rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.08em;color:var(--muted2);
    border-bottom:1px solid var(--border);
}
.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:12px 18px;font-size:.875rem;color:var(--txt);vertical-align:middle; }

.kar-cell { display:flex;align-items:center;gap:10px; }
.kar-av {
    width:34px;height:34px;border-radius:9px;flex-shrink:0;
    background:linear-gradient(135deg,var(--ok),#34d399);
    display:flex;align-items:center;justify-content:center;
    font-size:.75rem;font-weight:800;color:white;
}
.kar-name { font-size:.875rem;font-weight:700;color:var(--txt); }
.kar-pos  { font-size:.72rem;color:var(--muted2);font-weight:500;margin-top:1px; }

.badge-ok {
    display:inline-block;background:var(--okl);color:var(--ok);
    border:1px solid #a7f3d0;border-radius:100px;
    padding:2px 10px;font-size:.72rem;font-weight:700;
}

/* ── EMPTY ── */
.empty-box {
    padding:36px 20px;text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:10px;
}
.empty-box svg { stroke:var(--border); }
.empty-box p { font-size:.875rem;color:var(--muted2);font-weight:500; }

/* ── TOAST ── */
.toast {
    position:fixed;bottom:24px;right:24px;z-index:9999;
    display:flex;align-items:center;gap:10px;
    padding:13px 18px;border-radius:12px;
    font-size:.875rem;font-weight:600;
    box-shadow:0 8px 28px rgba(0,0,0,.15);
    animation:slideUp .3s ease;
}
@keyframes slideUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.toast.ok { background:var(--okl);color:var(--ok);border:1px solid #a7f3d0; }
.toast.ok svg { stroke:var(--ok); }
.toast.err { background:var(--errl);color:var(--err);border:1px solid #fecaca; }
.toast.err svg { stroke:var(--err); }
.toast svg { width:16px;height:16px;flex-shrink:0; }

/* ── DELETE MODAL ── */
.modal-overlay {
    display:none;position:fixed;inset:0;z-index:1000;
    background:rgba(15,23,42,.45);backdrop-filter:blur(4px);
    align-items:center;justify-content:center;padding:20px;
}
.modal-box {
    background:var(--white);border-radius:var(--rl);
    box-shadow:var(--sh2);padding:28px;max-width:400px;width:100%;
    animation:popIn .2s ease;
}
@keyframes popIn { from{opacity:0;transform:scale(.95) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-ico {
    width:52px;height:52px;border-radius:16px;background:var(--errl);
    display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.modal-ico svg { width:26px;height:26px;stroke:var(--err); }
.modal-title { font-size:1.05rem;font-weight:800;color:var(--txt);margin-bottom:6px; }
.modal-desc { font-size:.875rem;color:var(--muted);font-weight:500;line-height:1.55;margin-bottom:22px; }
.modal-desc strong { color:var(--txt); }
.modal-actions { display:flex;gap:10px;justify-content:flex-end; }

@media(max-width:720px) {
    .main-grid { grid-template-columns:1fr; }
    .kpi-row   { grid-template-columns:1fr 1fr; }
}
@media(max-width:480px) {
    .pg { padding:18px 16px 40px; }
    .kpi-row { grid-template-columns:1fr; }
}
</style>
<?php $__env->stopPush(); ?>

<div class="pg">

    
    <div class="pg-header">
        <div class="pg-header-l">
            <div class="pg-hico">
                <svg viewBox="0 0 24 24" fill="none" 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="pg-title"><?php echo e($instansi->nama_instansi); ?></div>
                <div class="pg-sub">Detail & Informasi Instansi</div>
            </div>
        </div>
        <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
            <a href="<?php echo e(route('admin.instansi.index')); ?>" class="btn-ghost">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
                Kembali
            </a>
            <button type="button" onclick="openDelete()" class="btn-danger">
                <svg viewBox="0 0 24 24" fill="none" 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 6V4h6v2"/></svg>
                Hapus
            </button>
        </div>
    </div>

    
    <?php if(session('success')): ?>
    <div style="display:flex;align-items:center;gap:10px;padding:13px 17px;background:var(--okl);color:var(--ok);border:1px solid #a7f3d0;border-radius:var(--r);margin-bottom:22px;font-size:.875rem;font-weight:600;">
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;stroke:var(--ok);flex-shrink:0;"><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">
        <div class="kpi kp">
            <div class="kpi-lbl">Total Karyawan</div>
            <div class="kpi-val"><?php echo e($instansi->karyawans_count ?? $instansi->karyawans()->count()); ?></div>
            <div class="kpi-sub">Terdaftar di instansi ini</div>
        </div>
        <div class="kpi ks">
            <div class="kpi-lbl">Radius Absen</div>
            <div class="kpi-val"><?php echo e($instansi->radius_meter ?? 100); ?> <span>m</span></div>
            <div class="kpi-sub">Batas jarak absensi</div>
        </div>
        <div class="kpi kw">
            <div class="kpi-lbl">Bergabung Sejak</div>
            <div class="kpi-val" style="font-size:1.2rem;"><?php echo e($instansi->created_at->format('M Y')); ?></div>
            <div class="kpi-sub"><?php echo e($instansi->created_at->diffForHumans()); ?></div>
        </div>
    </div>

    
    <div class="main-grid">

        
        <div style="display:flex;flex-direction:column;gap:20px;">

            
            <div class="card">
                
                <div class="inst-hero">
                    <div class="inst-hero-orb inst-hero-orb-1"></div>
                    <div class="inst-hero-orb inst-hero-orb-2"></div>
                    <div class="inst-hero-content">
                        <div class="inst-av"><?php echo e(strtoupper(substr($instansi->nama_instansi, 0, 1))); ?></div>
                        <div>
                            <div class="inst-hero-name"><?php echo e($instansi->nama_instansi); ?></div>
                            <div class="inst-hero-id">ID #<?php echo e($instansi->id); ?></div>
                            <div class="inst-hero-badges">
                                <span class="inst-badge green">
                                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
                                    Aktif
                                </span>
                                <span class="inst-badge">
                                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                                    <?php echo e($instansi->karyawans_count ?? $instansi->karyawans()->count()); ?> Karyawan
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="info-list">
                        <div class="info-item">
                            <div class="info-ico">
                                <svg viewBox="0 0 24 24" fill="none" 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"/></svg>
                            </div>
                            <div>
                                <div class="info-lbl">Nama Instansi</div>
                                <div class="info-val"><?php echo e($instansi->nama_instansi); ?></div>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-ico">
                                <svg viewBox="0 0 24 24" fill="none" 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="info-lbl">Alamat</div>
                                <div class="info-val"><?php echo e($instansi->alamat ?? '-'); ?></div>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-ico">
                                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                            </div>
                            <div>
                                <div class="info-lbl">Tanggal Daftar</div>
                                <div class="info-val"><?php echo e($instansi->created_at->isoFormat('D MMMM YYYY')); ?></div>
                            </div>
                        </div>
                    </div>

                    <div class="divider"></div>

                    
                    <div style="margin-bottom:12px;">
                        <div style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted2);margin-bottom:10px;">Koordinat GPS</div>
                        <div style="display:flex;gap:10px;flex-wrap:wrap;">
                            <div>
                                <div style="font-size:.68rem;color:var(--muted2);font-weight:600;margin-bottom:3px;">Latitude</div>
                                <span class="info-val mono"><?php echo e($instansi->latitude ?? '-'); ?></span>
                            </div>
                            <div>
                                <div style="font-size:.68rem;color:var(--muted2);font-weight:600;margin-bottom:3px;">Longitude</div>
                                <span class="info-val mono"><?php echo e($instansi->longitude ?? '-'); ?></span>
                            </div>
                        </div>
                    </div>

                    <div class="rad-badge">
                        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
                        Radius Absen: <?php echo e($instansi->radius_meter ?? 100); ?> meter
                    </div>
                </div>
            </div>

            
            <div class="card">
                <div class="card-head">
                    <div class="card-head-ico">
                        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                    </div>
                    <span class="card-title">Daftar Karyawan</span>
                    <span style="margin-left:auto;background:var(--pl);color:var(--p);font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:100px;">
                        <?php echo e($instansi->karyawans_count ?? $instansi->karyawans()->count()); ?> orang
                    </span>
                </div>
                <div class="tbl-wrap">
                    <table class="tbl">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Nama</th>
                                <th>Jabatan</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $__empty_1 = true; $__currentLoopData = $instansi->karyawans ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $kar): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <tr>
                                <td style="color:var(--muted2);font-size:.8rem;"><?php echo e($i + 1); ?></td>
                                <td>
                                    <div class="kar-cell">
                                        <div class="kar-av"><?php echo e(strtoupper(substr($kar->nama, 0, 1))); ?></div>
                                        <div>
                                            <div class="kar-name"><?php echo e($kar->nama); ?></div>
                                            <div class="kar-pos"><?php echo e($kar->user->email ?? '-'); ?></div>
                                        </div>
                                    </div>
                                </td>
                                <td style="color:var(--muted);font-size:.85rem;"><?php echo e($kar->jabatan->nama_jabatan ?? '-'); ?></td>
                                <td><span class="badge-ok">Aktif</span></td>
                            </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <tr>
                                <td colspan="4">
                                    <div class="empty-box">
                                        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                                        <p>Belum ada karyawan di instansi ini</p>
                                    </div>
                                </td>
                            </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>

        
        <div style="display:flex;flex-direction:column;gap:20px;">

            
            <?php if($instansi->latitude && $instansi->longitude): ?>
            <div class="card">
                <div class="card-head">
                    <div class="card-head-ico">
                        <svg viewBox="0 0 24 24" fill="none" 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>
                    <span class="card-title">Lokasi Kantor</span>
                </div>
                <div style="padding:16px;">
                    <div class="map-wrap">
                        <iframe
                            src="https://maps.google.com/maps?q=<?php echo e($instansi->latitude); ?>,<?php echo e($instansi->longitude); ?>&z=16&output=embed"
                            allowfullscreen loading="lazy">
                        </iframe>
                    </div>
                    <div style="margin-top:12px;display:flex;justify-content:center;">
                        <a href="https://maps.google.com/?q=<?php echo e($instansi->latitude); ?>,<?php echo e($instansi->longitude); ?>"
                           target="_blank"
                           style="display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--p);text-decoration:none;">
                            <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px;stroke:var(--p);"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
                            Buka di Google Maps
                        </a>
                    </div>
                </div>
            </div>
            <?php endif; ?>

            
            <div class="card">
                <div class="card-head">
                    <div class="card-head-ico">
                        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    </div>
                    <span class="card-title">Akun Login</span>
                </div>
                <div class="card-body">
                    <div class="info-list">
                        <div class="info-item">
                            <div class="info-ico">
                                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                            </div>
                            <div>
                                <div class="info-lbl">Email</div>
                                <div class="info-val"><?php echo e($instansi->user->email ?? '-'); ?></div>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-ico">
                                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" 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>
                            </div>
                            <div>
                                <div class="info-lbl">Password</div>
                                <div class="info-val" style="color:var(--muted2);font-size:.82rem;">••••••••••</div>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-ico">
                                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                            </div>
                            <div>
                                <div class="info-lbl">Role</div>
                                <div class="info-val">
                                    <span style="background:var(--pl);color:var(--p);font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:100px;">instansi</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


<div class="modal-overlay" id="modal-del" style="display:none;">
    <div class="modal-box">
        <div class="modal-ico">
            <svg viewBox="0 0 24 24" fill="none" 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 6V4h6v2"/></svg>
        </div>
        <div class="modal-title">Hapus Instansi?</div>
        <div class="modal-desc">
            Yakin ingin menghapus <strong><?php echo e($instansi->nama_instansi); ?></strong>? Semua data karyawan dan absensi terkait juga akan terhapus. Tindakan ini <strong>tidak dapat dibatalkan</strong>.
        </div>
        <div class="modal-actions">
            <button type="button" onclick="closeDel()" class="btn-ghost">Batal</button>
            <form method="POST" action="<?php echo e(route('admin.instansi.destroy', $instansi)); ?>" id="form-delete">
                <?php echo csrf_field(); ?>
                <?php echo method_field('DELETE'); ?>
                <button type="submit" style="display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--rs);background:var(--err);color:white;border:none;font-size:.875rem;font-weight:700;font-family:inherit;cursor:pointer;">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;stroke:white;"><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>
            </form>
        </div>
    </div>
</div>

<?php $__env->startPush('scripts'); ?>
<script>
function openDelete() {
    document.getElementById('modal-del').style.display = 'flex';
}
function closeDel() {
    document.getElementById('modal-del').style.display = 'none';
}
document.addEventListener('keydown', e => {
    if (e.key === 'Escape') 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/show.blade.php ENDPATH**/ ?>