@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-emerald-50 text-emerald-600 rounded-full text-[10px] font-black uppercase tracking-wider mb-3">
                <i data-lucide="line-chart" class="w-3 h-3"></i> Laporan Keuangan
            </div>
            <h1 class="text-2xl md:text-3xl font-black text-slate-800 tracking-tight leading-none">Laba / Rugi</h1>
            <p class="text-slate-400 text-[10px] md:text-xs font-bold uppercase tracking-[0.2em] mt-2">
                @if(!empty($tahunDipilih))
                    Laporan Keuangan Tahunan &ndash; Tahun {{ $tahunDipilih }}
                @elseif($filtered && $tanggalAwal && $tanggalAkhir)
                    Periode {{ \Carbon\Carbon::parse($tanggalAwal)->translatedFormat('d M Y') }} &ndash; {{ \Carbon\Carbon::parse($tanggalAkhir)->translatedFormat('d M Y') }}
                @else
                    Pilih rentang tanggal atau filter tahunan untuk melihat laporan
                @endif
            </p>
        </div>
        
        <div class="flex flex-col md:flex-row items-center gap-4 w-full md:w-auto">
            <div class="w-full md:w-auto text-center md:text-left bg-slate-50 px-6 py-3 md:px-8 md:py-4 rounded-[1.5rem] md:rounded-3xl border border-slate-100">
                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest leading-none mb-1 md:mb-0">Status</p>
                @if($filtered)
                    @if($totalLaba >= 0)
                        <p class="text-xl md:text-2xl font-black text-emerald-500 mt-1 flex items-center gap-1 justify-center md:justify-start">
                            <i data-lucide="arrow-up-right" class="w-5 h-5 md:w-6 md:h-6"></i> UNTUNG
                        </p>
                    @else
                        <p class="text-xl md:text-2xl font-black text-red-500 mt-1 flex items-center gap-1 justify-center md:justify-start">
                            <i data-lucide="arrow-down-right" class="w-5 h-5 md:w-6 md:h-6"></i> RUGI
                        </p>
                    @endif
                @else
                    <p class="text-base md:text-xl font-black text-slate-300 mt-1 flex justify-center md:block">— Belum difilter</p>
                @endif
            </div>
        </div>
    </div>

    {{-- ===== FILTER FORM ===== --}}
    <form method="GET" action="{{ route('admin.laba-rugi') }}"
            class="bg-white rounded-[2rem] border border-slate-100 shadow-sm p-4 md:p-6">
        <div class="flex flex-col gap-4">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                {{-- Dropdown Pilih Tahun (Laporan Tahunan) --}}
                <div>
                    <label class="block text-[10px] font-black text-emerald-600 uppercase tracking-widest mb-1.5 flex items-center gap-1">
                        <i data-lucide="calendar-range" class="w-3.5 h-3.5"></i> Laporan Tahunan
                    </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-emerald-500"></i>
                        </div>
                        <select name="tahun" onchange="if(this.value) this.form.submit()"
                                class="w-full pl-10 pr-4 py-3 bg-emerald-50/50 border border-emerald-200 rounded-xl text-sm font-bold text-slate-800 focus:outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all cursor-pointer">
                            <option value="">-- Pilih Tahun --</option>
                            @foreach($daftarTahun as $th)
                                <option value="{{ $th }}" {{ ($tahunDipilih == $th) ? 'selected' : '' }}>Tahun {{ $th }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- Rentang Tanggal: Dari --}}
                <div>
                    <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Atau Dari Tanggal</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="dari" value="{{ $tanggalAwal }}"
                                class="w-full pl-10 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm font-semibold text-slate-700 focus:outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100 transition-all">
                    </div>
                </div>

                {{-- Rentang Tanggal: Sampai --}}
                <div>
                    <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Sampai Tanggal</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="sampai" value="{{ $tanggalAkhir }}"
                                class="w-full pl-10 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm font-semibold text-slate-700 focus:outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100 transition-all">
                    </div>
                </div>
            </div>

            {{-- Presets & Action Buttons --}}
            <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 pt-3 border-t border-slate-100">
                <div class="flex flex-wrap items-center gap-1.5">
                    <span class="text-[10px] font-black text-slate-400 uppercase tracking-wider mr-1">Preset Cepat:</span>
                    <a href="{{ route('admin.laba-rugi', ['dari' => now()->startOfMonth()->format('Y-m-d'), 'sampai' => now()->format('Y-m-d')]) }}"
                       class="px-3 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-bold transition-all">Bulan Ini</a>
                    <a href="{{ route('admin.laba-rugi', ['tahun' => date('Y')]) }}"
                       class="px-3 py-1.5 bg-emerald-100 hover:bg-emerald-200 text-emerald-800 rounded-xl text-xs font-bold transition-all flex items-center gap-1">
                        <i data-lucide="sparkles" class="w-3 h-3 text-emerald-600"></i> Tahun Ini ({{ date('Y') }})
                    </a>
                    <a href="{{ route('admin.laba-rugi', ['tahun' => date('Y') - 1]) }}"
                       class="px-3 py-1.5 bg-blue-100 hover:bg-blue-200 text-blue-800 rounded-xl text-xs font-bold transition-all">Tahun Lalu ({{ date('Y') - 1 }})</a>
                </div>
                <div class="flex gap-2">
                    <button type="submit"
                            class="flex-1 sm:flex-initial inline-flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white font-black text-sm px-6 py-2.5 rounded-xl transition-all shadow-lg shadow-emerald-500/25">
                        <i data-lucide="filter" class="w-4 h-4"></i> Tampilkan
                    </button>
                    <a href="{{ route('admin.laba-rugi') }}"
                        class="inline-flex items-center justify-center gap-2 bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold text-sm px-4 py-2.5 rounded-xl transition-all">
                        <i data-lucide="rotate-ccw" class="w-4 h-4"></i>
                        <span class="hidden sm:inline">Reset</span>
                    </a>
                </div>
            </div>
        </div>
    </form>    {{-- ===== DATA SECTION ===== --}}
    @if($filtered)
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
        {{-- Pendapatan --}}
        <div class="hover-card bg-gradient-to-br from-blue-600 to-blue-700 rounded-[2rem] p-5 shadow-xl shadow-blue-500/25 text-white transition-transform hover:scale-[1.02]">
            <div class="w-10 h-10 rounded-xl bg-white/15 flex items-center justify-center mb-3">
                <i data-lucide="banknote" class="w-5 h-5 text-white"></i>
            </div>
            <p class="text-[10px] font-black text-blue-200 uppercase tracking-widest mb-1">Total Pendapatan</p>
            <p class="text-lg font-black leading-none">Rp {{ number_format($totalPendapatan,0,',','.') }}</p>
            <p class="text-[10px] text-blue-300 mt-1">{{ $totalTransaksi }} transaksi</p>
        </div>

        {{-- Modal Beli --}}
        <div class="bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm transition-transform hover:scale-[1.02]">
            <div class="w-10 h-10 rounded-xl bg-orange-50 flex items-center justify-center mb-3">
                <i data-lucide="shopping-cart" class="w-5 h-5 text-orange-500"></i>
            </div>
            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Total Modal Beli (HPP)</p>
            <p class="text-base font-black text-slate-800 leading-none">Rp {{ number_format($totalModalBeli,0,',','.') }}</p>
            <p class="text-[10px] text-slate-400 mt-1">{{ $totalTabung }} tabung</p>
        </div>

        {{-- Pengeluaran Operasional & Gaji --}}
        <div class="bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm transition-transform hover:scale-[1.02]">
            <div class="w-10 h-10 rounded-xl bg-red-50 flex items-center justify-center mb-3">
                <i data-lucide="trending-down" class="w-5 h-5 text-red-500"></i>
            </div>
            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Total Operasional</p>
            <p class="text-base font-black text-red-500 leading-none">Rp {{ number_format($totalPengeluaranOperasional ?? $totalPengeluaran,0,',','.') }}</p>
            <p class="text-[10px] text-slate-400 mt-1">{{ optional($pengeluaranList)->count() ?? 0 }} transaksi biaya</p>
        </div>

        {{-- Beban Gaji Karyawan --}}
        <div class="bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm transition-transform hover:scale-[1.02]">
            <div class="w-10 h-10 rounded-xl bg-amber-50 flex items-center justify-center mb-3">
                <i data-lucide="users" class="w-5 h-5 text-amber-600"></i>
            </div>
            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Gaji Kurir / Karyawan</p>
            <p class="text-base font-black text-amber-600 leading-none">Rp {{ number_format($totalGajiKaryawan ?? 0,0,',','.') }}</p>
            <p class="text-[10px] text-slate-400 mt-1">{{ optional($gajiList)->count() ?? 0 }} slip dibayar</p>
        </div>

        {{-- Laba / Rugi Bersih --}}
        <div class="rounded-[2rem] p-5 shadow-xl transition-transform hover:scale-[1.02]
            {{ $totalLaba >= 0 ? 'bg-gradient-to-br from-emerald-500 to-teal-600 shadow-emerald-500/25 text-white' : 'bg-gradient-to-br from-red-500 to-rose-600 shadow-red-500/25 text-white' }}">
            <div class="w-10 h-10 rounded-xl bg-white/15 flex items-center justify-center mb-3">
                <i data-lucide="{{ $totalLaba >= 0 ? 'trending-up' : 'trending-down' }}" class="w-5 h-5 text-white"></i>
            </div>
            <p class="text-[10px] font-black {{ $totalLaba >= 0 ? 'text-emerald-100' : 'text-red-100' }} uppercase tracking-widest mb-1">
                {{ $totalLaba >= 0 ? 'Laba Bersih Akhir' : 'Rugi Bersih Akhir' }}
            </p>
            <p class="text-lg font-black leading-none">Rp {{ number_format(abs($totalLaba),0,',','.') }}</p>
        </div>
    </div>

    {{-- ===== TABEL REKAPITULASI BULANAN 1 TAHUN ===== --}}
    @if(!empty($rekapBulanan) && count($rekapBulanan) > 0)
    <div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden">
        <div class="px-5 md:px-6 py-5 border-b border-slate-100 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 rounded-xl bg-emerald-50 flex items-center justify-center">
                    <i data-lucide="calendar-check" class="w-5 h-5 text-emerald-600"></i>
                </div>
                <div>
                    <h2 class="font-black text-slate-800 text-base">Rekapitulasi Laba / Rugi Per Bulan (Tahun {{ $tahunDipilih ?? \Carbon\Carbon::parse($tanggalAwal)->year }})</h2>
                    <p class="text-xs text-slate-400 font-semibold">Memperhitungkan Pendapatan, Modal Beli (HPP), Operasional Harian, & Gaji Karyawan</p>
                </div>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-slate-50 border-b border-slate-100 text-left">
                        <th class="px-6 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Bulan</th>
                        <th class="px-4 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Tabung</th>
                        <th class="px-4 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Pendapatan</th>
                        <th class="px-4 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Modal (HPP)</th>
                        <th class="px-4 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Operasional</th>
                        <th class="px-4 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Gaji Kurir</th>
                        <th class="px-6 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">Laba / Rugi Bersih</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @php
                        $sumPend = 0; $sumModal = 0; $sumPeng = 0; $sumGaji = 0; $sumLaba = 0; $sumQty = 0;
                    @endphp
                    @foreach($rekapBulanan as $rb)
                    @php
                        $sumPend += $rb['pendapatan'];
                        $sumModal += $rb['modal'];
                        $sumPeng += $rb['pengeluaran'];
                        $sumGaji += ($rb['gaji'] ?? 0);
                        $sumLaba += $rb['laba'];
                        $sumQty += $rb['qty'];
                        $isProfit = $rb['laba'] >= 0;
                    @endphp
                    <tr class="hover:bg-slate-50/80 transition-colors">
                        <td class="px-6 py-3.5 font-bold text-slate-800">
                            {{ $rb['bulan_nama'] }}
                            @if($rb['jumlah_trx'] > 0)
                                <span class="ml-1 text-[10px] font-normal text-slate-400">({{ $rb['jumlah_trx'] }} trx)</span>
                            @endif
                        </td>
                        <td class="px-4 py-3.5 text-center font-bold text-slate-600">{{ $rb['qty'] > 0 ? number_format($rb['qty'],0,',','.') : '-' }}</td>
                        <td class="px-4 py-3.5 font-mono text-blue-600 font-semibold">Rp {{ number_format($rb['pendapatan'],0,',','.') }}</td>
                        <td class="px-4 py-3.5 font-mono text-slate-600">Rp {{ number_format($rb['modal'],0,',','.') }}</td>
                        <td class="px-4 py-3.5 font-mono text-red-500">Rp {{ number_format($rb['pengeluaran'],0,',','.') }}</td>
                        <td class="px-4 py-3.5 font-mono text-amber-600 font-semibold">Rp {{ number_format($rb['gaji'] ?? 0,0,',','.') }}</td>
                        <td class="px-6 py-3.5 text-right">
                            @if($rb['pendapatan'] > 0 || $rb['pengeluaran'] > 0 || ($rb['gaji'] ?? 0) > 0)
                                <span class="inline-flex items-center gap-1 font-mono font-black text-xs px-2.5 py-1 rounded-lg {{ $isProfit ? 'bg-emerald-50 text-emerald-600' : 'bg-red-50 text-red-600' }}">
                                    {{ $isProfit ? '+' : '−' }}Rp {{ number_format(abs($rb['laba']),0,',','.') }}
                                </span>
                            @else
                                <span class="text-slate-300 font-mono text-xs">—</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr class="bg-slate-100/90 font-black text-slate-800 border-t-2 border-slate-200">
                        <td class="px-6 py-4">TOTAL AKUMULASI (1 TAHUN)</td>
                        <td class="px-4 py-4 text-center">{{ number_format($sumQty,0,',','.') }}</td>
                        <td class="px-4 py-4 font-mono text-blue-600">Rp {{ number_format($sumPend,0,',','.') }}</td>
                        <td class="px-4 py-4 font-mono text-slate-700">Rp {{ number_format($sumModal,0,',','.') }}</td>
                        <td class="px-4 py-4 font-mono text-red-600">Rp {{ number_format($sumPeng,0,',','.') }}</td>
                        <td class="px-4 py-4 font-mono text-amber-700">Rp {{ number_format($sumGaji,0,',','.') }}</td>
                        <td class="px-6 py-4 text-right font-mono text-base {{ $sumLaba >= 0 ? 'text-emerald-600' : 'text-red-600' }}">
                            {{ $sumLaba >= 0 ? '+' : '−' }}Rp {{ number_format(abs($sumLaba),0,',','.') }}
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    @endif

    {{-- ===== REKAP PER PRODUK ===== --}}
    <div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden">
        <div class="px-5 md:px-6 py-5 border-b border-slate-100 flex items-center gap-3">
            <div class="w-9 h-9 rounded-xl bg-indigo-50 flex items-center justify-center">
                <i data-lucide="package-2" class="w-5 h-5 text-indigo-500"></i>
            </div>
            <div>
                <h2 class="font-black text-slate-800 text-base">Laba Kotor Per Produk</h2>
                <p class="text-xs text-slate-400 font-semibold">Pendapatan − Harga Beli (belum potong operasional & gaji)</p>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-slate-50 border-b border-slate-100 text-left">
                        <th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Produk</th>
                        <th class="px-4 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Qty</th>
                        <th class="px-4 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Laba Kotor</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @forelse($rekapProduk as $idProd => $prod)
                    @php $isLoss = $prod['total_laba'] < 0; @endphp
                    <tr class="hover:bg-slate-50/70 transition-colors">
                        <td class="px-6 py-4">
                            <div class="font-black text-slate-800">{{ $prod['nama'] }}</div>
                            <div class="text-[10px] text-slate-400 font-mono">{{ $prod['jumlah_trx'] }} transaksi</div>
                        </td>
                        <td class="px-4 py-4 text-center">
                            <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-blue-50 text-blue-700 text-sm font-black border border-blue-100">
                                {{ $prod['total_qty'] }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-black font-mono
                                {{ $isLoss ? 'bg-red-50 text-red-600 border border-red-100':'bg-emerald-50 text-emerald-700 border border-emerald-100' }}">
                                <i data-lucide="{{ $isLoss ? 'trending-down':'trending-up' }}" class="w-3 h-3"></i>
                                {{ $isLoss ? '−':'+' }}Rp {{ number_format(abs($prod['total_laba']),0,',','.') }}
                            </span>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="3" class="py-10 text-center text-slate-400 font-bold italic">Belum ada data</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- ===== ANALISIS PER WARUNG / PELANGGAN ===== --}}
    @if(isset($rekapPelangganList) && $rekapPelangganList->count() > 0)
    <div class="space-y-4">
        {{-- Highlight Top Warung --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            {{-- Warung Transaksi Terbanyak --}}
            @if($topTxWarung)
            <div class="bg-gradient-to-br from-indigo-50 via-purple-50 to-blue-50 border-2 border-indigo-200/80 rounded-[2rem] p-6 shadow-sm relative overflow-hidden flex items-center justify-between transition-transform hover:scale-[1.01]">
                <div class="relative z-10">
                    <div class="inline-flex items-center gap-1.5 px-3 py-1 bg-indigo-600 text-white rounded-full text-[10px] font-black uppercase tracking-wider mb-2.5 shadow-sm shadow-indigo-500/30">
                        <i data-lucide="award" class="w-3.5 h-3.5 text-amber-300"></i> Transaksi Terbanyak
                    </div>
                    <h3 class="text-2xl font-black text-indigo-950 truncate max-w-xs leading-tight mb-3">{{ $topTxWarung['nama'] }}</h3>
                    <div class="flex items-center gap-4">
                        <div>
                            <p class="text-[9px] font-black text-indigo-500 uppercase tracking-widest">Transaksi</p>
                            <p class="text-lg font-black text-indigo-800 font-mono">{{ $topTxWarung['jumlah_trx'] }} kali</p>
                        </div>
                        <div class="border-l border-indigo-200/80 pl-4">
                            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Tabung Gas</p>
                            <p class="text-lg font-black text-slate-800 font-mono">{{ number_format($topTxWarung['total_qty'],0,',','.') }} tabung</p>
                        </div>
                        <div class="border-l border-indigo-200/80 pl-4">
                            <p class="text-[9px] font-black text-indigo-500 uppercase tracking-widest">Total Omzet</p>
                            <p class="text-lg font-black text-blue-700 font-mono">Rp {{ number_format($topTxWarung['total_jual'],0,',','.') }}</p>
                        </div>
                    </div>
                </div>
                <div class="w-14 h-14 rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-500/30 flex items-center justify-center shrink-0">
                    <i data-lucide="store" class="w-7 h-7"></i>
                </div>
            </div>
            @endif

            {{-- Warung Keuntungan Terbesar --}}
            @if($topLabaWarung)
            <div class="bg-gradient-to-br from-emerald-50 via-teal-50 to-emerald-100/60 border-2 border-emerald-200/80 rounded-[2rem] p-6 shadow-sm relative overflow-hidden flex items-center justify-between transition-transform hover:scale-[1.01]">
                <div class="relative z-10">
                    <div class="inline-flex items-center gap-1.5 px-3 py-1 bg-emerald-600 text-white rounded-full text-[10px] font-black uppercase tracking-wider mb-2.5 shadow-sm shadow-emerald-500/30">
                        <i data-lucide="trophy" class="w-3.5 h-3.5 text-amber-300"></i> Keuntungan Terbesar
                    </div>
                    <h3 class="text-2xl font-black text-emerald-950 truncate max-w-xs leading-tight mb-3">{{ $topLabaWarung['nama'] }}</h3>
                    <div class="flex items-center gap-4">
                        <div>
                            <p class="text-[9px] font-black text-emerald-600 uppercase tracking-widest">Laba Kotor</p>
                            <p class="text-lg font-black text-emerald-700 font-mono">+Rp {{ number_format($topLabaWarung['total_laba'],0,',','.') }}</p>
                        </div>
                        <div class="border-l border-emerald-200/80 pl-4">
                            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Total Omzet</p>
                            <p class="text-lg font-black text-slate-800 font-mono">Rp {{ number_format($topLabaWarung['total_jual'],0,',','.') }}</p>
                        </div>
                        <div class="border-l border-emerald-200/80 pl-4">
                            <p class="text-[9px] font-black text-teal-600 uppercase tracking-widest">Tabung</p>
                            <p class="text-lg font-black text-teal-800 font-mono">{{ number_format($topLabaWarung['total_qty'],0,',','.') }}</p>
                        </div>
                    </div>
                </div>
                <div class="w-14 h-14 rounded-2xl bg-emerald-600 text-white shadow-lg shadow-emerald-500/30 flex items-center justify-center shrink-0">
                    <i data-lucide="badge-dollar-sign" class="w-7 h-7"></i>
                </div>
            </div>
            @endif
        </div>

        {{-- Tabel Perbandingan Per Warung / Pelanggan --}}
        <div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden">
            <div class="px-5 md:px-6 py-5 border-b border-slate-100 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-xl bg-sky-50 flex items-center justify-center">
                        <i data-lucide="store" class="w-5 h-5 text-sky-600"></i>
                    </div>
                    <div>
                        <h2 class="font-black text-slate-800 text-base">Rekapitulasi Keuntungan & Transaksi Per Warung / Pelanggan</h2>
                        <p class="text-xs text-slate-400 font-semibold">Perbandingan omzet, jumlah transaksi, dan laba yang dihasilkan setiap warung</p>
                    </div>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="bg-slate-50 border-b border-slate-100 text-left">
                            <th class="px-6 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Nama Warung / Pelanggan</th>
                            <th class="px-4 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Transaksi</th>
                            <th class="px-4 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Tabung</th>
                            <th class="px-4 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Total Omzet</th>
                            <th class="px-4 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Modal (HPP)</th>
                            <th class="px-6 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">Laba Kotor</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-50">
                        @foreach($rekapPelangganList as $warung)
                        @php
                            $isTopTx   = $topTxWarung && $topTxWarung['nama'] === $warung['nama'];
                            $isTopLaba = $topLabaWarung && $topLabaWarung['nama'] === $warung['nama'];
                        @endphp
                        <tr class="hover:bg-slate-50/80 transition-colors">
                            <td class="px-6 py-4 font-bold text-slate-800">
                                <div class="flex items-center gap-2">
                                    <span>{{ $warung['nama'] }}</span>
                                    @if($isTopTx)
                                        <span class="px-2 py-0.5 bg-indigo-50 text-indigo-600 rounded-full text-[9px] font-black border border-indigo-100 uppercase">Top Trx</span>
                                    @endif
                                    @if($isTopLaba)
                                        <span class="px-2 py-0.5 bg-emerald-50 text-emerald-600 rounded-full text-[9px] font-black border border-emerald-100 uppercase">Top Profit</span>
                                    @endif
                                </div>
                            </td>
                            <td class="px-4 py-4 text-center">
                                <span class="inline-flex items-center justify-center px-3 py-1 bg-slate-100 text-slate-700 text-xs font-black rounded-lg font-mono">
                                    {{ $warung['jumlah_trx'] }} trx
                                </span>
                            </td>
                            <td class="px-4 py-4 text-center font-bold text-slate-600 font-mono">{{ number_format($warung['total_qty'],0,',','.') }}</td>
                            <td class="px-4 py-4 font-mono text-blue-600 font-bold">Rp {{ number_format($warung['total_jual'],0,',','.') }}</td>
                            <td class="px-4 py-4 font-mono text-slate-500">Rp {{ number_format($warung['total_beli'],0,',','.') }}</td>
                            <td class="px-6 py-4 text-right">
                                <span class="inline-flex items-center gap-1 font-mono font-black text-xs px-3 py-1.5 rounded-xl bg-emerald-50 text-emerald-700 border border-emerald-100">
                                    +Rp {{ number_format($warung['total_laba'],0,',','.') }}
                                </span>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif

    {{-- ===== DETAIL BEBAN PENGELUARAN & GAJI ===== --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {{-- Pengeluaran Operasional Harian --}}
        <div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden">
            <div class="px-5 md:px-6 py-4 border-b border-slate-100 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-xl bg-red-50 flex items-center justify-center">
                        <i data-lucide="trending-down" class="w-4 h-4 text-red-500"></i>
                    </div>
                    <h2 class="font-black text-slate-800 text-sm">Biaya Operasional Harian</h2>
                </div>
                <span class="text-xs font-mono font-black text-red-500">Rp {{ number_format($totalPengeluaranOperasional ?? $totalPengeluaran, 0, ',', '.') }}</span>
            </div>
            <div class="p-4 space-y-3 max-h-80 overflow-y-auto custom-scroll bg-slate-50/50">
                @forelse($pengeluaranList as $out)
                <div class="bg-white p-3.5 rounded-xl border border-slate-100 shadow-sm flex items-center justify-between">
                    <div>
                        <h4 class="font-bold text-slate-800 text-xs">{{ $out->keterangan }}</h4>
                        <p class="text-[10px] text-slate-400 font-semibold">{{ \Carbon\Carbon::parse($out->tanggal)->translatedFormat('d M Y') }} &bull; {{ $out->kategori }}</p>
                    </div>
                    <span class="font-mono text-xs font-black text-red-500">-Rp {{ number_format($out->jumlah, 0, ',', '.') }}</span>
                </div>
                @empty
                <p class="text-center text-slate-400 text-xs font-bold py-6 italic">Tidak ada rincian biaya operasional harian.</p>
                @endforelse
            </div>
        </div>

        {{-- Gaji Karyawan / Kurir (Beban Payroll) --}}
        <div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden">
            <div class="px-5 md:px-6 py-4 border-b border-slate-100 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-xl bg-amber-50 flex items-center justify-center">
                        <i data-lucide="users" class="w-4 h-4 text-amber-600"></i>
                    </div>
                    <h2 class="font-black text-slate-800 text-sm">Gaji Karyawan / Kurir (Dibayar)</h2>
                </div>
                <span class="text-xs font-mono font-black text-amber-600">Rp {{ number_format($totalGajiKaryawan ?? 0, 0, ',', '.') }}</span>
            </div>
            <div class="p-4 space-y-3 max-h-80 overflow-y-auto custom-scroll bg-slate-50/50">
                @forelse($gajiList ?? [] as $gaji)
                <div class="bg-white p-3.5 rounded-xl border border-slate-100 shadow-sm flex items-center justify-between">
                    <div>
                        <h4 class="font-bold text-slate-800 text-xs">{{ $gaji->user?->name ?? 'Kurir' }}</h4>
                        <p class="text-[10px] text-slate-400 font-semibold">Periode {{ $gaji->periode }} &bull; {{ \Carbon\Carbon::parse($gaji->tanggal_bayar ?? $gaji->created_at)->translatedFormat('d M Y') }}</p>
                    </div>
                    <span class="font-mono text-xs font-black text-amber-600">-Rp {{ number_format($gaji->total_diterima, 0, ',', '.') }}</span>
                </div>
                @empty
                <p class="text-center text-slate-400 text-xs font-bold py-6 italic">Tidak ada slip gaji yang dibayar pada periode ini.</p>
                @endforelse
            </div>
        </div>
    </div>
    @else
    <div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm p-10 md:p-16 text-center">
        <div class="mx-auto w-20 h-20 rounded-3xl bg-emerald-50 flex items-center justify-center mb-5">
            <i data-lucide="calendar-search" class="w-10 h-10 text-emerald-500"></i>
        </div>
        <h3 class="text-xl font-black text-slate-800 mb-2">Pilih Periode atau Tahun Laporan</h3>
        <p class="text-slate-400 text-xs font-semibold max-w-md mx-auto mb-6">Pilih tahun untuk melihat laporan laba rugi tahunan lengkap per bulan, atau gunakan filter rentang tanggal.</p>
        <div class="flex flex-wrap justify-center gap-2">
            <a href="{{ route('admin.laba-rugi', ['tahun' => date('Y')]) }}" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs px-5 py-2.5 rounded-xl transition-all shadow-md shadow-emerald-500/20">
                <i data-lucide="calendar" class="w-4 h-4 inline mr-1"></i> Laporan Tahun Ini ({{ date('Y') }})
            </a>
            <a href="{{ route('admin.laba-rugi', ['tahun' => date('Y') - 1]) }}" class="bg-slate-800 hover:bg-slate-900 text-white font-bold text-xs px-5 py-2.5 rounded-xl transition-all">
                <i data-lucide="calendar" class="w-4 h-4 inline mr-1"></i> Laporan Tahun {{ date('Y') - 1 }}
            </a>
            <a href="{{ route('admin.laba-rugi', ['dari' => now()->startOfMonth()->format('Y-m-d'), 'sampai' => now()->format('Y-m-d')]) }}" class="bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold text-xs px-5 py-2.5 rounded-xl transition-all">Bulan Ini</a>
        </div>
    </div>
    @endif
</div>
@endsection

