<x-app-layout>
@push('styles')
    <link rel="stylesheet" href="{{ asset('css/tugas.css') }}">
    <style>
        .pug-nav-tabs {
            display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap;
        }
        .pug-nav-item {
            padding: 12px 20px; border-radius: 12px; font-size: 13px; font-weight: 700;
            border: 1px solid var(--pug-border); color: var(--pug-t2);
            background: var(--pug-white); cursor: pointer; transition: all .2s; font-family: var(--pug-font);
            display: flex; align-items: center; gap: 8px; text-decoration: none;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }
        .pug-nav-item i { font-size: 14px; opacity: 0.7; }
        .pug-nav-item:hover { border-color: var(--pug-green); color: var(--pug-green); background: var(--pug-green-l); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26,122,74,0.1); }
        .pug-nav-item.active { border-color: var(--pug-green); color: var(--pug-green); background: var(--pug-green-l); box-shadow: 0 4px 12px rgba(26,122,74,0.15); }
        .pug-nav-item.active i { opacity: 1; }
    </style>
@endpush

<div class="pug-wrap">
    <div class="pug-inner">
        
        {{-- ── PAGE HEADER ── --}}
        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;">
            <div style="display:flex; align-items:center; gap:15px;">
                <div class="pug-icon-wrap" style="width: 54px; height: 54px; font-size: 22px;">
                    <i class="fas fa-chart-pie"></i>
                </div>
                <div>
                    <h1 class="pug-page-title" style="font-size: 24px;">Laporan Sistem</h1>
                    <p class="pug-page-sub">Statistik dan rincian operasional PDAM • {{ date('F Y') }}</p>
                </div>
            </div>
        </div>

        {{-- ── TAB NAVIGATION ── --}}
        <div class="pug-nav-tabs">
            <a href="{{ route('laporan.index') }}" class="pug-nav-item active">
                <i class="fas fa-th-large"></i> Ringkasan
            </a>
            <a href="{{ route('laporan.kasbon') }}" class="pug-nav-item">
                <i class="fas fa-hand-holding-usd"></i> Kasbon
            </a>
            <a href="{{ route('laporan.absensi') }}" class="pug-nav-item">
                <i class="fas fa-calendar-check"></i> Kehadiran
            </a>
            <a href="{{ route('laporan.teknisi') }}" class="pug-nav-item">
                <i class="fas fa-users"></i> Performa Teknisi
            </a>
            <a href="{{ route('laporan.pekerjaan') }}" class="pug-nav-item">
                <i class="fas fa-tasks"></i> Pekerjaan
            </a>
            <a href="{{ route('laporan.penggajian') }}" class="pug-nav-item">
                <i class="fas fa-money-check-alt"></i> Penggajian
            </a>
            <a href="{{ route('laporan.data_teknisi') }}" class="pug-nav-item">
                <i class="fas fa-id-card"></i> Data Teknisi
            </a>
        </div>

        {{-- ── STATS ── --}}
        <div class="pug-stats" style="grid-template-columns: repeat(4, 1fr);">
            <div class="pug-stat pug-stat-total">
                <div class="pug-stat-icon"><i class="fas fa-users"></i></div>
                <div class="pug-stat-label">TOTAL TENAGA KERJA</div>
                <div class="pug-stat-val">{{ $statistics['total_teknisi'] ?? 0 }}</div>
                <div class="pug-page-sub">{{ $statistics['teknisi_aktif'] ?? 0 }} aktif • {{ $statistics['teknisi_nonaktif'] ?? 0 }} nonaktif</div>
            </div>
            <div class="pug-stat pug-stat-selesai">
                <div class="pug-stat-icon"><i class="fas fa-tasks"></i></div>
                <div class="pug-stat-label">PEKERJAAN BULAN INI</div>
                <div class="pug-stat-val">{{ $statistics['selesai'] ?? 0 }}</div>
                <div class="pug-page-sub">{{ $statistics['progress'] ?? 0 }} proses • {{ $statistics['pending'] ?? 0 }} pending</div>
            </div>
            <div class="pug-stat pug-stat-batal">
                <div class="pug-stat-icon" style="background: var(--pug-rose-l); color: var(--pug-rose);"><i class="fas fa-hand-holding-usd"></i></div>
                <div class="pug-stat-label">KASBON BELUM LUNAS</div>
                <div class="pug-stat-val" style="font-size: 24px; margin-top: 8px;">Rp {{ number_format($statistics['total_belum_lunas'] ?? 0, 0, ',', '.') }}</div>
                <div class="pug-page-sub">Dari {{ $statistics['total_kasbon'] ?? 0 }} total kasbon</div>
            </div>
            <div class="pug-stat pug-stat-proses">
                <div class="pug-stat-icon"><i class="fas fa-calendar-check"></i></div>
                <div class="pug-stat-label">KEHADIRAN BULAN INI</div>
                <div class="pug-stat-val">{{ $statistics['hadir'] ?? 0 }}</div>
                <div class="pug-page-sub">{{ $statistics['izin'] ?? 0 }} izin • {{ $statistics['sakit'] ?? 0 }} sakit • {{ $statistics['alpha'] ?? 0 }} alpha</div>
            </div>
        </div>

        {{-- ── TABLES ── --}}
        
        <!-- Kasbon Terbaru -->
        <div class="pug-panel" style="margin-bottom: 24px;">
            <div class="pug-panel-head">
                <div class="pug-panel-head-left">
                    <i class="fas fa-hand-holding-usd" style="color:var(--pug-amber); margin-right:8px;"></i>
                    Kasbon Terbaru
                </div>
                <div class="pug-panel-head-right">
                    <a href="{{ route('laporan.kasbon') }}" style="color: var(--pug-green); text-decoration: none; font-weight: 700; font-size: 12px;">Lihat Semua <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            <div style="overflow-x:auto;">
                <table class="pug-table">
                    <thead>
                        <tr>
                            <th>Teknisi</th>
                            <th>Tanggal</th>
                            <th>Jumlah</th>
                            <th>Status</th>
                            <th>Keperluan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentKasbon as $item)
                        <tr>
                            <td>
                                <div style="display:flex; align-items:center; gap:12px;">
                                    <div class="pug-av">{{ strtoupper(substr($item->nama_teknisi ?? '?', 0, 2)) }}</div>
                                    <div class="pug-av-name">{{ $item->nama_teknisi ?? '-' }}</div>
                                </div>
                            </td>
                            <td><div class="pug-date">{{ \Carbon\Carbon::parse($item->tanggal_kasbon)->format('d M Y') }}</div></td>
                            <td><div class="pug-money">Rp {{ number_format($item->jumlah_kasbon, 0, ',', '.') }}</div></td>
                            <td>
                                <span class="pug-badge {{ $item->status == 'lunas' ? 'pug-badge-green' : 'pug-badge-rose' }}">
                                    <i class="fas {{ $item->status == 'lunas' ? 'fa-check-circle' : 'fa-times-circle' }}"></i> {{ strtoupper($item->status) }}
                                </span>
                            </td>
                            <td><span style="font-size: 12px; color: var(--pug-t3);">{{ $item->keperluan ?? '-' }}</span></td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5">
                                <div class="pug-empty" style="padding: 40px 20px;">
                                    <div class="pug-empty-title">Tidak ada data kasbon</div>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
            <!-- Absensi Terbaru -->
            <div class="pug-panel">
                <div class="pug-panel-head">
                    <div class="pug-panel-head-left">
                        <i class="fas fa-calendar-check" style="color:var(--pug-cyan); margin-right:8px;"></i>
                        Absensi Terbaru
                    </div>
                    <div class="pug-panel-head-right">
                        <a href="{{ route('laporan.absensi') }}" style="color: var(--pug-green); text-decoration: none; font-weight: 700; font-size: 12px;">Semua <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div style="overflow-x:auto;">
                    <table class="pug-table">
                        <thead>
                            <tr>
                                <th>Teknisi</th>
                                <th>Tanggal</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentAbsensi as $item)
                            <tr>
                                <td>
                                    <div style="display:flex; align-items:center; gap:8px;">
                                        <div class="pug-av" style="width:28px; height:28px; font-size:10px;">{{ strtoupper(substr($item->nama_teknisi ?? '?', 0, 2)) }}</div>
                                        <div class="pug-av-name" style="font-size:12px;">{{ $item->nama_teknisi ?? '-' }}</div>
                                    </div>
                                </td>
                                <td><div class="pug-date">{{ \Carbon\Carbon::parse($item->tanggal)->format('d M Y') }}</div></td>
                                <td>
                                    @php
                                        $st = strtolower($item->status);
                                        $bc = 'pug-badge-amber'; $ic = 'fa-clock';
                                        if($st == 'hadir') { $bc = 'pug-badge-green'; $ic = 'fa-check-circle'; }
                                        if(in_array($st, ['alpha','sakit'])) { $bc = 'pug-badge-rose'; $ic = 'fa-times-circle'; }
                                        if($st == 'izin') { $bc = 'pug-badge-violet'; $ic = 'fa-info-circle'; }
                                    @endphp
                                    <span class="pug-badge {{ $bc }}" style="font-size:10px; padding: 2px 8px;">
                                        <i class="fas {{ $ic }}"></i> {{ strtoupper($item->status) }}
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="3"><div class="pug-empty" style="padding: 30px 20px;"><div class="pug-empty-title">Tidak ada data</div></div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Pekerjaan Terbaru -->
            <div class="pug-panel">
                <div class="pug-panel-head">
                    <div class="pug-panel-head-left">
                        <i class="fas fa-tasks" style="color:var(--pug-violet); margin-right:8px;"></i>
                        Pekerjaan Terbaru
                    </div>
                    <div class="pug-panel-head-right">
                        <a href="{{ route('laporan.pekerjaan') }}" style="color: var(--pug-green); text-decoration: none; font-weight: 700; font-size: 12px;">Semua <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div style="overflow-x:auto;">
                    <table class="pug-table">
                        <thead>
                            <tr>
                                <th>Pekerjaan</th>
                                <th>Teknisi</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentPekerjaan as $item)
                            <tr>
                                <td>
                                    <div>
                                        <div class="pug-av-name" style="font-size:12px;">{{ $item->jenis_pekerjaan ?? '-' }}</div>
                                        <div class="pug-av-sub">#{{ $item->id_penugasan }}</div>
                                    </div>
                                </td>
                                <td>
                                    <div style="display:flex; align-items:center; gap:8px;">
                                        <div class="pug-av" style="width:28px; height:28px; font-size:10px;">{{ strtoupper(substr($item->nama_teknisi ?? '?', 0, 2)) }}</div>
                                        <div class="pug-av-name" style="font-size:12px;">{{ $item->nama_teknisi ?? '-' }}</div>
                                    </div>
                                </td>
                                <td>
                                    @php
                                        $sp = strtolower($item->status_pekerjaan ?? 'pending');
                                        $bcp = 'pug-badge-muted'; $icp = 'fa-clock';
                                        if($sp == 'selesai') { $bcp = 'pug-badge-green'; $icp = 'fa-check-circle'; }
                                        if($sp == 'proses' || $sp == 'dalam_proses') { $bcp = 'pug-badge-violet'; $icp = 'fa-spinner'; }
                                    @endphp
                                    <span class="pug-badge {{ $bcp }}" style="font-size:10px; padding: 2px 8px;">
                                        <i class="fas {{ $icp }}"></i> {{ strtoupper(str_replace('_', ' ', $item->status_pekerjaan ?? '-')) }}
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="3"><div class="pug-empty" style="padding: 30px 20px;"><div class="pug-empty-title">Tidak ada data</div></div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
</x-app-layout>