@extends('layouts.portal')

@section('title', 'Laporan Data Absensi Pegawai Bawahan')

@section('content')
<div class="space-y-6">

    <!-- Header & Action -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white p-6 rounded-2xl border border-slate-200/80 shadow-sm">
        <div class="space-y-1">
            <div class="flex items-center gap-2">
                <span class="px-2.5 py-0.5 rounded-full text-xs font-bold uppercase tracking-wider bg-primary-50 text-primary-600 border border-primary-200/60">
                    Supervisi Kehadiran Tim
                </span>
                <span class="text-xs text-slate-400">&bull;</span>
                <span class="text-xs text-slate-500 font-medium">{{ $daftarBawahan->count() }} Pegawai Bawahan Terdaftar</span>
            </div>
            <h1 class="text-xl sm:text-2xl font-black text-slate-900 tracking-tight flex items-center gap-2.5">
                <i data-lucide="clipboard-check" class="w-7 h-7 text-primary-600"></i>
                <span>Laporan Data Absensi Pegawai Bawahan</span>
            </h1>
            <p class="text-xs sm:text-sm text-slate-500">
                Pantau kedisiplinan, jam masuk-pulang, dan rekapitulasi riwayat presensi seluruh pegawai di bawah supervisi Anda.
            </p>
        </div>

        <div class="flex items-center gap-2.5 flex-wrap">
            <a href="{{ route('portal.absensi-bawahan.cetak', request()->query()) }}" target="_blank"
               class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold shadow-md shadow-slate-900/10 hover:scale-[1.02] active:scale-[0.98] transition-all">
                <i data-lucide="printer" class="w-4 h-4 text-primary-400"></i>
                <span>Cetak / Cetak PDF</span>
            </a>
            <a href="{{ route('portal.dashboard') }}"
               class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold transition-all">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
                <span>Kembali ke Dashboard</span>
            </a>
        </div>
    </div>

    <!-- Filter Panel -->
    <div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm">
        <form method="GET" action="{{ route('portal.absensi-bawahan.index') }}" class="space-y-4">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3.5">
                
                <!-- Tanggal Mulai -->
                <div>
                    <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-1.5">
                        Tanggal Mulai
                    </label>
                    <input type="date" name="tanggal_mulai" value="{{ $tanggalMulai }}"
                           class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all">
                </div>

                <!-- Tanggal Selesai -->
                <div>
                    <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-1.5">
                        Tanggal Selesai
                    </label>
                    <input type="date" name="tanggal_selesai" value="{{ $tanggalSelesai }}"
                           class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all">
                </div>

                <!-- Filter Pegawai Bawahan -->
                <div>
                    <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-1.5">
                        Pegawai Bawahan
                    </label>
                    <select name="pegawai_id" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all">
                        <option value="">Semua Pegawai Bawahan ({{ $daftarBawahan->count() }})</option>
                        @foreach($daftarBawahan as $bawahan)
                        <option value="{{ $bawahan->id }}" {{ (string)$filterPegawaiId === (string)$bawahan->id ? 'selected' : '' }}>
                            {{ $bawahan->nama_lengkap }} ({{ $bawahan->nip }})
                        </option>
                        @endforeach
                    </select>
                </div>

                <!-- Filter Status Kehadiran -->
                <div>
                    <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-1.5">
                        Status Kehadiran
                    </label>
                    <select name="status_kehadiran" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all">
                        <option value="">Semua Status</option>
                        <option value="hadir" {{ $filterStatusKehadiran === 'hadir' ? 'selected' : '' }}>Hadir</option>
                        <option value="izin" {{ $filterStatusKehadiran === 'izin' ? 'selected' : '' }}>Izin</option>
                        <option value="sakit" {{ $filterStatusKehadiran === 'sakit' ? 'selected' : '' }}>Sakit</option>
                        <option value="dinas" {{ $filterStatusKehadiran === 'dinas' ? 'selected' : '' }}>Dinas Luar</option>
                        <option value="alfa" {{ $filterStatusKehadiran === 'alfa' ? 'selected' : '' }}>Alfa</option>
                    </select>
                </div>

                <!-- Filter Ketepatan Masuk -->
                <div>
                    <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-1.5">
                        Ketepatan Jam Masuk
                    </label>
                    <select name="status_masuk" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all">
                        <option value="">Semua</option>
                        <option value="tepat_waktu" {{ $filterStatusMasuk === 'tepat_waktu' ? 'selected' : '' }}>Tepat Waktu</option>
                        <option value="terlambat" {{ $filterStatusMasuk === 'terlambat' ? 'selected' : '' }}>Terlambat</option>
                    </select>
                </div>

            </div>

            <div class="flex items-center justify-between pt-2 border-t border-slate-100 flex-wrap gap-2">
                <div class="text-xs text-slate-400">
                    Menampilkan data periode: <strong class="text-slate-700 font-semibold">{{ \Carbon\Carbon::parse($tanggalMulai)->translatedFormat('d M Y') }}</strong> s/d <strong class="text-slate-700 font-semibold">{{ \Carbon\Carbon::parse($tanggalSelesai)->translatedFormat('d M Y') }}</strong>
                </div>
                <div class="flex items-center gap-2">
                    <a href="{{ route('portal.absensi-bawahan.index') }}" 
                       class="px-4 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-600 text-xs font-semibold transition-colors">
                        Reset Filter
                    </a>
                    <button type="submit" 
                            class="px-5 py-2 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold shadow-sm shadow-primary-600/30 transition-all flex items-center gap-1.5">
                        <i data-lucide="filter" class="w-3.5 h-3.5"></i>
                        <span>Terapkan Filter</span>
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Ringkasan Statistik Metrik Periode Terpilih -->
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3.5">
        
        <!-- Total Kehadiran -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-xs">
            <div class="flex items-center justify-between">
                <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Total Hadir</span>
                <div class="w-8 h-8 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center">
                    <i data-lucide="check-circle" class="w-4 h-4"></i>
                </div>
            </div>
            <div class="mt-2">
                <div class="text-2xl font-black text-slate-900">{{ $stats['total_kehadiran'] }}</div>
                <div class="text-[11px] text-slate-500 mt-0.5">Sesi presensi hadir</div>
            </div>
        </div>

        <!-- Tepat Waktu -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-xs">
            <div class="flex items-center justify-between">
                <span class="text-[11px] font-bold text-blue-600 uppercase tracking-wider">Tepat Waktu</span>
                <div class="w-8 h-8 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center">
                    <i data-lucide="clock" class="w-4 h-4"></i>
                </div>
            </div>
            <div class="mt-2">
                <div class="text-2xl font-black text-blue-600">{{ $stats['tepat_waktu'] }}</div>
                <div class="text-[11px] text-slate-500 mt-0.5">Disiplin sebelum batas</div>
            </div>
        </div>

        <!-- Terlambat -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-xs">
            <div class="flex items-center justify-between">
                <span class="text-[11px] font-bold text-amber-600 uppercase tracking-wider">Terlambat</span>
                <div class="w-8 h-8 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center">
                    <i data-lucide="alert-triangle" class="w-4 h-4"></i>
                </div>
            </div>
            <div class="mt-2">
                <div class="text-2xl font-black text-amber-600">{{ $stats['terlambat'] }}</div>
                <div class="text-[11px] text-slate-500 mt-0.5">Keterlambatan masuk</div>
            </div>
        </div>

        <!-- Izin / Sakit / Dinas -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-xs">
            <div class="flex items-center justify-between">
                <span class="text-[11px] font-bold text-indigo-600 uppercase tracking-wider">Izin / Sakit</span>
                <div class="w-8 h-8 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center">
                    <i data-lucide="file-text" class="w-4 h-4"></i>
                </div>
            </div>
            <div class="mt-2">
                <div class="text-2xl font-black text-indigo-600">{{ $stats['izin_sakit'] }}</div>
                <div class="text-[11px] text-slate-500 mt-0.5">Izin, sakit & dinas</div>
            </div>
        </div>

        <!-- Total Denda -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-xs col-span-2 sm:col-span-1">
            <div class="flex items-center justify-between">
                <span class="text-[11px] font-bold text-rose-600 uppercase tracking-wider">Total Denda</span>
                <div class="w-8 h-8 rounded-xl bg-rose-50 text-rose-600 flex items-center justify-center">
                    <i data-lucide="receipt" class="w-4 h-4"></i>
                </div>
            </div>
            <div class="mt-2">
                <div class="text-xl font-black text-rose-600">Rp {{ number_format($stats['total_denda'], 0, ',', '.') }}</div>
                <div class="text-[11px] text-slate-500 mt-0.5">Estimasi potongan denda</div>
            </div>
        </div>

    </div>

    <!-- Tabel Data Absensi Pegawai Bawahan -->
    <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
        
        <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between flex-wrap gap-2">
            <div>
                <h3 class="text-sm font-extrabold text-slate-900 flex items-center gap-2">
                    <i data-lucide="list" class="w-4 h-4 text-primary-600"></i>
                    <span>Daftar Riwayat Presensi Bawahan</span>
                </h3>
                <p class="text-[11px] text-slate-400">Total ditemukan {{ $absensiList->total() }} baris catatan presensi</p>
            </div>
        </div>

        @if($absensiList->isEmpty())
        <div class="py-14 text-center px-4">
            <div class="w-14 h-14 rounded-2xl bg-slate-50 text-slate-400 flex items-center justify-center mx-auto mb-3 border border-slate-100">
                <i data-lucide="calendar-x" class="w-7 h-7"></i>
            </div>
            <h4 class="text-sm font-bold text-slate-800">Tidak Ada Data Presensi</h4>
            <p class="text-xs text-slate-400 max-w-sm mx-auto mt-1">
                Tidak ditemukan catatan absensi pegawai bawahan untuk filter dan rentang tanggal yang dipilih.
            </p>
        </div>
        @else
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead>
                    <tr class="bg-slate-50/80 text-slate-500 font-bold uppercase tracking-wider border-b border-slate-100">
                        <th class="px-5 py-3.5">Tanggal</th>
                        <th class="px-5 py-3.5">Pegawai Bawahan</th>
                        <th class="px-5 py-3.5">Jam Masuk</th>
                        <th class="px-5 py-3.5">Jam Pulang</th>
                        <th class="px-5 py-3.5">Status Kehadiran</th>
                        <th class="px-5 py-3.5">Jam Kerja / Lokasi</th>
                        <th class="px-5 py-3.5 text-right">Denda</th>
                        <th class="px-5 py-3.5 text-center">Foto</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @foreach($absensiList as $item)
                    <tr class="hover:bg-slate-50/70 transition-colors">
                        
                        <!-- Tanggal -->
                        <td class="px-5 py-3.5 whitespace-nowrap">
                            <div class="font-bold text-slate-800">{{ $item->tanggal->translatedFormat('d M Y') }}</div>
                            <div class="text-[11px] text-slate-400">{{ $item->tanggal->translatedFormat('l') }}</div>
                        </td>

                        <!-- Pegawai Bawahan -->
                        <td class="px-5 py-3.5">
                            <div class="flex items-center gap-3">
                                @if($item->pegawai?->foto_profil)
                                    <img src="{{ asset('storage/' . $item->pegawai->foto_profil) }}" alt="{{ $item->pegawai->nama_lengkap }}" class="w-8 h-8 rounded-xl object-cover shrink-0 ring-1 ring-slate-200">
                                @else
                                    <div class="w-8 h-8 rounded-xl bg-orange-100 text-primary-700 font-bold text-xs flex items-center justify-center shrink-0">
                                        {{ strtoupper(substr($item->pegawai?->nama_lengkap ?? 'NN', 0, 2)) }}
                                    </div>
                                @endif
                                <div class="truncate max-w-[200px]">
                                    <div class="font-bold text-slate-900 truncate">{{ $item->pegawai?->nama_lengkap ?? '-' }}</div>
                                    <div class="text-[11px] text-slate-500 font-mono">{{ $item->pegawai?->nip ?? '-' }} &bull; {{ $item->pegawai?->jabatan?->nama_jabatan ?? 'Pegawai' }}</div>
                                </div>
                            </div>
                        </td>

                        <!-- Jam Masuk -->
                        <td class="px-5 py-3.5 whitespace-nowrap">
                            @if($item->jam_masuk)
                                <div class="font-mono font-bold text-slate-900 text-xs">{{ substr($item->jam_masuk, 0, 5) }} WIB</div>
                                @if($item->status_masuk === 'terlambat')
                                    <span class="inline-flex items-center gap-1 text-[10px] font-bold text-amber-700 bg-amber-50 px-2 py-0.5 rounded-md border border-amber-200/60 mt-0.5">
                                        <i data-lucide="alert-circle" class="w-3 h-3 text-amber-500"></i>
                                        Terlambat {{ $item->menit_terlambat }} mnt
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 text-[10px] font-bold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-md border border-emerald-200/60 mt-0.5">
                                        <i data-lucide="check" class="w-3 h-3 text-emerald-500"></i>
                                        Tepat Waktu
                                    </span>
                                @endif
                            @else
                                <span class="text-slate-400 font-mono">-</span>
                            @endif
                        </td>

                        <!-- Jam Pulang -->
                        <td class="px-5 py-3.5 whitespace-nowrap">
                            @if($item->jam_pulang)
                                <div class="font-mono font-bold text-slate-900 text-xs">{{ substr($item->jam_pulang, 0, 5) }} WIB</div>
                                @if($item->status_pulang === 'pulang_cepat')
                                    <span class="inline-flex items-center gap-1 text-[10px] font-bold text-rose-700 bg-rose-50 px-2 py-0.5 rounded-md border border-rose-200/60 mt-0.5">
                                        Pulang Cepat {{ $item->menit_pulang_cepat }} mnt
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 text-[10px] font-bold text-slate-600 bg-slate-100 px-2 py-0.5 rounded-md mt-0.5">
                                        Selesai Jam Kerja
                                    </span>
                                @endif
                            @else
                                <span class="inline-flex items-center gap-1 text-[10px] text-slate-400 italic">
                                    Belum Pulang
                                </span>
                            @endif
                        </td>

                        <!-- Status Kehadiran -->
                        <td class="px-5 py-3.5 whitespace-nowrap">
                            @if($item->status_kehadiran === 'hadir')
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-bold bg-emerald-100 text-emerald-800">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                    Hadir
                                </span>
                            @elseif($item->status_kehadiran === 'izin')
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-bold bg-blue-100 text-blue-800">
                                    <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
                                    Izin
                                </span>
                            @elseif($item->status_kehadiran === 'sakit')
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-bold bg-amber-100 text-amber-800">
                                    <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
                                    Sakit
                                </span>
                            @elseif($item->status_kehadiran === 'dinas')
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-bold bg-purple-100 text-purple-800">
                                    <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span>
                                    Dinas Luar
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-bold bg-rose-100 text-rose-800">
                                    <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
                                    {{ ucfirst($item->status_kehadiran ?? 'Alfa') }}
                                </span>
                            @endif

                            @if($item->direvisi)
                                <div class="text-[10px] text-amber-600 font-semibold mt-1 flex items-center gap-0.5">
                                    <i data-lucide="edit-3" class="w-2.5 h-2.5"></i> Direvisi
                                </div>
                            @endif
                        </td>

                        <!-- Jam Kerja & Lokasi -->
                        <td class="px-5 py-3.5 whitespace-nowrap">
                            <div class="font-medium text-slate-800">{{ $item->jamKerja?->nama_jam_kerja ?? 'Standar' }}</div>
                            <div class="text-[11px] text-slate-400 truncate max-w-[150px]">
                                {{ $item->lokasiAbsensi?->nama_lokasi ?? 'Lokasi Terdaftar' }}
                            </div>
                        </td>

                        <!-- Denda -->
                        <td class="px-5 py-3.5 whitespace-nowrap text-right font-mono font-bold">
                            @if($item->total_denda > 0)
                                <span class="text-rose-600">Rp {{ number_format($item->total_denda, 0, ',', '.') }}</span>
                            @else
                                <span class="text-slate-400 font-normal">-</span>
                            @endif
                        </td>

                        <!-- Foto Presensi -->
                        <td class="px-5 py-3.5 whitespace-nowrap text-center">
                            <div class="flex items-center justify-center gap-1.5">
                                @if($item->foto_masuk)
                                    <button type="button" 
                                            onclick="previewFoto('{{ asset('storage/' . $item->foto_masuk) }}', 'Foto Masuk - {{ addslashes($item->pegawai?->nama_lengkap) }} ({{ $item->tanggal->format('d/m/Y') }})')"
                                            class="w-7 h-7 rounded-lg overflow-hidden border border-slate-200 hover:scale-110 transition-transform shadow-xs cursor-pointer group"
                                            title="Lihat Foto Masuk">
                                        <img src="{{ asset('storage/' . $item->foto_masuk) }}" class="w-full h-full object-cover">
                                    </button>
                                @endif

                                @if($item->foto_pulang)
                                    <button type="button" 
                                            onclick="previewFoto('{{ asset('storage/' . $item->foto_pulang) }}', 'Foto Pulang - {{ addslashes($item->pegawai?->nama_lengkap) }} ({{ $item->tanggal->format('d/m/Y') }})')"
                                            class="w-7 h-7 rounded-lg overflow-hidden border border-slate-200 hover:scale-110 transition-transform shadow-xs cursor-pointer group"
                                            title="Lihat Foto Pulang">
                                        <img src="{{ asset('storage/' . $item->foto_pulang) }}" class="w-full h-full object-cover">
                                    </button>
                                @endif

                                @if(!$item->foto_masuk && !$item->foto_pulang)
                                    <span class="text-slate-300 text-[11px]">-</span>
                                @endif
                            </div>
                        </td>

                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Pagination Bar -->
        <div class="px-6 py-4 border-t border-slate-100 bg-slate-50/50 flex items-center justify-between flex-wrap gap-2">
            <div class="text-xs text-slate-500">
                Menampilkan {{ $absensiList->firstItem() ?? 0 }} - {{ $absensiList->lastItem() ?? 0 }} dari {{ $absensiList->total() }} data
            </div>
            <div>
                {{ $absensiList->links() }}
            </div>
        </div>
        @endif

    </div>

