<x-app-layout title="Kelola Lembur">
@push('styles')
<style>
:root{
    --primary:#4f46e5;--success:#059669;--danger:#dc2626;--warning:#d97706;
    --text:#0f172a;--muted:#64748b;--muted2:#94a3b8;
    --border:#e2e8f0;--bg:#f0f4ff;--white:#fff;
    --sh:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.05);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);}
.wrap{max-width:1100px;margin:0 auto;padding:28px 28px 60px;}

/* ── BACK BUTTON ── */
.btn-back{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;padding:8px 16px;background:var(--white);border:1.5px solid var(--border);border-radius:10px;transition:all .15s;white-space:nowrap;}
.btn-back:hover{background:#eef2ff;color:var(--primary);border-color:rgba(79,70,229,.3);}
.btn-back svg{width:14px;height:14px;stroke:currentColor;fill:none;flex-shrink:0;}

/* ── PAGE HEADER ── */
.pg-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px;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;}

/* ── KPI ── */
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;}
.kpi-card{background:var(--white);border:1px solid var(--border);border-radius:18px;padding:16px 20px;box-shadow:var(--sh);display:flex;align-items:center;gap:14px;position:relative;overflow:hidden;}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:18px 18px 0 0;}
.kpi-card.kp::before{background:linear-gradient(90deg,var(--warning),#fbbf24);}
.kpi-card.ks::before{background:linear-gradient(90deg,var(--success),#34d399);}
.kpi-card.kt::before{background:linear-gradient(90deg,#4f46e5,#7c3aed);}
.kpi-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.kpi-ico svg{width:20px;height:20px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.kpi-ico.ip{background:#fef3c7;}.kpi-ico.ip svg{stroke:var(--warning);}
.kpi-ico.is{background:#d1fae5;}.kpi-ico.is svg{stroke:var(--success);}
.kpi-ico.it{background:#ede9fe;}.kpi-ico.it svg{stroke:#4f46e5;}
.kpi-num{font-size:1.7rem;font-weight:900;letter-spacing:-.04em;line-height:1;}
.kpi-lbl{font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px;}
.kpi-num.cp{color:var(--warning);}.kpi-num.cs{color:var(--success);}.kpi-num.ct{color:#4f46e5;}

/* ── FILTER ── */
.filter-panel{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:14px 20px;margin-bottom:18px;box-shadow:var(--sh);}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.filter-group{display:flex;flex-direction:column;gap:5px;flex:1;min-width:120px;}
.filter-lbl{font-size:10.5px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.07em;}
.filter-input{height:38px;padding:0 12px;border:1.5px solid var(--border);border-radius:9px;font-size:13px;font-weight:600;color:var(--text);font-family:inherit;background:var(--white);outline:none;transition:border-color .15s;width:100%;}
.filter-input:focus{border-color:#4f46e5;}
.filter-btn-group{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;}
.filter-btn{height:38px;padding:0 16px;border-radius:9px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;border:none;transition:all .15s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.filter-btn.primary{background:#4f46e5;color:#fff;}.filter-btn.primary:hover{background:#3730a3;}
.filter-btn.reset{background:#f1f5f9;color:var(--muted);border:1.5px solid var(--border);}

/* ── PANEL / TABLE ── */
.panel{background:var(--white);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--sh);}
.panel-hd{padding:15px 20px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;}
.panel-hd-title{font-size:13.5px;font-weight:800;color:var(--text);}
.panel-hd-badge{font-size:11px;font-weight:700;background:#f1f5f9;color:var(--muted);border-radius:100px;padding:3px 10px;}

/* Desktop table */
.tbl-wrap{overflow-x:auto;}
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl thead tr{background:#fafbff;}
.tbl thead th{padding:10px 16px;text-align:left;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);border-bottom:1px solid #f1f5f9;white-space:nowrap;}
.tbl tbody tr{border-bottom:1px solid #f8f9fc;transition:background .12s;}
.tbl tbody tr:last-child{border-bottom:none;}
.tbl tbody tr:hover{background:#fafbff;}
.tbl td{padding:11px 16px;vertical-align:middle;}

.kar-cell{display:flex;align-items:center;gap:9px;}
.kar-av{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0;}
.kar-name{font-size:13px;font-weight:700;color:var(--text);}
.kar-jab{font-size:11px;color:var(--muted2);font-weight:500;margin-top:1px;}
.dur-pill{display:inline-flex;align-items:center;gap:4px;background:#ede9fe;color:#3730a3;border:1px solid #ddd6fe;padding:3px 10px;border-radius:100px;font-size:12px;font-weight:700;}
.sb{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:100px;font-size:11.5px;font-weight:700;}
.sb::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.sb-pending{background:#fffbeb;color:#d97706;border:1px solid #fde68a;}.sb-pending::before{background:#d97706;}
.sb-disetujui{background:#ecfdf5;color:#059669;border:1px solid #a7f3d0;}.sb-disetujui::before{background:#059669;}
.sb-ditolak{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;}.sb-ditolak::before{background:#dc2626;}

.act-cell{display:flex;gap:5px;align-items:center;flex-wrap:wrap;}
.act-btn{height:30px;padding:0 12px;border-radius:8px;font-size:11.5px;font-weight:700;font-family:inherit;cursor:pointer;border:none;transition:all .15s;display:inline-flex;align-items:center;gap:4px;}
.act-btn svg{width:11px;height:11px;stroke:currentColor;fill:none;}
.act-approve{background:#dcfce7;color:#065f46;}.act-approve:hover{background:#bbf7d0;}
.act-reject{background:#fee2e2;color:#991b1b;}.act-reject:hover{background:#fecaca;}
.act-done{font-size:11.5px;font-weight:600;color:var(--muted2);}

/* Mobile cards */
.mob-cards{display:none;flex-direction:column;gap:10px;padding:14px;}
.mob-card{background:#fafbff;border:1px solid var(--border);border-radius:14px;padding:14px;}
.mob-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px;}
.mob-card-name{display:flex;align-items:center;gap:8px;}
.mob-card-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;}
.mob-meta-item{font-size:11.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:4px;}
.mob-meta-item svg{width:10px;height:10px;stroke:currentColor;fill:none;flex-shrink:0;}
.mob-card-actions{display:flex;gap:8px;flex-wrap:wrap;}
.mob-card-actions .act-btn{flex:1;justify-content:center;height:34px;font-size:12px;}

.empty-tbl{padding:52px 20px;text-align:center;}
.empty-tbl svg{stroke:#e2e8f0;margin-bottom:12px;}
.empty-tbl p{font-size:13px;color:var(--muted2);font-weight:600;}

/* ── PAGINATION ── */
.pagi-wrap{padding:14px 20px;border-top:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.pagi-info{font-size:12px;font-weight:600;color:var(--muted);}
.pagi-links{display:flex;gap:4px;flex-wrap:wrap;}
.pagi-links a,.pagi-links span{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border-radius:8px;font-size:12.5px;font-weight:700;text-decoration:none;border:1.5px solid transparent;transition:all .15s;}
.pagi-links a{color:var(--muted);border-color:var(--border);}
.pagi-links a:hover{background:#ede9fe;border-color:#ddd6fe;color:#4f46e5;}
.pagi-links span.active{background:#4f46e5;color:#fff;border-color:#4f46e5;}
.pagi-links span.disabled{color:#cbd5e1;border-color:#f1f5f9;}

/* ── TOAST ── */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;}
.toast{padding:12px 18px;border-radius:12px;font-size:13px;font-weight:600;color:white;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);animation:toastIn .3s ease;max-width:300px;}
.toast svg{width:14px;height:14px;stroke:currentColor;flex-shrink:0;fill:none;}
.toast.tok{background:#064e3b;border-left:3px solid #34d399;}
.toast.terr{background:#4c0f0f;border-left:3px solid #f87171;}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fu1{animation:fadeUp .35s ease both;}.fu2{animation:fadeUp .35s .06s ease both;}.fu3{animation:fadeUp .35s .12s ease both;}

/* ── RESPONSIVE ── */
@media(max-width:900px){
    .kpi-row{grid-template-columns:repeat(2,1fr);}
    .kpi-card:last-child{grid-column:span 2;}
}
@media(max-width:640px){
    .wrap{padding:14px 14px 40px;}
    .kpi-row{grid-template-columns:repeat(2,1fr);}
    .kpi-card:last-child{grid-column:span 2;}
    .kpi-num{font-size:1.4rem;}
    .kpi-card{padding:12px 14px;}
    .pg-hd{flex-direction:column;align-items:flex-start;}
    .btn-back{width:100%;justify-content:center;}
    .filter-group{min-width:calc(50% - 5px);}
    /* Hide desktop table, show mobile cards */
    .tbl-wrap{display:none!important;}
    .mob-cards{display:flex!important;}
    .filter-panel{padding:12px 14px;}
    .pagi-wrap{flex-direction:column;align-items:center;text-align:center;}
}
@media(max-width:400px){
    .kpi-row{grid-template-columns:1fr;}
    .kpi-card:last-child{grid-column:span 1;}
    .filter-group{min-width:100%;}
}
</style>
@endpush

@php
$totalJamDisetujuiH = intdiv($totalJamDisetujui, 60);
$totalJamDisetujuiM = $totalJamDisetujui % 60;
$bulanNama = \Carbon\Carbon::createFromDate($tahun, $bulan, 1)->isoFormat('MMMM YYYY');
@endphp

<div class="wrap">

{{-- HEADER --}}
<div class="pg-hd fu1">
    <div>
        <div class="pg-title">Kelola Lembur Karyawan</div>
        <div class="pg-sub">Setujui atau tolak pengajuan lembur — {{ $bulanNama }}</div>
    </div>
    <a href="{{ route('dashboard') }}" class="btn-back">
        <svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
        Dashboard
    </a>
</div>

{{-- KPI --}}
<div class="kpi-row fu2">
    <div class="kpi-card kp">
        <div class="kpi-ico ip"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
        <div><div class="kpi-num cp">{{ $statPending }}</div><div class="kpi-lbl">Menunggu Approval</div></div>
    </div>
    <div class="kpi-card ks">
        <div class="kpi-ico is"><svg viewBox="0 0 24 24"><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="kpi-num cs">{{ $statDisetujui }}</div><div class="kpi-lbl">Disetujui Bln Ini</div></div>
    </div>
    <div class="kpi-card kt">
        <div class="kpi-ico it"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
        <div>
            <div class="kpi-num ct">{{ $totalJamDisetujuiH }}j{{ $totalJamDisetujuiM > 0 ? ' '.$totalJamDisetujuiM.'m' : '' }}</div>
            <div class="kpi-lbl">Total Jam Bln Ini</div>
        </div>
    </div>
</div>

{{-- FILTER --}}
<div class="filter-panel fu2">
    <form method="GET" action="{{ route('instansi.lembur.index') }}">
        <div class="filter-row">
            <div class="filter-group">
                <span class="filter-lbl">Bulan</span>
                <select name="bulan" class="filter-input">
                    @for($m=1;$m<=12;$m++)
                    <option value="{{ $m }}" @selected($bulan==$m)>{{ \Carbon\Carbon::createFromDate(null,$m,1)->isoFormat('MMMM') }}</option>
                    @endfor
                </select>
            </div>
            <div class="filter-group">
                <span class="filter-lbl">Tahun</span>
                <select name="tahun" class="filter-input">
                    @for($y=now()->year;$y>=now()->year-2;$y--)
                    <option value="{{ $y }}" @selected($tahun==$y)>{{ $y }}</option>
                    @endfor
                </select>
            </div>
            <div class="filter-group">
                <span class="filter-lbl">Status</span>
                <select name="status" class="filter-input">
                    <option value="">Semua</option>
                    <option value="pending" @selected($status==='pending')>Pending</option>
                    <option value="disetujui" @selected($status==='disetujui')>Disetujui</option>
                    <option value="ditolak" @selected($status==='ditolak')>Ditolak</option>
                </select>
            </div>
            <div class="filter-group">
                <span class="filter-lbl">Karyawan</span>
                <select name="karyawan_id" class="filter-input">
                    <option value="">Semua</option>
                    @foreach($karyawanList as $kar)
                    <option value="{{ $kar->id }}" @selected($karyawanId==$kar->id)>{{ $kar->user->name ?? $kar->nama }}</option>
                    @endforeach
                </select>
            </div>
            <div class="filter-btn-group">
                <button type="submit" class="filter-btn primary">Filter</button>
                <a href="{{ route('instansi.lembur.index') }}" class="filter-btn reset">Reset</a>
            </div>
        </div>
    </form>
</div>

{{-- TABLE --}}
<div class="panel fu3">
    <div class="panel-hd">
        <span class="panel-hd-title">Daftar Pengajuan Lembur</span>
        <span class="panel-hd-badge">{{ $lemburList->total() }} data</span>
    </div>

    {{-- DESKTOP TABLE --}}
    <div class="tbl-wrap">
    <table class="tbl">
        <thead>
            <tr>
                <th>#</th>
                <th>Karyawan</th>
                <th>Tanggal</th>
                <th>Jam</th>
                <th>Durasi</th>
                <th>Keterangan</th>
                <th>Status</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            @forelse($lemburList as $i => $l)
            @php
                $nama    = $l->karyawan->user->name ?? $l->karyawan->nama ?? '-';
                $inisial = strtoupper(substr($nama, 0, 1));
                $colors  = ['#7c3aed','#0284c7','#059669','#d97706','#dc2626','#475569'];
                $color   = $colors[ord($inisial) % count($colors)];
            @endphp
            <tr id="row-{{ $l->id }}">
                <td style="font-size:12px;color:var(--muted2);font-weight:600;">{{ $lemburList->firstItem() + $i }}</td>
                <td>
                    <div class="kar-cell">
                        <div class="kar-av" style="background:{{ $color }};">{{ $inisial }}</div>
                        <div>
                            <div class="kar-name">{{ $nama }}</div>
                            <div class="kar-jab">{{ $l->karyawan->jabatan->nama_jabatan ?? $l->karyawan->jabatan->nama ?? '-' }}</div>
                        </div>
                    </div>
                </td>
                <td style="font-size:12.5px;font-weight:700;">{{ \Carbon\Carbon::parse($l->tanggal)->isoFormat('ddd, D MMM YYYY') }}</td>
                <td style="font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;">
                    {{ \Carbon\Carbon::parse($l->jam_mulai)->format('H:i') }} – {{ \Carbon\Carbon::parse($l->jam_selesai)->format('H:i') }}
                </td>
                <td><span class="dur-pill">{{ $l->durasi_format }}</span></td>
                <td style="max-width:160px;">
                    <span style="font-size:12px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;" title="{{ $l->keterangan }}">{{ $l->keterangan ?? '—' }}</span>
                </td>
                <td><span class="sb sb-{{ $l->status }}">{{ ucfirst($l->status) }}</span></td>
                <td>
                    <div class="act-cell">
                        @if($l->status === 'pending')
                            <button class="act-btn act-approve" onclick="doAction({{ $l->id }}, 'approve')">
                                <svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                Setuju
                            </button>
                            <button class="act-btn act-reject" onclick="doAction({{ $l->id }}, 'reject')">
                                <svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                                Tolak
                            </button>
                        @elseif($l->status === 'disetujui')
                            <span class="act-done">✓ Disetujui</span>
                        @else
                            <span class="act-done">✗ Ditolak</span>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="8">
                <div class="empty-tbl">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" style="display:block;margin:0 auto;"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                    <p>Belum ada pengajuan lembur</p>
                </div>
            </td></tr>
            @endforelse
        </tbody>
    </table>
    </div>

    {{-- MOBILE CARDS --}}
    <div class="mob-cards">
        @forelse($lemburList as $i => $l)
        @php
            $nama    = $l->karyawan->user->name ?? $l->karyawan->nama ?? '-';
            $inisial = strtoupper(substr($nama, 0, 1));
            $colors  = ['#7c3aed','#0284c7','#059669','#d97706','#dc2626','#475569'];
            $color   = $colors[ord($inisial) % count($colors)];
        @endphp
        <div class="mob-card" id="mob-row-{{ $l->id }}">
            <div class="mob-card-head">
                <div class="mob-card-name">
                    <div class="kar-av" style="background:{{ $color }};width:36px;height:36px;border-radius:9px;">{{ $inisial }}</div>
                    <div>
                        <div class="kar-name">{{ $nama }}</div>
                        <div class="kar-jab">{{ $l->karyawan->jabatan->nama_jabatan ?? '-' }}</div>
                    </div>
                </div>
                <span class="sb sb-{{ $l->status }} mob-status-{{ $l->id }}">{{ ucfirst($l->status) }}</span>
            </div>
            <div class="mob-card-meta">
                <div class="mob-meta-item">
                    <svg viewBox="0 0 24 24" 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>
                    {{ \Carbon\Carbon::parse($l->tanggal)->isoFormat('D MMM YYYY') }}
                </div>
                <div class="mob-meta-item">
                    <svg viewBox="0 0 24 24" 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>
                    {{ \Carbon\Carbon::parse($l->jam_mulai)->format('H:i') }} – {{ \Carbon\Carbon::parse($l->jam_selesai)->format('H:i') }}
                </div>
                <div class="mob-meta-item" style="color:#3730a3;">
                    <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="stroke:#7c3aed;"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                    Durasi: {{ $l->durasi_format }}
                </div>
                @if($l->keterangan)
                <div class="mob-meta-item" style="grid-column:span 2;">
                    <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                    {{ Str::limit($l->keterangan, 50) }}
                </div>
                @endif
            </div>
            <div class="mob-card-actions mob-actions-{{ $l->id }}">
                @if($l->status === 'pending')
                    <button class="act-btn act-approve" onclick="doAction({{ $l->id }}, 'approve')">
                        <svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                        Setujui
                    </button>
                    <button class="act-btn act-reject" onclick="doAction({{ $l->id }}, 'reject')">
                        <svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                        Tolak
                    </button>
                @elseif($l->status === 'disetujui')
                    <span class="act-done">✓ Sudah Disetujui</span>
                @else
                    <span class="act-done">✗ Sudah Ditolak</span>
                @endif
            </div>
        </div>
        @empty
        <div class="empty-tbl">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" style="display:block;margin:0 auto;"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            <p>Belum ada pengajuan lembur</p>
        </div>
        @endforelse
    </div>

    @if($lemburList->hasPages())
    <div class="pagi-wrap">
        <span class="pagi-info">Menampilkan {{ $lemburList->firstItem() }}–{{ $lemburList->lastItem() }} dari {{ $lemburList->total() }} data</span>
        <div class="pagi-links">
            @if($lemburList->onFirstPage())<span class="disabled">‹</span>@else<a href="{{ $lemburList->previousPageUrl() }}">‹</a>@endif
            @foreach($lemburList->getUrlRange(max(1,$lemburList->currentPage()-2), min($lemburList->lastPage(),$lemburList->currentPage()+2)) as $pg => $url)
                @if($pg == $lemburList->currentPage())<span class="active">{{ $pg }}</span>@else<a href="{{ $url }}">{{ $pg }}</a>@endif
            @endforeach
            @if($lemburList->hasMorePages())<a href="{{ $lemburList->nextPageUrl() }}">›</a>@else<span class="disabled">›</span>@endif
        </div>
    </div>
    @endif
</div>

</div>

<div class="toast-wrap" id="toastWrap"></div>

@push('scripts')
<script>
async function doAction(id, action) {
    try {
        const res = await fetch(`/instansi/lembur/${id}/${action}`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content, 'Accept': 'application/json' }
        });
        const data = await res.json();
        if (data.success) {
            // Update desktop row
            const row = document.getElementById(`row-${id}`);
            if (row) {
                const sb  = row.querySelector('.sb');
                const act = row.querySelector('.act-cell');
                if (action === 'approve') {
                    sb.className  = 'sb sb-disetujui'; sb.textContent = 'Disetujui';
                    act.innerHTML = '<span class="act-done">✓ Disetujui</span>';
                    row.style.background = '#f0fdf4';
                } else {
                    sb.className  = 'sb sb-ditolak'; sb.textContent = 'Ditolak';
                    act.innerHTML = '<span class="act-done">✗ Ditolak</span>';
                    row.style.background = '#fef2f2';
                }
                setTimeout(() => row.style.background = '', 1500);
            }
            // Update mobile card
            const mobStatus = document.querySelector(`.mob-status-${id}`);
            const mobActions = document.querySelector(`.mob-actions-${id}`);
            if (mobStatus) {
                if (action === 'approve') {
                    mobStatus.className = `sb sb-disetujui mob-status-${id}`; mobStatus.textContent = 'Disetujui';
                    mobActions.innerHTML = '<span class="act-done">✓ Sudah Disetujui</span>';
                } else {
                    mobStatus.className = `sb sb-ditolak mob-status-${id}`; mobStatus.textContent = 'Ditolak';
                    mobActions.innerHTML = '<span class="act-done">✗ Sudah Ditolak</span>';
                }
            }
            // KPI update
            const pen = document.querySelector('.kpi-num.cp');
            if (pen) pen.textContent = Math.max(0, parseInt(pen.textContent) - 1);
            if (action === 'approve') {
                const cs = document.querySelector('.kpi-num.cs');
                if (cs) cs.textContent = parseInt(cs.textContent) + 1;
            }
            showToast('tok', data.message);
        } else { showToast('terr', data.message || 'Terjadi kesalahan'); }
    } catch { showToast('terr', 'Gagal terhubung ke server'); }
}
function showToast(type, msg) {
    const wrap = document.getElementById('toastWrap');
    const t = document.createElement('div');
    t.className = `toast ${type}`;
    const ico = type==='tok' ? '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>' : '<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>';
    t.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">${ico}</svg><span>${msg}</span>`;
    wrap.appendChild(t);
    setTimeout(() => { t.style.transition='opacity .3s'; t.style.opacity='0'; setTimeout(()=>t.remove(),300); }, 3000);
}
</script>
@endpush
</x-app-layout>