{{-- resources/views/admin/keuangan/tabungan/rekap/index.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Rekap Keuangan Tabungan Global')

@push('styles')
<style>
    .table-hierarchy th { background-color: #f8f9fa; font-size: 12px; font-weight: 600; text-transform: uppercase; color: #495057; }
    .row-kategori { background-color: #e9ecef; font-weight: bold; border-bottom: 2px solid #dee2e6; }
    .buku-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 20px;}
    
    @media print {
        body * { visibility: hidden; }
        #print-area, #print-area * { visibility: visible; }
        #print-area { position: absolute; left: 0; top: 0; width: 100%; }
        .card { border: none !important; box-shadow: none !important; }
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-4" id="print-area">
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
        <div>
            <h4 class="mb-1 fw-bold text-success"><i class="bi bi-piggy-bank me-2"></i>Rekap Tabungan Global</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">
                Pemantauan total arus kas (Setoran, Tarikan, dan Saldo Akhir) seluruh Nasabah Madrasah.
            </p>
        </div>
        
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-dark btn-sm shadow-sm d-flex align-items-center gap-2" onclick="window.print()">
                <i class="bi bi-printer"></i> Cetak Rekapitulasi
            </button>
        </div>
    </div>

    @php
        $grandTotalJml = 0;
        $grandSetorSya = 0;
        $grandTarikSya = 0;
        $grandSetorJar = 0;
        $grandTarikJar = 0;

        foreach($rekap as $kat => $data) {
            $grandTotalJml += $data['jml'];
            $grandSetorSya += $data['setor_sya'];
            $grandTarikSya += $data['tarik_sya'];
            $grandSetorJar += $data['setor_jar'];
            $grandTarikJar += $data['tarik_jar'];
        }

        $grandSaldoSya = $grandSetorSya - $grandTarikSya;
        $grandSaldoJar = $grandSetorJar - $grandTarikJar;
        $grandTotalSaldo = $grandSaldoSya + $grandSaldoJar;
    @endphp

    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 g-3 mb-4">
        <div class="col">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body p-3 d-flex align-items-center">
                    <div class="buku-icon bg-primary bg-opacity-10 text-primary me-3"><i class="bi bi-people"></i></div>
                    <div>
                        <div class="text-muted fw-bold mb-1" style="font-size: 11px;">TOTAL NASABAH AKTIF</div>
                        <h4 class="mb-0 fw-bold text-dark">{{ number_format($grandTotalJml, 0, ',', '.') }} <span style="font-size: 12px; font-weight:normal;">Buku</span></h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col">
            <div class="card shadow-sm border-0 border-start border-info h-100" style="border-left-width: 4px !important;">
                <div class="card-body p-3 d-flex align-items-center">
                    <div class="buku-icon bg-info bg-opacity-10 text-info me-3"><i class="bi bi-wallet2"></i></div>
                    <div>
                        <div class="text-info fw-bold mb-1" style="font-size: 11px;">SALDO SYARIAH SAAT INI</div>
                        <h4 class="mb-0 fw-bold text-dark font-monospace">Rp {{ number_format($grandSaldoSya, 0, ',', '.') }}</h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col">
            <div class="card shadow-sm border-0 border-start border-success h-100" style="border-left-width: 4px !important;">
                <div class="card-body p-3 d-flex align-items-center">
                    <div class="buku-icon bg-success bg-opacity-10 text-success me-3"><i class="bi bi-heart-fill"></i></div>
                    <div>
                        <div class="text-success fw-bold mb-1" style="font-size: 11px;">SALDO JARIYAH SAAT INI</div>
                        <h4 class="mb-0 fw-bold text-dark font-monospace">Rp {{ number_format($grandSaldoJar, 0, ',', '.') }}</h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col">
            <div class="card shadow-sm border-0 border-start border-warning h-100" style="border-left-width: 4px !important;">
                <div class="card-body p-3 d-flex align-items-center">
                    <div class="buku-icon bg-warning bg-opacity-10 text-warning text-dark me-3"><i class="bi bi-bank"></i></div>
                    <div>
                        <div class="text-warning text-dark fw-bold mb-1" style="font-size: 11px;">TOTAL KAS TABUNGAN</div>
                        <h4 class="mb-0 fw-bold text-dark font-monospace">Rp {{ number_format($grandTotalSaldo, 0, ',', '.') }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0 border-top border-success" style="border-top-width: 4px !important;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 table-hierarchy">
                    <thead>
                        <tr>
                            <th rowspan="2" width="20%" class="ps-4 align-middle">KATEGORI NASABAH</th>
                            <th rowspan="2" width="10%" class="text-center align-middle">JML BUKU</th>
                            <th colspan="2" class="text-center border-start">TABUNGAN SYARIAH</th>
                            <th colspan="2" class="text-center border-start">TABUNGAN JARIYAH</th>
                            <th rowspan="2" width="16%" class="text-end pe-4 align-middle border-start bg-light">TOTAL SALDO AKHIR</th>
                        </tr>
                        <tr>
                            <th width="13%" class="text-end border-start">Total Setoran</th>
                            <th width="13%" class="text-end">Total Tarikan</th>
                            <th width="13%" class="text-end border-start">Total Setoran</th>
                            <th width="13%" class="text-end">Total Tarikan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($rekap as $kategori => $data)
                            @php
                                $saldoSya = $data['setor_sya'] - $data['tarik_sya'];
                                $saldoJar = $data['setor_jar'] - $data['tarik_jar'];
                                $totalSaldo = $saldoSya + $saldoJar;
                                
                                $icon = 'bi-globe';
                                if($kategori == 'Siswa / Santri') $icon = 'bi-people';
                                if($kategori == 'Guru & Staff') $icon = 'bi-person-workspace';
                            @endphp
                            <tr class="row-kategori">
                                <td class="ps-4 text-dark"><i class="bi {{ $icon }} me-2 text-success"></i> {{ $kategori }}</td>
                                <td class="text-center">{{ number_format($data['jml'], 0, ',', '.') }}</td>
                                
                                <td class="text-end text-success border-start">Rp {{ number_format($data['setor_sya'], 0, ',', '.') }}</td>
                                <td class="text-end text-danger">Rp {{ number_format($data['tarik_sya'], 0, ',', '.') }}</td>
                                
                                <td class="text-end text-success border-start">Rp {{ number_format($data['setor_jar'], 0, ',', '.') }}</td>
                                <td class="text-end text-danger">Rp {{ number_format($data['tarik_jar'], 0, ',', '.') }}</td>
                                
                                <td class="text-end pe-4 border-start bg-light font-monospace text-primary">Rp {{ number_format($totalSaldo, 0, ',', '.') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                    
                    <tfoot class="table-dark">
                        <tr>
                            <th class="ps-4 fs-6">GRAND TOTAL</th>
                            <th class="text-center fs-6">{{ number_format($grandTotalJml, 0, ',', '.') }}</th>
                            <th class="text-end text-success border-start">Rp {{ number_format($grandSetorSya, 0, ',', '.') }}</th>
                            <th class="text-end text-danger">Rp {{ number_format($grandTarikSya, 0, ',', '.') }}</th>
                            <th class="text-end text-success border-start">Rp {{ number_format($grandSetorJar, 0, ',', '.') }}</th>
                            <th class="text-end text-danger">Rp {{ number_format($grandTarikJar, 0, ',', '.') }}</th>
                            <th class="text-end pe-4 border-start fs-6 text-warning">Rp {{ number_format($grandTotalSaldo, 0, ',', '.') }}</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection