@extends('layouts.kurir_sidebar')

@section('content')
<div class="space-y-6 no-print">
    {{-- ===== PAGE HEADER ===== --}}
    <div class="flex justify-between items-center bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100">
        <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-2">
                <i data-lucide="check-circle" class="w-3 h-3"></i> Slip Gaji
            </div>
            <h1 class="text-xl md:text-2xl font-black text-slate-800 tracking-tight leading-none">Slip Gaji #{{ $slip->id_slip_gaji }}</h1>
        </div>
        
        <div class="flex items-center gap-2">
            <a href="{{ route('kurir.gaji') }}" 
               class="bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold text-xs px-4 py-2.5 rounded-xl transition-all">
                Kembali
            </a>
            <button id="btnDownloadPng" 
                    class="bg-blue-600 hover:bg-blue-700 text-white font-black text-xs px-5 py-2.5 rounded-xl transition-all shadow-lg shadow-blue-600/25 flex items-center gap-1.5">
                <i data-lucide="image" class="w-4 h-4"></i> Unduh PNG
            </button>
        </div>
    </div>
</div>

{{-- ===== PRINT CONTAINER ===== --}}
<div class="print-container bg-white p-6 rounded-3xl border border-slate-100 shadow-sm max-w-md mx-auto mt-6">
    {{-- Header Slip --}}
    <div class="flex justify-between items-start border-b-2 border-dashed border-slate-200 pb-4 mb-4">
        <div>
            <h2 class="text-xl font-black text-gas3kg tracking-tight leading-none">GASKU</h2>
            <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-1">Distributor LPG & Delivery</p>
        </div>
        <div class="text-right">
            <h3 class="text-sm font-black text-slate-800">SLIP GAJI KARYAWAN</h3>
            <p class="text-[10px] text-slate-400 font-bold font-mono">{{ $slip->id_slip_gaji }}</p>
            <p class="text-[9px] text-slate-500 font-bold mt-1">Periode: {{ \Carbon\Carbon::parse($slip->periode . '-01')->translatedFormat('F Y') }}</p>
        </div>
    </div>

    {{-- Detail Karyawan --}}
    <div class="grid grid-cols-2 gap-4 text-xs mb-4 pb-4 border-b border-slate-100">
        <div>
            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">Nama Karyawan</p>
            <p class="font-bold text-slate-800 text-xs">{{ $slip->user->name }}</p>
            <p class="text-[10px] text-slate-500">{{ $slip->user->phone }}</p>
        </div>
        <div class="text-right">
            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">Status Pembayaran</p>
            <span class="inline-block px-2 py-0.5 text-[9px] font-black uppercase tracking-wider rounded-full {{ $slip->status === 'dibayar' ? 'bg-emerald-50 text-emerald-600 border border-emerald-100' : 'bg-amber-50 text-amber-600 border border-amber-100' }}">
                {{ $slip->status }}
            </span>
            @if($slip->tanggal_bayar)
                <p class="text-[9px] text-slate-400 mt-1">{{ \Carbon\Carbon::parse($slip->tanggal_bayar)->translatedFormat('d M Y') }}</p>
            @endif
        </div>
    </div>

    {{-- Rincian Kinerja --}}
    <div class="mb-4">
        <h4 class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2">Ringkasan Kinerja</h4>
        <div class="grid grid-cols-3 gap-2 text-center text-xs">
            <div class="bg-slate-50 p-2 rounded-xl border border-slate-100">
                <p class="text-[8px] text-slate-400 font-bold uppercase tracking-wider mb-0.5">Hari Kerja</p>
                <p class="font-black text-slate-800">{{ $slip->total_hari_kerja }} Hari</p>
            </div>
            <div class="bg-slate-50 p-2 rounded-xl border border-slate-100">
                <p class="text-[8px] text-slate-400 font-bold uppercase tracking-wider mb-0.5">Kirim 3kg</p>
                <p class="font-black text-slate-800">{{ $slip->total_qty_3kg }} Tabung</p>
            </div>
            <div class="bg-slate-50 p-2 rounded-xl border border-slate-100">
                <p class="text-[8px] text-slate-400 font-bold uppercase tracking-wider mb-0.5">Kirim 12kg</p>
                <p class="font-black text-slate-800">{{ $slip->total_qty_12kg }} Tabung</p>
            </div>
        </div>
    </div>

    {{-- Rincian Keuangan --}}
    <div class="space-y-2 mb-4 pb-4 border-b border-slate-100 text-xs">
        <h4 class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Rincian Gaji & Tunjangan</h4>
        
        <div class="flex justify-between items-center py-0.5">
            <span class="text-slate-500 font-medium">Gaji Pokok Bulanan</span>
            <span class="font-mono font-bold text-slate-800">Rp {{ number_format($slip->gaji_pokok_nominal, 0, ',', '.') }}</span>
        </div>

        <div class="flex justify-between items-start py-0.5 border-t border-slate-50 pt-1.5">
            <div class="flex flex-col">
                <span class="text-slate-500 font-medium">Komisi Pengiriman Tabung</span>
                <span class="text-[8px] text-slate-400 font-medium">(3kg: {{ $slip->total_qty_3kg }} &middot; 12kg: {{ $slip->total_qty_12kg }})</span>
            </div>
            <span class="font-mono font-bold text-slate-800">Rp {{ number_format($slip->insentif_nominal, 0, ',', '.') }}</span>
        </div>

        @if($slip->potongan > 0)
        <div class="flex justify-between items-center py-0.5 border-t border-slate-50 pt-1.5 text-red-600">
            <span>Potongan (Kasbon / Sanksi)</span>
            <span class="font-mono font-bold">-Rp {{ number_format($slip->potongan, 0, ',', '.') }}</span>
        </div>
        @endif
    </div>

    {{-- Total Bersih --}}
    <div class="bg-slate-50 p-3 rounded-xl border border-slate-100 flex justify-between items-center mb-4">
        <span class="text-[10px] font-black text-slate-600 uppercase tracking-wider">TOTAL BERSIH DITERIMA</span>
        <span class="font-mono text-lg font-black text-emerald-600">Rp {{ number_format($slip->total_diterima, 0, ',', '.') }}</span>
    </div>

    {{-- Catatan --}}
    @if($slip->catatan)
    <div class="text-[10px] text-slate-500 bg-slate-50/50 p-2.5 rounded-xl border border-slate-100/60 mb-4 italic">
        <span class="font-bold not-italic">Catatan:</span> {{ $slip->catatan }}
    </div>
    @endif

    {{-- Bukti Transfer --}}
    @if($slip->bukti_transfer)
    <div class="no-print border-t border-slate-100 pt-4 mt-4">
        <h4 class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2">Bukti Pembayaran / Transfer</h4>
        <div class="border border-slate-100 rounded-xl overflow-hidden max-w-xs mx-auto">
            <img src="{{ asset('images/bukti_gaji/' . $slip->bukti_transfer) }}" alt="Bukti Transfer Gaji" class="w-full object-cover">
        </div>
    </div>
    @endif

    {{-- Tanda Tangan --}}
    <div class="grid grid-cols-2 gap-4 text-center text-[10px] mt-8 pt-4 border-t-2 border-dashed border-slate-200">
        <div>
            <p class="text-slate-400 mb-8">Penerima,</p>
            <p class="font-bold text-slate-800 border-b border-slate-300 pb-0.5 inline-block px-4">{{ $slip->user->name }}</p>
        </div>
        <div>
            <p class="text-slate-400 mb-8">Hormat Kami,</p>
            <p class="font-bold text-slate-800 border-b border-slate-300 pb-0.5 inline-block px-4">Admin GasKu</p>
        </div>
    </div>
