@extends('layouts.app')

@section('title', 'Laporan Keuangan')
@section('page-title', 'Laporan Keuangan')
@section('breadcrumb', 'Beranda / Laporan Keuangan')

@push('styles')
@endpush

@section('content')

{{-- Summary Cards --}}
<div style="display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px;">
    <div class="stat-card" style="border-left:4px solid #1e6f5c;">
        <div class="stat-icon" style="background:#e8f5f1; color:#1e6f5c;"><i class="fa-solid fa-arrow-trend-up"></i></div>
        <div class="stat-info">
            <div class="label">Total Pemasukan</div>
            <div class="value" style="font-size:20px;">Rp {{ number_format($ringkasan->total_pemasukan, 0, ',', '.') }}</div>
        </div>
    </div>
    <div class="stat-card" style="border-left:4px solid #dc2626;">
        <div class="stat-icon" style="background:#fee2e2; color:#991b1b;"><i class="fa-solid fa-arrow-trend-down"></i></div>
        <div class="stat-info">
            <div class="label">Total Pengeluaran</div>
            <div class="value" style="font-size:20px;">Rp {{ number_format($ringkasan->total_pengeluaran, 0, ',', '.') }}</div>
        </div>
    </div>
    <div class="stat-card" style="border-left:4px solid {{ $ringkasan->saldo >= 0 ? '#1e6f5c' : '#dc2626' }};">
        <div class="stat-icon" style="background:#dbeafe; color:#1e40af;"><i class="fa-solid fa-wallet"></i></div>
        <div class="stat-info">
            <div class="label">Saldo Akhir</div>
            <div class="value" style="font-size:20px; color:{{ $ringkasan->saldo >= 0 ? '#065f46' : '#991b1b' }};">
                Rp {{ number_format($ringkasan->saldo, 0, ',', '.') }}
            </div>
        </div>
    </div>
</div>

<div style="display:flex; justify-content:flex-end; gap:10px; margin-bottom:16px;">
    <a href="{{ route('laporan.pdf') }}" class="btn btn-accent" target="_blank">
        <i class="fa-solid fa-file-pdf"></i> Export PDF
    </a>
    <a href="{{ route('laporan.excel') }}" class="btn btn-outline">
        <i class="fa-solid fa-file-excel"></i> Export Excel
    </a>
</div>

<div style="display:grid; grid-template-columns:1fr 1fr; gap:20px;">

    {{-- Pemasukan --}}
    <div class="card">
        <div class="card-header">
            <i class="fa-solid fa-arrow-trend-up" style="color:#1e6f5c;"></i>
            <span class="card-title">Rincian Pemasukan</span>
        </div>
        <div class="table-wrap">
            <table>
                <thead><tr><th>Uraian</th><th>Donatur</th><th>Tanggal</th><th style="text-align:right;">Jumlah</th></tr></thead>
                <tbody>
                    @foreach($pemasukan as $p)
                    <tr>
                        <td style="font-size:13px;">{{ $p->uraian }}</td>
                        <td style="font-size:12px; color:#6b8f7e;">{{ $p->donatur->nama ?? '—' }}</td>
                        <td style="font-size:12px; color:#6b8f7e;">{{ $p->tanggal->format('d/m/Y') }}</td>
                        <td style="text-align:right; color:#065f46; font-weight:600; font-size:13px;">
                            Rp {{ number_format($p->jumlah, 0, ',', '.') }}
                        </td>
                    </tr>
                    @endforeach
                    <tr style="background:#f5faf7;">
                        <td colspan="3" style="font-weight:700; font-size:13px; color:#1a2e26;">Total</td>
                        <td style="text-align:right; font-weight:700; color:#065f46;">
                            Rp {{ number_format($ringkasan->total_pemasukan, 0, ',', '.') }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    {{-- Pengeluaran --}}
    <div class="card">
        <div class="card-header">
            <i class="fa-solid fa-arrow-trend-down" style="color:#dc2626;"></i>
            <span class="card-title">Rincian Pengeluaran</span>
        </div>
        <div class="table-wrap">
            <table>
                <thead><tr><th>Uraian</th><th>Tanggal</th><th style="text-align:right;">Jumlah</th></tr></thead>
                <tbody>
                    @foreach($pengeluaran as $p)
                    <tr>
                        <td style="font-size:13px;">{{ $p->uraian }}</td>
                        <td style="font-size:12px; color:#6b8f7e;">{{ $p->tanggal->format('d/m/Y') }}</td>
                        <td style="text-align:right; color:#991b1b; font-weight:600; font-size:13px;">
                            Rp {{ number_format($p->jumlah, 0, ',', '.') }}
                        </td>
                    </tr>
                    @endforeach
                    <tr style="background:#fff5f5;">
                        <td colspan="2" style="font-weight:700; font-size:13px; color:#1a2e26;">Total</td>
                        <td style="text-align:right; font-weight:700; color:#991b1b;">
                            Rp {{ number_format($ringkasan->total_pengeluaran, 0, ',', '.') }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>

@endsection