@extends('layouts.app')
@section('title', 'Board Report')
@section('page-title', 'Board Meeting Financial Report')

@push('styles')
<style>
@media print {
    #sidebar, #topbar, .no-print { display: none !important; }
    #main-content { margin-left: 0 !important; padding-top: 0 !important; }
    .page-content { padding: 0 !important; }
    .card { border: 1px solid #ccc !important; box-shadow: none !important; }
    .report-header { border-bottom: 3px solid #00338D; padding-bottom: 16px; margin-bottom: 20px; }
}
</style>
@endpush

@section('content')

{{-- Controls (no-print) --}}
<div class="no-print page-header">
    <div>
        <h1>Board Financial Report</h1>
        <p class="text-muted mb-0" style="font-size:14px">Monthly P&L and account status for Board presentation.</p>
    </div>
    <div class="d-flex gap-2 align-items-center">
        <form method="GET" class="d-flex gap-2 align-items-center">
            <select name="month" class="form-select form-select-sm" style="width:auto">
                @for($m = 1; $m <= 12; $m++)
                    <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>{{ date('F', mktime(0,0,0,$m,1)) }}</option>
                @endfor
            </select>
            <select name="year" class="form-select form-select-sm" style="width:auto">
                @for($y = date('Y'); $y >= date('Y')-3; $y--)
                    <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                @endfor
            </select>
            <button class="btn btn-lions btn-sm">Generate</button>
        </form>
        <button onclick="window.print()" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-printer me-1"></i> Print
        </button>
    </div>
</div>

{{-- ── Report Header ─────────────────────────────────────────────────────── --}}
<div class="report-header d-flex justify-content-between align-items-start mb-4 pb-3"
     style="border-bottom:3px solid var(--lions-blue)">
    <div>
        <h2 class="mb-1" style="font-family:var(--font-serif);color:var(--lions-blue);font-size:20px">
            Colombo Merchant Blends Lions Club
        </h2>
        <div style="font-size:13px;color:#6b7280">District 306 B2 · Lions Clubs International</div>
        <div style="font-size:15px;font-weight:700;color:#1a1a2e;margin-top:4px">
            Monthly Financial Report — {{ $reportDate->format('F Y') }}
        </div>
    </div>
    <div class="text-end">
        <div style="font-size:22px">🦁</div>
        <div style="font-size:11px;color:#6b7280">Generated: {{ now()->format('d M Y') }}</div>
    </div>
</div>

{{-- ── Good Standing Status ─────────────────────────────────────────────── --}}
<div class="alert {{ $goodStanding ? 'alert-good-standing' : 'alert-compliance' }} mb-4">
    <div class="d-flex align-items-center gap-2">
        <i class="bi {{ $goodStanding ? 'bi-shield-check' : 'bi-shield-exclamation' }}"
           style="font-size:22px"></i>
        <div>
            <strong>LCI Good Standing Status: {{ $goodStanding ? 'COMPLIANT ✓' : 'AT RISK ⚠' }}</strong>
            @if(!$goodStanding)
                @if($lciRiskItems->count())
                    <div style="font-size:13px">{{ $lciRiskItems->count() }} invoice(s) with LCI unpaid balance >$10.00</div>
                @endif
                @if($overdue90->count())
                    <div style="font-size:13px">{{ $overdue90->count() }} invoice(s) >90 days with balance >$50.00</div>
                @endif
            @endif
        </div>
    </div>
</div>

{{-- ── Account Balances ─────────────────────────────────────────────────── --}}
<div class="row g-3 mb-4">
    @foreach($accountSummaries as $summary)
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header">
                <h5 style="font-size:14px">
                    <span class="badge {{ $summary['account']->type === 'administrative' ? 'badge-admin' : 'badge-activity' }} me-2">
                        {{ $summary['account']->type === 'administrative' ? 'Admin' : 'Activity' }}
                    </span>
                    {{ $summary['account']->name }}
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-2 text-center mb-3">
                    <div class="col-4">
                        <div style="font-size:11px;color:#6b7280;font-weight:600;text-transform:uppercase">Income</div>
                        <div class="fw-bold text-success">${{ number_format($summary['income'], 2) }}</div>
                    </div>
                    <div class="col-4">
                        <div style="font-size:11px;color:#6b7280;font-weight:600;text-transform:uppercase">Expense</div>
                        <div class="fw-bold text-danger">${{ number_format($summary['expense'], 2) }}</div>
                    </div>
                    <div class="col-4">
                        <div style="font-size:11px;color:#6b7280;font-weight:600;text-transform:uppercase">Balance</div>
                        <div class="fw-bold" style="color:var(--lions-blue)">${{ number_format($summary['balance'], 2) }}</div>
                    </div>
                </div>

                {{-- Category Breakdown --}}
                @if($summary['categories']['income']->count() || $summary['categories']['expense']->count())
                <table class="table table-sm mb-0" style="font-size:12px">
                    @foreach($summary['categories']['income'] as $row)
                    <tr>
                        <td class="text-muted">↓ {{ $row->category }}</td>
                        <td class="text-end text-success fw-semibold">${{ number_format($row->total, 2) }}</td>
                    </tr>
                    @endforeach
                    @foreach($summary['categories']['expense'] as $row)
                    <tr>
                        <td class="text-muted">↑ {{ $row->category }}</td>
                        <td class="text-end text-danger fw-semibold">${{ number_format($row->total, 2) }}</td>
                    </tr>
                    @endforeach
                </table>
                @else
                <div class="text-center text-muted" style="font-size:12px">No transactions this month.</div>
                @endif
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- ── Org Total ────────────────────────────────────────────────────────── --}}
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon green"><i class="bi bi-arrow-down-circle-fill"></i></div>
            <div>
                <div class="stat-label">Total Income (All Accounts)</div>
                <div class="stat-value text-success">${{ number_format($totalIncome, 2) }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon red"><i class="bi bi-arrow-up-circle-fill"></i></div>
            <div>
                <div class="stat-label">Total Expenses (All Accounts)</div>
                <div class="stat-value text-danger">${{ number_format($totalExpense, 2) }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon blue"><i class="bi bi-bank2"></i></div>
            <div>
                <div class="stat-label">Combined Account Balance</div>
                <div class="stat-value" style="color:var(--lions-blue)">${{ number_format($totalBalance, 2) }}</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    {{-- ── 6-Month Cash Flow ─────────────────────────────────────────────── --}}
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header"><h5>6-Month Cash Flow Trend</h5></div>
            <div class="card-body">
                <canvas id="cashflowChart" height="90"></canvas>
            </div>
        </div>
    </div>

    {{-- ── Membership ────────────────────────────────────────────────────── --}}
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header"><h5>Membership</h5></div>
            <div class="card-body">
                <div style="font-size:32px;font-weight:800;color:var(--lions-blue);text-align:center">
                    {{ $activeMembers }}
                </div>
                <div class="text-center text-muted" style="font-size:12px;margin-bottom:12px">Active Members</div>
                @foreach($memberByCategory as $cat => $count)
                <div class="d-flex justify-content-between py-1 border-bottom" style="font-size:13px">
                    <span class="text-muted">{{ ucwords(str_replace('_', ' ', $cat)) }}</span>
                    <span class="fw-semibold">{{ $count }}</span>
                </div>
                @endforeach
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header"><h5>Outstanding Dues</h5></div>
            <div class="card-body">
                <div style="font-size:28px;font-weight:800;color:#c0392b;text-align:center">
                    ${{ number_format($totalOutstanding, 2) }}
                </div>
                <div class="text-center text-muted" style="font-size:12px;margin-bottom:8px">Total Outstanding</div>
                <div class="text-center">
                    <span class="badge bg-danger">{{ $outstandingDues->count() }} unpaid invoices</span>
                    @if($unreconciled > 0)
                        <span class="badge bg-warning text-dark ms-1">{{ $unreconciled }} unreconciled txns</span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- ── Outstanding Dues Table ─────────────────────────────────────────── --}}
    @if($outstandingDues->count() > 0)
    <div class="col-12">
        <div class="card">
            <div class="card-header"><h5>Outstanding Dues Detail</h5></div>
            <div class="table-responsive">
                <table class="table mb-0" style="font-size:13px">
                    <thead>
                        <tr>
                            <th>Invoice</th>
                            <th>Member</th>
                            <th>Period</th>
                            <th class="text-end">LCI Unpaid</th>
                            <th class="text-end">Balance Due</th>
                            <th>Due Date</th>
                            <th>Days Overdue</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($outstandingDues as $inv)
                        <tr class="{{ $inv->lci_compliance_flag ? 'table-warning' : '' }}">
                            <td style="font-family:monospace">{{ $inv->invoice_number }}</td>
                            <td class="fw-semibold">{{ $inv->member->full_name }}</td>
                            <td>{{ $inv->billing_period_display }}</td>
                            <td class="text-end text-danger">${{ number_format($inv->lci_amount - $inv->amount_paid, 2) }}</td>
                            <td class="text-end fw-bold text-danger">${{ number_format($inv->balance_due, 2) }}</td>
                            <td>{{ $inv->due_date?->format('d M Y') ?? '—' }}</td>
                            <td>
                                @if($inv->days_overdue > 0)
                                    <span class="badge {{ $inv->days_overdue > 90 ? 'badge-unpaid' : 'badge-partial' }}">
                                        {{ $inv->days_overdue }}d
                                    </span>
                                @else —
                                @endif
                            </td>
                            <td>
                                <span class="badge {{ $inv->status_badge_class }}">{{ ucfirst($inv->status) }}</span>
                                @if($inv->lci_compliance_flag)
                                    <i class="bi bi-shield-exclamation text-danger ms-1"
                                       title="{{ $inv->lci_compliance_flag }}"></i>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
<script>
(function() {
    const cf  = @json($cashFlow);
    const ctx = document.getElementById('cashflowChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels:   cf.map(d => d.month),
            datasets: [
                { label: 'Income',  data: cf.map(d => d.income),  backgroundColor: 'rgba(26,115,64,.75)', borderRadius: 4 },
                { label: 'Expense', data: cf.map(d => d.expense), backgroundColor: 'rgba(192,57,43,.65)', borderRadius: 4 },
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'top' },
                tooltip: { callbacks: { label: ctx => ' $' + ctx.parsed.y.toFixed(2) } }
            },
            scales: {
                y: { beginAtZero: true, ticks: { callback: v => '$' + v.toLocaleString(), font: { size: 11 } } },
                x: { ticks: { font: { size: 11 } } }
            }
        }
    });
})();
</script>
@endpush