@extends('layouts.admin')

@section('title', 'Arsip Laporan Terkunci')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-2">
                <a href="{{ route('admin.laporan.rekap') }}" class="p-1 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition-colors">
                    <i data-lucide="arrow-left" class="w-5 h-5"></i>
                </a>
                <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Arsip Laporan Terkunci</h1>
            </div>
            <p class="text-xs text-slate-500 mt-1">Daftar periode absensi yang telah dibekukan ke database (Closing Payroll Resmi) dengan nominal denda pasti</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('admin.laporan.rekap') }}" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-semibold shadow-sm shadow-primary-500/20 transition-colors">
                <i data-lucide="file-spreadsheet" class="w-4 h-4"></i>
                <span>Kembali ke Rekap</span>
            </a>
        </div>
    </div>

    <!-- Tabel Daftar Penguncian -->
    <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 items-center justify-between">
            <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider">Histori Closing Laporan Absensi</h3>
            <span class="text-xs font-semibold text-slate-500">{{ $kunciList->total() }} Periode Tercatat</span>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full min-w-[750px] 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">Periode Bulan & Tahun</th>
                        <th class="py-3 px-4">Tanggal Penguncian</th>
                        <th class="py-3 px-3 text-center">Pegawai</th>
                        <th class="py-3 px-3 text-center">Kehadiran</th>
                        <th class="py-3 px-4 text-right">Denda Masuk</th>
                        <th class="py-3 px-4 text-right">Denda Pulang</th>
                        <th class="py-3 px-4 text-right">Denda Alfa</th>
                        <th class="py-3 px-4 text-right">Total Denda</th>
                        <th class="py-3 px-3 text-center">Status</th>
                        <th class="py-3 px-4 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-xs">
                    @forelse($kunciList as $item)
                    <tr class="hover:bg-slate-50/70 transition-colors">
                        <td class="py-3.5 px-4 font-bold text-slate-900">
                            <div class="flex items-center gap-2.5">
                                <div class="w-8 h-8 rounded-lg bg-orange-100 text-orange-600 flex items-center justify-center font-bold text-xs">
                                    <i data-lucide="calendar" class="w-4 h-4"></i>
                                </div>
                                <div>
                                    <span class="block text-sm">{{ $item->nama_bulan }} {{ $item->tahun }}</span>
                                    <span class="text-[11px] font-normal text-slate-400">Oleh: {{ $item->dikunciOleh->name ?? 'Admin' }}</span>
                                </div>
                            </div>
                        </td>
                        <td class="py-3.5 px-4 text-slate-600">
                            <span class="block font-medium">{{ $item->tanggal_kunci->translatedFormat('d M Y') }}</span>
                            <span class="text-[11px] font-mono text-slate-400">{{ $item->tanggal_kunci->format('H:i') }} WIB</span>
                        </td>
                        <td class="py-3.5 px-3 text-center font-bold text-slate-800">
                            {{ $item->total_pegawai }}
                        </td>
                        <td class="py-3.5 px-3 text-center font-bold text-emerald-600">
                            {{ $item->total_kehadiran }}
                        </td>
                        <td class="py-3.5 px-4 text-right font-mono font-semibold text-orange-700">
                            Rp {{ number_format($item->total_denda_masuk, 0, ',', '.') }}
                        </td>
                        <td class="py-3.5 px-4 text-right font-mono font-semibold text-blue-700">
                            Rp {{ number_format($item->total_denda_pulang, 0, ',', '.') }}
                        </td>
                        <td class="py-3.5 px-4 text-right font-mono font-semibold text-rose-700">
                            Rp {{ number_format($item->total_denda_tidak_hadir ?? 0, 0, ',', '.') }}
                        </td>
                        <td class="py-3.5 px-4 text-right font-mono font-extrabold text-rose-600">
                            Rp {{ number_format($item->grand_total_denda, 0, ',', '.') }}
                        </td>
                        <td class="py-3.5 px-3 text-center">
                            @if($item->status_kunci === 'terkunci')
                            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                                <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                Terkunci
                            </span>
                            @else
                            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-amber-50 text-amber-700 border border-amber-200">
                                <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
                                Dibuka
                            </span>
                            @endif
                        </td>
                        <td class="py-3.5 px-4 text-right">
                            <div class="flex items-center justify-end gap-1.5">
                                <a href="{{ route('admin.laporan.terkunci.detail', $item->id) }}" class="p-1.5 rounded-lg border border-slate-200 hover:bg-primary-50 hover:text-primary-600 text-slate-600 text-xs font-semibold flex items-center gap-1 transition-colors" title="Lihat Salinan Database">
                                    <i data-lucide="eye" class="w-3.5 h-3.5"></i>
                                    <span>Salinan</span>
                                </a>
                                @if($item->status_kunci === 'terkunci')
                                <form action="{{ route('admin.laporan.buka-kunci', $item->id) }}" method="POST" onsubmit="return confirm('Buka kunci laporan periode ini?');" class="inline">
                                    @csrf
                                    <button type="submit" class="p-1.5 rounded-lg text-slate-400 hover:text-amber-600 hover:bg-amber-50 transition-colors" title="Buka Kunci (Unlock)">
                                        <i data-lucide="unlock" class="w-3.5 h-3.5"></i>
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="py-8 text-center text-slate-400">Belum ada periode laporan yang dikunci ke database.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($kunciList->hasPages())
        <div class="p-4 border-t border-slate-100">
            {{ $kunciList->links() }}
        </div>
        @endif
    </div>
</div>
@endsection