<?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' => 'Pengaturan']); ?>
<?php $__env->startPush('styles'); ?>
<style>
.pg-wrap{max-width:780px;margin:0 auto;}

/* header */
.pg-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:24px;flex-wrap:wrap;}
.pg-title{font-size:1.35rem;font-weight:900;color:var(--text);letter-spacing:-.03em;}
.pg-sub{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:3px;}

/* section card */
.sec-card{background:var(--white);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--sh);margin-bottom:20px;}
.sec-hd{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;}
.sec-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sec-ico svg{width:19px;height:19px;}
.sec-ico.si-indigo{background:linear-gradient(135deg,#4f46e5,#7c3aed);box-shadow:0 4px 12px rgba(79,70,229,.3);}
.sec-ico.si-sky{background:linear-gradient(135deg,#0284c7,#38bdf8);box-shadow:0 4px 12px rgba(2,132,199,.25);}
.sec-ico.si-amber{background:linear-gradient(135deg,#d97706,#fbbf24);box-shadow:0 4px 12px rgba(217,119,6,.25);}
.sec-ico svg{stroke:white;}
.sec-title{font-size:.95rem;font-weight:800;color:var(--text);}
.sec-sub{font-size:12px;color:var(--muted);font-weight:500;margin-top:2px;}
.sec-body{padding:24px;}
.sec-ft{padding:14px 24px;border-top:1px solid var(--border);background:var(--bg2,#f8fafc);display:flex;align-items:center;justify-content:space-between;gap:12px;}

/* form */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.frow-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.fg{display:flex;flex-direction:column;margin-bottom:16px;}
.fg:last-child{margin-bottom:0;}
.fg label{font-size:11px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;}
.fg input,.fg select,.fg textarea{
    padding:11px 14px;border:1.5px solid var(--border);border-radius:11px;
    font-family:'Plus Jakarta Sans',sans-serif;font-size:13.5px;font-weight:600;
    color:var(--text);background:var(--bg,#f0f4ff);outline:none;transition:all .15s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{
    border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1);background:white;
}
.fg textarea{resize:vertical;min-height:80px;}
.ferr{color:#dc2626;font-size:11.5px;font-weight:600;margin-top:5px;}
.hint{font-size:11px;color:var(--muted2);font-weight:500;margin-top:5px;}

/* map preview */
.map-preview{
    border-radius:14px;overflow:hidden;border:1.5px solid var(--border);
    height:220px;margin-bottom:16px;position:relative;background:#f0f4ff;
}
.map-preview iframe{width:100%;height:100%;border:none;display:block;}
.map-placeholder{
    width:100%;height:100%;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:10px;
    color:var(--muted2);font-size:13px;font-weight:600;
}
.map-placeholder svg{stroke:#cbd5e1;}
.map-refresh-btn{
    position:absolute;bottom:10px;right:10px;
    background:white;border:1.5px solid var(--border);
    border-radius:8px;padding:5px 12px;font-size:12px;font-weight:700;
    color:var(--primary);cursor:pointer;font-family:inherit;
    display:flex;align-items:center;gap:5px;transition:all .15s;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.map-refresh-btn:hover{background:var(--primary-l);}
.map-refresh-btn svg{width:12px;height:12px;stroke:var(--primary);}

/* radius preview */
.radius-row{display:flex;align-items:center;gap:12px;background:#f0f4ff;border-radius:10px;padding:12px 16px;margin-bottom:16px;}
.radius-ico{width:36px;height:36px;border-radius:10px;background:var(--primary-l);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.radius-ico svg{width:16px;height:16px;stroke:var(--primary);}
.radius-val{font-size:1.3rem;font-weight:900;color:var(--primary);letter-spacing:-.03em;}
.radius-lbl{font-size:11.5px;color:var(--muted);font-weight:600;}

/* saved msg */
.saved-msg{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--success,#059669);}
.saved-msg svg{width:14px;height:14px;stroke:var(--success,#059669);}

/* btn */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:100px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;border:none;text-decoration:none;transition:all .18s;white-space:nowrap;}
.btn svg{width:13px;height:13px;stroke:currentColor;}
.btn-primary{background:linear-gradient(135deg,var(--primary),#7c3aed);color:white;box-shadow:0 4px 14px rgba(79,70,229,.25);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(79,70,229,.35);}
.btn-ghost{background:white;color:var(--muted);border:1.5px solid var(--border);}
.btn-ghost:hover{background:var(--primary-l);color:var(--primary);border-color:rgba(79,70,229,.3);}
.btn-sm{padding:7px 16px;font-size:12.5px;}

/* get loc btn */
.get-loc-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:#e0f2fe;color:#0284c7;border:1.5px solid #bae6fd;border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;margin-bottom:12px;}
.get-loc-btn:hover{background:#bae6fd;}
.get-loc-btn svg{width:13px;height:13px;stroke:#0284c7;}

/* pw toggle */
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:42px;}
.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted2);padding:3px;}
.pw-eye svg{width:15px;height:15px;stroke:currentColor;display:block;}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fu1{animation:fadeUp .35s ease both;}
.fu2{animation:fadeUp .35s .07s ease both;}
.fu3{animation:fadeUp .35s .13s ease both;}
.fu4{animation:fadeUp .35s .19s ease both;}

@media(max-width:640px){.frow,.frow-3{grid-template-columns:1fr;}.sec-body{padding:18px;}.sec-ft{flex-direction:column;align-items:flex-end;}}
</style>
<?php $__env->stopPush(); ?>

<?php $success = session('success'); ?>

<div class="pg-wrap">

    
    <div class="pg-hd fu1">
        <div>
            <div class="pg-title">Pengaturan</div>
            <div class="pg-sub">Kelola data instansi, lokasi absen, dan akun kamu</div>
        </div>
        <a href="<?php echo e(route('dashboard')); ?>" class="btn btn-ghost btn-sm">
            <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>
            Dashboard
        </a>
    </div>

    <?php if($success): ?>
    <div style="display:flex;align-items:center;gap:10px;padding:13px 18px;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:14px;margin-bottom:20px;font-size:13px;font-weight:700;color:#059669;" class="fu1">
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;stroke:#059669;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($success); ?>

    </div>
    <?php endif; ?>

    
    <div class="sec-card fu2">
        <div class="sec-hd">
            <div class="sec-ico si-indigo">
                <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="sec-title">Data Instansi</div>
                <div class="sec-sub">Nama, alamat, dan lokasi kantor untuk validasi absen</div>
            </div>
        </div>
        <div class="sec-body">
            <form method="POST" action="<?php echo e(route('instansi.pengaturan.instansi')); ?>" id="form-instansi">
                <?php echo csrf_field(); ?>
                <?php echo method_field('PUT'); ?>

                <div class="fg">
                    <label>Nama Instansi</label>
                    <input type="text" name="nama_instansi"
                           value="<?php echo e(old('nama_instansi', $instansi?->nama_instansi)); ?>"
                           placeholder="Contoh: PT. Maju Bersama" required>
                    <?php $__errorArgs = ['nama_instansi'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><span class="ferr"><?php echo e($message); ?></span><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                <div class="fg">
                    <label>Alamat</label>
                    <textarea name="alamat" placeholder="Jl. Contoh No. 123, Kota..."><?php echo e(old('alamat', $instansi?->alamat)); ?></textarea>
                    <?php $__errorArgs = ['alamat'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><span class="ferr"><?php echo e($message); ?></span><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                
                <div style="margin-bottom:6px;">
                    <label style="font-size:11px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:8px;">Lokasi Kantor (GPS)</label>
                    <button type="button" class="get-loc-btn" onclick="getMyLocation()">
                        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>
                        Gunakan Lokasi Saya Sekarang
                    </button>
                    <div class="map-preview" id="map-preview">
                        <?php if($instansi?->latitude && $instansi?->longitude): ?>
                            <iframe id="map-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>
                        <?php else: ?>
                            <div class="map-placeholder" id="map-placeholder">
                                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke-width="1.3" 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>
                                Masukkan koordinat untuk melihat peta
                            </div>
                        <?php endif; ?>
                        <button type="button" class="map-refresh-btn" onclick="refreshMap()">
                            <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
                            Update Peta
                        </button>
                    </div>
                </div>

                <div class="frow">
                    <div class="fg">
                        <label>Latitude</label>
                        <input type="number" name="latitude" id="inp-lat" step="any"
                               value="<?php echo e(old('latitude', $instansi?->latitude)); ?>"
                               placeholder="-6.200000" required>
                        <?php $__errorArgs = ['latitude'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><span class="ferr"><?php echo e($message); ?></span><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>
                    <div class="fg">
                        <label>Longitude</label>
                        <input type="number" name="longitude" id="inp-lng" step="any"
                               value="<?php echo e(old('longitude', $instansi?->longitude)); ?>"
                               placeholder="106.816666" required>
                        <?php $__errorArgs = ['longitude'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><span class="ferr"><?php echo e($message); ?></span><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>
                </div>

                <div class="fg">
                    <label>Radius Absen (Meter)</label>
                    <div class="radius-row">
                        <div class="radius-ico">
                            <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>
                        </div>
                        <div>
                            <div class="radius-val" id="radius-display"><?php echo e($instansi?->radius_meter ?? 100); ?> m</div>
                            <div class="radius-lbl">Karyawan harus absen dalam radius ini</div>
                        </div>
                    </div>
                    <input type="range" name="radius_meter" id="inp-radius" min="10" max="5000" step="10"
                           value="<?php echo e(old('radius_meter', $instansi?->radius_meter ?? 100)); ?>"
                           oninput="document.getElementById('radius-display').textContent=this.value+' m'"
                           style="width:100%;accent-color:var(--primary);cursor:pointer;">
                    <div style="display:flex;justify-content:space-between;margin-top:4px;">
                        <span class="hint">10 m (ketat)</span>
                        <span class="hint">5.000 m (longgar)</span>
                    </div>
                    <?php $__errorArgs = ['radius_meter'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><span class="ferr"><?php echo e($message); ?></span><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>
            </form>
        </div>
        <div class="sec-ft">
            <div>
                <?php if($success && str_contains($success, 'instansi')): ?>
                <span class="saved-msg">
                    <svg viewBox="0 0 24 24" fill="none" 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>
                    Tersimpan
                </span>
                <?php endif; ?>
            </div>
            <button type="submit" form="form-instansi" class="btn btn-primary btn-sm">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                Simpan Data Instansi
            </button>
        </div>
    </div>

    
    <div class="sec-card fu3">
        <div class="sec-hd">
            <div class="sec-ico si-sky">
                <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>
            <div>
                <div class="sec-title">Akun Login</div>
                <div class="sec-sub">Perbarui nama, email, dan password akun instansi</div>
            </div>
        </div>
        <div class="sec-body">
            <form method="POST" action="<?php echo e(route('instansi.pengaturan.akun')); ?>" id="form-akun">
                <?php echo csrf_field(); ?>
                <?php echo method_field('PUT'); ?>

                <div class="frow">
                    <div class="fg">
                        <label>Nama</label>
                        <input type="text" name="name"
                               value="<?php echo e(old('name', $user->name)); ?>" required>
                        <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><span class="ferr"><?php echo e($message); ?></span><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>
                    <div class="fg">
                        <label>Email</label>
                        <input type="email" name="email"
                               value="<?php echo e(old('email', $user->email)); ?>" required>
                        <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><span class="ferr"><?php echo e($message); ?></span><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>
                </div>

                <div style="height:1px;background:var(--border);margin:4px 0 16px;"></div>

                <div style="font-size:12px;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;">Ganti Password <span style="font-weight:500;text-transform:none;font-size:11px;">(kosongkan jika tidak ingin ganti)</span></div>

                <div class="frow">
                    <div class="fg">
                        <label>Password Baru</label>
                        <div class="pw-wrap">
                            <input type="password" name="password" id="pw1" placeholder="Min. 8 karakter">
                            <button type="button" class="pw-eye" onclick="togglePw('pw1',this)">
                                <svg viewBox="0 0 24 24" fill="none" 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>
                        <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><span class="ferr"><?php echo e($message); ?></span><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>
                    <div class="fg">
                        <label>Konfirmasi Password</label>
                        <div class="pw-wrap">
                            <input type="password" name="password_confirmation" id="pw2" placeholder="Ulangi password baru">
                            <button type="button" class="pw-eye" onclick="togglePw('pw2',this)">
                                <svg viewBox="0 0 24 24" fill="none" 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>
                    </div>
                </div>
            </form>
        </div>
        <div class="sec-ft">
            <div>
                <?php if($success && str_contains($success, 'akun')): ?>
                <span class="saved-msg">
                    <svg viewBox="0 0 24 24" fill="none" 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>
                    Tersimpan
                </span>
                <?php endif; ?>
            </div>
            <button type="submit" form="form-akun" class="btn btn-primary btn-sm">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                Simpan Akun
            </button>
        </div>
    </div>

    
    <div class="sec-card fu4">
        <div class="sec-hd">
            <div class="sec-ico si-amber">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>
            </div>
            <div>
                <div class="sec-title">Informasi Sistem</div>
                <div class="sec-sub">Ringkasan konfigurasi instansi kamu saat ini</div>
            </div>
        </div>
        <div class="sec-body">
            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;">
                <?php
                    $totalKar  = \App\Models\Karyawan::where('instansi_id', $instansi?->id)->count();
                    $totalJab  = \App\Models\Jabatan::where('instansi_id', $instansi?->id)->count();
                    $totalJam  = \App\Models\JamKerja::where('instansi_id', $instansi?->id)->count();
                ?>
                <div style="background:var(--primary-l);border:1px solid rgba(79,70,229,.15);border-radius:14px;padding:16px 18px;">
                    <div style="font-size:1.8rem;font-weight:900;color:var(--primary);letter-spacing:-.04em;line-height:1;"><?php echo e($totalKar); ?></div>
                    <div style="font-size:12px;font-weight:600;color:var(--muted);margin-top:4px;">Karyawan Terdaftar</div>
                </div>
                <div style="background:#fef3c7;border:1px solid #fde68a;border-radius:14px;padding:16px 18px;">
                    <div style="font-size:1.8rem;font-weight:900;color:#d97706;letter-spacing:-.04em;line-height:1;"><?php echo e($totalJab); ?></div>
                    <div style="font-size:12px;font-weight:600;color:var(--muted);margin-top:4px;">Jabatan Dibuat</div>
                </div>
                <div style="background:#d1fae5;border:1px solid #a7f3d0;border-radius:14px;padding:16px 18px;">
                    <div style="font-size:1.8rem;font-weight:900;color:#059669;letter-spacing:-.04em;line-height:1;"><?php echo e($totalJam); ?></div>
                    <div style="font-size:12px;font-weight:600;color:var(--muted);margin-top:4px;">Jam Kerja Dibuat</div>
                </div>
            </div>

            <div style="margin-top:16px;background:#f8fafc;border:1px solid var(--border);border-radius:12px;padding:14px 18px;">
                <div style="font-size:11px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;">Detail Instansi</div>
                <div style="display:grid;gap:8px;">
                    <div style="display:flex;gap:8px;font-size:13px;">
                        <span style="color:var(--muted2);font-weight:600;min-width:140px;">Nama Instansi</span>
                        <span style="font-weight:700;color:var(--text);"><?php echo e($instansi?->nama_instansi ?? '—'); ?></span>
                    </div>
                    <div style="display:flex;gap:8px;font-size:13px;">
                        <span style="color:var(--muted2);font-weight:600;min-width:140px;">Koordinat GPS</span>
                        <span style="font-weight:700;color:var(--text);">
                            <?php if($instansi?->latitude && $instansi?->longitude): ?>
                                <?php echo e($instansi->latitude); ?>, <?php echo e($instansi->longitude); ?>

                                <a href="https://maps.google.com/?q=<?php echo e($instansi->latitude); ?>,<?php echo e($instansi->longitude); ?>" target="_blank"
                                   style="color:var(--sky,#0284c7);font-size:11.5px;margin-left:6px;">Lihat di Maps →</a>
                            <?php else: ?>
                                <span style="color:var(--muted2);">Belum diatur</span>
                            <?php endif; ?>
                        </span>
                    </div>
                    <div style="display:flex;gap:8px;font-size:13px;">
                        <span style="color:var(--muted2);font-weight:600;min-width:140px;">Radius Absen</span>
                        <span style="font-weight:700;color:var(--text);"><?php echo e($instansi?->radius_meter ? $instansi->radius_meter . ' meter' : '—'); ?></span>
                    </div>
                    <div style="display:flex;gap:8px;font-size:13px;">
                        <span style="color:var(--muted2);font-weight:600;min-width:140px;">Akun Email</span>
                        <span style="font-weight:700;color:var(--text);"><?php echo e($user->email); ?></span>
                    </div>
                    <div style="display:flex;gap:8px;font-size:13px;">
                        <span style="color:var(--muted2);font-weight:600;min-width:140px;">Bergabung</span>
                        <span style="font-weight:700;color:var(--text);"><?php echo e($user->created_at->isoFormat('D MMMM YYYY')); ?></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<?php $__env->startPush('scripts'); ?>
<script>
// Toggle password visibility
function togglePw(id, btn) {
    const inp = document.getElementById(id);
    const isText = inp.type === 'text';
    inp.type = isText ? 'password' : 'text';
    btn.querySelector('svg').innerHTML = isText
        ? '<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"/>'
        : '<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.94M9.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.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/>';
}

// Refresh peta berdasarkan input lat/lng
function refreshMap() {
    const lat = document.getElementById('inp-lat').value;
    const lng = document.getElementById('inp-lng').value;
    if (!lat || !lng) { alert('Masukkan koordinat latitude dan longitude terlebih dahulu.'); return; }
    const preview = document.getElementById('map-preview');
    const placeholder = document.getElementById('map-placeholder');
    if (placeholder) placeholder.remove();
    let iframe = document.getElementById('map-iframe');
    if (!iframe) {
        iframe = document.createElement('iframe');
        iframe.id = 'map-iframe';
        iframe.allowFullscreen = true;
        iframe.loading = 'lazy';
        iframe.style.cssText = 'width:100%;height:100%;border:none;display:block;';
        preview.insertBefore(iframe, preview.querySelector('.map-refresh-btn'));
    }
    iframe.src = `https://maps.google.com/maps?q=${lat},${lng}&z=16&output=embed`;
}

// Ambil lokasi GPS otomatis
function getMyLocation() {
    if (!navigator.geolocation) { alert('Browser tidak mendukung geolocation.'); return; }
    navigator.geolocation.getCurrentPosition(
        pos => {
            const lat = pos.coords.latitude.toFixed(7);
            const lng = pos.coords.longitude.toFixed(7);
            document.getElementById('inp-lat').value = lat;
            document.getElementById('inp-lng').value = lng;
            refreshMap();
        },
        err => alert('Gagal mendapatkan lokasi: ' + err.message),
        { enableHighAccuracy: true }
    );
}
</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/instansi/pengaturan/index.blade.php ENDPATH**/ ?>