@extends('layouts.kurir_sidebar')

@section('content')
<div class="space-y-6">
    {{-- ===== PAGE HEADER ===== --}}
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center bg-white p-6 md:p-8 rounded-[2rem] md:rounded-[2.5rem] shadow-sm border border-slate-100 gap-4">
        <div>
            <div class="inline-flex items-center gap-2 px-3 py-1 bg-gas3kg/10 text-gas3kg rounded-full text-[10px] font-black uppercase tracking-wider mb-3">
                <i data-lucide="wallet" class="w-3 h-3"></i> Informasi Gaji
            </div>
            <h1 class="text-2xl md:text-3xl font-black text-slate-800 tracking-tight leading-none">Slip Gaji Saya</h1>
            <p class="text-slate-400 text-xs font-semibold mt-1">
                Daftar riwayat slip gaji bulanan Anda
            </p>
        </div>
    </div>

    {{-- ===== TABLE SECTION ===== --}}
    <div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden">
        <div class="px-5 md:px-6 py-5 flex items-center justify-between border-b border-slate-100">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 rounded-xl bg-slate-100 flex items-center justify-center text-slate-500">
                    <i data-lucide="file-text" class="w-5 h-5"></i>
                </div>
                <div class="text-left">
                    <h2 class="font-black text-slate-800 text-base">Riwayat Slip Gaji</h2>
                    <p class="text-xs text-slate-400 font-semibold">Semua slip gaji yang telah diproses oleh admin</p>
                </div>
            </div>
        </div>

        @if($slips->isEmpty())
            <div class="p-8 text-center">
                <div class="w-16 h-16 bg-slate-50 rounded-2xl flex items-center justify-center text-slate-300 mx-auto mb-4 border border-dashed border-slate-200">
                    <i data-lucide="wallet" class="w-8 h-8"></i>
                </div>
                <h3 class="font-bold text-slate-700 text-sm">Belum Ada Slip Gaji</h3>
                <p class="text-xs text-slate-400 mt-1">Slip gaji Anda akan muncul di sini setelah diproses oleh admin.</p>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="bg-slate-50 text-left">
                            <th class="px-6 py-3 text-[10px] font-black text-slate-400 uppercase tracking-widest">Periode</th>
                            <th class="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-widest">Hari Kerja</th>
                            <th class="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-widest">Rincian Komponen</th>
                            <th class="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-widest">Total Gaji</th>
                            <th class="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Status</th>
                            <th class="px-6 py-3 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-50">
                        @foreach($slips as $slip)
                        <tr class="hover:bg-slate-50/60 transition-colors">
                            {{-- Periode --}}
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-9 h-9 rounded-xl bg-slate-100 flex items-center justify-center text-slate-600 font-black text-xs">
                                        {{ \Carbon\Carbon::parse($slip->periode . '-01')->translatedFormat('M y') }}
                                    </div>
                                    <div>
                                        <div class="text-xs font-bold text-slate-800">
                                            {{ \Carbon\Carbon::parse($slip->periode . '-01')->translatedFormat('F Y') }}
                                        </div>
                                        <div class="text-[9px] text-slate-400 font-bold uppercase tracking-wider">
                                            Diproses: {{ $slip->created_at->format('d/m/Y') }}
                                        </div>
                                    </div>
                                </div>
                            </td>

                            {{-- Hari Kerja & Qty --}}
                            <td class="px-4 py-4">
                                <div class="text-xs font-bold text-slate-700">
                                    {{ $slip->total_hari_kerja }} Hari Kerja
                                </div>
                                <div class="flex items-center gap-1.5 mt-1">
                                    <span class="inline-flex items-center px-1.5 py-0.5 bg-gas3kg/10 text-gas3kg rounded text-[8px] font-bold border border-gas3kg/10">
                                        3kg: {{ $slip->total_qty_3kg }}
                                    </span>
                                    <span class="inline-flex items-center px-1.5 py-0.5 bg-gas12kg/10 text-gas12kg rounded text-[8px] font-bold border border-gas12kg/10">
                                        12kg: {{ $slip->total_qty_12kg }}
                                    </span>
                                </div>
                            </td>

                            {{-- Rincian --}}
                            <td class="px-4 py-4 text-xs">
                                <div class="space-y-0.5 font-medium text-slate-500">
                                    <div>Gaji Pokok: <span class="text-slate-700 font-bold">Rp{{ number_format($slip->gaji_pokok_nominal, 0, ',', '.') }}</span></div>
                                    <div>Insentif: <span class="text-slate-700 font-bold">Rp{{ number_format($slip->insentif_nominal, 0, ',', '.') }}</span></div>
                                    @if($slip->potongan > 0)
                                        <div class="text-red-500 font-bold">Potongan: <span>-Rp{{ number_format($slip->potongan, 0, ',', '.') }}</span></div>
                                    @endif
                                </div>
                            </td>

                            {{-- Total Terima --}}
                            <td class="px-4 py-4 font-mono font-black text-slate-800 text-sm">
                                Rp {{ number_format($slip->total_diterima, 0, ',', '.') }}
                            </td>

                            {{-- Status --}}
                            <td class="px-4 py-4 text-center">
                                @if($slip->status === 'dibayar')
                                    <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-emerald-50 text-emerald-600 rounded-full text-[10px] font-black border border-emerald-100 uppercase tracking-wider">
                                        <i data-lucide="check" class="w-3 h-3"></i> Dibayar
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-amber-50 text-amber-600 rounded-full text-[10px] font-black border border-amber-100 uppercase tracking-wider">
                                        <i data-lucide="clock" class="w-3 h-3"></i> Draft
                                    </span>
                                @endif
                            </td>

                            {{-- Aksi --}}
                            <td class="px-6 py-4 text-right">
                                <a href="{{ route('kurir.gaji.show', $slip->id_slip_gaji) }}" target="_blank"
                                   class="inline-flex items-center gap-1.5 bg-slate-900 hover:bg-slate-800 text-white font-bold text-xs px-3.5 py-2 rounded-xl transition-all shadow-sm">
                                    <i data-lucide="eye" class="w-3.5 h-3.5"></i>
                                    <span>Lihat Slip</span>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>
@endsection