@extends('pages.layout.dashboard_layout')
@section('topbar_title', 'Dashboard Utama')
@section('topbar_sub', \Carbon\Carbon::now()->translatedFormat('l, d F Y') . ' · Shift Pagi')

@section('topbar_actions')
    <span class="badge-hse badge-hijau d-none d-sm-inline-flex align-items-center gap-1">
        <span style="width:7px;height:7px;border-radius:50%;background:var(--hse-green);display:inline-block;"></span>
        Sistem Aktif
    </span>

    <a href="{{ route('pelanggaran-types.index') }}" class="btn btn-sm text-white"
        style="background:var(--hse-green);border:none;border-radius:8px;font-size:.8rem;">
        <i class="bi bi-plus me-1"></i>
        <span class="d-none d-md-inline">Tilang Baru</span>
    </a>
@endsection

@section('content')
    <div class="p-3 p-lg-4">

        {{-- ── FILTER BULAN ──────────────────────────────────────── --}}
        <form method="GET" action="{{ route('dashboard') }}" class="d-flex gap-2 mb-4 flex-wrap">
            <select name="bulan" class="form-select form-select-sm" style="width:auto;">
                @foreach (range(1, 12) as $b)
                    <option value="{{ $b }}" @selected($b == $filterBulan)>
                        {{ \Carbon\Carbon::create()->month($b)->translatedFormat('F') }}
                    </option>
                @endforeach
            </select>
            <select name="tahun" class="form-select form-select-sm" style="width:auto;">
                @foreach (range(date('Y') - 2, date('Y')) as $t)
                    <option value="{{ $t }}" @selected($t == $filterTahun)>{{ $t }}</option>
                @endforeach
            </select>
            <button type="submit" class="btn btn-sm text-white"
                style="background:var(--hse-green);border:none;border-radius:8px;">
                <i class="bi bi-funnel me-1"></i> Filter
            </button>
        </form>

        {{-- ── ALERT BANNER ──────────────────────────────────────── --}}
        @if ($lokasiRawan->count() > 0)
            <div class="alert-banner mb-4">
                <div class="alert-icon">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                </div>
                <div>
                    <div class="fw-600" style="font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;">
                        Peringatan Zona Rawan K3
                    </div>
                    <div style="font-size:.825rem;opacity:.8;margin-top:2px;">
                        {{ $lokasiRawan->count() }} titik rawan terdeteksi —
                        @foreach ($lokasiRawan->take(3) as $l)
                            {{ $l->lokasi }}@unless ($loop->last)
                            ,
                        @endunless
                    @endforeach
                    · Total <strong>{{ $totalTilangBulanIni }}</strong> tilang bulan ini
                </div>
            </div>
            <button class="btn btn-sm text-white d-none d-md-block ms-auto"
                style="border:1px solid rgba(255,255,255,.3);border-radius:8px;white-space:nowrap;">
                Lihat Detail
            </button>
        </div>
    @endif

    {{-- ── STAT CARDS ────────────────────────────────────────── --}}
    <div class="row g-3 mb-4">

        {{-- Total Tilang Bulan Ini --}}
        <div class="col-6 col-xl-3">
            <div class="stat-card">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="icon-wrap ic-red"><i class="bi bi-file-earmark-x"></i></div>
                    <span class="badge-hse badge-merah">
                        {{ \Carbon\Carbon::create()->month($filterBulan)->translatedFormat('M') }}
                    </span>
                </div>
                <p class="stat-label">Total Tilang</p>
                <p class="stat-value" style="color:#1a1a1a;">{{ $totalTilangBulanIni }}</p>
                <p class="stat-delta" style="color:#888;">
                    <i class="bi bi-archive"></i> {{ $totalTilangAllTime }} sepanjang waktu
                </p>
            </div>
        </div>

        {{-- Top Pelanggaran --}}
        <div class="col-6 col-xl-3">
            <div class="stat-card">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="icon-wrap ic-amber"><i class="bi bi-cone-striped"></i></div>
                    <span class="badge-hse badge-kuning">Terbanyak</span>
                </div>
                <p class="stat-label">
                    {{ $topPelanggaran->first()['nama'] ?? 'Pelanggaran APD' }}
                </p>
                <p class="stat-value" style="color:#1a1a1a;">
                    {{ $topPelanggaran->first()['total'] ?? 0 }}
                </p>
                <p class="stat-delta delta-up">
                    <i class="bi bi-arrow-up-short"></i> Pelanggaran terbanyak bulan ini
                </p>
            </div>
        </div>

        {{-- Karyawan Terlibat --}}
        <div class="col-6 col-xl-3">
            <div class="stat-card">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="icon-wrap ic-green"><i class="bi bi-shield-check"></i></div>
                    <span class="badge-hse badge-hijau">Bulan Ini</span>
                </div>
                <p class="stat-label">Karyawan Terlibat</p>
                <p class="stat-value" style="color:var(--hse-green);">{{ $totalKaryawanTerlibat }}</p>
                <p class="stat-delta" style="color:#888;">
                    dari total {{ $totalKaryawan }} karyawan
                </p>
            </div>
        </div>

        {{-- Lokasi Rawan --}}
        <div class="col-6 col-xl-3">
            <div class="stat-card">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="icon-wrap ic-blue"><i class="bi bi-geo-alt-fill"></i></div>
                    <span class="badge-hse badge-biru">Rawan</span>
                </div>
                <p class="stat-label">Lokasi Rawan</p>
                <p class="stat-value" style="color:#1a1a1a;">{{ $lokasiRawan->count() }}</p>
                <p class="stat-delta" style="color:#888;">
                    <i class="bi bi-geo"></i>
                    {{ $lokasiRawan->first()->lokasi ?? '-' }}
                </p>
            </div>
        </div>

    </div>

    {{-- ── CHART + DONUT ──────────────────────────────────────── --}}
   

    {{-- ── TABLE TILANG TERBARU ───────────────────────────────── --}}
    <div class="row g-3">
        <div class="col-xl-7">
            <div class="panel">
                <div class="panel-header">
                    <p class="panel-title">Tilang Terbaru</p>
                    <a href="#" style="font-size:12px;color:var(--hse-green);text-decoration:none;">Lihat Semua
                        →</a>
                </div>
                <div class="table-responsive">
                    <table class="table tilang-table mb-0">
                        <thead>
                            <tr>
                                <th>Karyawan</th>
                                <th>Pelanggaran</th>
                                <th>Lokasi</th>
                                <th>Waktu</th>
                                <th>Sanksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($tilangTerbaru as $t)
                                <tr>
                                    <td>
                                        <span style="font-family:'Syne',sans-serif;font-weight:600;font-size:12px;">
                                            {{ $t['karyawan'] }}
                                        </span>
                                        <br>
                                        <span style="color:#aaa;font-size:11px;">{{ $t['nik'] }}</span>
                                    </td>
                                    <td style="font-size:12px;">
                                        {{ \Illuminate\Support\Str::limit($t['pelanggaran'], 30) }}
                                    </td>
                                    <td><span style="color:#888;font-size:12px;">{{ $t['lokasi'] ?? '-' }}</span></td>
                                    <td><span style="color:#888;font-size:12px;">{{ $t['tanggal'] }}</span></td>
                                    <td>
                                        @if ($t['sanksi'])
                                            <span class="badge-hse badge-merah">{{ $t['sanksi'] }}</span>
                                        @else
                                            <span class="badge-hse badge-hijau">-</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Top Pelanggar --}}
        <div class="col-xl-5">
            <div class="panel">
                <div class="panel-header">
                    <p class="panel-title">Top Pelanggar Bulan Ini</p>
                    <span class="badge-hse badge-merah">{{ $filterBulan }}/{{ $filterTahun }}</span>
                </div>
                <div class="p-3">
                    @forelse($topPelanggar as $i => $p)
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <div
                                style="
                                width:32px;height:32px;border-radius:50%;
                                background:{{ $i === 0 ? 'var(--hse-red)' : ($i === 1 ? 'var(--hse-amber)' : '#e0e4e0') }};
                                display:flex;align-items:center;justify-content:center;
                                font-size:13px;font-weight:700;color:white;flex-shrink:0;">
                                {{ $i + 1 }}
                            </div>
                            <div style="flex:1;min-width:0;">
                                <div
                                    style="font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                                    {{ $p['nama'] }}
                                </div>
                                <div style="font-size:11px;color:#888;">
                                    {{ $p['nik'] }} · {{ $p['jabatan'] }}
                                </div>
                            </div>
                            <span class="badge-hse badge-merah" style="flex-shrink:0;">
                                {{ $p['total'] }}x
                            </span>
                        </div>
                    @empty
                    @endforelse
                </div>
            </div>
        </div>

    </div>



</div>
@endsection