</div>

<style>
    @media print {
        /* Sembunyikan sidebar, navigasi, header, dan tombol cetak */
        aside, nav, header, .no-print, [data-lucide] {
            display: none !important;
        }
        
        body, html, main {
            background: white !important;
            color: black !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .print-container {
            border: none !important;
            box-shadow: none !important;
            margin: 0 auto !important;
            padding: 12px !important;
            width: 420px !important;
            max-width: 420px !important;
            background: transparent !important;
        }
    }
</style>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
    document.getElementById('btnDownloadPng').addEventListener('click', function() {
        const target = document.querySelector('.print-container');
        
        // Simpan styling asli sementara
        const originalShadow = target.style.boxShadow;
        const originalBorder = target.style.border;
        const originalRadius = target.style.borderRadius;
        
        // Buat tampilan lebih bersih untuk PNG (seperti struk belanja real)
        target.style.boxShadow = 'none';
        target.style.border = '1px solid #e2e8f0';
        target.style.borderRadius = '0px'; 
        
        html2canvas(target, {
            scale: 3, // Meningkatkan resolusi agar teks tajam
            useCORS: true,
            allowTaint: true,
            backgroundColor: '#ffffff'
        }).then(canvas => {
            // Kembalikan style asli
            target.style.boxShadow = originalShadow;
            target.style.border = originalBorder;
            target.style.borderRadius = originalRadius;
            
            // Buat download link
            const link = document.createElement('a');
            link.download = 'Slip_Gaji_{{ str_replace(' ', '_', $slip->user->name) }}_{{ $slip->periode }}.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
        });
    });
</script>
@endpush