@extends('layouts.admin_sidebar')

@section('content')
<div class="space-y-6" x-data="{ showPayModal: false, activeSlipId: '', activeKurirName: '', activeTotal: 0 }">
    {{-- ===== 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> Penggajian Karyawan
            </div>
            <h1 class="text-2xl md:text-3xl font-black text-slate-800 tracking-tight leading-none">Penggajian Karyawan</h1>
            <p class="text-slate-400 text-[10px] md:text-xs font-bold uppercase tracking-[0.2em] mt-2">
                Periode {{ \Carbon\Carbon::parse($periode . '-01')->translatedFormat('F Y') }}
            </p>
        </div>
        
        {{-- Filter Bulan --}}
        <form method="GET" action="{{ route('admin.payroll.index') }}" class="flex items-center gap-2 w-full md:w-auto">
            <div class="relative w-full md:w-48">
                <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                    <i data-lucide="calendar" class="w-4 h-4 text-slate-400"></i>
                </div>
                <input type="month" name="periode" value="{{ $periode }}" onchange="this.form.submit()"
                        class="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm font-semibold text-slate-700 focus:outline-none focus:border-gas3kg focus:ring-2 focus:ring-gas3kg/10 transition-all">
            </div>
        </form>
    </div>

    {{-- ===== STATISTIC CARDS ===== --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        {{-- Total Gaji --}}
        <div class="bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm transition-transform hover:scale-[1.02] flex items-center gap-4">
            <div class="w-12 h-12 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-500">
                <i data-lucide="banknote" class="w-6 h-6"></i>
            </div>
            <div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest leading-none mb-1">Total Biaya Gaji</p>
                <p class="text-xl md:text-2xl font-black text-slate-800">Rp {{ number_format($totalPengeluaranGaji, 0, ',', '.') }}</p>
            </div>
        </div>

        {{-- Dibayarkan --}}
        <div class="bg-emerald-600 rounded-[2rem] p-5 shadow-xl shadow-emerald-500/20 text-white transition-transform hover:scale-[1.02] flex items-center gap-4">
            <div class="w-12 h-12 rounded-2xl bg-white/15 flex items-center justify-center text-white">
                <i data-lucide="check-circle" class="w-6 h-6"></i>
            </div>
            <div>
                <p class="text-[10px] font-black text-emerald-100 uppercase tracking-widest leading-none mb-1">Gaji Dibayarkan</p>
                <p class="text-xl md:text-2xl font-black">Rp {{ number_format($gajiSudahDibayar, 0, ',', '.') }}</p>
            </div>
        </div>

        {{-- Tertunda/Draft --}}
        <div class="bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm transition-transform hover:scale-[1.02] flex items-center gap-4">
            <div class="w-12 h-12 rounded-2xl bg-amber-50 flex items-center justify-center text-amber-500">
                <i data-lucide="clock" class="w-6 h-6"></i>
            </div>
            <div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest leading-none mb-1">Belum Dibayar (Draft)</p>
                <p class="text-xl md:text-2xl font-black text-slate-800">Rp {{ number_format($gajiDraftPending, 0, ',', '.') }}</p>
            </div>
        </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="users" class="w-5 h-5"></i>
                </div>
                <div class="text-left">
                    <h2 class="font-black text-slate-800 text-base">Daftar Payroll Kurir</h2>
                    <p class="text-xs text-slate-400 font-semibold">Estimasi pengiriman dan rincian gaji periode berjalan</p>
                </div>
            </div>
        </div>

        <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">Karyawan</th>
                        <th class="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Pengiriman (Selesai)</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 Terima</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($dataPayroll as $item)
                    <tr class="hover:bg-slate-50/60 transition-colors">
                        {{-- Karyawan --}}
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 font-black text-sm">
                                    {{ substr($item['kurir']->name, 0, 1) }}
                                </div>
                                <div>
                                    <div class="text-xs font-bold text-slate-800">{{ $item['kurir']->name }}</div>
                                    <div class="text-[10px] text-slate-400">{{ $item['kurir']->phone }}</div>
                                </div>
                            </div>
                        </td>

                        {{-- Pengiriman --}}
                        <td class="px-4 py-4 text-center">
                            <div class="flex flex-col items-center justify-center gap-1.5">
                                <div class="flex items-center gap-1">
                                    <span class="inline-flex items-center px-2 py-0.5 bg-gas3kg/10 text-gas3kg rounded-lg text-[9px] font-bold border border-gas3kg/20">
                                        3kg: {{ $item['qty_3kg'] }} tabung
                                    </span>
                                    <span class="inline-flex items-center px-2 py-0.5 bg-gas12kg/10 text-gas12kg rounded-lg text-[9px] font-bold border border-gas12kg/20">
                                        12kg: {{ $item['qty_12kg'] }} tabung
                                    </span>
                                </div>
                                <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">
                                    Aktif: {{ $item['hari_kerja'] }} Hari Kerja
                                </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($item['gaji_pokok'], 0, ',', '.') }}</span></div>
                                <div>Insentif: <span class="text-slate-700 font-bold">Rp{{ number_format($item['insentif'], 0, ',', '.') }}</span></div>
                                @if($item['potongan'] > 0)
                                    <div class="text-red-500">Potongan: <span>-Rp{{ number_format($item['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($item['total'], 0, ',', '.') }}
                        </td>

                        {{-- Status --}}
                        <td class="px-4 py-4 text-center">
                            @if($item['is_saved'])
                                @if($item['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="edit-3" class="w-3 h-3"></i> Draft
                                    </span>
                                @endif
                            @else
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-slate-50 text-slate-400 rounded-full text-[10px] font-bold border border-slate-100 uppercase tracking-wider">
                                    Belum Diproses
                                </span>
                            @endif
                        </td>

                        {{-- Aksi --}}
                        <td class="px-6 py-4 text-right">
                            <div class="flex items-center justify-end gap-2">
                                @if(!$item['is_saved'] || $item['status'] === 'draft')
                                    {{-- Buat Slip Gaji --}}
                                    <a href="{{ route('admin.payroll.create', ['id_user' => $item['kurir']->id_user, 'periode' => $periode]) }}" 
                                       class="inline-flex items-center gap-1 bg-gas3kg hover:bg-green-700 text-white font-bold text-xs px-3 py-1.5 rounded-xl transition-all shadow-sm">
                                        <i data-lucide="plus-circle" class="w-3.5 h-3.5"></i>
                                        <span>{{ $item['is_saved'] ? 'Edit Slip' : 'Proses Slip' }}</span>
                                    </a>

                                    {{-- Tandai Dibayar --}}
                                    @if($item['is_saved'])
                                        <button @click="showPayModal = true; activeSlipId = '{{ $item['id_slip_gaji'] }}'; activeKurirName = '{{ $item['kurir']->name }}'; activeTotal = '{{ number_format($item['total'], 0, ',', '.') }}'" 
                                                class="inline-flex items-center gap-1 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs px-3 py-1.5 rounded-xl transition-all shadow-sm">
                                            <i data-lucide="check" class="w-3.5 h-3.5"></i>
                                            <span>Bayar</span>
                                        </button>
                                    @endif
                                @else
                                    {{-- Detail/Cetak Slip --}}
                                    <a href="{{ route('admin.payroll.show', $item['id_slip_gaji']) }}" target="_blank"
                                       class="inline-flex items-center gap-1 bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold text-xs px-3 py-1.5 rounded-xl transition-all">
                                        <i data-lucide="printer" class="w-3.5 h-3.5"></i>
                                        <span>Slip Gaji</span>
                                    </a>
                                @endif

                                {{-- Hapus Slip (jika sudah di-save) --}}
                                @if($item['is_saved'])
                                    <form action="{{ route('admin.payroll.destroy', $item['id_slip_gaji']) }}" method="POST" class="inline" onsubmit="return confirm('Apakah Anda yakin ingin menghapus slip gaji ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-slate-300 hover:text-red-500 p-1.5 rounded-lg transition-colors">
                                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    {{-- ===== MODAL PEMBAYARAN GAJI ===== --}}
    <div x-show="showPayModal" class="fixed inset-0 z-50 overflow-y-auto flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm" x-cloak>
        <div class="bg-white rounded-[2rem] border border-slate-100 max-w-md w-full p-6 md:p-8 shadow-2xl relative" @click.away="showPayModal = false">
            <button @click="showPayModal = false" class="absolute top-6 right-6 text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>

            <div class="mb-6 text-left">
                <div class="w-12 h-12 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center mb-4">
                    <i data-lucide="banknote" class="w-6 h-6"></i>
                </div>
                <h3 class="text-lg font-black text-slate-800">Tandai Gaji Telah Dibayar</h3>
                <p class="text-xs text-slate-400 font-semibold mt-1">Konfirmasi pengeluaran gaji untuk kurir <span class="text-slate-600 font-black" x-text="activeKurirName"></span> sebesar <span class="text-emerald-600 font-black">Rp <span x-text="activeTotal"></span></span></p>
            </div>

            <form :action="'/admin/payroll/' + activeSlipId + '/pay'" method="POST" enctype="multipart/form-data" class="space-y-4 text-left">
                @csrf
                <div>
                    <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Tanggal Transfer / Bayar</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                            <i data-lucide="calendar" class="w-4 h-4 text-slate-400"></i>
                        </div>
                        <input type="date" name="tanggal_bayar" value="{{ date('Y-m-d') }}"
                               class="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm font-semibold text-slate-700 focus:outline-none focus:border-gas3kg focus:ring-2 focus:ring-gas3kg/10 transition-all" required>
                    </div>
                </div>

                <div>
                    <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Bukti Transfer (Opsional)</label>
                    <input type="file" name="bukti_transfer" accept="image/*"
                           class="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-gas3kg/10 file:text-gas3kg hover:file:bg-gas3kg/20">
                </div>

                <div class="flex gap-3 mt-6">
                    <button type="button" @click="showPayModal = false"
                            class="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold text-xs py-3 rounded-xl transition-all">
                        Batal
                    </button>
                    <button type="submit"
                            class="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white font-black text-xs py-3 rounded-xl transition-all shadow-lg shadow-emerald-600/25">
                        Konfirmasi Bayar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection