<x-app-layout title="Pengaturan Sistem">
@push('styles')
<style>
.pg-wrap{max-width:860px;margin:0 auto;}

/* header */
.pg-hd{display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.pg-hico{width:50px;height:50px;border-radius:14px;background:linear-gradient(135deg,#475569,#1e293b);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(71,85,105,.25);flex-shrink:0;}
.pg-hico svg{width:24px;height:24px;stroke:white;}
.pg-title{font-size:1.35rem;font-weight:900;color:var(--text);letter-spacing:-.03em;margin-bottom:2px;}
.pg-sub{font-size:12.5px;font-weight:500;color:var(--muted);}

/* alert */
.flash{display:flex;align-items:center;gap:10px;padding:13px 18px;border-radius:14px;margin-bottom:22px;font-size:13px;font-weight:700;}
.flash svg{width:15px;height:15px;flex-shrink:0;}
.flash-ok{background:var(--success-l,#ecfdf5);color:var(--success,#059669);border:1px solid #a7f3d0;}
.flash-ok svg{stroke:var(--success,#059669);}
.flash-err{background:var(--danger-l,#fef2f2);color:var(--danger,#dc2626);border:1px solid #fecaca;}
.flash-err svg{stroke:var(--danger,#dc2626);}

/* tabs */
.tab-bar{display:flex;gap:4px;background:var(--white);border:1px solid var(--border);border-radius:14px;padding:5px;margin-bottom:24px;box-shadow:var(--sh);}
.tab-btn{flex:1;padding:9px 12px;border-radius:10px;border:none;background:transparent;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;}
.tab-btn svg{width:14px;height:14px;stroke:currentColor;flex-shrink:0;}
.tab-btn.active{background:linear-gradient(135deg,var(--primary,#4f46e5),#7c3aed);color:white;box-shadow:0 4px 14px rgba(79,70,229,.28);}
.tab-btn:not(.active):hover{background:var(--bg2,#f8fafc);color:var(--text);}
.tab-btn.active svg{stroke:white;}

/* panels */
.tab-panel{display:none;animation:fadeUp .3s ease both;}
.tab-panel.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* 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:16px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:11px;}
.sec-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sec-ico svg{width:17px;height:17px;}
.si-indigo{background:linear-gradient(135deg,#4f46e5,#7c3aed);box-shadow:0 4px 10px rgba(79,70,229,.25);}
.si-sky{background:linear-gradient(135deg,#0284c7,#38bdf8);box-shadow:0 4px 10px rgba(2,132,199,.2);}
.si-amber{background:linear-gradient(135deg,#d97706,#fbbf24);box-shadow:0 4px 10px rgba(217,119,6,.2);}
.si-green{background:linear-gradient(135deg,#059669,#34d399);box-shadow:0 4px 10px rgba(5,150,105,.2);}
.si-slate{background:linear-gradient(135deg,#475569,#64748b);box-shadow:0 4px 10px rgba(71,85,105,.2);}
.si-red{background:linear-gradient(135deg,#dc2626,#f87171);box-shadow:0 4px 10px rgba(220,38,38,.2);}
.sec-ico svg{stroke:white;}
.sec-title{font-size:14px;font-weight:800;color:var(--text);}
.sec-sub{font-size:11.5px;color:var(--muted);font-weight:500;margin-top:1px;}
.sec-body{padding:24px;}
.sec-ft{padding:14px 22px;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;}
.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,#94a3b8);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;}
.fg input,.fg textarea,.fg select{
    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(--bg2,#f8fafc);outline:none;transition:all .15s;
}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--primary,#4f46e5);box-shadow:0 0 0 3px rgba(79,70,229,.1);background:white;}
.fg textarea{resize:vertical;min-height:72px;}
.fg input[type="time"]{cursor:pointer;}
.fg input[type="range"]{padding:0;background:transparent;border:none;cursor:pointer;accent-color:var(--primary,#4f46e5);}
.fg input[type="range"]:focus{box-shadow:none;border:none;}
.hint{font-size:11px;color:var(--muted2,#94a3b8);font-weight:500;margin-top:5px;}
.ferr{color:var(--danger,#dc2626);font-size:11.5px;font-weight:600;margin-top:5px;}

/* 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,#94a3b8);padding:3px;transition:color .15s;}
.pw-eye:hover{color:var(--text);}
.pw-eye svg{width:15px;height:15px;stroke:currentColor;display:block;}

/* toggle switch */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border);}
.toggle-row:last-child{border-bottom:none;padding-bottom:0;}
.toggle-lbl{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:2px;}
.toggle-sub{font-size:12px;color:var(--muted);font-weight:500;}
.sw{position:relative;width:44px;height:24px;flex-shrink:0;}
.sw input{opacity:0;width:0;height:0;}
.sw-slider{position:absolute;inset:0;background:#cbd5e1;border-radius:100px;cursor:pointer;transition:.3s;}
.sw-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:white;border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.sw input:checked + .sw-slider{background:var(--primary,#4f46e5);}
.sw input:checked + .sw-slider::before{transform:translateX(20px);}
.sw input:disabled + .sw-slider{opacity:.5;cursor:not-allowed;}

/* info rows */
.info-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);}
.info-row:last-child{border-bottom:none;padding-bottom:0;}
.info-lbl{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.info-val{font-size:13px;font-weight:700;color:var(--text);}
.info-val.mono{font-family:'JetBrains Mono',monospace;font-size:12px;background:var(--bg2,#f8fafc);padding:4px 10px;border-radius:7px;border:1px solid var(--border);}
.info-val.ok{color:var(--success,#059669);}

/* stat grid */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
.stat-box{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:16px 18px;box-shadow:var(--sh);position:relative;overflow:hidden;}
.stat-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:16px 16px 0 0;}
.stat-box.sv::before{background:linear-gradient(90deg,#4f46e5,#7c3aed);}
.stat-box.ss::before{background:linear-gradient(90deg,#059669,#34d399);}
.stat-box.sa::before{background:linear-gradient(90deg,#d97706,#fbbf24);}
.stat-num{font-size:1.7rem;font-weight:900;letter-spacing:-.04em;line-height:1;margin-bottom:3px;}
.stat-num.cv{color:#4f46e5;}.stat-num.cs{color:#059669;}.stat-num.ca{color:#d97706;}
.stat-lbl{font-size:11.5px;font-weight:600;color:var(--muted);}

/* btn */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:100px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;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,#4f46e5),#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(--bg2,#f8fafc);color:var(--text);}
.btn-danger{background:var(--danger-l,#fef2f2);color:var(--danger,#dc2626);border:1.5px solid #fecaca;}
.btn-danger:hover{background:var(--danger,#dc2626);color:white;}
.btn-sm{padding:7px 16px;font-size:12.5px;}

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

/* radius display */
.radius-row{display:flex;align-items:center;gap:10px;background:var(--primary-l,#eef2ff);border-radius:10px;padding:10px 14px;margin-bottom:10px;}
.radius-ico{width:32px;height:32px;border-radius:8px;background:rgba(79,70,229,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.radius-ico svg{width:14px;height:14px;stroke:var(--primary,#4f46e5);}
.radius-val{font-size:1.1rem;font-weight:900;color:var(--primary,#4f46e5);letter-spacing:-.03em;}
.radius-lbl{font-size:11px;color:var(--muted);font-weight:500;}

/* cache action grid */
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.action-card{border:1.5px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px;cursor:pointer;text-decoration:none;transition:all .15s;background:var(--white);}
.action-card:hover{border-color:rgba(79,70,229,.3);background:var(--primary-l,#eef2ff);transform:translateY(-1px);}
.action-card-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;}
.action-card-ico svg{width:16px;height:16px;stroke:white;}
.action-card-title{font-size:13px;font-weight:800;color:var(--text);}
.action-card-sub{font-size:11.5px;color:var(--muted);font-weight:500;}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:640px){.frow{grid-template-columns:1fr;}.stat-grid{grid-template-columns:1fr 1fr;}.action-grid{grid-template-columns:1fr;}.tab-btn span{display:none;}}
</style>
@endpush

@php
$success = session('success');
$totalInstansi   = \App\Models\Instansi::count();
$totalKaryawan   = \App\Models\Karyawan::count();
$totalAbsensiHariIni = \App\Models\Absensi::whereDate('tanggal', today())->whereNotNull('jam_masuk')->count();
@endphp

<div class="pg-wrap">

{{-- HEADER --}}
<div class="pg-hd">
    <div class="pg-hico">
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="3"/>
            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
        </svg>
    </div>
    <div>
        <div class="pg-title">Pengaturan Sistem</div>
        <div class="pg-sub">Konfigurasi aplikasi & akun admin</div>
    </div>
</div>

@if($success)
<div class="flash flash-ok">
    <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>
    {{ $success }}
</div>
@endif
@if($errors->any())
<div class="flash flash-err">
    <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" 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>
    {{ $errors->first() }}
</div>
@endif

{{-- TABS --}}
<div class="tab-bar">
    <button class="tab-btn active" id="tab-btn-aplikasi" onclick="switchTab('aplikasi')">
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
        <span>Aplikasi</span>
    </button>
    <button class="tab-btn" id="tab-btn-akun" onclick="switchTab('akun')">
        <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>
        <span>Akun Admin</span>
    </button>
    <button class="tab-btn" id="tab-btn-sistem" onclick="switchTab('sistem')">
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
        <span>Sistem</span>
    </button>
</div>

{{-- ══ TAB APLIKASI ══ --}}
<div class="tab-panel active" id="panel-aplikasi">

    {{-- Stats ringkas --}}
    <div class="stat-grid">
        <div class="stat-box sv">
            <div class="stat-num cv">{{ $totalInstansi }}</div>
            <div class="stat-lbl">Instansi Aktif</div>
        </div>
        <div class="stat-box ss">
            <div class="stat-num cs">{{ $totalKaryawan }}</div>
            <div class="stat-lbl">Total Karyawan</div>
        </div>
        <div class="stat-box sa">
            <div class="stat-num ca">{{ $totalAbsensiHariIni }}</div>
            <div class="stat-lbl">Absensi Hari Ini</div>
        </div>
    </div>

    {{-- Info Aplikasi --}}
    <div class="sec-card">
        <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="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/><path d="m9 12 2 2 4-4"/></svg>
            </div>
            <div>
                <div class="sec-title">Informasi Aplikasi</div>
                <div class="sec-sub">Nama, tagline, dan kontak sistem</div>
            </div>
        </div>
        <div class="sec-body">
            <form method="POST" action="{{ route('admin.pengaturan.aplikasi') }}" id="form-aplikasi">
                @csrf @method('PUT')
                <div class="fg">
                    <label>Nama Aplikasi</label>
                    <input type="text" name="nama_aplikasi" value="{{ old('nama_aplikasi', session('pengaturan.nama_aplikasi', 'SiAbsen')) }}" placeholder="SiAbsen">
                </div>
                <div class="fg">
                    <label>Tagline / Deskripsi</label>
                    <input type="text" name="deskripsi" value="{{ old('deskripsi', session('pengaturan.deskripsi', 'Sistem Absensi Digital')) }}" placeholder="Sistem Absensi Digital">
                </div>
                <div class="frow">
                    <div class="fg">
                        <label>Email Kontak</label>
                        <input type="email" name="email_kontak" value="{{ old('email_kontak', session('pengaturan.email_kontak')) }}" placeholder="admin@sistem.com">
                    </div>
                    <div class="fg">
                        <label>No. Telepon</label>
                        <input type="text" name="telepon" value="{{ old('telepon', session('pengaturan.telepon')) }}" placeholder="08xxxxxxxxxx">
                    </div>
                </div>
            </form>
        </div>
        <div class="sec-ft">
            <span class="saved-msg" id="saved-aplikasi" style="display:none;">
                <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>
            <button type="submit" form="form-aplikasi" 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
            </button>
        </div>
    </div>

    {{-- Jam Kerja Default --}}
    <div class="sec-card">
        <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"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            </div>
            <div>
                <div class="sec-title">Jam Kerja Default</div>
                <div class="sec-sub">Digunakan jika instansi belum mengatur jam kerja sendiri</div>
            </div>
        </div>
        <div class="sec-body">
            <form method="POST" action="{{ route('admin.pengaturan.jam-kerja') }}" id="form-jam">
                @csrf @method('PUT')
                <div class="frow">
                    <div class="fg">
                        <label>Jam Masuk Default</label>
                        <input type="time" name="jam_masuk_default" value="{{ old('jam_masuk_default', session('pengaturan.jam_masuk_default', '08:00')) }}">
                    </div>
                    <div class="fg">
                        <label>Jam Pulang Default</label>
                        <input type="time" name="jam_pulang_default" value="{{ old('jam_pulang_default', session('pengaturan.jam_pulang_default', '17:00')) }}">
                    </div>
                </div>
                <div class="fg" style="margin-bottom:0;">
                    <label>Toleransi Keterlambatan</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"/><polyline points="12 6 12 12 16 14"/></svg>
                        </div>
                        <div>
                            <div class="radius-val" id="tol-display">{{ session('pengaturan.toleransi_menit', 15) }} menit</div>
                            <div class="radius-lbl">Batas waktu masih dianggap tepat waktu</div>
                        </div>
                    </div>
                    <input type="range" name="toleransi_menit" min="0" max="120" step="5"
                           value="{{ old('toleransi_menit', session('pengaturan.toleransi_menit', 15)) }}"
                           oninput="document.getElementById('tol-display').textContent=this.value+' menit'">
                    <div style="display:flex;justify-content:space-between;margin-top:4px;">
                        <span class="hint">0 menit (strict)</span>
                        <span class="hint">120 menit (longgar)</span>
                    </div>
                </div>
            </form>
        </div>
        <div class="sec-ft">
            <div></div>
            <button type="submit" form="form-jam" 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
            </button>
        </div>
    </div>

</div>

{{-- ══ TAB AKUN ══ --}}
<div class="tab-panel" id="panel-akun">

    {{-- Profil Admin --}}
    <div class="sec-card">
        <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="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">Profil Admin</div>
                <div class="sec-sub">Perbarui nama dan email akun admin</div>
            </div>
        </div>

        {{-- Avatar besar --}}
        <div style="padding:20px 22px 0;display:flex;align-items:center;gap:14px;">
            <div style="width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#4f46e5,#7c3aed);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:900;color:white;flex-shrink:0;box-shadow:0 6px 16px rgba(79,70,229,.3);">
                {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
            </div>
            <div>
                <div style="font-size:15px;font-weight:800;color:var(--text);">{{ auth()->user()->name }}</div>
                <div style="font-size:12.5px;color:var(--muted);font-weight:500;">{{ auth()->user()->email }}</div>
                <div style="display:inline-flex;align-items:center;gap:4px;background:#ede9fe;color:#5b21b6;font-size:11px;font-weight:700;padding:2px 9px;border-radius:100px;margin-top:4px;">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:10px;height:10px;stroke:currentColor;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                    Super Admin
                </div>
            </div>
        </div>

        <div class="sec-body" style="padding-top:16px;">
            <form method="POST" action="{{ route('admin.pengaturan.profil') }}" id="form-profil">
                @csrf @method('PUT')
                <div class="frow">
                    <div class="fg">
                        <label>Nama</label>
                        <input type="text" name="name" value="{{ old('name', auth()->user()->name) }}" required autofocus>
                        @error('name')<span class="ferr">{{ $message }}</span>@enderror
                    </div>
                    <div class="fg">
                        <label>Email</label>
                        <input type="email" name="email" value="{{ old('email', auth()->user()->email) }}" required>
                        @error('email')<span class="ferr">{{ $message }}</span>@enderror
                    </div>
                </div>
            </form>
        </div>
        <div class="sec-ft">
            <div></div>
            <button type="submit" form="form-profil" 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 Profil
            </button>
        </div>
    </div>

    {{-- Ganti Password --}}
    <div class="sec-card">
        <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"><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="sec-title">Ganti Password</div>
                <div class="sec-sub">Gunakan password yang kuat dan unik</div>
            </div>
        </div>
        <div class="sec-body">
            <form method="POST" action="{{ route('admin.pengaturan.password') }}" id="form-pw">
                @csrf @method('PUT')
                <div class="fg">
                    <label>Password Saat Ini</label>
                    <div class="pw-wrap">
                        <input type="password" name="current_password" id="pw-cur" placeholder="••••••••">
                        <button type="button" class="pw-eye" onclick="togglePw('pw-cur','ico-cur')">
                            <svg id="ico-cur" 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>
                    @error('current_password')<span class="ferr">{{ $message }}</span>@enderror
                </div>
                <div class="frow">
                    <div class="fg">
                        <label>Password Baru</label>
                        <div class="pw-wrap">
                            <input type="password" name="password" id="pw-new" placeholder="Min. 8 karakter">
                            <button type="button" class="pw-eye" onclick="togglePw('pw-new','ico-new')">
                                <svg id="ico-new" 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>
                        @error('password')<span class="ferr">{{ $message }}</span>@enderror
                    </div>
                    <div class="fg">
                        <label>Konfirmasi Password</label>
                        <input type="password" name="password_confirmation" placeholder="Ulangi password baru">
                    </div>
                </div>
            </form>
        </div>
        <div class="sec-ft">
            <div></div>
            <button type="submit" form="form-pw" class="btn btn-primary btn-sm">
                <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>
                Update Password
            </button>
        </div>
    </div>

</div>

{{-- ══ TAB SISTEM ══ --}}
<div class="tab-panel" id="panel-sistem">

    {{-- Info Sistem --}}
    <div class="sec-card">
        <div class="sec-hd">
            <div class="sec-ico si-green">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" 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>
            </div>
            <div>
                <div class="sec-title">Informasi Sistem</div>
                <div class="sec-sub">Status dan versi komponen sistem</div>
            </div>
        </div>
        <div class="sec-body">
            <div class="info-row">
                <span class="info-lbl">Aplikasi</span>
                <span class="info-val mono">SiAbsen v1.0.0</span>
            </div>
            <div class="info-row">
                <span class="info-lbl">Laravel</span>
                <span class="info-val mono">{{ app()->version() }}</span>
            </div>
            <div class="info-row">
                <span class="info-lbl">PHP</span>
                <span class="info-val mono">{{ phpversion() }}</span>
            </div>
            <div class="info-row">
                <span class="info-lbl">Environment</span>
                <span class="info-val mono">{{ app()->environment() }}</span>
            </div>
            <div class="info-row">
                <span class="info-lbl">Database</span>
                <span class="info-val mono">MySQL</span>
            </div>
            <div class="info-row">
                <span class="info-lbl">Status</span>
                <span class="info-val ok" style="display:flex;align-items:center;gap:5px;">
                    <span style="width:7px;height:7px;border-radius:50%;background:#10b981;display:inline-block;"></span>
                    Sistem Online
                </span>
            </div>
            <div class="info-row">
                <span class="info-lbl">Server Time</span>
                <span class="info-val mono" id="server-time">{{ now()->isoFormat('D MMM YYYY, HH:mm:ss') }}</span>
            </div>
        </div>
    </div>

    {{-- Maintenance --}}
    <div class="sec-card">
        <div class="sec-hd">
            <div class="sec-ico si-slate">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
            </div>
            <div>
                <div class="sec-title">Konfigurasi</div>
                <div class="sec-sub">Mode maintenance dan debug</div>
            </div>
        </div>
        <div class="sec-body">
            <div class="toggle-row">
                <div>
                    <div class="toggle-lbl">Mode Maintenance</div>
                    <div class="toggle-sub">Nonaktifkan akses publik, hanya admin yang bisa masuk</div>
                </div>
                <label class="sw">
                    <input type="checkbox" id="toggle-maint" onchange="toggleMaintenance(this)">
                    <span class="sw-slider"></span>
                </label>
            </div>
            <div class="toggle-row">
                <div>
                    <div class="toggle-lbl">Debug Mode</div>
                    <div class="toggle-sub">Tampilkan detail error — hanya aktifkan saat development</div>
                </div>
                <label class="sw">
                    <input type="checkbox" {{ config('app.debug') ? 'checked' : '' }} disabled>
                    <span class="sw-slider"></span>
                </label>
            </div>
        </div>
    </div>

    {{-- Cache & Tools --}}
    <div class="sec-card">
        <div class="sec-hd">
            <div class="sec-ico si-red">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-3.51"/></svg>
            </div>
            <div>
                <div class="sec-title">Maintenance & Cache</div>
                <div class="sec-sub">Bersihkan cache untuk refresh konfigurasi sistem</div>
            </div>
        </div>
        <div class="sec-body">
            <div class="action-grid">
                <a href="{{ route('admin.pengaturan.clear-cache') }}"
                   onclick="return confirm('Bersihkan semua cache aplikasi?')"
                   class="action-card">
                    <div class="action-card-ico" style="background:linear-gradient(135deg,#4f46e5,#7c3aed);">
                        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-3.51"/></svg>
                    </div>
                    <div class="action-card-title">Clear All Cache</div>
                    <div class="action-card-sub">Cache, view, config, route</div>
                </a>
                <a href="#" onclick="alert('Fitur segera hadir!');return false;" class="action-card">
                    <div class="action-card-ico" style="background:linear-gradient(135deg,#059669,#34d399);">
                        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    </div>
                    <div class="action-card-title">Backup Database</div>
                    <div class="action-card-sub">Export data ke file SQL</div>
                </a>
            </div>
        </div>
    </div>

</div>

</div>

@push('scripts')
<script>
function switchTab(name) {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
    document.getElementById('tab-btn-' + name).classList.add('active');
    document.getElementById('panel-' + name).classList.add('active');
    history.replaceState(null, '', '#' + name);
}

function togglePw(inputId, iconId) {
    const inp = document.getElementById(inputId);
    const isText = inp.type === 'text';
    inp.type = isText ? 'password' : 'text';
    document.getElementById(iconId).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.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"/>';
}

function toggleMaintenance(el) {
    if (!confirm(el.checked ? 'Aktifkan mode maintenance? Pengguna tidak bisa login.' : 'Nonaktifkan mode maintenance?')) {
        el.checked = !el.checked;
    }
}

// Restore tab dari URL hash
const hash = location.hash.replace('#','');
if (['aplikasi','akun','sistem'].includes(hash)) switchTab(hash);

// Flash success auto-hide
setTimeout(() => {
    const f = document.querySelector('.flash');
    if (f) { f.style.transition='opacity .4s'; f.style.opacity='0'; setTimeout(()=>f.remove(),400); }
}, 4000);
</script>
@endpush
</x-app-layout>