<x-app-layout title="Monitoring Absensi">
@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
:root{
    --primary:#4f46e5;--primary-d:#3730a3;--primary-l:#eef2ff;--primary-m:rgba(79,70,229,.12);
    --success:#059669;--success-l:#ecfdf5;--danger:#dc2626;--danger-l:#fef2f2;
    --warning:#d97706;--warning-l:#fffbeb;--sky:#0284c7;--sky-l:#e0f2fe;
    --text:#0f172a;--muted:#64748b;--muted2:#94a3b8;
    --border:#e2e8f0;--bg:#f0f4ff;--white:#ffffff;
    --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:1200px;margin:0 auto;padding:28px 28px 60px;}

/* header */
.pg-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;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;}
.hd-btns{display:flex;gap:8px;align-items:center;}
.btn-nav{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:10px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none;border:none;transition:all .15s;white-space:nowrap;}
.btn-nav svg{width:13px;height:13px;stroke:currentColor;}
.btn-back{background:var(--white);color:var(--muted);border:1.5px solid var(--border);}
.btn-back:hover{background:var(--primary-l);color:var(--primary);border-color:rgba(79,70,229,.3);}
.btn-print{background:var(--primary);color:white;box-shadow:0 4px 14px var(--primary-m);}
.btn-print:hover{background:var(--primary-d);}

