@extends('layouts.app')

@section('title', 'Laporan Rekap - Arisan Qurban')
@section('header_title', 'Rekap Detail')

@section('content')
<!-- Print-Only Header -->
<div class="hidden print:block mb-6 border-b-2 border-slate-800 pb-3">
    <h1 class="text-xl font-extrabold text-slate-800 text-center">LAPORAN REKAPITULASI DANA ARISAN QURBAN</h1>
    <p class="text-[10px] text-slate-500 text-center mt-1 font-semibold">
        Dicetak pada: {{ \Carbon\Carbon::now()->translatedFormat('d F Y H:i') }} WIB
    </p>
    <div class="mt-4 grid grid-cols-2 gap-4 text-[10px] text-slate-600">
        <div>
            <span class="font-bold text-slate-800">Filter Aktif:</span>
            <ul class="list-disc list-inside mt-1 space-y-0.5">
                <li>Kelompok: {{ request('kelompok_id') ? ($kelompok->find(request('kelompok_id'))->nama_kelompok ?? '-') : 'Semua Kelompok' }}</li>
                <li>Anggota: {{ request('anggota_id') ? ($anggota->find(request('anggota_id'))->nama ?? '-') : 'Semua Anggota' }}</li>
                @if(request('tanggal_mulai'))
                    <li>Mulai: {{ \Carbon\Carbon::parse(request('tanggal_mulai'))->translatedFormat('d M Y') }}</li>
                @endif
                @if(request('tanggal_selesai'))
                    <li>Sampai: {{ \Carbon\Carbon::parse(request('tanggal_selesai'))->translatedFormat('d M Y') }}</li>
                @endif
            </ul>
        </div>
        <div class="text-right">
            <span class="font-bold text-slate-800">Ringkasan:</span>
            <ul class="list-none mt-1 space-y-0.5 font-semibold">
                <li>Total Dana: <span class="font-bold text-slate-800">Rp {{ number_format($totalRiwayat, 0, ',', '.') }}</span></li>
                <li>Jumlah Transaksi: <span>{{ $riwayat->count() }} Setoran</span></li>
            </ul>
        </div>
    </div>
</div>

<!-- Filter Panel (Collapsible / Accordion style for mobile ease) -->
<div class="bg-white rounded-3xl p-5 shadow-sm border border-slate-100 mb-6 print:hidden">
    <h3 class="text-sm font-bold text-slate-800 mb-4 flex items-center justify-between">
        <span><i class="fa-solid fa-sliders text-brand-600 mr-1.5"></i> Filter Pencarian</span>
        @if(request()->filled('kelompok_id') || request()->filled('anggota_id') || request()->filled('tanggal_mulai') || request()->filled('tanggal_selesai'))
            <a href="{{ route('arisan.laporan') }}" class="text-xs font-bold text-rose-500 hover:underline">Reset</a>
        @endif
    </h3>

    <form action="{{ route('arisan.laporan') }}" method="GET" class="space-y-4">
        <!-- Kelompok -->
        <div>
            <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Kelompok</label>
            <select name="kelompok_id" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-brand-500 focus:bg-white transition">
                <option value="">Semua Kelompok</option>
                @foreach($kelompok as $kel)
                    <option value="{{ $kel->id }}" {{ request('kelompok_id') == $kel->id ? 'selected' : '' }}>
                        {{ $kel->nama_kelompok }}
                    </option>
                @endforeach
            </select>
        </div>

        <!-- Anggota -->
        <div>
            <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Anggota</label>
            <select name="anggota_id" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-brand-500 focus:bg-white transition">
                <option value="">Semua Anggota</option>
                @foreach($anggota as $ang)
                    <option value="{{ $ang->id }}" data-groups="{{ $ang->kelompok->pluck('id')->toJson() }}" {{ request('anggota_id') == $ang->id ? 'selected' : '' }}>
                        {{ $ang->nama }} ({{ $ang->no_hp }})
                    </option>
                @endforeach
            </select>
        </div>

        <!-- Date Range Grid -->
        <div class="grid grid-cols-2 gap-3">
            <div>
                <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Mulai Dari</label>
                <input type="date" name="tanggal_mulai" value="{{ request('tanggal_mulai') }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-xs focus:outline-none focus:border-brand-500 focus:bg-white transition">
            </div>
            <div>
                <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Sampai Dengan</label>
                <input type="date" name="tanggal_selesai" value="{{ request('tanggal_selesai') }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-xs focus:outline-none focus:border-brand-500 focus:bg-white transition">
            </div>
        </div>

        <!-- Filter Submit Button -->
        <button type="submit" class="w-full bg-brand-600 hover:bg-brand-700 text-white font-bold py-2.5 px-4 rounded-xl text-xs shadow-md shadow-brand-500/10 active:scale-[0.98] transition cursor-pointer">
            Terapkan Filter
        </button>
    </form>
</div>

<!-- Laporan Result summary -->
<div class="bg-gradient-to-tr from-slate-800 to-slate-700 rounded-3xl p-5 text-white shadow-md mb-6 flex justify-between items-center print:hidden">
    <div>
        <span class="block text-[10px] text-slate-300 uppercase font-bold tracking-wider mb-0.5">Total Terhitung</span>
        <span class="text-lg font-extrabold text-emerald-400">Rp {{ number_format($totalRiwayat, 0, ',', '.') }}</span>
    </div>
    <div class="flex items-center gap-2">
        <div class="bg-white/10 px-3 py-1.5 rounded-xl text-xs font-bold">
            {{ $riwayat->count() }} Setoran
        </div>
        <button onclick="window.print()" class="bg-brand-600 hover:bg-brand-500 text-white px-3 py-1.5 rounded-xl text-xs font-bold flex items-center gap-1.5 transition active:scale-95 cursor-pointer">
            <i class="fa-solid fa-print"></i> Cetak
        </button>
    </div>
</div>

<!-- List of Transactions matching filters (Screen Only) -->
<div class="space-y-3 print:hidden">
    @forelse($riwayat as $setor)
        <div class="bg-white rounded-2xl p-4 shadow-sm border border-slate-100 flex items-center justify-between gap-3">
            <div class="flex items-center gap-3 min-w-0">
                <!-- Profile Avatar -->
                <div class="w-9 h-9 rounded-full bg-slate-50 text-slate-700 border border-slate-100 flex items-center justify-center font-bold text-xs shrink-0">
                    {{ strtoupper(substr($setor->anggota->nama, 0, 2)) }}
                </div>
                
                <div class="min-w-0">
                    <h4 class="text-xs font-bold text-slate-800 truncate mb-0.5">{{ $setor->anggota->nama }}</h4>
                    <!-- Group Name & Date -->
                    <div class="flex items-center gap-1.5 text-[9px] text-slate-400 font-semibold truncate">
                        <span class="text-brand-600 font-bold">{{ $setor->kelompok->nama_kelompok }}</span>
                        <span>&bull;</span>
                        <span>{{ $setor->tanggal->translatedFormat('d M Y') }}</span>
                    </div>
                </div>
            </div>
            
            <div class="flex items-center gap-2 shrink-0">
                <div class="text-right">
                    <span class="block text-xs font-extrabold text-slate-800">Rp {{ number_format($setor->jumlah, 0, ',', '.') }}</span>
                    <span class="text-[9px] font-bold text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded-md">Berhasil</span>
                </div>
                <div class="flex items-center gap-1">
                    <!-- Edit Button -->
                    <button onclick="openEditSetoranModal({{ $setor->id }}, {{ $setor->kelompok_id }}, {{ $setor->anggota_id }}, {{ (int)$setor->jumlah }}, '{{ $setor->tanggal->format('Y-m-d') }}')" class="w-7 h-7 rounded-xl bg-slate-50 text-slate-500 hover:bg-brand-50 hover:text-brand-600 flex items-center justify-center transition cursor-pointer" title="Edit Setoran">
                        <i class="fa-solid fa-pen text-[10px]"></i>
                    </button>
                    <!-- Delete Button -->
                    <form action="{{ route('arisan.setoran.destroy', $setor->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus setoran ini?')" class="inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="w-7 h-7 rounded-xl bg-slate-50 text-slate-500 hover:bg-rose-50 hover:text-rose-600 flex items-center justify-center transition cursor-pointer" title="Hapus Setoran">
                            <i class="fa-solid fa-trash text-[10px]"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    @empty
        <div class="bg-white p-12 rounded-3xl text-center border border-dashed border-slate-200 text-slate-400">
            <i class="fa-solid fa-receipt text-3xl mb-3 text-slate-300"></i>
            <p class="text-sm font-semibold">Tidak ada setoran ditemukan</p>
            <p class="text-xs text-slate-400 mt-1">Coba sesuaikan filter atau rentang tanggal pencarian Anda.</p>
        </div>
    @endforelse
</div>

<!-- List of Pengeluaran (Screen Only) -->
<div class="mt-8 mb-4 flex items-center justify-between print:hidden">
    <h3 class="text-sm font-bold text-slate-800"><i class="fa-solid fa-arrow-trend-down text-rose-500 mr-2"></i>Riwayat Pengeluaran Global</h3>
</div>

<div class="space-y-3 print:hidden mb-8">
    @forelse($riwayatPengeluaran as $pengeluaran)
        <div class="bg-white rounded-2xl p-4 shadow-sm border border-slate-100 flex items-center justify-between gap-3">
            <div class="flex items-center gap-3 min-w-0">
                <!-- Icon -->
                <div class="w-9 h-9 rounded-full bg-rose-50 text-rose-600 border border-rose-100 flex items-center justify-center font-bold text-xs shrink-0">
                    <i class="fa-solid fa-minus"></i>
                </div>
                
                <div class="min-w-0">
                    <h4 class="text-xs font-bold text-slate-800 truncate mb-0.5">{{ $pengeluaran->keterangan }}</h4>
                    <!-- Date -->
                    <div class="flex items-center gap-1.5 text-[9px] text-slate-400 font-semibold truncate">
                        <span>{{ $pengeluaran->tanggal->translatedFormat('d M Y') }}</span>
                    </div>
                </div>
            </div>
            
            <div class="flex items-center gap-2 shrink-0">
                <div class="text-right">
                    <span class="block text-xs font-extrabold text-rose-600">-Rp {{ number_format($pengeluaran->jumlah, 0, ',', '.') }}</span>
                </div>
            </div>
        </div>
    @empty
        <div class="bg-white p-6 rounded-3xl text-center border border-dashed border-slate-200 text-slate-400">
            <i class="fa-solid fa-receipt text-2xl mb-2 text-slate-300"></i>
            <p class="text-xs font-semibold">Belum ada pengeluaran tercatat</p>
        </div>
    @endforelse
</div>

<!-- Print-Only Landscape Table Layout -->
<div class="hidden print:block">
    <style>
        @media print {
            @page {
                size: landscape;
                margin: 10mm 8mm 10mm 8mm;
            }
            body {
                background: white !important;
                color: black !important;
            }
            /* Force hide all navigation and floating elements */
            #nav-sidebar, #nav-bottombar, header, .fixed, .absolute, button, .print\:hidden {
                display: none !important;
            }
            /* Reset app shell constraints */
            .app-shell, main {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                border: none !important;
                box-shadow: none !important;
            }
            .print-table {
                width: 100% !important;
                border-collapse: collapse !important;
            }
            .print-table th, .print-table td {
                border: 1px solid #cbd5e1 !important;
                padding: 6px 8px !important;
                font-size: 9px !important;
            }
            .print-table th {
                background-color: #f1f5f9 !important;
                color: #1e293b !important;
                font-weight: bold !important;
            }
            .print-group-header {
                background-color: #e2e8f0 !important;
                color: #0f172a !important;
                font-weight: 800 !important;
                font-size: 10px !important;
                padding: 6px 10px !important;
                border: 1px solid #cbd5e1 !important;
                display: flex;
                justify-content: space-between;
                margin-top: 15px;
            }
            .print-group-header:first-of-type {
                margin-top: 0;
            }
        }
    </style>

    @php
        $grandTotalTerkumpul = 0;
        $grandTotalKekurangan = 0;
    @endphp

    @forelse($printData as $data)
        @php
            $kelompokTerkumpul = $data['members']->sum('total_global');
            $kelompokKekurangan = $data['members']->sum('kekurangan');
            $grandTotalTerkumpul += $kelompokTerkumpul;
            $grandTotalKekurangan += $kelompokKekurangan;
            
            // Calculate max setoran count for columns
            $maxSetoranCount = $data['members']->max(fn($m) => $m['setoran']->count());
            $maxSetoranCount = max($maxSetoranCount, 1); // at least 1 column for alignment
        @endphp

        <div class="print-group-header">
            <span>KELOMPOK: {{ strtoupper($data['kelompok']->nama_kelompok) }} ({{ strtoupper($data['kelompok']->jenis_hewan) }})</span>
            <span>TARGET KELOMPOK: Rp {{ number_format($data['target_per_orang'] * $data['members']->count(), 0, ',', '.') }} &bull; PATUNGAN/ORANG: Rp {{ number_format($data['target_per_orang'], 0, ',', '.') }}</span>
        </div>
        
        <table class="print-table w-full text-left text-xs border-collapse">
            <thead>
                <tr>
                    <th style="width: 5%">No</th>
                    <th style="width: 30%">Nama Anggota</th>
                    @for($i = 1; $i <= $maxSetoranCount; $i++)
                        <th class="text-right" style="width: {{ 40 / $maxSetoranCount }}%">Setoran {{ $i }}</th>
                    @endfor
                    <th style="width: 12%" class="text-right">Total Bayar</th>
                    <th style="width: 13%" class="text-right">Kekurangan</th>
                </tr>
            </thead>
            <tbody>
                @foreach($data['members'] as $idx => $m)
                    <tr>
                        <td class="text-center">{{ $idx + 1 }}</td>
                        <td class="font-semibold text-slate-900">{{ $m['member']->nama }}</td>
                        @for($i = 0; $i < $maxSetoranCount; $i++)
                            <td class="text-right">
                                @if(isset($m['setoran'][$i]))
                                    <span class="font-semibold">Rp {{ number_format($m['setoran'][$i]->jumlah, 0, ',', '.') }}</span>
                                    <span class="block text-[7px] text-slate-500 font-normal">{{ $m['setoran'][$i]->tanggal->translatedFormat('d/m/y') }}</span>
                                @else
                                    <span class="text-slate-400">-</span>
                                @endif
                            </td>
                        @endfor
                        <td class="text-right font-bold text-slate-800">
                            Rp {{ number_format($m['total_global'], 0, ',', '.') }}
                        </td>
                        <td class="text-right font-bold {{ $m['kekurangan'] > 0 ? 'text-rose-600' : 'text-emerald-600' }}">
                            {{ $m['kekurangan'] > 0 ? 'Rp ' . number_format($m['kekurangan'], 0, ',', '.') : 'LUNAS' }}
                        </td>
                    </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr style="background-color: #f8fafc; font-weight: bold;">
                    <td colspan="2" class="text-right">Total Kelompok:</td>
                    @for($i = 0; $i < $maxSetoranCount; $i++)
                        <td></td>
                    @endfor
                    <td class="text-right font-bold text-slate-800">
                        Rp {{ number_format($kelompokTerkumpul, 0, ',', '.') }}
                    </td>
                    <td class="text-right font-bold text-rose-600">
                        Rp {{ number_format($kelompokKekurangan, 0, ',', '.') }}
                    </td>
                </tr>
            </tfoot>
        </table>
    @empty
        <div class="p-6 text-center border border-slate-300">Tidak ada data untuk dicetak</div>
    @endforelse

    <!-- Print-only Pengeluaran Table -->
    @if($riwayatPengeluaran->count() > 0)
    <div class="print-group-header mt-8">
        <span>RINCIAN PENGELUARAN GLOBAL</span>
        <span>TOTAL: Rp {{ number_format($riwayatPengeluaran->sum('jumlah'), 0, ',', '.') }}</span>
    </div>
    <table class="print-table w-full text-left text-xs border-collapse">
        <thead>
            <tr>
                <th style="width: 5%">No</th>
                <th style="width: 15%">Tanggal</th>
                <th style="width: 60%">Keterangan Pengeluaran</th>
                <th style="width: 20%" class="text-right">Jumlah</th>
            </tr>
        </thead>
        <tbody>
            @foreach($riwayatPengeluaran as $idx => $pengeluaran)
                <tr>
                    <td class="text-center">{{ $idx + 1 }}</td>
                    <td>{{ $pengeluaran->tanggal->translatedFormat('d/m/Y') }}</td>
                    <td class="font-semibold text-slate-900">{{ $pengeluaran->keterangan }}</td>
                    <td class="text-right font-bold text-rose-600">Rp {{ number_format($pengeluaran->jumlah, 0, ',', '.') }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
    @endif

    <!-- Final Summary Section at the very bottom -->
    <div class="mt-8 border-t-2 border-slate-800 pt-4 print-break-inside-avoid">
        <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider mb-3">Rincian Ringkasan Dana & Kelompok</h3>
        <div class="grid grid-cols-2 gap-8 text-[10px]">
            <div>
                <table class="w-full border-collapse">
                    <thead>
                        <tr class="border-b border-slate-400 font-bold">
                            <th class="py-1 text-left">Nama Kelompok</th>
                            <th class="py-1 text-right">Total Terkumpul</th>
                            <th class="py-1 text-right">Sisa Kekurangan</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200">
                        @foreach($printData as $data)
                            @php
                                $kComp = $data['members']->sum('total_global');
                                $kKek = $data['members']->sum('kekurangan');
                            @endphp
                            <tr>
                                <td class="py-1 font-semibold text-slate-800">{{ $data['kelompok']->nama_kelompok }}</td>
                                <td class="py-1 text-right">Rp {{ number_format($kComp, 0, ',', '.') }}</td>
                                <td class="py-1 text-right text-rose-600">Rp {{ number_format($kKek, 0, ',', '.') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="flex flex-col justify-end items-end">
                <div class="bg-slate-50 border border-slate-300 p-4 rounded-lg w-72 text-right">
                    <div class="mb-2">
                        <span class="block text-[8px] font-bold text-slate-500 uppercase tracking-wider">TOTAL KEKURANGAN GLOBAL</span>
                        <span class="text-sm font-extrabold text-rose-600">Rp {{ number_format($grandTotalKekurangan, 0, ',', '.') }}</span>
                    </div>
                    <div class="border-t border-slate-300 pt-2">
                        <span class="block text-[8px] font-bold text-slate-500 uppercase tracking-wider">TOTAL DANA TERKUMPUL (SEMUA)</span>
                        <span class="text-base font-black text-emerald-600">Rp {{ number_format($grandTotalTerkumpul, 0, ',', '.') }}</span>
                    </div>
                    <div class="border-t border-slate-300 pt-2 mt-2">
                        <span class="block text-[8px] font-bold text-slate-500 uppercase tracking-wider">TOTAL PENGELUARAN GLOBAL</span>
                        <span class="text-base font-black text-rose-600">-Rp {{ number_format($riwayatPengeluaran->sum('jumlah'), 0, ',', '.') }}</span>
                    </div>
                    <div class="border-t border-slate-300 pt-2 mt-2">
                        <span class="block text-[8px] font-bold text-slate-500 uppercase tracking-wider">SALDO KAS TERSEDIA</span>
                        <span class="text-lg font-black text-slate-800">Rp {{ number_format($grandTotalTerkumpul - $riwayatPengeluaran->sum('jumlah'), 0, ',', '.') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const kelompokSelect = document.querySelector('select[name="kelompok_id"]');
        const anggotaSelect = document.querySelector('select[name="anggota_id"]');
        
        if (kelompokSelect && anggotaSelect) {
            const allAnggotaOptions = Array.from(anggotaSelect.options).slice(1); // skip "Semua Anggota"
            
            function filterAnggota() {
                const selectedKelompokId = kelompokSelect.value;
                let currentSelectedStillValid = false;
                const currentSelectedValue = anggotaSelect.value;
                
                allAnggotaOptions.forEach(option => {
                    const groups = JSON.parse(option.getAttribute('data-groups') || '[]');
                    
                    if (!selectedKelompokId || groups.includes(parseInt(selectedKelompokId))) {
                        // Show option
                        option.style.display = '';
                        option.disabled = false;
                        if (option.value === currentSelectedValue) {
                            currentSelectedStillValid = true;
                        }
                    } else {
                        // Hide / Disable option
                        option.style.display = 'none';
                        option.disabled = true;
                    }
                });
                
                // If the selected member is no longer valid for the selected group, reset selection
                if (currentSelectedValue && !currentSelectedStillValid) {
                    anggotaSelect.value = '';
                }
            }
            
            // Run on load to handle old inputs
            filterAnggota();
            
            // Run on change
            kelompokSelect.addEventListener('change', filterAnggota);
        }
    });
</script>
@endsection