</div>

<!-- Modal Pratinjau Foto Absensi -->
<div id="modalPreviewFoto" class="fixed inset-0 z-50 bg-slate-900/80 backdrop-blur-sm hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-md w-full overflow-hidden shadow-2xl space-y-3 p-4">
        <div class="flex items-center justify-between border-b border-slate-100 pb-2">
            <h4 id="modalFotoTitle" class="text-xs font-bold text-slate-800 truncate max-w-xs">Pratinjau Foto</h4>
            <button type="button" onclick="closePreviewFoto()" class="text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
        <div class="rounded-xl overflow-hidden bg-slate-900 flex items-center justify-center max-h-96">
            <img id="modalFotoImg" src="" alt="Foto Absen" class="w-full h-auto max-h-96 object-contain">
        </div>
        <div class="text-center pt-1">
            <button type="button" onclick="closePreviewFoto()" class="px-4 py-1.5 rounded-xl text-xs font-semibold bg-slate-100 hover:bg-slate-200 text-slate-700">
                Tutup
            </button>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function previewFoto(url, title) {
        const modal = document.getElementById('modalPreviewFoto');
        const img = document.getElementById('modalFotoImg');
        const titleEl = document.getElementById('modalFotoTitle');
        if (modal && img) {
            img.src = url;
            if (titleEl) titleEl.innerText = title;
            modal.classList.remove('hidden');
        }
    }

    function closePreviewFoto() {
        const modal = document.getElementById('modalPreviewFoto');
        const img = document.getElementById('modalFotoImg');
        if (modal) {
            modal.classList.add('hidden');
            if (img) img.src = '';
        }
    }

    // Escape listener untuk modal foto
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closePreviewFoto();
        }
    });
</script>
@endpush
@endsection