@extends('layouts.admin_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="edit-3" class="w-3 h-3"></i> Payroll
            </div>
            <h1 class="text-2xl md:text-3xl font-black text-slate-800 tracking-tight leading-none">
                {{ $existingSlip ? 'Edit Slip Gaji' : 'Buat Slip Gaji baru' }}
            </h1>
            <p class="text-slate-400 text-[10px] md:text-xs font-bold uppercase tracking-[0.2em] mt-2">
                Kurir: {{ $kurir->name }} &middot; Periode {{ \Carbon\Carbon::parse($periode . '-01')->translatedFormat('F Y') }}
            </p>
        </div>
     
        <a href="{{ route('admin.payroll.index', ['periode' => $periode]) }}" 
           class="inline-flex items-center gap-2 bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold text-sm px-5 py-3 rounded-xl transition-all">
            <i data-lucide="arrow-left" class="w-4 h-4"></i> Kembali
        </a>
    </div>

    {{-- ===== MAIN GRID ===== --}}
    <form method="POST" action="{{ route('admin.payroll.store') }}" enctype="multipart/form-data" class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        @csrf
        <input type="hidden" name="id_user" value="{{ $kurir->id_user }}">
        <input type="hidden" name="periode" value="{{ $periode }}">

        {{-- LEFT SIDE: Courier & Performance Summary --}}
        <div class="lg:col-span-1 space-y-6">
            {{-- Courier Profile Card --}}
            <div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm text-center">
                <div class="w-20 h-20 rounded-full bg-slate-100 mx-auto flex items-center justify-center text-slate-500 text-3xl font-black mb-4">
                    {{ substr($kurir->name, 0, 1) }}
                </div>
                <h3 class="text-lg font-black text-slate-800 leading-none">{{ $kurir->name }}</h3>
                <p class="text-xs text-slate-400 font-semibold mt-1">ID Karyawan: {{ $kurir->id_user }}</p>
                <div class="mt-4 pt-4 border-t border-slate-50 text-left text-xs space-y-2.5 text-slate-500 font-medium">
                    <div class="flex justify-between"><span>Email:</span><span class="text-slate-800 font-bold">{{ $kurir->email }}</span></div>
                    <div class="flex justify-between"><span>No Telepon:</span><span class="text-slate-800 font-bold">{{ $kurir->phone }}</span></div>
                </div>
            </div>

            {{-- Performance Metrics --}}
            <div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm">
                <h3 class="text-sm font-black text-slate-800 mb-4 flex items-center gap-2">
                    <i data-lucide="truck" class="w-4 h-4 text-gas3kg"></i> Ringkasan Kinerja Periode Ini
                </h3>
                
                <div class="space-y-4">
                    {{-- Hari Kerja --}}
                    <div class="p-3.5 bg-slate-50 rounded-2xl border border-slate-100">
                        <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest leading-none mb-1">Hari Kerja Aktif</p>
                        <p class="text-xl font-black text-slate-800">{{ $totalHariKerja }} Hari</p>
                        <p class="text-[10px] text-slate-400 mt-1">Dihitung dari hari melakukan pengiriman selesai</p>
                    </div>

                    {{-- Pengantaran 3kg --}}
                    <div class="p-3.5 bg-emerald-50/50 rounded-2xl border border-emerald-100/50 flex justify-between items-center">
                        <div>
                            <p class="text-[9px] font-black text-emerald-600 uppercase tracking-widest leading-none mb-1">Tabung 3kg Terkirim</p>
                            <p class="text-xl font-black text-slate-800">{{ $qty3kg }} Tabung</p>
                        </div>
                        <div class="text-right">
                            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest leading-none mb-1">Komisi per Tabung</p>
                            <p class="text-xs font-bold text-slate-500">Rp {{ number_format($kurir->insentif_3kg, 0, ',', '.') }}</p>
                        </div>
                    </div>

                    {{-- Pengantaran 12kg --}}
                    <div class="p-3.5 bg-pink-50/50 rounded-2xl border border-pink-100/50 flex justify-between items-center">
                        <div>
                            <p class="text-[9px] font-black text-pink-600 uppercase tracking-widest leading-none mb-1">Tabung 12kg / Big Terkirim</p>
                            <p class="text-xl font-black text-slate-800">{{ $qty12kg }} Tabung</p>
                        </div>
                        <div class="text-right">
                            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest leading-none mb-1">Komisi per Tabung</p>
                            <p class="text-xs font-bold text-slate-500">Rp {{ number_format($kurir->insentif_12kg, 0, ',', '.') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- RIGHT SIDE: Form Input --}}
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white p-6 md:p-8 rounded-[2rem] border border-slate-100 shadow-sm space-y-6">
                <h3 class="text-sm font-black text-slate-800 border-b border-slate-50 pb-4">Rincian Perhitungan Gaji</h3>

                {{-- Hidden/Readonly inputs representing delivery values --}}
                <input type="hidden" name="total_qty_3kg" value="{{ $qty3kg }}">
                <input type="hidden" name="total_qty_12kg" value="{{ $qty12kg }}">
                <input type="hidden" id="total_hari_kerja" name="total_hari_kerja" value="{{ $totalHariKerja }}">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {{-- Gaji Pokok --}}
                    <div>
                        <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Gaji Pokok</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center text-slate-400 text-xs font-bold pointer-events-none">Rp</span>
                            <input type="text" id="gaji_pokok_nominal_mask" 
                                   value="{{ number_format(old('gaji_pokok_nominal', $existingSlip ? $existingSlip->gaji_pokok_nominal : $kurir->gaji_pokok), 0, ',', '.') }}"
                                   oninput="formatInput(this, 'gaji_pokok_nominal')"
                                   class="w-full pl-9 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm font-bold text-slate-700 focus:outline-none focus:border-gas3kg focus:ring-2 focus:ring-gas3kg/10 transition-all" required>
                            <input type="hidden" id="gaji_pokok_nominal" name="gaji_pokok_nominal" 
                                   value="{{ old('gaji_pokok_nominal', $existingSlip ? $existingSlip->gaji_pokok_nominal : $kurir->gaji_pokok) }}">
                        </div>
                    </div>

                    {{-- Insentif nominal (Readonly) --}}
                    <div>
                        <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Total Insentif Pengiriman (Auto)</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center text-slate-400 text-xs font-bold pointer-events-none">Rp</span>
                            <input type="text" id="insentif_nominal_mask" 
                                   value="{{ number_format($existingSlip ? $existingSlip->insentif_nominal : ($qty3kg * $kurir->insentif_3kg + $qty12kg * $kurir->insentif_12kg), 0, ',', '.') }}"
                                   class="w-full pl-9 pr-4 py-2.5 bg-slate-100 border border-slate-200 rounded-xl text-sm font-bold text-slate-500 cursor-not-allowed pointer-events-none" readonly>
                            <input type="hidden" id="insentif_nominal" name="insentif_nominal" 
                                   value="{{ $existingSlip ? $existingSlip->insentif_nominal : ($qty3kg * $kurir->insentif_3kg + $qty12kg * $kurir->insentif_12kg) }}">
                        </div>
                    </div>

                    {{-- Hidden Uang Makan Nominal --}}
                    <input type="hidden" id="uang_makan_nominal" name="uang_makan_nominal" value="0">

                    {{-- Potongan --}}
                    <div>
                        <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5 text-red-500">Potongan Gaji (Kasbon / Denda)</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center text-red-400 text-xs font-bold pointer-events-none">Rp</span>
                            <input type="text" id="potongan_mask" 
                                   value="{{ number_format(old('potongan', $existingSlip ? $existingSlip->potongan : 0), 0, ',', '.') }}"
                                   oninput="formatInput(this, 'potongan')"
                                   class="w-full pl-9 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm font-bold text-red-600 focus:outline-none focus:border-red-500 focus:ring-2 focus:ring-red-500/10 transition-all" required>
                            <input type="hidden" id="potongan" name="potongan" 
                                   value="{{ old('potongan', $existingSlip ? $existingSlip->potongan : 0) }}">
                        </div>
                    </div>

                    {{-- Catatan --}}
                    <div>
                        <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Catatan Slip Gaji</label>
                        <textarea name="catatan" rows="1"
                                  class="w-full px-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">{{ old('catatan', $existingSlip ? $existingSlip->catatan : '') }}</textarea>
                    </div>
                </div>

                {{-- Status & Pembayaran --}}
                <div class="border-t border-slate-50 pt-6 space-y-4" x-data="{ slipStatus: '{{ old('status', $existingSlip ? $existingSlip->status : 'draft') }}' }">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Status Slip Gaji</label>
                            <select name="status" x-model="slipStatus"
                                    class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm font-bold text-slate-700 focus:outline-none focus:border-gas3kg focus:ring-2 focus:ring-gas3kg/10 transition-all">
                                <option value="draft">Draft (Belum Dibayar)</option>
                                <option value="dibayar">Dibayar (Selesai)</option>
                            </select>
                        </div>

                        <div x-show="slipStatus === 'dibayar'" class="transition-opacity">
                            <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Tanggal Pembayaran</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="{{ old('tanggal_bayar', $existingSlip && $existingSlip->tanggal_bayar ? $existingSlip->tanggal_bayar : 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">
                            </div>
                        </div>
                    </div>

                    <div x-show="slipStatus === 'dibayar'" class="transition-opacity">
                        <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Bukti Transfer (File Foto)</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>

                {{-- TOTAL RECEIVED FOOTER --}}
                <div class="bg-slate-50 p-6 rounded-2xl border border-slate-100 flex flex-col sm:flex-row justify-between items-center gap-4">
                    <div>
                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest leading-none mb-1">Total Bersih yang Diterima Karyawan</p>
                        <p id="total_diterima_display" class="text-3xl font-black text-emerald-600 font-mono">Rp 0</p>
                        <input type="hidden" id="total_diterima" name="total_diterima" value="0">
                    </div>
                    <button type="submit"
                            class="w-full sm:w-auto inline-flex items-center justify-center gap-2 bg-gas3kg hover:bg-green-700 text-white font-black text-sm px-8 py-3.5 rounded-xl transition-all shadow-lg shadow-gas3kg/25">
                        <i data-lucide="save" class="w-4 h-4"></i> Simpan Slip Gaji
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    // Inisialisasi hitungan total saat loading awal
    document.addEventListener('DOMContentLoaded', function() {
        calculateTotal();
        lucide.createIcons();
    });

    function formatInput(el, hiddenId) {
        // Hapus semua karakter non-angka
        let value = el.value.replace(/\D/g, '');
        
        // Konversi ke number
        let numberVal = parseInt(value) || 0;
        
        // Simpan nilai bersih ke hidden input
        document.getElementById(hiddenId).value = numberVal;
        
        // Format el.value dengan titik sebagai pemisah ribuan
        el.value = numberVal.toLocaleString('id-ID');
        
        // Jalankan kalkulasi total
        calculateTotal();
    }

    function calculateTotal() {
        const gajiPokok = parseFloat(document.getElementById('gaji_pokok_nominal').value) || 0;
        const insentif = parseFloat(document.getElementById('insentif_nominal').value) || 0;
        const potongan = parseFloat(document.getElementById('potongan').value) || 0;

        // Set uang makan ke 0
        document.getElementById('uang_makan_nominal').value = 0;

        // Hitung total bersih
        const totalDiterima = Math.max(0, gajiPokok + insentif - potongan);
        document.getElementById('total_diterima').value = totalDiterima;

        // Tampilkan format mata uang rupiah
        document.getElementById('total_diterima_display').innerText = 'Rp ' + totalDiterima.toLocaleString('id-ID');
    }
</script>
@endsection