@extends('layouts.admin')

@section('title', 'Rekap Laporan Absensi')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Rekap Laporan Absensi</h1>
            <p class="text-xs text-slate-500 mt-1">Akumulasi presensi, keterlambatan, rincian denda masuk & denda pulang, dan upah lembur siap payroll</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <a href="{{ route('admin.laporan.terkunci') }}" class="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-semibold transition-colors">
                <i data-lucide="archive" class="w-4 h-4 text-slate-500"></i>
                <span>Arsip Laporan Terkunci</span>
            </a>
            <button onclick="window.print()" class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-white border border-slate-200 text-slate-700 text-xs font-semibold hover:bg-slate-50 transition-colors">
                <i data-lucide="printer" class="w-4 h-4"></i>
                <span>Cetak Rekap</span>
            </button>
        </div>
    </div>

    @php
        $tglAwalCarbon = \Carbon\Carbon::parse($tglAwal);
        $bulanPeriode = $tglAwalCarbon->month;
        $tahunPeriode = $tglAwalCarbon->year;
        $isLocked = isset($kunciPeriode) && $kunciPeriode->status_kunci === 'terkunci';
    @endphp

    <!-- Panel Status Penguncian Akhir Bulan -->
    <div class="p-4 rounded-2xl border transition-all {{ $isLocked ? 'bg-emerald-50/70 border-emerald-200 text-emerald-950' : 'bg-orange-50/60 border-orange-200 text-orange-950' }}">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div class="flex items-start sm:items-center gap-3">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 {{ $isLocked ? 'bg-emerald-100 text-emerald-700' : 'bg-orange-100 text-orange-700' }}">
                    <i data-lucide="{{ $isLocked ? 'shield-check' : 'lock' }}" class="w-5 h-5"></i>
                </div>
                <div>
                    <div class="flex items-center gap-2">
                        <h4 class="text-sm font-bold">{{ $isLocked ? 'Status Laporan: TERKUNCI (Closing Payroll)' : 'Status Laporan: DRAFT (Berjalan Realtime)' }}</h4>
                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider {{ $isLocked ? 'bg-emerald-200/80 text-emerald-800' : 'bg-orange-200/80 text-orange-800' }}">
                            {{ $isLocked ? 'Terkunci' : 'Belum Dikunci' }}
                        </span>
                    </div>
                    <p class="text-xs text-slate-600 mt-0.5">
                        @if($isLocked)
                        Data periode {{ $kunciPeriode->nama_bulan }} {{ $kunciPeriode->tahun }} telah dikunci pada {{ $kunciPeriode->tanggal_kunci->translatedFormat('d M Y H:i') }} oleh {{ $kunciPeriode->dikunciOleh->name ?? 'Admin' }}. Salinan absensi dan nominal denda masuk & pulang telah dibekukan ke database.
                        @else
                        Denda absensi harian berelasi ke master denda. Saat akhir bulan, Admin dapat mengunci laporan ini agar seluruh data absensi disalin ke database dengan nominal denda masuk & pulang yang pasti.
                        @endif
                    </p>
                </div>
            </div>

            <div class="flex flex-wrap items-center gap-2">
                @if($isLocked)
                <a href="{{ route('admin.laporan.terkunci.detail', $kunciPeriode->id) }}" class="px-3.5 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold flex items-center gap-1.5 transition-colors shadow-sm shadow-emerald-600/20">
                    <i data-lucide="eye" class="w-3.5 h-3.5"></i>
                    <span>Lihat Salinan Database</span>
                </a>
                <form action="{{ route('admin.laporan.buka-kunci', $kunciPeriode->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin membuka kunci laporan periode ini? Membuka kunci memungkinkan revisi kembali.');">
                    @csrf
                    <button type="submit" class="px-3 py-2 rounded-xl bg-white border border-emerald-300 text-emerald-800 hover:bg-emerald-100 text-xs font-semibold flex items-center gap-1.5 transition-colors">
                        <i data-lucide="unlock" class="w-3.5 h-3.5"></i>
                        <span>Buka Kunci</span>
                    </button>
                </form>
                @else
                <button type="button" onclick="openModalKunciLaporan('{{ $bulanPeriode }}', '{{ $tahunPeriode }}')" class="px-4 py-2 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold flex items-center gap-1.5 transition-colors shadow-sm shadow-primary-500/20">
                    <i data-lucide="lock" class="w-3.5 h-3.5"></i>
                    <span>Kunci Laporan Akhir Bulan</span>
                </button>
                @endif
            </div>
        </div>
    </div>

    <!-- Filter Periode -->
    <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm print:hidden">
        <form method="GET" action="{{ route('admin.laporan.rekap') }}" class="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 gap-3 items-end">
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Dari Tanggal</label>
                <input type="date" name="tgl_awal" value="{{ $tglAwal }}" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 outline-none">
            </div>
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Sampai Tanggal</label>
                <input type="date" name="tgl_akhir" value="{{ $tglAkhir }}" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 outline-none">
            </div>
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Departemen</label>
                <select name="departemen_id" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 outline-none">
                    <option value="">Semua Departemen</option>
                    @foreach($departemenList as $dep)
                    <option value="{{ $dep->id }}" {{ $departemenId == $dep->id ? 'selected' : '' }}>{{ $dep->nama_departemen }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <button type="submit" class="w-full py-2 px-4 rounded-xl bg-slate-800 hover:bg-slate-900 text-white text-xs font-bold flex items-center justify-center gap-1.5 transition-colors shadow-sm">
                    <i data-lucide="filter" class="w-3.5 h-3.5"></i>
                    <span>Tampilkan Rekap</span>
                </button>
            </div>
        </form>
    </div>

    <!-- Tabel Rekap Komprehensif Siap-Payroll -->
    <div class="rounded-2xl bg-white border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="p-4 border-b border-slate-100 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
            <div>
                <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider">
                    Periode: {{ \Carbon\Carbon::parse($tglAwal)->translatedFormat('d M Y') }} s/d {{ \Carbon\Carbon::parse($tglAkhir)->translatedFormat('d M Y') }}
                </h3>
                <span class="text-[11px] text-slate-400">
                    Sumber data: <strong class="{{ $isLocked ? 'text-emerald-600' : 'text-orange-600' }}">{{ $isLocked ? 'Snapshot Absensi Terkunci (Tersalin di Database)' : 'Live Relasi Denda Harian' }}</strong>
                </span>
            </div>
            <span class="text-xs font-semibold text-slate-500">{{ count($rekapLaporan) }} Pegawai Terdata</span>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full min-w-[850px] text-left border-collapse">
                <thead>
                    <tr class="border-b border-slate-100 bg-slate-50/60 text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                        <th class="py-3 px-4">Pegawai & Posisi</th>
                        <th class="py-3 px-2 text-center">Hadir</th>
                        <th class="py-3 px-2 text-center">Tepat Waktu</th>
                        <th class="py-3 px-2 text-center">Telat Masuk</th>
                        <th class="py-3 px-3 text-right bg-orange-50/40 border-l border-r border-orange-100 text-orange-800">Denda Masuk</th>
                        <th class="py-3 px-3 text-right bg-blue-50/40 border-r border-blue-100 text-blue-800">Denda Pulang</th>
                        <th class="py-3 px-3 text-right bg-rose-50/40 border-r border-rose-100 text-rose-800">Denda Alfa</th>
                        <th class="py-3 px-3 text-right font-extrabold text-rose-600">Total Denda</th>
                        <th class="py-3 px-2 text-center">Izin / Sakit</th>
                        <th class="py-3 px-2 text-center">Dinas Luar</th>
                        <th class="py-3 px-2 text-center">Alfa</th>
                        <th class="py-3 px-4 text-right">Lembur & Upah</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-xs">
                    @forelse($rekapLaporan as $row)
                    <tr class="hover:bg-slate-50/70 transition-colors">
                        <td class="py-3.5 px-4 font-bold text-slate-900">
                            <span class="block">{{ $row['pegawai']->nama_lengkap }}</span>
                            <span class="text-[11px] font-normal text-slate-400">
                                {{ $row['pegawai']->departemen->nama_departemen ?? '-' }} • {{ $row['pegawai']->jabatan->nama_jabatan ?? '-' }}
                            </span>
                        </td>
                        <td class="py-3.5 px-2 text-center font-bold text-slate-800">
                            {{ $row['total_hadir'] }}
                        </td>
                        <td class="py-3.5 px-2 text-center font-bold text-emerald-600">
                            {{ $row['total_tepat_waktu'] }}
                        </td>
                        <td class="py-3.5 px-2 text-center font-bold {{ $row['total_terlambat'] > 0 ? 'text-amber-600' : 'text-slate-400' }}">
                            {{ $row['total_terlambat'] }} ({{ $row['total_menit_terlambat'] }}m)
                        </td>

                        <!-- Rincian Denda Masuk -->
                        <td class="py-3.5 px-3 text-right font-mono font-semibold text-orange-700 bg-orange-50/20 border-l border-r border-orange-100/60">
                            Rp {{ number_format($row['total_denda_masuk'], 0, ',', '.') }}
                        </td>

                        <!-- Rincian Denda Pulang -->
                        <td class="py-3.5 px-3 text-right font-mono font-semibold text-blue-700 bg-blue-50/20 border-r border-blue-100/60">
                            Rp {{ number_format($row['total_denda_pulang'], 0, ',', '.') }}
                        </td>

                        <!-- Rincian Denda Alfa (Tidak Hadir) -->
                        <td class="py-3.5 px-3 text-right font-mono font-semibold text-rose-700 bg-rose-50/20 border-r border-rose-100/60">
                            Rp {{ number_format($row['total_denda_tidak_hadir'], 0, ',', '.') }}
                        </td>

                        <!-- Total Denda Keseluruhan -->
                        <td class="py-3.5 px-3 text-right font-mono font-extrabold text-rose-600">
                            Rp {{ number_format($row['total_denda'], 0, ',', '.') }}
                        </td>

                        <td class="py-3.5 px-2 text-center text-slate-600 font-semibold">
                            {{ $row['total_izin'] + $row['total_sakit'] }}
                        </td>
                        <td class="py-3.5 px-2 text-center text-slate-600 font-semibold">
                            {{ $row['total_dinas'] }}
                        </td>
                        <td class="py-3.5 px-2 text-center font-bold {{ $row['total_alfa'] > 0 ? 'text-rose-600' : 'text-slate-400' }}">
                            {{ $row['total_alfa'] }}
                        </td>
                        <td class="py-3.5 px-4 text-right">
                            <span class="font-bold text-slate-800 block">{{ $row['total_lembur_jam'] }} Jam</span>
                            <span class="text-[11px] font-mono text-emerald-600 font-bold block">
                                + Rp {{ number_format($row['total_upah_lembur'], 0, ',', '.') }}
                            </span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="12" class="py-8 text-center text-slate-400">Tidak ada data rekap pada periode ini</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Kunci Laporan Akhir Bulan -->
<div id="modalKunciLaporan" class="fixed inset-0 z-50 hidden bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-white rounded-3xl max-w-lg w-full p-6 shadow-2xl border border-slate-100 space-y-4 animate-scaleUp">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100">
            <div class="flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-xl bg-orange-100 text-orange-600 flex items-center justify-center font-bold">
                    <i data-lucide="lock" class="w-5 h-5"></i>
                </div>
                <div>
                    <h3 class="text-base font-bold text-slate-900">Kunci Laporan Akhir Bulan</h3>
                    <p class="text-xs text-slate-500">Salin & Bekukan Snapshot Absensi Siap Payroll</p>
                </div>
            </div>
            <button type="button" onclick="closeModalKunciLaporan()" class="p-2 text-slate-400 hover:text-slate-600 rounded-xl hover:bg-slate-100 transition-colors">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>

        <form action="{{ route('admin.laporan.kunci') }}" method="POST" class="space-y-4">
            @csrf
            <div class="p-3.5 rounded-2xl bg-amber-50 border border-amber-200 text-xs text-amber-900 space-y-1.5">
                <p class="font-bold flex items-center gap-1.5">
                    <i data-lucide="info" class="w-4 h-4 text-amber-600 shrink-0"></i>
                    <span>Mekanisme Penguncian Laporan (Closing):</span>
                </p>
                <p>Data harian absensi yang semula hanya menyimpan relasi denda akan <strong>disalin persis seperti pada tabel absensi</strong> ke tabel arsip terkunci di database, lengkap dengan penulisan <strong>nominal denda masuk dan pulang</strong> yang pasti.</p>
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Bulan Periode</label>
                    <select name="bulan" id="kunciBulanInput" required class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 outline-none">
                        @for($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}" {{ $bulanPeriode == $m ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::create(2026, $m, 1)->translatedFormat('F') }}
                        </option>
                        @endfor
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Tahun Periode</label>
                    <input type="number" name="tahun" id="kunciTahunInput" value="{{ $tahunPeriode }}" required min="2020" max="2099" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 outline-none">
                </div>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Catatan Penguncian (Opsional)</label>
                <textarea name="catatan" rows="3" placeholder="Contoh: Closing payroll akhir bulan reguler, telah diverifikasi oleh HR & Keuangan" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 outline-none"></textarea>
            </div>

            <div class="flex items-center justify-end gap-2 pt-2 border-t border-slate-100">
                <button type="button" onclick="closeModalKunciLaporan()" class="px-4 py-2.5 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 text-xs font-semibold">
                    Batal
                </button>
                <button type="submit" class="px-4 py-2.5 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold flex items-center gap-1.5 shadow-sm shadow-primary-500/20">
                    <i data-lucide="check" class="w-4 h-4"></i>
                    <span>Kunci & Salin ke Database</span>
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function openModalKunciLaporan(bulan, tahun) {
        document.getElementById('kunciBulanInput').value = bulan;
        document.getElementById('kunciTahunInput').value = tahun;
        document.getElementById('modalKunciLaporan').classList.remove('hidden');
    }

    function closeModalKunciLaporan() {
        document.getElementById('modalKunciLaporan').classList.add('hidden');
    }
</script>
@endsection