<x-app-layout title="Laporan Global">

@push('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">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<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);}

.pg{max-width:1160px;margin:0 auto;padding:28px 28px 52px;}

.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);}

.filter-bar{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px 20px;margin-bottom:22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:var(--sh);}
.filter-bar label{font-size:.78rem;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.07em;}
.filter-bar select{padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--rs);font-size:.875rem;font-family:inherit;color:var(--txt);background:var(--bg2);outline:none;transition:all .2s;}
.filter-bar select:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--pm);background:white;}
.filter-sep{width:1px;height:28px;background:var(--border);}

.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-outline{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--rs);background:white;color:var(--p);border:1.5px solid var(--p);font-size:.875rem;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none;transition:all .2s;}
.btn-outline svg{width:15px;height:15px;stroke:var(--p);}
.btn-outline:hover{background:var(--pl);}

.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
.kpi{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding: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.kb::before{background:linear-gradient(90deg,var(--sky),#38bdf8);}
.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-val span{font-size:1rem;font-weight:600;color:var(--muted);}
.kpi-sub{font-size:.78rem;color:var(--muted);font-weight:500;margin-top:3px;}

.card{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);box-shadow:var(--sh);overflow:hidden;margin-bottom:20px;}
.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;}
.chart-wrap{position:relative;height:300px;}

.tbl-wrap{overflow-x:auto;}
.tbl{width:100%;border-collapse:collapse;min-width:500px;}
.tbl thead tr{background:#fafbff;}
.tbl thead th{padding:11px 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:13px 18px;font-size:.875rem;color:var(--txt);vertical-align:middle;}

.ins-cell{display:flex;align-items:center;gap:10px;}
.ins-av{width:36px;height:36px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,var(--p),#818cf8);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;color:white;}

.prog-wrap{display:flex;align-items:center;gap:10px;}
.prog-bar{flex:1;height:7px;background:#f1f5f9;border-radius:100px;overflow:hidden;}
.prog-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--ok),#34d399);transition:width .6s ease;}
.prog-fill.warn{background:linear-gradient(90deg,var(--warn),#fbbf24);}
.prog-fill.err{background:linear-gradient(90deg,var(--err),#f87171);}
.prog-pct{font-size:.78rem;font-weight:700;color:var(--muted);min-width:36px;text-align:right;}

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

.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;}

@media(max-width:900px){.kpi-row{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.pg{padding:18px 16px 40px;}.kpi-row{grid-template-columns:1fr;}}
</style>
@endpush

<div class="pg">

    {{-- PAGE HEADER --}}
    <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="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"/>
                    <line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
                </svg>
            </div>
            <div>
                <div class="pg-title">Laporan Global</div>
                <div class="pg-sub">Rekap absensi seluruh instansi</div>
            </div>
        </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;">
            <a href="{{ route('admin.laporan.export-pdf', ['bulan' => $bulan, 'tahun' => $tahun]) }}"
               class="btn-outline" target="_blank">
                <svg viewBox="0 0 24 24" fill="none" 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>
                Export PDF
            </a>
            <a href="{{ route('admin.laporan.export-excel', ['bulan' => $bulan, 'tahun' => $tahun]) }}"
               class="btn-primary">
                <svg viewBox="0 0 24 24" fill="none" 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"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/></svg>
                Export Excel
            </a>
        </div>
    </div>

    {{-- FILTER BAR --}}
    <form method="GET" action="{{ route('admin.laporan.index') }}" class="filter-bar">
        <label>Bulan</label>
        <select name="bulan">
            @foreach(['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'] as $i => $bln)
            <option value="{{ $i+1 }}" {{ $bulan == $i+1 ? 'selected' : '' }}>{{ $bln }}</option>
            @endforeach
        </select>
        <label>Tahun</label>
        <select name="tahun">
            @for($y = now()->year; $y >= now()->year - 4; $y--)
            <option value="{{ $y }}" {{ $tahun == $y ? 'selected' : '' }}>{{ $y }}</option>
            @endfor
        </select>
        <div class="filter-sep"></div>
        <button type="submit" class="btn-primary" style="padding:8px 16px;">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;stroke:white;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            Tampilkan
        </button>
    </form>

    {{-- KPI --}}
    <div class="kpi-row">
        <div class="kpi kp">
            <div class="kpi-lbl">Total Instansi</div>
            <div class="kpi-val">{{ $totalInstansi }}</div>
            <div class="kpi-sub">Instansi terdaftar</div>
        </div>
        <div class="kpi ks">
            <div class="kpi-lbl">Total Karyawan</div>
            <div class="kpi-val">{{ $totalKaryawan }}</div>
            <div class="kpi-sub">Di semua instansi</div>
        </div>
        <div class="kpi kw">
            <div class="kpi-lbl">Total Absensi</div>
            <div class="kpi-val">{{ $totalAbsensi }}</div>
            <div class="kpi-sub">{{ \Carbon\Carbon::create($tahun, $bulan)->isoFormat('MMMM YYYY') }}</div>
        </div>
        <div class="kpi kb">
            <div class="kpi-lbl">Rata-rata Kehadiran</div>
            <div class="kpi-val">{{ $rataKehadiran }}<span>%</span></div>
            <div class="kpi-sub">Semua instansi</div>
        </div>
    </div>

    {{-- GRAFIK ABSENSI --}}
    <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"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
            </div>
            <span class="card-title">Grafik Absensi Harian — {{ \Carbon\Carbon::create($tahun, $bulan)->isoFormat('MMMM YYYY') }}</span>
        </div>
        <div class="card-body">
            <div class="chart-wrap">
                <canvas id="chartAbsensi"></canvas>
            </div>
        </div>
    </div>

    {{-- TABEL REKAP PER INSTANSI --}}
    <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="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
            </div>
            <span class="card-title">Rekap Per Instansi</span>
            <span style="margin-left:auto;background:var(--pl);color:var(--p);font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:100px;">
                {{ count($rekapInstansi) }} Instansi
            </span>
        </div>
        <div class="tbl-wrap">
            <table class="tbl">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Instansi</th>
                        <th>Karyawan</th>
                        <th>Total Hadir</th>
                        <th>Kehadiran</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($rekapInstansi as $i => $rekap)
                    @php
                        $pct = $rekap['persen_hadir'];
                        $fillClass  = $pct >= 80 ? '' : ($pct >= 60 ? 'warn' : 'err');
                        $badgeClass = $pct >= 80 ? 'badge-ok' : ($pct >= 60 ? 'badge-warn' : 'badge-err');
                        $badgeLabel = $pct >= 80 ? 'Baik' : ($pct >= 60 ? 'Cukup' : 'Rendah');
                    @endphp
                    <tr>
                        <td style="color:var(--muted2);font-size:.8rem;">{{ $i+1 }}</td>
                        <td>
                            <div class="ins-cell">
                                <div class="ins-av">{{ strtoupper(substr($rekap['nama'], 0, 1)) }}</div>
                                <div style="font-weight:700;font-size:.875rem;">{{ $rekap['nama'] }}</div>
                            </div>
                        </td>
                        <td style="font-weight:700;">{{ $rekap['total_karyawan'] }}</td>
                        <td style="font-weight:700;color:var(--ok);">{{ $rekap['total_hadir'] }}</td>
                        <td style="min-width:160px;">
                            <div class="prog-wrap">
                                <div class="prog-bar">
                                    <div class="prog-fill {{ $fillClass }}" style="width:{{ $pct }}%"></div>
                                </div>
                                <span class="prog-pct">{{ $pct }}%</span>
                            </div>
                        </td>
                        <td><span class="badge {{ $badgeClass }}">{{ $badgeLabel }}</span></td>
                        <td>
                            <a href="{{ route('admin.instansi.show', $rekap['id']) }}"
                               style="font-size:.8rem;font-weight:700;color:var(--p);text-decoration:none;">
                                Detail →
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="7">
                        <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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg>
                            <p>Belum ada data absensi bulan ini</p>
                        </div>
                    </td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>

@push('scripts')
<script>
const labels = @json($chartLabels);
const data   = @json($chartData);

new Chart(document.getElementById('chartAbsensi'), {
    type: 'bar',
    data: {
        labels,
        datasets: [{
            label: 'Total Absensi Masuk',
            data,
            backgroundColor: 'rgba(79,70,229,.15)',
            borderColor: '#4f46e5',
            borderWidth: 2,
            borderRadius: 6,
            borderSkipped: false,
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false },
            tooltip: { callbacks: { label: ctx => ` ${ctx.parsed.y} absensi` } }
        },
        scales: {
            x: { grid: { display: false }, ticks: { font: { family: 'Plus Jakarta Sans', size: 11 } } },
            y: { grid: { color: '#f1f5f9' }, ticks: { font: { family: 'Plus Jakarta Sans', size: 11 } }, beginAtZero: true }
        }
    }
});
</script>
@endpush

</x-app-layout>