@extends('layouts.admin')

@section('title', 'Detail Slip Gaji - ' . $penggajian->nomor_slip)

@section('content')
<div class="space-y-6 max-w-5xl mx-auto">
    <!-- Breadcrumb & Navigasi Atas -->
    <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.penggajian.gaji-bersih.index') }}" class="text-xs font-semibold text-slate-500 hover:text-primary-600 transition-colors">
                    Data Gaji Bersih
                </a>
                <span class="text-xs text-slate-400">•</span>
                <span class="text-xs font-bold text-slate-800">Detail Slip Gaji</span>
            </div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight mt-1 flex items-center gap-2.5">
                <span>{{ $penggajian->pegawai?->nama_lengkap }}</span>
                <span class="px-2.5 py-0.5 rounded-lg text-xs font-mono font-bold bg-primary-50 text-primary-700 border border-primary-200">
                    {{ $penggajian->nomor_slip }}
                </span>
            </h1>
            <p class="text-xs text-slate-500 mt-0.5">Periode Penggajian: <strong>{{ $penggajian->periode_teks }}</strong> • Dihitung tanggal {{ $penggajian->tanggal_hitung ? $penggajian->tanggal_hitung->translatedFormat('d F Y') : '-' }}</p>
        </div>

        <div class="flex items-center gap-2.5">
            <a href="{{ route('admin.penggajian.gaji-bersih.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="arrow-left" class="w-4 h-4 text-slate-500"></i>
                <span>Kembali</span>
            </a>
            <a href="{{ route('admin.penggajian.gaji-bersih.cetak', $penggajian->id) }}" target="_blank" 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/20 transition-all">
                <i data-lucide="printer" class="w-4 h-4"></i>
                <span>Cetak Slip PDF</span>
            </a>
        </div>
    </div>

    <!-- Ringkasan Profil & Status Bayar -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Card 1: Identitas Pegawai -->
        <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-sm flex items-center gap-3.5">
            <div class="w-12 h-12 rounded-2xl bg-primary-100 text-primary-700 font-bold flex items-center justify-center text-sm shrink-0 overflow-hidden">
                @if($penggajian->pegawai?->foto_profil)
                    <img src="{{ asset('storage/' . $penggajian->pegawai->foto_profil) }}" alt="{{ $penggajian->pegawai->nama_lengkap }}" class="w-full h-full object-cover">
                @else
                    {{ $penggajian->pegawai?->inisial ?? 'PG' }}
                @endif
            </div>
            <div>
                <h4 class="font-bold text-slate-900 text-sm">{{ $penggajian->pegawai?->nama_lengkap }}</h4>
                <p class="text-xs text-slate-500">NIP: {{ $penggajian->pegawai?->nip }}</p>
                <p class="text-[11px] text-slate-400 mt-0.5">{{ $penggajian->pegawai?->departemen?->nama_departemen }} • {{ $penggajian->pegawai?->jabatan?->nama_jabatan }}</p>
                @if($penggajian->pegawai?->nama_bank && $penggajian->pegawai?->nomor_rekening)
                    <div class="mt-2 pt-2 border-t border-slate-100 flex items-center gap-1.5 text-[11px] font-mono text-slate-700">
                        <i data-lucide="credit-card" class="w-3.5 h-3.5 text-primary-600"></i>
                        <span>{{ $penggajian->pegawai->nama_bank }}: <strong>{{ $penggajian->pegawai->nomor_rekening }}</strong> (a.n. {{ $penggajian->pegawai->atas_nama_rekening ?: $penggajian->pegawai->nama_lengkap }})</span>
                    </div>
                @else
                    <p class="text-[10px] text-amber-600 mt-1.5 italic flex items-center gap-1">
                        <i data-lucide="alert-circle" class="w-3 h-3"></i> Rekening transfer belum diatur
                    </p>
                @endif
            </div>
        </div>

        <!-- Card 2: Status Pembayaran -->
        <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-sm flex items-center justify-between">
            <div>
                <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider block">Status Payroll</span>
                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-xl text-xs font-black uppercase mt-1.5 {{ $penggajian->status_pembayaran === 'dibayar' ? 'bg-emerald-100 text-emerald-800' : ($penggajian->status_pembayaran === 'disetujui' ? 'bg-blue-100 text-blue-800' : 'bg-slate-100 text-slate-700') }}">
                    <i data-lucide="{{ $penggajian->status_pembayaran === 'dibayar' ? 'check-circle-2' : 'clock' }}" class="w-3.5 h-3.5"></i>
                    <span>{{ $penggajian->status_pembayaran }}</span>
                </span>
                <p class="text-[11px] text-slate-400 mt-1">{{ $penggajian->metode_pembayaran }}</p>
            </div>
            <div class="text-right">
                <span class="text-[11px] text-slate-400 block">Tanggal Bayar</span>
                <strong class="text-xs text-slate-800">{{ $penggajian->tanggal_bayar ? $penggajian->tanggal_bayar->translatedFormat('d M Y') : 'Menunggu' }}</strong>
            </div>
        </div>

        <!-- Card 3: Take Home Pay Hero -->
        <div class="p-5 rounded-2xl bg-gradient-to-br from-slate-900 to-slate-800 text-white shadow-lg relative overflow-hidden">
            <span class="text-[10px] font-bold uppercase tracking-wider text-slate-400 block">Take Home Pay (Gaji Bersih)</span>
            <div class="text-2xl font-black text-emerald-400 mt-1">
                Rp {{ number_format($penggajian->gaji_bersih, 0, ',', '.') }}
            </div>
            <p class="text-[11px] text-slate-400 mt-0.5">Sudah termasuk lembur & potongan denda</p>
        </div>
    </div>

    <!-- Statistik Kerja Periode Ini -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm text-center">
            <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Total Kehadiran</span>
            <div class="text-xl font-black text-slate-800 mt-1">{{ $penggajian->total_kehadiran }} Hari</div>
            <span class="text-[11px] text-slate-400">Absensi periode aktif</span>
        </div>
        <div class="p-4 rounded-2xl bg-rose-50/70 border border-rose-200/80 shadow-sm text-center">
            <span class="text-[11px] font-bold text-rose-700 uppercase tracking-wider">Tidak Hadir (Alfa)</span>
            <div class="text-xl font-black text-rose-900 mt-1">{{ $penggajian->total_tidak_hadir ?? 0 }} Hari</div>
            <span class="text-[11px] text-rose-700 font-semibold">-Rp {{ number_format($penggajian->total_denda_tidak_hadir ?? 0, 0, ',', '.') }}</span>
        </div>
        <div class="p-4 rounded-2xl bg-amber-50/70 border border-amber-200/80 shadow-sm text-center">
            <span class="text-[11px] font-bold text-amber-700 uppercase tracking-wider">Total Lembur Disetujui</span>
            <div class="text-xl font-black text-amber-900 mt-1">{{ number_format($penggajian->total_jam_lembur, 1) }} Jam</div>
            <span class="text-[11px] text-amber-700 font-semibold">+Rp {{ number_format($penggajian->total_upah_lembur, 0, ',', '.') }}</span>
        </div>
        <div class="p-4 rounded-2xl bg-orange-50/70 border border-orange-200/80 shadow-sm text-center">
            <span class="text-[11px] font-bold text-orange-700 uppercase tracking-wider">Denda Keterlambatan</span>
            <div class="text-xl font-black text-orange-900 mt-1">{{ $penggajian->total_menit_terlambat }} Menit</div>
            <span class="text-[11px] text-orange-700 font-semibold">-Rp {{ number_format($penggajian->total_denda_keterlambatan, 0, ',', '.') }}</span>
        </div>
    </div>

    <!-- Rincian Komponen Dua Kolom (Penerimaan vs Potongan) -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Kolom Penerimaan (Gaji Pokok + Tunjangan) -->
        <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
            <div class="p-4 bg-emerald-50/80 border-b border-emerald-100 flex items-center justify-between">
                <div class="flex items-center gap-2 text-emerald-800 font-bold text-xs uppercase tracking-wide">
                    <i data-lucide="plus-circle" class="w-4 h-4"></i>
                    <span>A. Penerimaan / Tunjangan</span>
                </div>
                <span class="text-xs font-black text-emerald-800">
                    Rp {{ number_format($penggajian->gaji_pokok + $penggajian->total_tunjangan, 0, ',', '.') }}
                </span>
            </div>

            <div class="p-4 divide-y divide-slate-100 text-xs">
                <!-- Gaji Pokok -->
                <div class="py-2.5 flex items-center justify-between">
                    <div>
                        <p class="font-bold text-slate-900">Gaji Pokok Dasar</p>
                        <span class="text-[10px] text-slate-400">Gaji pokok bulanan tetap</span>
                    </div>
                    <span class="font-bold text-slate-900">Rp {{ number_format($penggajian->gaji_pokok, 0, ',', '.') }}</span>
                </div>

                <!-- Tunjangan Details -->
                @forelse($penggajian->tunjanganDetails as $td)
                <div class="py-2.5 flex items-center justify-between">
                    <div>
                        <div class="flex items-center gap-1.5">
                            <span class="font-semibold text-slate-800">{{ $td->nama_komponen }}</span>
                            @if($td->tipe_nilai === 'lembur_otomatis')
                                <span class="px-1.5 py-0.5 rounded text-[9px] font-bold bg-amber-100 text-amber-800">Lembur Otomatis</span>
                            @endif
                        </div>
                        @if($td->keterangan)
                            <span class="text-[10px] text-slate-400">{{ $td->keterangan }}</span>
                        @endif
                    </div>
                    <span class="font-bold text-emerald-700">+Rp {{ number_format($td->nominal, 0, ',', '.') }}</span>
                </div>
                @empty
                <div class="py-3 text-center text-slate-400 italic">
                    Tidak ada komponen tunjangan tambahan.
                </div>
                @endforelse
            </div>

            <div class="p-4 bg-slate-50 border-t border-slate-100 flex items-center justify-between text-xs font-bold text-slate-800">
                <span>Subtotal Penerimaan (Gross)</span>
                <span class="text-emerald-700">Rp {{ number_format($penggajian->gaji_pokok + $penggajian->total_tunjangan, 0, ',', '.') }}</span>
            </div>
        </div>

        <!-- Kolom Potongan Gaji -->
        <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
            <div class="p-4 bg-rose-50/80 border-b border-rose-100 flex items-center justify-between">
                <div class="flex items-center gap-2 text-rose-800 font-bold text-xs uppercase tracking-wide">
                    <i data-lucide="minus-circle" class="w-4 h-4"></i>
                    <span>B. Potongan Gaji</span>
                </div>
                <span class="text-xs font-black text-rose-800">
                    -Rp {{ number_format($penggajian->total_potongan, 0, ',', '.') }}
                </span>
            </div>

            <div class="p-4 divide-y divide-slate-100 text-xs">
                @forelse($penggajian->potonganDetails as $pd)
                <div class="py-2.5 flex items-center justify-between">
                    <div>
                        <div class="flex items-center gap-1.5">
                            <span class="font-semibold text-slate-800">{{ $pd->nama_komponen }}</span>
                            @if($pd->tipe_nilai === 'denda_otomatis')
                                <span class="px-1.5 py-0.5 rounded text-[9px] font-bold bg-orange-100 text-orange-800">Denda Keterlambatan</span>
                            @elseif($pd->tipe_nilai === 'denda_tidak_hadir_otomatis')
                                <span class="px-1.5 py-0.5 rounded text-[9px] font-bold bg-rose-100 text-rose-800">Denda Tidak Hadir</span>
                            @endif
                        </div>
                        @if($pd->keterangan)
                            <span class="text-[10px] text-slate-400">{{ $pd->keterangan }}</span>
                        @endif
                    </div>
                    <span class="font-bold text-rose-700">-Rp {{ number_format($pd->nominal, 0, ',', '.') }}</span>
                </div>
                @empty
                <div class="py-6 text-center text-slate-400 italic">
                    Tidak ada potongan gaji pada periode ini.
                </div>
                @endforelse
            </div>

            <div class="p-4 bg-slate-50 border-t border-slate-100 flex items-center justify-between text-xs font-bold text-slate-800">
                <span>Total Potongan</span>
                <span class="text-rose-700">-Rp {{ number_format($penggajian->total_potongan, 0, ',', '.') }}</span>
            </div>
        </div>
    </div>
</div>
@endsection