@extends('layouts.admin')

@section('title', 'Data Gaji Bersih (Payroll & Slip)')

@section('content')
<div class="space-y-6">
    <!-- Header Page -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-2">
                <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-primary-100 text-primary-700 tracking-wide uppercase">
                    Modul Penggajian
                </span>
                <span class="text-xs text-slate-400 font-semibold">• Payroll Bulanan</span>
            </div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight mt-1">Data Gaji Bersih & Slip Gaji</h1>
            <p class="text-xs text-slate-500 mt-1">Kalkulasi penggajian bulanan otomatis: Gaji Pokok + Tunjangan (Upah Lembur) - Potongan (Denda Keterlambatan)</p>
        </div>

        <div class="flex items-center gap-2.5">
            <a href="{{ route('admin.penggajian.master.index') }}" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border border-slate-200 bg-white hover:bg-slate-50 text-slate-700 text-xs font-bold transition-all shadow-sm">
                <i data-lucide="layers" class="w-4 h-4 text-slate-500"></i>
                <span>Master Komponen & Gaji</span>
            </a>
            <button onclick="document.getElementById('modalGeneratePayroll').classList.remove('hidden')" 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-bold shadow-sm shadow-primary-500/30 transition-all">
                <i data-lucide="calculator" class="w-4 h-4"></i>
                <span>Proses / Hitung Gaji Bersih</span>
            </button>
        </div>
    </div>

    <!-- Alert Notifikasi -->
    @if(session('success'))
    <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-semibold flex items-center justify-between shadow-sm">
        <div class="flex items-center gap-2.5">
            <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 shrink-0"></i>
            <span>{{ session('success') }}</span>
        </div>
        <button onclick="this.parentElement.remove()" class="text-emerald-500 hover:text-emerald-700">
            <i data-lucide="x" class="w-4 h-4"></i>
        </button>
    </div>
    @endif

    @if(session('error'))
    <div class="p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-800 text-xs font-semibold flex items-center justify-between">
        <div class="flex items-center gap-2.5">
            <i data-lucide="alert-triangle" class="w-4 h-4 text-rose-600 shrink-0"></i>
            <span>{{ session('error') }}</span>
        </div>
        <button onclick="this.parentElement.remove()" class="text-rose-500 hover:text-rose-700">
            <i data-lucide="x" class="w-4 h-4"></i>
        </button>
    </div>
    @endif

    <!-- Status Penguncian Absensi Banner -->
    @if($kunciPeriode)
    <div class="p-4 rounded-2xl bg-amber-50 border border-amber-200 text-amber-900 text-xs flex items-center justify-between">
        <div class="flex items-center gap-2.5">
            <div class="w-8 h-8 rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center shrink-0">
                <i data-lucide="lock" class="w-4 h-4"></i>
            </div>
            <div>
                <p class="font-bold">Laporan Absensi Periode Ini Berstatus Terkunci (Closing)</p>
                <p class="text-[11px] text-amber-700">Perhitungan upah lembur dan potongan denda keterlambatan ditarik langsung dari arsip laporan terkunci resmi.</p>
            </div>
        </div>
        <span class="px-2.5 py-1 rounded-lg bg-amber-200/80 text-amber-900 font-bold text-[10px] uppercase tracking-wider">
            Closing Final
        </span>
    </div>
    @endif

    <!-- Stat Cards Finansial Ringkas -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <!-- Card 1: Total Penggajian Bersih -->
        <div class="p-5 rounded-2xl bg-gradient-to-br from-emerald-600 to-teal-700 text-white shadow-lg shadow-emerald-600/20 relative overflow-hidden">
            <div class="absolute -right-4 -bottom-4 w-24 h-24 bg-white/10 rounded-full blur-xl pointer-events-none"></div>
            <div class="flex items-center justify-between mb-3">
                <span class="text-[11px] font-bold text-emerald-100 uppercase tracking-wider">Total Gaji Bersih</span>
                <span class="p-1.5 rounded-lg bg-white/20 text-white">
                    <i data-lucide="receipt" class="w-4 h-4"></i>
                </span>
            </div>
            <div class="text-2xl font-black tracking-tight text-white mb-1">
                Rp {{ number_format($totalGajiBersih, 0, ',', '.') }}
            </div>
            <p class="text-[11px] text-emerald-100">
                Take Home Pay {{ $totalPenggajian }} slip tercatat
            </p>
        </div>

        <!-- Card 2: Total Upah Lembur -->
        <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-sm relative overflow-hidden">
            <div class="flex items-center justify-between mb-3">
                <span class="text-[11px] font-bold text-amber-600 uppercase tracking-wider">Total Upah Lembur</span>
                <span class="p-1.5 rounded-lg bg-amber-50 text-amber-600">
                    <i data-lucide="timer" class="w-4 h-4"></i>
                </span>
            </div>
            <div class="text-2xl font-black tracking-tight text-slate-800 mb-1">
                Rp {{ number_format($totalLembur, 0, ',', '.') }}
            </div>
            <p class="text-[11px] text-amber-600 font-medium">
                Kompensasi lembur disetujui
            </p>
        </div>

        <!-- Card 3: Total Denda Keterlambatan -->
        <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-sm relative overflow-hidden">
            <div class="flex items-center justify-between mb-3">
                <span class="text-[11px] font-bold text-rose-600 uppercase tracking-wider">Total Denda Terlambat</span>
                <span class="p-1.5 rounded-lg bg-rose-50 text-rose-600">
                    <i data-lucide="circle-slash" class="w-4 h-4"></i>
                </span>
            </div>
            <div class="text-2xl font-black tracking-tight text-slate-800 mb-1">
                Rp {{ number_format($totalDenda, 0, ',', '.') }}
            </div>
            <p class="text-[11px] text-rose-600 font-medium">
                Potongan denda absensi masuk/pulang
            </p>
        </div>

        <!-- Card 4: Total Tunjangan vs Potongan -->
        <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-sm relative overflow-hidden">
            <div class="flex items-center justify-between mb-3">
                <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Rasio Komponen</span>
                <span class="p-1.5 rounded-lg bg-blue-50 text-blue-600">
                    <i data-lucide="scale" class="w-4 h-4"></i>
                </span>
            </div>
            <div class="text-xs font-bold space-y-1 mb-1">
                <div class="flex justify-between text-emerald-700">
                    <span>Tunjangan:</span>
                    <span>Rp {{ number_format($totalTunjangan, 0, ',', '.') }}</span>
                </div>
                <div class="flex justify-between text-rose-700">
                    <span>Potongan:</span>
                    <span>Rp {{ number_format($totalPotongan, 0, ',', '.') }}</span>
                </div>
            </div>
            <p class="text-[11px] text-slate-400">
                Akumulasi seluruh komponen
            </p>
        </div>
    </div>

    <!-- Filter & Toolbar Periode -->
    <div class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4">
        <form action="{{ route('admin.penggajian.gaji-bersih.index') }}" method="GET" class="flex flex-wrap items-center gap-3">
            <!-- Filter Bulan -->
            <div class="w-36">
                <select name="bulan" onchange="this.form.submit()" class="w-full text-xs font-bold px-3 py-2 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 text-slate-800">
                    @for($m = 1; $m <= 12; $m++)
                        @php
                            $namaBln = \Carbon\Carbon::create(2026, $m, 1)->translatedFormat('F');
                        @endphp
                        <option value="{{ $m }}" {{ $bulan == $m ? 'selected' : '' }}>
                            {{ $namaBln }}
                        </option>
                    @endfor
                </select>
            </div>

            <!-- Filter Tahun -->
            <div class="w-28">
                <select name="tahun" onchange="this.form.submit()" class="w-full text-xs font-bold px-3 py-2 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 text-slate-800">
                    @for($y = Carbon\Carbon::now()->year + 1; $y >= 2024; $y--)
                        <option value="{{ $y }}" {{ $tahun == $y ? 'selected' : '' }}>
                            {{ $y }}
                        </option>
                    @endfor
                </select>
            </div>

            <!-- Filter Departemen -->
            <div class="w-44">
                <select name="departemen_id" onchange="this.form.submit()" class="w-full text-xs font-semibold px-3 py-2 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 text-slate-800">
                    <option value="">Semua Departemen</option>
                    @foreach($departemenList as $dep)
                        <option value="{{ $dep->id }}" {{ $departemenId == $dep->id ? 'selected' : '' }}>
                            {{ $dep->nama_departemen }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Filter Status Pembayaran -->
            <div class="w-36">
                <select name="status_pembayaran" onchange="this.form.submit()" class="w-full text-xs font-semibold px-3 py-2 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 text-slate-800">
                    <option value="">Semua Status</option>
                    <option value="disetujui" {{ $statusPembayaran == 'disetujui' ? 'selected' : '' }}>Disetujui</option>
                    <option value="dibayar" {{ $statusPembayaran == 'dibayar' ? 'selected' : '' }}>Dibayar</option>
                    <option value="draft" {{ $statusPembayaran == 'draft' ? 'selected' : '' }}>Draft</option>
                </select>
            </div>

            <button type="submit" class="px-3.5 py-2 rounded-xl bg-slate-800 hover:bg-slate-900 text-white text-xs font-bold transition-colors">
                Terapkan
            </button>
        </form>

        <div class="flex items-center gap-2">
            <span class="text-xs font-semibold text-slate-500">
                Periode: <strong class="text-slate-900">{{ \Carbon\Carbon::createFromDate($tahun, $bulan, 1)->translatedFormat('F Y') }}</strong>
            </span>
        </div>
    </div>

    <!-- Tabel Data Gaji Bersih -->
    <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse text-xs">
                <thead>
                    <tr class="bg-slate-50/75 border-b border-slate-100 text-slate-500 font-bold uppercase tracking-wider text-[11px]">
                        <th class="py-3 px-4">No. Slip & Pegawai</th>
                        <th class="py-3 px-4">Departemen / Jabatan</th>
                        <th class="py-3 px-4 text-right">Gaji Pokok</th>
                        <th class="py-3 px-4 text-right">Tunjangan (+Lembur)</th>
                        <th class="py-3 px-4 text-right">Potongan (+Denda)</th>
                        <th class="py-3 px-4 text-right">Gaji Bersih (THP)</th>
                        <th class="py-3 px-4 text-center">Status</th>
                        <th class="py-3 px-4 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-slate-700 font-medium">
                    @forelse($penggajianList as $slip)
                    <tr class="hover:bg-slate-50/75 transition-colors">
                        <td class="py-3 px-4">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-xl bg-primary-100 text-primary-700 font-bold flex items-center justify-center text-xs shrink-0 overflow-hidden">
                                    @if($slip->pegawai?->foto_profil)
                                        <img src="{{ asset('storage/' . $slip->pegawai->foto_profil) }}" alt="{{ $slip->pegawai->nama_lengkap }}" class="w-full h-full object-cover">
                                    @else
                                        {{ $slip->pegawai?->inisial ?? 'PG' }}
                                    @endif
                                </div>
                                <div>
                                    <a href="{{ route('admin.penggajian.gaji-bersih.show', $slip->id) }}" class="font-bold text-slate-900 hover:text-primary-600 transition-colors block">
                                        {{ $slip->pegawai?->nama_lengkap ?? 'Pegawai Terhapus' }}
                                    </a>
                                    <div class="flex items-center gap-1.5 mt-0.5">
                                        <a href="{{ route('admin.penggajian.gaji-bersih.show', $slip->id) }}" class="text-[10px] font-mono text-primary-600 font-bold hover:underline">
                                            {{ $slip->nomor_slip }}
                                        </a>
                                        @if($slip->pegawai?->nama_bank && $slip->pegawai?->nomor_rekening)
                                            <span class="inline-flex items-center gap-1 text-[10px] text-slate-700 bg-slate-100 border border-slate-200/80 px-1.5 py-0.5 rounded font-mono font-semibold" title="{{ $slip->pegawai->nama_bank }} - {{ $slip->pegawai->nomor_rekening }} (a.n. {{ $slip->pegawai->atas_nama_rekening }})">
                                                <i data-lucide="credit-card" class="w-2.5 h-2.5 text-primary-600"></i>
                                                {{ $slip->pegawai->nama_bank }} {{ $slip->pegawai->nomor_rekening }}
                                            </span>
                                        @else
                                            <span class="inline-flex items-center gap-0.5 text-[9px] text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded" title="Rekening bank belum diset pada data pegawai">
                                                <i data-lucide="alert-circle" class="w-2.5 h-2.5"></i> Rek Belum Ada
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="py-3 px-4">
                            <p class="font-semibold text-slate-800">{{ $slip->pegawai?->departemen?->nama_departemen ?? '-' }}</p>
                            <p class="text-[11px] text-slate-400">{{ $slip->pegawai?->jabatan?->nama_jabatan ?? '-' }}</p>
                        </td>
                        <td class="py-3 px-4 text-right">
                            <span class="font-bold text-slate-800">
                                Rp {{ number_format($slip->gaji_pokok, 0, ',', '.') }}
                            </span>
                        </td>
                        <td class="py-3 px-4 text-right">
                            <p class="font-bold text-emerald-700">+Rp {{ number_format($slip->total_tunjangan, 0, ',', '.') }}</p>
                            @if($slip->total_upah_lembur > 0)
                                <span class="inline-flex items-center gap-0.5 text-[10px] text-amber-700 font-semibold bg-amber-50 px-1.5 py-0.5 rounded">
                                    <i data-lucide="timer" class="w-2.5 h-2.5"></i> Lembur: Rp {{ number_format($slip->total_upah_lembur, 0, ',', '.') }}
                                </span>
                            @endif
                        </td>
                        <td class="py-3 px-4 text-right">
                            <p class="font-bold text-rose-700">-Rp {{ number_format($slip->total_potongan, 0, ',', '.') }}</p>
                            <div class="flex flex-col items-end gap-0.5 mt-0.5">
                                @if($slip->total_denda_keterlambatan > 0)
                                    <span class="inline-flex items-center gap-0.5 text-[10px] text-amber-700 font-semibold bg-amber-50 px-1.5 py-0.5 rounded">
                                        <i data-lucide="alert-triangle" class="w-2.5 h-2.5"></i> Telat: Rp {{ number_format($slip->total_denda_keterlambatan, 0, ',', '.') }}
                                    </span>
                                @endif
                                @if($slip->total_denda_tidak_hadir > 0)
                                    <span class="inline-flex items-center gap-0.5 text-[10px] text-rose-700 font-semibold bg-rose-50 px-1.5 py-0.5 rounded">
                                        <i data-lucide="user-x" class="w-2.5 h-2.5"></i> Alfa: Rp {{ number_format($slip->total_denda_tidak_hadir, 0, ',', '.') }}
                                    </span>
                                @endif
                            </div>
                        </td>
                        <td class="py-3 px-4 text-right">
                            <span class="inline-block px-3 py-1.5 rounded-xl bg-emerald-50 text-emerald-800 font-black text-xs border border-emerald-200">
                                Rp {{ number_format($slip->gaji_bersih, 0, ',', '.') }}
                            </span>
                        </td>
                        <td class="py-3 px-4 text-center">
                            @if($slip->status_pembayaran === 'dibayar')
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-800">
                                    <i data-lucide="check" class="w-3 h-3"></i>
                                    <span>Dibayar</span>
                                </span>
                            @elseif($slip->status_pembayaran === 'disetujui')
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold bg-blue-100 text-blue-800">
                                    <i data-lucide="check-check" class="w-3 h-3"></i>
                                    <span>Disetujui</span>
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold bg-slate-100 text-slate-600">
                                    <span>Draft</span>
                                </span>
                            @endif
                        </td>
                        <td class="py-3 px-4">
                            <div class="flex items-center justify-center gap-1">
                                <!-- Tombol Rincian Detail Modal -->
                                <button type="button" onclick="bukaModalDetailSlip('{{ $slip->id }}')" class="p-2 rounded-xl text-primary-600 hover:bg-primary-50 transition-colors" title="Lihat Rincian Slip Gaji">
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                </button>
                                <!-- Tombol Cetak / PDF -->
                                <a href="{{ route('admin.penggajian.gaji-bersih.cetak', $slip->id) }}" target="_blank" class="p-2 rounded-xl text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition-colors" title="Cetak / Download Slip Gaji PDF">
                                    <i data-lucide="printer" class="w-4 h-4"></i>
                                </a>
                                <!-- Tombol Update Status Pembayaran -->
                                <button type="button" onclick="bukaModalStatus('{{ $slip->id }}', '{{ $slip->nomor_slip }}', '{{ $slip->status_pembayaran }}')" class="p-2 rounded-xl text-amber-600 hover:bg-amber-50 transition-colors" title="Ubah Status Pembayaran">
                                    <i data-lucide="credit-card" class="w-4 h-4"></i>
                                </button>
                                <!-- Tombol Hapus -->
                                <button type="button" onclick="konfirmasiHapusSlip('{{ $slip->id }}', '{{ $slip->nomor_slip }}')" class="p-2 rounded-xl text-rose-600 hover:bg-rose-50 transition-colors" title="Hapus Data Slip">
                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="py-12 text-center text-slate-400">
                            <div class="w-12 h-12 rounded-2xl bg-slate-100 flex items-center justify-center mx-auto mb-3 text-slate-400">
                                <i data-lucide="receipt" class="w-6 h-6"></i>
                            </div>
                            <p class="font-bold text-slate-700 text-sm">Belum ada data gaji bersih untuk periode ini</p>
                            <p class="text-xs text-slate-400 mt-1 max-w-sm mx-auto">Klik tombol <strong>"Proses / Hitung Gaji Bersih"</strong> di atas untuk mengkalkulasi otomatis seluruh penerimaan karyawan periode {{ \Carbon\Carbon::createFromDate($tahun, $bulan, 1)->translatedFormat('F Y') }}.</p>
                            <button onclick="document.getElementById('modalGeneratePayroll').classList.remove('hidden')" class="mt-4 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-bold shadow-sm transition-all">
                                <i data-lucide="calculator" class="w-4 h-4"></i>
                                <span>Hitung Penggajian Sekarang</span>
                            </button>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

<!-- ==================== MODAL GENERATE PAYROLL ==================== -->
<div id="modalGeneratePayroll" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm hidden">
    <div class="bg-white rounded-2xl max-w-md w-full shadow-2xl overflow-hidden border border-slate-100">
        <form method="POST" action="{{ route('admin.penggajian.gaji-bersih.generate') }}">
            @csrf
            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
                <div class="flex items-center gap-2.5">
                    <div class="p-2 rounded-xl bg-primary-100 text-primary-700">
                        <i data-lucide="calculator" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <h3 class="text-sm font-bold text-slate-900">Hitung Otomatis Gaji Bersih</h3>
                        <p class="text-xs text-slate-500 font-medium">Sinkronisasi absensi, lembur & denda</p>
                    </div>
                </div>
                <button type="button" onclick="tutupModal('modalGeneratePayroll')" class="text-slate-400 hover:text-slate-600 p-1 rounded-lg hover:bg-slate-100">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <div class="p-5 space-y-4">
                <div class="p-3.5 rounded-xl bg-blue-50/70 border border-blue-200/60 text-blue-900 text-xs">
                    <div class="flex items-start gap-2">
                        <i data-lucide="info" class="w-4 h-4 text-blue-600 shrink-0 mt-0.5"></i>
                        <div>
                            <p class="font-bold">Alur Kalkulasi Otomatis:</p>
                            <ul class="list-disc list-inside mt-1 space-y-0.5 text-[11px] text-blue-800">
                                <li>Menarik gaji pokok masing-masing pegawai aktif</li>
                                <li>Menghitung akumulasi lembur disetujui (upah lembur)</li>
                                <li>Menghitung akumulasi denda keterlambatan absensi</li>
                                <li>Menghitung seluruh tunjangan & potongan tetap bulanan</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1.5">Bulan Penggajian <span class="text-rose-500">*</span></label>
                        <select name="bulan" required class="w-full text-xs font-bold px-3 py-2.5 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500">
                            @for($m = 1; $m <= 12; $m++)
                                @php
                                    $namaBln = \Carbon\Carbon::create(2026, $m, 1)->translatedFormat('F');
                                @endphp
                                <option value="{{ $m }}" {{ $bulan == $m ? 'selected' : '' }}>
                                    {{ $namaBln }}
                                </option>
                            @endfor
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1.5">Tahun <span class="text-rose-500">*</span></label>
                        <select name="tahun" required class="w-full text-xs font-bold px-3 py-2.5 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500">
                            @for($y = Carbon\Carbon::now()->year + 1; $y >= 2024; $y--)
                                <option value="{{ $y }}" {{ $tahun == $y ? 'selected' : '' }}>
                                    {{ $y }}
                                </option>
                            @endfor
                        </select>
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5">Batasi Departemen (Opsional)</label>
                    <select name="departemen_id" class="w-full text-xs font-semibold px-3 py-2.5 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500">
                        <option value="">Semua Departemen (Seluruh Karyawan)</option>
                        @foreach($departemenList as $dep)
                            <option value="{{ $dep->id }}" {{ $departemenId == $dep->id ? 'selected' : '' }}>
                                {{ $dep->nama_departemen }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="p-4 border-t border-slate-100 bg-slate-50/50 flex items-center justify-end gap-2.5">
                <button type="button" onclick="tutupModal('modalGeneratePayroll')" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100 transition-colors">
                    Batal
                </button>
                <button type="submit" class="px-4 py-2 rounded-xl text-xs font-bold bg-primary-600 hover:bg-primary-700 text-white shadow-sm shadow-primary-500/20 transition-all flex items-center gap-1.5">
                    <i data-lucide="play" class="w-3.5 h-3.5"></i>
                    <span>Mulai Proses Penggajian</span>
                </button>
            </div>
        </form>
    </div>
</div>

<!-- ==================== MODAL DETAIL SLIP GAJI ==================== -->
<div id="modalDetailSlip" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm hidden">
    <div class="bg-white rounded-2xl max-w-2xl w-full shadow-2xl overflow-hidden border border-slate-100 max-h-[90vh] flex flex-col">
        <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50 shrink-0">
            <div class="flex items-center gap-2.5">
                <div class="p-2 rounded-xl bg-primary-100 text-primary-700">
                    <i data-lucide="receipt" class="w-5 h-5"></i>
                </div>
                <div>
                    <h3 class="text-sm font-bold text-slate-900">Rincian Slip Gaji Karyawan</h3>
                    <p id="labelDetailSlipNomor" class="text-xs font-mono text-primary-600 font-bold"></p>
                </div>
            </div>
            <button type="button" onclick="tutupModal('modalDetailSlip')" class="text-slate-400 hover:text-slate-600 p-1 rounded-lg hover:bg-slate-100">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <div id="modalDetailSlipContent" class="p-6 overflow-y-auto space-y-5">
            <div class="py-12 text-center text-slate-400">
                <i data-lucide="loader-2" class="w-8 h-8 mx-auto animate-spin mb-2"></i>
                <p class="text-xs font-semibold">Memuat rincian slip...</p>
            </div>
        </div>

        <div class="p-4 border-t border-slate-100 bg-slate-50/50 flex items-center justify-between shrink-0">
            <span id="labelStatusPembayaranDetail" class="text-xs font-bold text-slate-600"></span>
            <div class="flex items-center gap-2">
                <button type="button" onclick="tutupModal('modalDetailSlip')" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100 transition-colors">
                    Tutup
                </button>
                <a id="btnCetakSlipModal" href="#" target="_blank" class="px-4 py-2 rounded-xl text-xs font-bold bg-primary-600 hover:bg-primary-700 text-white shadow-sm transition-all flex items-center gap-1.5">
                    <i data-lucide="printer" class="w-3.5 h-3.5"></i>
                    <span>Cetak Slip PDF</span>
                </a>
            </div>
        </div>
    </div>
</div>

<!-- ==================== MODAL UBAH STATUS PEMBAYARAN ==================== -->
<div id="modalStatusBayar" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm hidden">
    <div class="bg-white rounded-2xl max-w-sm w-full shadow-2xl overflow-hidden border border-slate-100">
        <form id="formStatusBayar" method="POST" action="">
            @csrf
            @method('PUT')
            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
                <div class="flex items-center gap-2.5">
                    <div class="p-2 rounded-xl bg-amber-100 text-amber-700">
                        <i data-lucide="credit-card" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <h3 class="text-sm font-bold text-slate-900">Ubah Status Slip</h3>
                        <p id="labelNomorSlipStatus" class="text-xs font-mono text-slate-500 font-medium"></p>
                    </div>
                </div>
                <button type="button" onclick="tutupModal('modalStatusBayar')" class="text-slate-400 hover:text-slate-600 p-1 rounded-lg hover:bg-slate-100">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <div class="p-5 space-y-4">
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5">Status Pembayaran <span class="text-rose-500">*</span></label>
                    <select id="selectStatusPembayaran" name="status_pembayaran" required class="w-full text-xs font-bold px-3 py-2.5 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500">
                        <option value="draft">Draft (Belum Final)</option>
                        <option value="disetujui">Disetujui (Siap Dibayar)</option>
                        <option value="dibayar">Dibayar (Selesai Ditransfer)</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5">Metode Pembayaran</label>
                    <input type="text" name="metode_pembayaran" value="Transfer Bank BCA" placeholder="Contoh: Transfer Bank BCA / Tunai" class="w-full text-xs font-medium px-3 py-2 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5">Catatan Tambahan</label>
                    <textarea name="catatan" rows="2" placeholder="Catatan internal slip gaji..." class="w-full text-xs font-medium p-3 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea>
                </div>
            </div>

            <div class="p-4 border-t border-slate-100 bg-slate-50/50 flex items-center justify-end gap-2.5">
                <button type="button" onclick="tutupModal('modalStatusBayar')" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100 transition-colors">
                    Batal
                </button>
                <button type="submit" class="px-4 py-2 rounded-xl text-xs font-bold bg-primary-600 hover:bg-primary-700 text-white shadow-sm transition-all">
                    Simpan Status
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Form Hapus Slip Helper -->
<form id="formHapusSlip" method="POST" action="" class="hidden">
    @csrf
    @method('DELETE')
</form>

@endsection

@push('scripts')
<script>
    function tutupModal(id) {
        document.getElementById(id).classList.add('hidden');
    }

    function formatRupiah(num) {
        return 'Rp ' + Number(num).toLocaleString('id-ID');
    }

    function bukaModalDetailSlip(id) {
        document.getElementById('labelDetailSlipNomor').innerText = 'Memuat...';
        document.getElementById('btnCetakSlipModal').href = `/admin/penggajian/gaji-bersih/${id}/cetak`;
        const content = document.getElementById('modalDetailSlipContent');
        content.innerHTML = `
            <div class="py-12 text-center text-slate-400">
                <i data-lucide="loader-2" class="w-8 h-8 mx-auto animate-spin mb-2"></i>
                <p class="text-xs font-semibold">Memuat rincian slip gaji...</p>
            </div>
        `;
        document.getElementById('modalDetailSlip').classList.remove('hidden');
        lucide.createIcons();

        fetch(`/admin/penggajian/gaji-bersih/${id}`, {
            headers: { 'Accept': 'application/json' }
        })
        .then(res => res.json())
        .then(res => {
            if (!res.success || !res.penggajian) return;
            const p = res.penggajian;
            const peg = p.pegawai;

            document.getElementById('labelDetailSlipNomor').innerText = p.nomor_slip;
            document.getElementById('labelStatusPembayaranDetail').innerText = 'Status: ' + p.status_pembayaran.toUpperCase();

            // Rincian Tunjangan
            let tunjanganRows = '';
            if (p.tunjangan_details && p.tunjangan_details.length > 0) {
                p.tunjangan_details.forEach(td => {
                    const badgeLembur = td.tipe_nilai === 'lembur_otomatis' 
                        ? '<span class="ml-1.5 px-1.5 py-0.5 rounded text-[9px] font-bold bg-amber-100 text-amber-800">Lembur Otomatis</span>' 
                        : '';
                    tunjanganRows += `
                        <div class="flex items-center justify-between py-1.5 border-b border-slate-100 text-xs">
                            <span class="text-slate-700 font-medium">${td.nama_komponen} ${badgeLembur}</span>
                            <span class="font-bold text-emerald-700">+${formatRupiah(td.nominal)}</span>
                        </div>
                    `;
                });
            } else {
                tunjanganRows = '<p class="text-xs text-slate-400 italic py-1">Tidak ada komponen tunjangan.</p>';
            }

            // Rincian Potongan
            let potonganRows = '';
            if (p.potongan_details && p.potongan_details.length > 0) {
                p.potongan_details.forEach(pd => {
                    const badgeDenda = pd.tipe_nilai === 'denda_otomatis' 
                        ? '<span class="ml-1.5 px-1.5 py-0.5 rounded text-[9px] font-bold bg-rose-100 text-rose-800">Denda Keterlambatan</span>' 
                        : '';
                    potonganRows += `
                        <div class="flex items-center justify-between py-1.5 border-b border-slate-100 text-xs">
                            <span class="text-slate-700 font-medium">${pd.nama_komponen} ${badgeDenda}</span>
                            <span class="font-bold text-rose-700">-${formatRupiah(pd.nominal)}</span>
                        </div>
                    `;
                });
            } else {
                potonganRows = '<p class="text-xs text-slate-400 italic py-1">Tidak ada komponen potongan.</p>';
            }

            const infoBankHtml = (peg?.nama_bank && peg?.nomor_rekening)
                ? `<div class="mt-1 flex items-center gap-1 text-[11px] font-mono text-slate-700 bg-white border border-slate-200 px-2 py-0.5 rounded-lg inline-flex">
                    <span class="text-primary-600 font-bold">💳 ${peg.nama_bank}</span>: ${peg.nomor_rekening}
                    <span class="text-slate-400 font-sans text-[10px]">(a.n. ${peg.atas_nama_rekening || peg.nama_lengkap})</span>
                   </div>`
                : `<div class="mt-1 text-[10px] text-amber-600 italic">⚠️ Rekening bank belum diatur di data pegawai</div>`;

            content.innerHTML = `
                <!-- Header Identitas Pegawai -->
                <div class="p-4 rounded-xl bg-slate-50 border border-slate-200/80 flex items-center justify-between">
                    <div>
                        <h4 class="font-bold text-slate-900 text-sm">${peg?.nama_lengkap ?? '-'}</h4>
                        <p class="text-xs text-slate-500">NIP: ${peg?.nip ?? '-'} • ${peg?.departemen?.nama_departemen ?? '-'} (${peg?.jabatan?.nama_jabatan ?? '-'})</p>
                        ${infoBankHtml}
                    </div>
                    <div class="text-right">
                        <span class="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Periode</span>
                        <p class="text-xs font-bold text-slate-800">${p.bulan}/${p.tahun}</p>
                    </div>
                </div>

                <!-- Info Absensi & Lembur Bulan Ini -->
                <div class="grid grid-cols-3 gap-3 text-center">
                    <div class="p-3 rounded-xl bg-slate-50 border border-slate-200/70">
                        <span class="text-[10px] font-bold uppercase text-slate-400">Hari Hadir</span>
                        <p class="text-base font-black text-slate-800">${p.total_kehadiran} Hari</p>
                    </div>
                    <div class="p-3 rounded-xl bg-amber-50/60 border border-amber-200/70">
                        <span class="text-[10px] font-bold uppercase text-amber-600">Total Lembur</span>
                        <p class="text-base font-black text-amber-800">${p.total_jam_lembur} Jam</p>
                    </div>
                    <div class="p-3 rounded-xl bg-rose-50/60 border border-rose-200/70">
                        <span class="text-[10px] font-bold uppercase text-rose-600">Menit Terlambat</span>
                        <p class="text-base font-black text-rose-800">${p.total_menit_terlambat} Mnt</p>
                    </div>
                </div>

                <!-- Komponen Gaji: 2 Kolom -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- Kolom Tunjangan & Gaji Pokok -->
                    <div class="p-4 rounded-xl border border-emerald-100 bg-emerald-50/30">
                        <h5 class="text-xs font-black uppercase text-emerald-800 mb-2 flex items-center gap-1.5">
                            <i data-lucide="plus-circle" class="w-3.5 h-3.5"></i>
                            <span>Penerimaan (Tunjangan)</span>
                        </h5>
                        <div class="space-y-1">
                            <div class="flex items-center justify-between py-1.5 border-b border-emerald-100 text-xs font-bold text-slate-900">
                                <span>Gaji Pokok Dasar</span>
                                <span>${formatRupiah(p.gaji_pokok)}</span>
                            </div>
                            ${tunjanganRows}
                        </div>
                        <div class="flex items-center justify-between pt-3 mt-2 border-t border-emerald-200 text-xs font-black text-emerald-900">
                            <span>Subtotal Penerimaan:</span>
                            <span>${formatRupiah(Number(p.gaji_pokok) + Number(p.total_tunjangan))}</span>
                        </div>
                    </div>

                    <!-- Kolom Potongan -->
                    <div class="p-4 rounded-xl border border-rose-100 bg-rose-50/30">
                        <h5 class="text-xs font-black uppercase text-rose-800 mb-2 flex items-center gap-1.5">
                            <i data-lucide="minus-circle" class="w-3.5 h-3.5"></i>
                            <span>Potongan Gaji</span>
                        </h5>
                        <div class="space-y-1">
                            ${potonganRows}
                        </div>
                        <div class="flex items-center justify-between pt-3 mt-2 border-t border-rose-200 text-xs font-black text-rose-900">
                            <span>Total Potongan:</span>
                            <span>-${formatRupiah(p.total_potongan)}</span>
                        </div>
                    </div>
                </div>

                <!-- Box Take Home Pay -->
                <div class="p-4 rounded-xl bg-gradient-to-r from-slate-900 to-slate-800 text-white flex items-center justify-between">
                    <div>
                        <span class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Gaji Bersih Diterima (Take Home Pay)</span>
                        <p class="text-xl font-black text-emerald-400 mt-0.5">${formatRupiah(p.gaji_bersih)}</p>
                    </div>
                    <span class="px-3 py-1.5 rounded-xl bg-white/10 text-white font-bold text-xs uppercase tracking-wider">
                        ${p.metode_pembayaran || 'Transfer Bank'}
                    </span>
                </div>
            `;
            lucide.createIcons();
        });
    }

    function bukaModalStatus(id, nomor, statusSaatIni) {
        document.getElementById('labelNomorSlipStatus').innerText = nomor;
        document.getElementById('selectStatusPembayaran').value = statusSaatIni;
        document.getElementById('formStatusBayar').action = `/admin/penggajian/gaji-bersih/${id}/status`;
        document.getElementById('modalStatusBayar').classList.remove('hidden');
    }

    function konfirmasiHapusSlip(id, nomor) {
        if (confirm(`Apakah Anda yakin ingin menghapus slip gaji ${nomor}?`)) {
            const form = document.getElementById('formHapusSlip');
            form.action = `/admin/penggajian/gaji-bersih/${id}`;
            form.submit();
        }
    }
</script>
@endpush