/* KPI */
.kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px;}
.kpi-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:14px 16px;box-shadow:var(--sh);cursor:pointer;transition:all .15s;position:relative;overflow:hidden;text-decoration:none;display:block;}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:16px 16px 0 0;}
.kpi-card.k-all::before{background:linear-gradient(90deg,var(--primary),#818cf8);}
.kpi-card.k-hadir::before{background:linear-gradient(90deg,var(--success),#34d399);}
.kpi-card.k-telat::before{background:linear-gradient(90deg,var(--warning),#fbbf24);}
.kpi-card.k-belum::before{background:linear-gradient(90deg,#94a3b8,#64748b);}
.kpi-card.k-izin::before{background:linear-gradient(90deg,#3b82f6,#60a5fa);}
.kpi-card.k-sakit::before{background:linear-gradient(90deg,#e11d48,#f43f5e);}
.kpi-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.1);}
.kpi-card.active{box-shadow:0 8px 24px rgba(79,70,229,.2);border-color:var(--primary);}
.kpi-num{font-size:1.6rem;font-weight:900;letter-spacing:-.04em;line-height:1;margin-bottom:3px;}
.kpi-lbl{font-size:11px;font-weight:700;color:var(--muted);}
.k-all .kpi-num{color:var(--primary);}
.k-hadir .kpi-num{color:var(--success);}
.k-telat .kpi-num{color:var(--warning);}
.k-belum .kpi-num{color:var(--muted);}
.k-izin .kpi-num{color:#3b82f6;}
.k-sakit .kpi-num{color:#e11d48;}

/* 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: 150px;}
.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:var(--primary);}
.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;justify-content:center;gap:5px;}
.filter-btn.primary{background:var(--primary);color:#fff;}
.filter-btn.reset{background:#f1f5f9;color:var(--muted);border:1.5px solid var(--border);text-decoration: none;}

/* 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;gap:10px;}
.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;}

.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 td{padding:11px 16px;vertical-align:middle;border-bottom:1px solid #f8f9fc;}

/* Status Pills */
.status-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:100px;font-size:11.5px;font-weight:700;white-space: nowrap;}
.status-pill::before{content:'';width:6px;height:6px;border-radius:50%;}
.sp-hadir{background:#dcfce7;color:#065f46;border:1px solid #a7f3d0;} .sp-hadir::before{background:#10b981;}
.sp-terlambat{background:#fef9c3;color:#92400e;border:1px solid #fde68a;} .sp-terlambat::before{background:#f59e0b;}
.sp-belum{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0;} .sp-belum::before{background:#94a3b8;}
.sp-izin{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;} .sp-izin::before{background:#3b82f6;}
.sp-sakit{background:#fff1f2;color:#9f1239;border:1px solid #fecdd3;} .sp-sakit::before{background:#e11d48;}

/* components */
.kar-cell{display:flex;align-items:center;gap:9px;}
.kar-av{width:36px;height:36px;border-radius:10px;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;}
.foto-thumb{width:38px;height:38px;border-radius:8px;object-fit:cover;border:2px solid #e2e8f0;cursor:pointer;}
.foto-empty{width:38px;height:38px;border-radius:8px;background:#f8fafc;border:1.5px dashed #e2e8f0;display:flex;align-items:center;justify-content:center;}
.tbl-action{font-size:11px;font-weight:700;color:var(--primary);text-decoration:none;padding:6px 12px;background:var(--primary-l);border-radius:8px;display:inline-block;}

/* RESPONSIVE STRATEGY */
@media (max-width: 1024px) {
    .kpi-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .wrap { padding: 16px 16px 80px; }
    .pg-hd { flex-direction: column; align-items: flex-start; }
    .hd-btns { width: 100%; }
    .btn-nav { flex: 1; justify-content: center; }
    
    /* Stacking Table */
    .tbl thead { display: none; }
    .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
    .tbl tr { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 8px 0; background: #fff; }
    .tbl td { text-align: right; padding: 10px 16px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
    .tbl td:last-child { border-bottom: none; }
    .tbl td::before { content: attr(data-label); font-weight: 800; text-transform: uppercase; font-size: 10px; color: var(--muted2); }
    
    .kar-cell { text-align: left; }
    .filter-row { flex-direction: column; align-items: stretch; }
    .filter-group { min-width: 100%; }
}

@media (max-width: 480px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .pg-title { font-size: 1.15rem; }
}

/* MODAL & PRINT (Tetap sama) */
.foto-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:9999;align-items:center;justify-content:center;padding: 20px;}
.foto-modal.open{display:flex;}
.foto-modal-inner{position:relative;max-width:400px;width:100%;}
.foto-modal img{width:100%;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.foto-modal-close{position:absolute;top:-12px;right:-12px;width:32px;height:32px;border-radius:50%;background:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;}

@media print{
    .pg-hd,.kpi-row,.filter-panel,.pagi-wrap,.foto-modal,.hd-btns,.tbl-action{display:none!important;}
    .tbl{display: table !important;} .tbl thead{display: table-header-group !important;}
    .tbl tr{display: table-row !important; border: none !important;}
    .tbl td{display: table-cell !important; text-align: left !important;}
    .tbl td::before{display: none !important;}
}
</style>
@endpush

@php
    $baseUrl = route('instansi.absensi.index');
    $avatarColors = ['#6d28d9','#0284c7','#059669','#d97706','#dc2626','#475569'];
    
    // Pagination helpers
    $lastPage = max(1, ceil($total / $perPage));
    $firstItem = ($page - 1) * $perPage + 1;
    $paginateQuery = fn($p) => http_build_query(array_merge(request()->except('page'), ['page' => $p]));
@endphp

<div class="wrap">
    {{-- HEADER --}}
    <div class="pg-hd">
        <div>
            <div class="pg-title">Monitoring Absensi</div>
            <div class="pg-sub">
                @if($bulan) {{ \Carbon\Carbon::createFromFormat('Y-m',$bulan)->isoFormat('MMMM YYYY') }}
                @else {{ \Carbon\Carbon::parse($tanggal)->isoFormat('dddd, D MMMM YYYY') }} @endif
            </div>
        </div>
        <div class="hd-btns">
            <a href="{{ route('dashboard') }}" class="btn-nav btn-back">Dashboard</a>
            <button onclick="cetakLaporan()" class="btn-nav btn-print">Cetak</button>
        </div>
    </div>

    {{-- KPI CARDS --}}
    <div class="kpi-row">
        <a href="{{ $baseUrl }}?{{ http_build_query(request()->except(['status','page'])) }}" class="kpi-card k-all {{ !$status ? 'active' : '' }}">
            <div class="kpi-num">{{ $totalKaryawan }}</div>
            <div class="kpi-lbl">Semua</div>
        </a>
        @foreach(['hadir'=>'Tepat Waktu','terlambat'=>'Terlambat','belum_absen'=>'Belum Absen','izin'=>'Izin','sakit'=>'Sakit'] as $k => $v)
            @php 
                $count = match($k){ 'hadir'=>$statTepat,'terlambat'=>$statTerlambat,'belum_absen'=>$statBelum,'izin'=>$statIzin,'sakit'=>$statSakit };
                $class = match($k){ 'hadir'=>'k-hadir','terlambat'=>'k-telat','belum_absen'=>'k-belum','izin'=>'k-izin','sakit'=>'k-sakit' };
            @endphp
            <a href="{{ $baseUrl }}?{{ http_build_query(array_merge(request()->except(['status','page']), ['status'=>$k])) }}" class="kpi-card {{ $class }} {{ $status===$k ? 'active' : '' }}">
                <div class="kpi-num">{{ $count }}</div>
                <div class="kpi-lbl">{{ $v }}</div>
            </a>
        @endforeach
    </div>

    {{-- FILTER PANEL --}}
    <div class="filter-panel">
        <form method="GET" action="{{ route('instansi.absensi.index') }}">
            <div class="filter-row">
                <div class="filter-group">
                    <span class="filter-lbl">{{ request('bulan') ? 'Bulan' : 'Tanggal' }}</span>
                    @if(request('bulan'))
                        <input type="month" name="bulan" value="{{ $bulan }}" class="filter-input">
                    @else
                        <input type="date" name="tanggal" value="{{ $tanggal }}" class="filter-input">
                    @endif
                </div>

                <div class="filter-group">
                    <span class="filter-lbl">Karyawan</span>
                    <select name="karyawan_id" class="filter-input">
                        <option value="">Semua Karyawan</option>
                        @foreach($karyawanList as $kar)
                            <option value="{{ $kar->id }}" @selected($karyawanId == $kar->id)>{{ $kar->nama }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="filter-group" style="flex: 0 0 auto; flex-direction: row; gap: 8px;">
                    <button type="submit" class="filter-btn primary">Filter</button>
                    <a href="{{ route('instansi.absensi.index') }}" class="filter-btn reset">Reset</a>
                </div>
            </div>
        </form>
    </div>

    {{-- TABLE --}}
    <div class="panel">
        <div class="panel-hd">
            <span class="panel-hd-title">Daftar Kehadiran</span>
            <span class="panel-hd-badge">{{ $total }} Data</span>
        </div>

        <table class="tbl">
            <thead>
                <tr>
                    <th>Karyawan</th>
                    <th>Status</th>
                    <th>Absensi (M/P)</th>
                    <th>Jam</th>
                    <th>Lokasi</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($paginated as $i => $row)
                @php
                    $inisial = strtoupper(substr($row['nama'], 0, 1));
                    $color   = $avatarColors[ord($inisial) % count($avatarColors)];
                    $spClass = match($row['status']){ 'hadir'=>'sp-hadir','terlambat'=>'sp-terlambat','izin'=>'sp-izin','sakit'=>'sp-sakit',default=>'sp-belum' };
                @endphp
                <tr>
                    <td data-label="Karyawan">
                        <div class="kar-cell">
                            <div class="kar-av" style="background:{{ $color }}">{{ $inisial }}</div>
                            <div style="text-align: left">
                                <div class="kar-name">{{ $row['nama'] }}</div>
                                <div class="kar-jab">{{ $row['jabatan'] }}</div>
                            </div>
                        </div>
                    </td>
                    <td data-label="Status">
                        <span class="status-pill {{ $spClass }}">{{ ucfirst(str_replace('_',' ',$row['status'])) }}</span>
                    </td>
                    <td data-label="Foto Absen">
                        <div style="display:flex; gap:8px; justify-content: flex-end;">
                            @if($row['foto_masuk'])
                                <img src="{{ $row['foto_masuk'] }}" class="foto-thumb" onclick="openFoto('{{ $row['foto_masuk'] }}', 'Masuk')">
                            @else <div class="foto-empty">M</div> @endif
                            
                            @if($row['foto_pulang'])
                                <img src="{{ $row['foto_pulang'] }}" class="foto-thumb" onclick="openFoto('{{ $row['foto_pulang'] }}', 'Pulang')">
                            @else <div class="foto-empty">P</div> @endif
                        </div>
                    </td>
                    <td data-label="Jam Masuk/Pulang">
                        <div style="text-align: right">
                            <div class="kar-name">{{ $row['jam_masuk'] ?? '--:--' }}</div>
                            <div class="kar-jab">{{ $row['jam_pulang'] ?? '--:--' }}</div>
                        </div>
                    </td>
                    <td data-label="Lokasi">
                        @if($row['latitude'])
                            <a href="https://www.google.com/maps?q={{ $row['latitude'] }},{{ $row['longitude'] }}" target="_blank" class="tbl-action">Maps</a>
                        @else <span class="kar-jab">--</span> @endif
                    </td>
                    <td data-label="Aksi">
                        <a href="{{ route('instansi.karyawan.show', $row['id']) }}" class="tbl-action">Profil</a>
                    </td>
                </tr>
                @empty
                <tr><td colspan="6" style="text-align:center; padding:40px;">Tidak ada data.</td></tr>
                @endforelse
            </tbody>
        </table>

        {{-- PAGINATION --}}
        @if($lastPage > 1)
        <div class="panel-hd" style="border-top: 1px solid #f1f5f9;">
            <div class="kar-jab">Hal {{ $page }} dari {{ $lastPage }}</div>
            <div style="display:flex; gap:5px;">
                @if($page > 1)
                    <a href="?{{ $paginateQuery($page-1) }}" class="filter-btn reset" style="padding:4px 10px;">Prev</a>
                @endif
                @if($page < $lastPage)
                    <a href="?{{ $paginateQuery($page+1) }}" class="filter-btn reset" style="padding:4px 10px;">Next</a>
                @endif
            </div>
        </div>
        @endif
    </div>
</div>

{{-- MODAL FOTO --}}
<div class="foto-modal" id="fotoModal" onclick="if(event.target===this)closeFoto()">
    <div class="foto-modal-inner">
        <button class="foto-modal-close" onclick="closeFoto()">&times;</button>
        <img id="fotoModalImg" src="">
        <div id="fotoModalLabel" style="color:#fff; text-align:center; margin-top:10px; font-weight:700;"></div>
    </div>
</div>

@push('scripts')
<script>
function openFoto(url, label) {
    document.getElementById('fotoModalImg').src = url;
    document.getElementById('fotoModalLabel').innerText = 'Foto ' + label;
    document.getElementById('fotoModal').classList.add('open');
}
function closeFoto() {
    document.getElementById('fotoModal').classList.remove('open');
}
function cetakLaporan() {
    window.print();
}
</script>
@endpush
</x-app-layout>