@extends('layouts.app')

@section('title', 'Monitoring Kelengkapan Data')
@section('body-class', 'page-monitoring-data')

@push('styles')
<style>
    .page-monitoring-data { background:#f3f5f9; }
    .mo-wrap { width:100%; padding:94px clamp(16px,4vw,48px) 60px; box-sizing:border-box; }
    .mo-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
    .mo-title { margin:0; font-size:1.6rem; font-weight:800; color:#16233b; letter-spacing:-.02em; }
    .mo-sub { margin:4px 0 0; color:#6b7688; font-size:.95rem; }
    .mo-select { padding:9px 12px; border:1px solid #d9dee7; border-radius:10px; background:#fff; font-size:.95rem; }

    .mo-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:22px; }
    .mo-card { background:#fff; border:1px solid #e6e9f0; border-radius:16px; padding:20px 22px; box-shadow:0 4px 16px rgba(20,35,60,.05); }
    .mo-card .lbl { color:#6b7688; font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
    .mo-card .val { font-size:2rem; font-weight:800; color:#16233b; margin-top:6px; }
    .mo-card .val small { font-size:1rem; color:#8a94a6; font-weight:600; }

    .mo-panel { background:#fff; border:1px solid #e6e9f0; border-radius:16px; padding:20px 22px; box-shadow:0 4px 16px rgba(20,35,60,.05); margin-bottom:22px; }
    .mo-panel h3 { margin:0 0 16px; font-size:1.05rem; color:#16233b; }

    .mo-bars { display:flex; align-items:flex-end; gap:10px; height:150px; }
    .mo-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
    .mo-bar { width:100%; max-width:44px; background:linear-gradient(180deg,#3f6fd6,#2b4a86); border-radius:6px 6px 0 0; min-height:2px; transition:.2s; }
    .mo-bar-col small { color:#6b7688; font-size:.75rem; }
    .mo-bar-col .pct { color:#16233b; font-weight:700; font-size:.72rem; }

    .mo-legend { display:flex; gap:16px; align-items:center; margin-bottom:12px; flex-wrap:wrap; font-size:.85rem; color:#6b7688; }
    .mo-dot { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
    .dot-lengkap { background:#2e9e5b; } .dot-sebagian { background:#f0a020; } .dot-kosong { background:#e6e9f0; }

    .mo-matrix-scroll { overflow:auto; }
    table.mo-matrix { border-collapse:separate; border-spacing:0; width:100%; font-size:.9rem; }
    .mo-matrix th, .mo-matrix td { padding:9px 8px; text-align:center; border-bottom:1px solid #eef1f6; white-space:nowrap; }
    .mo-matrix thead th { position:sticky; top:0; background:#16233b; color:#fff; font-weight:600; z-index:2; }
    .mo-matrix th.inst, .mo-matrix td.inst { text-align:left; position:sticky; left:0; background:#fff; z-index:1; font-weight:600; color:#2b4a86; }
    .mo-matrix thead th.inst { background:#16233b; color:#fff; z-index:3; }
    .mo-matrix td.inst a { color:#2b4a86; text-decoration:none; }
    .mo-matrix td.inst a:hover { text-decoration:underline; }
    .mo-cell { width:26px; height:26px; border-radius:6px; display:inline-block; }
    .c-lengkap { background:#2e9e5b; } .c-sebagian { background:#f0a020; } .c-kosong { background:#eef1f6; border:1px solid #e0e4ec; }
    .mo-matrix tbody tr:hover td { background:#f6f9ff; }
    .mo-matrix tbody tr:hover td.inst { background:#f6f9ff; }
</style>
@endpush

@section('content')
<div class="mo-wrap">
    <div class="mo-head">
        <div>
            <h1 class="mo-title">Monitoring Kelengkapan Data</h1>
            <p class="mo-sub">Status pengisian data per instansi &middot; Tahun {{ $tahun }}</p>
        </div>
        <form method="GET" action="{{ route('monitoring') }}" style="margin:0;">
            <select class="mo-select" name="tahun" onchange="this.form.submit()">
                @for($y = (int)date('Y') + 1; $y >= 2023; $y--)
                    <option value="{{ $y }}" @selected($y === $tahun)>Tahun {{ $y }}</option>
                @endfor
            </select>
        </form>
    </div>

    {{-- Ringkasan --}}
    <div class="mo-cards">
        <div class="mo-card">
            <div class="lbl">Instansi Dipantau</div>
            <div class="val">{{ $jumlahInstansi }}</div>
        </div>
        <div class="mo-card">
            <div class="lbl">Lengkap Bulan {{ $bulanSingkat[$bulanIni] }}</div>
            <div class="val">{{ $lengkapBulanIni }} <small>/ {{ $jumlahInstansi }}</small></div>
        </div>
        <div class="mo-card">
            <div class="lbl">Kelengkapan {{ $tahun }}</div>
            <div class="val">{{ $persenTahun }}<small>%</small></div>
        </div>
    </div>

    {{-- Grafik tren --}}
    <div class="mo-panel">
        <h3>Tren Kelengkapan per Bulan (% instansi lengkap)</h3>
        <div class="mo-bars">
            @foreach($trend as $b => $pct)
                <div class="mo-bar-col" title="{{ $pct }}% lengkap">
                    <span class="pct">{{ $pct }}%</span>
                    <div class="mo-bar" style="height:{{ max(1, $pct) }}%"></div>
                    <small>{{ $bulanSingkat[$b] }}</small>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Matriks kelengkapan --}}
    <div class="mo-panel">
        <h3>Matriks Kelengkapan</h3>
        <div class="mo-legend">
            <span><span class="mo-dot dot-lengkap"></span>Lengkap (semua kolom terisi)</span>
            <span><span class="mo-dot dot-sebagian"></span>Sebagian</span>
            <span><span class="mo-dot dot-kosong"></span>Kosong</span>
            <span style="margin-left:auto;">Klik nama instansi untuk buka input datanya.</span>
        </div>
        <div class="mo-matrix-scroll">
            <table class="mo-matrix">
                <thead>
                    <tr>
                        <th class="inst">Instansi</th>
                        @foreach($bulanSingkat as $b => $nm)
                            <th>{{ $nm }}</th>
                        @endforeach
                        <th>Lengkap</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($rows as $r)
                        <tr>
                            <td class="inst">
                                <a href="{{ route('data.edit', ['slug' => $r['slug'], 'tahun' => $tahun]) }}">{{ $r['nama'] }}</a>
                            </td>
                            @foreach($r['bulan'] as $b => $st)
                                <td title="{{ $st['terisi'] }}/{{ $st['total'] }} kolom terisi">
                                    <span class="mo-cell c-{{ $st['status'] }}"></span>
                                </td>
                            @endforeach
                            <td><strong>{{ $r['lengkap_count'] }}</strong>/12</td>
                        </tr>
                    @empty
                        <tr><td colspan="14" style="padding:24px; color:#6b7688;">Belum ada instansi yang dipantau.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection
