@extends('layouts.app')

@section('title', 'Laporan Iuran')
@section('page-title', 'Analisis Laporan')
@section('breadcrumb', 'SiIuran / Laporan')

@push('styles')
<style>
    /* Premium Cards */
    .report-card {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 24px;
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
        overflow: hidden;
    }

    /* Stat Cards */
    .stat-mini {
        padding: 20px; border-radius: 20px; display: flex; align-items: center; gap: 15px;
        transition: transform 0.3s ease; border: 1px solid transparent;
    }
    .stat-mini:hover { transform: translateY(-3px); }
    .stat-mini.red { background: #fef2f2; border-color: #fee2e2; }
    .stat-mini.green { background: #f0fdf4; border-color: #dcfce7; }
    .stat-mini.blue { background: #eff6ff; border-color: #dbeafe; }
    .stat-mini.orange { background: #fffbeb; border-color: #fef3c7; }

    .icon-box {
        width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    }
    .icon-box.red { background: #ef4444; color: #fff; }
    .icon-box.green { background: #10b981; color: #fff; }
    .icon-box.blue { background: #3b82f6; color: #fff; }
    .icon-box.orange { background: #f59e0b; color: #fff; }

    /* Filter Bar */
    .glass-filter {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(8px);
        border-radius: 20px; border: 1px solid #f1f5f9; padding: 20px; margin-bottom: 25px;
    }
    .filter-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8; margin-bottom: 8px; display: block; }

    /* Table Design */
    .table-modern thead th {
        background: #fdfdfd; padding: 15px 20px; font-size: 0.65rem; text-transform: uppercase;
        letter-spacing: 1.2px; color: #94a3b8; border: none;
    }
    .table-modern tbody td { padding: 15px 20px; vertical-align: middle; border-bottom: 1px solid #f8fafc; }
    
    .status-pill { font-size: 0.65rem; font-weight: 800; padding: 4px 12px; border-radius: 100px; text-transform: uppercase; }
    .status-lunas { background: #d1fae5; color: #065f46; }
    .status-belum { background: #fee2e2; color: #991b1b; }
    .status-sebagian { background: #fef3c7; color: #92400e; }

    @media print {
        .no-print { display: none !important; }
        .report-card { box-shadow: none; border: 1px solid #e2e8f0; border-radius: 0; }
        body { background: #fff !important; }
        .content-wrapper { padding: 0 !important; }
    }
</style>
@endpush

@section('content')
<div class="row align-items-center mb-4 no-print">
    <div class="col-md-6">
        <h4 class="fw-900 text-dark mb-1">Laporan Keuangan</h4>
        <p class="text-muted small mb-0">Analisis mendalam data iuran dan tunggakan anggota.</p>
    </div>
    <div class="col-md-6 text-md-end mt-3 mt-md-0">
        <button onclick="window.print()" class="btn btn-dark rounded-pill px-4 fw-bold">
            <i class="bi bi-printer me-2"></i>Cetak Laporan
        </button>
    </div>
</div>

{{-- Filters --}}
<div class="glass-filter no-print">
    <form method="GET" id="filterForm">
        <div class="row g-3 align-items-end">
            <div class="col-md-3">
                <label class="filter-label">Bulan</label>
                <select name="bulan" class="form-select border-0 bg-light rounded-3">
                    <option value="">Semua Bulan</option>
                    @foreach(['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'] as $i => $b)
                    <option value="{{ $i+1 }}" {{ $bulan == $i+1 ? 'selected' : '' }}>{{ $b }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="filter-label">Tahun</label>
                <select name="tahun" class="form-select border-0 bg-light rounded-3">
                    @foreach($tahunList as $t)
                    <option value="{{ $t }}" {{ $tahun == $t ? 'selected' : '' }}>{{ $t }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="filter-label">Kategori Iuran</label>
                <select name="jenis_iuran_id" class="form-select border-0 bg-light rounded-3">
                    <option value="">Semua Jenis Iuran</option>
                    @foreach($jenisIuranList as $ji)
                    <option value="{{ $ji->id }}" {{ $jenisId == $ji->id ? 'selected' : '' }}>{{ $ji->nama_iuran }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <a href="{{ route('laporan.index') }}" class="btn btn-outline-secondary w-100 rounded-pill fw-bold">Reset Filter</a>
            </div>
        </div>
    </form>
</div>

@php
    $totalAll = $totalLunas + $totalBelum + $totalSebagian;
    $countLunas = $data->where('status','lunas')->count();
    $countBelum = $data->where('status','belum_lunas')->count();
    $countSebagian = $data->where('status','sebagian')->count();
@endphp

{{-- Summary --}}
<div class="row g-3 mb-5">
    <div class="col-md-3">
        <div class="stat-mini blue">
            <div class="icon-box blue"><i class="bi bi-wallet2"></i></div>
            <div>
                <div class="text-muted small fw-bold">TOTAL TAGIHAN</div>
                <div class="fw-900" style="font-size:1.1rem;">Rp{{ number_format($totalAll, 0, ',', '.') }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-mini green">
            <div class="icon-box green"><i class="bi bi-check2-all"></i></div>
            <div>
                <div class="text-muted small fw-bold">TOTAL LUNAS</div>
                <div class="fw-900 text-success" style="font-size:1.1rem;">Rp{{ number_format($totalLunas, 0, ',', '.') }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-mini red">
            <div class="icon-box red"><i class="bi bi-exclamation-circle"></i></div>
            <div>
                <div class="text-muted small fw-bold">BELUM LUNAS</div>
                <div class="fw-900 text-danger" style="font-size:1.1rem;">Rp{{ number_format($totalBelum, 0, ',', '.') }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-mini orange">
            <div class="icon-box orange"><i class="bi bi-hourglass-split"></i></div>
            <div>
                <div class="text-muted small fw-bold">SEBAGIAN BAYAR</div>
                <div class="fw-900 text-warning" style="font-size:1.1rem;">Rp{{ number_format($totalSebagian, 0, ',', '.') }}</div>
            </div>
        </div>
    </div>
</div>

{{-- Detail Table --}}
<div class="card report-card border-0">
    <div class="card-header bg-transparent py-4 px-4 border-0 d-flex justify-content-between align-items-center">
        <h6 class="mb-0 fw-bold text-dark"><i class="bi bi-list-task me-2 text-danger"></i>Rincian Transaksi</h6>
        <span class="small text-muted fw-bold">{{ $data->count() }} Transaksi Tercatat</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-modern mb-0">
                <thead>
                    <tr>
                        <th class="ps-4">Anggota</th>
                        <th>Kategori</th>
                        <th>Periode</th>
                        <th>Nominal</th>
                        <th>Status</th>
                        <th class="pe-4">Tanggal</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($data as $p)
                    <tr>
                        <td class="ps-4">
                            <div class="d-flex align-items-center gap-3">
                                <div style="width:35px; height:35px; border-radius:10px; background: #fee2e2; color: #dc2626; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.75rem;">
                                    {{ substr($p->anggota?->nama ?? '?', 0, 1) }}
                                </div>
                                <div>
                                    <div class="fw-bold text-dark" style="font-size:0.85rem;">{{ $p->anggota?->nama ?? '-' }}</div>
                                    <div class="text-muted small" style="font-size:0.7rem;">{{ $p->anggota?->kode_anggota }}</div>
                                </div>
                            </div>
                        </td>
                        <td><span class="fw-600 text-secondary small">{{ $p->jenisIuran?->nama_iuran ?? '-' }}</span></td>
                        <td><span class="fw-bold text-dark small">{{ $p->nama_bulan }} {{ $p->tahun }}</span></td>
                        <td><span class="fw-900 text-dark">Rp{{ number_format($p->jumlah, 0, ',', '.') }}</span></td>
                        <td>
                            @if($p->status === 'lunas')
                                <span class="status-pill status-lunas">LUNAS</span>
                            @elseif($p->status === 'belum_lunas')
                                <span class="status-pill status-belum">BELUM LUNAS</span>
                            @else
                                <span class="status-pill status-sebagian">SEBAGIAN</span>
                            @endif
                        </td>
                        <td class="pe-4 text-muted small">
                            {{ $p->tanggal_bayar ? $p->tanggal_bayar->format('d/m/y') : '-' }}
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="text-center py-5 text-muted">Data tidak ditemukan.</td></tr>
                    @endforelse
                </tbody>
                @if($data->count() > 0)
                <tfoot class="bg-light">
                    <tr>
                        <td colspan="3" class="ps-4 py-3 fw-800 text-dark text-end">TOTAL LUNAS (DITERIMA)</td>
                        <td colspan="3" class="pe-4 py-3 fw-900 text-success fs-5">Rp{{ number_format($totalLunas, 0, ',', '.') }}</td>
                    </tr>
                </tfoot>
                @endif
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('#filterForm select').forEach(function(el) {
    el.addEventListener('change', function() {
        document.getElementById('filterForm').submit();
    });
});
</script>
@endpush