@extends('layouts.app')

@section('title', 'Dashboard')
@section('page-title', 'Treasurer Dashboard')

@push('styles')
<style>
    .trend-bar { height: 4px; border-radius: 2px; }
</style>
@endpush

@section('content')

{{-- ── Good Standing Alerts ──────────────────────────────────────────────── --}}
@if($lciRiskFlag || $oldBalFlag)
<div class="alert alert-compliance d-flex gap-3 mb-4" role="alert">
    <i class="bi bi-shield-exclamation" style="font-size:24px;flex-shrink:0;margin-top:2px;"></i>
    <div>
        <strong>⚠ Good Standing Alert</strong>
        @if($lciRiskFlag)
            <div class="mt-1">LCI unpaid balance exceeds <strong>$10.00</strong> on one or more member accounts.</div>
        @endif
        @if($oldBalFlag)
            <div class="mt-1">One or more accounts are <strong>over 90 days old</strong> with a balance exceeding <strong>$50.00</strong>.</div>
        @endif
        <a href="{{ route('dues.invoices') }}?status=unpaid" class="fw-bold" style="color:#78350f;">
            Review outstanding invoices →
        </a>
    </div>
</div>
@else
<div class="alert alert-good-standing d-flex align-items-center gap-2 mb-4">
    <i class="bi bi-shield-check" style="font-size:20px;"></i>
    <span><strong>Good Standing Confirmed</strong> — All LCI compliance thresholds are currently met.</span>
</div>
@endif

{{-- ── Balance Widgets ───────────────────────────────────────────────────── --}}
<div class="row g-3 mb-4">
    <div class="col-md-6">
        <div class="balance-card admin">
            <div class="balance-card-label">Administrative Account</div>
            <div class="balance-card-amount">${{ number_format($adminBalance, 2) }}</div>
            <div class="balance-card-sub">
                {{ $adminAccount?->bank_name ?? '—' }}
                @if($adminAccount?->account_no) · A/C {{ $adminAccount->account_no }} @endif
            </div>
            <i class="bi bi-bank balance-card-icon"></i>
        </div>
    </div>
    <div class="col-md-6">
        <div class="balance-card activity">
            <div class="balance-card-label">Activity (Public) Account</div>
            <div class="balance-card-amount">${{ number_format($activityBalance, 2) }}</div>
            <div class="balance-card-sub">
                {{ $activityAccount?->bank_name ?? '—' }}
                @if($activityAccount?->account_no) · A/C {{ $activityAccount->account_no }} @endif
            </div>
            <i class="bi bi-heart-pulse balance-card-icon"></i>
        </div>
    </div>
</div>

{{-- ── Quick Stats ───────────────────────────────────────────────────────── --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="stat-card">
            <div class="stat-icon green"><i class="bi bi-arrow-down-circle-fill"></i></div>
            <div>
                <div class="stat-label">Income This Month</div>
                <div class="stat-value" style="color:#1a7340;">${{ number_format($monthlyIncome, 2) }}</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card">
            <div class="stat-icon red"><i class="bi bi-arrow-up-circle-fill"></i></div>
            <div>
                <div class="stat-label">Expenses This Month</div>
                <div class="stat-value" style="color:#c0392b;">${{ number_format($monthlyExpense, 2) }}</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card">
            <div class="stat-icon blue"><i class="bi bi-people-fill"></i></div>
            <div>
                <div class="stat-label">Active Members</div>
                <div class="stat-value">{{ $activeMembers }}</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card">
            <div class="stat-icon gold"><i class="bi bi-receipt"></i></div>
            <div>
                <div class="stat-label">Overdue Invoices</div>
                <div class="stat-value" style="color:{{ $overdueInvoices->count() > 0 ? '#c0392b' : '#1a7340' }}">
                    {{ $overdueInvoices->count() }}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">

    {{-- ── 6-Month Trend ─────────────────────────────────────────────────── --}}
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5><i class="bi bi-bar-chart-fill me-2" style="color:var(--lions-gold)"></i>6-Month Financial Trend</h5>
                <a href="{{ route('reports.board') }}" class="btn btn-sm btn-lions">
                    <i class="bi bi-printer"></i> Board Report
                </a>
            </div>
            <div class="card-body">
                <canvas id="trendChart" height="100"></canvas>
            </div>
        </div>
    </div>

    {{-- ── Task Progress ─────────────────────────────────────────────────── --}}
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header">
                <h5><i class="bi bi-check2-all me-2" style="color:var(--lions-gold)"></i>Task Progress</h5>
            </div>
            <div class="card-body">
                @foreach($taskProgress as $key => $prog)
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-1">
                        <span style="font-size:13px;font-weight:600;">{{ $prog['label'] }}</span>
                        <span style="font-size:12px;color:#6b7280;">{{ $prog['completed'] }}/{{ $prog['total'] }}</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar {{ $prog['percentage'] == 100 ? 'bg-success' : 'bg-lions' }}"
                             style="width:{{ $prog['percentage'] }}%"></div>
                    </div>
                </div>
                @endforeach
                <a href="{{ route('tasks.index') }}" class="btn btn-sm btn-gold w-100 mt-2">
                    <i class="bi bi-check2-square"></i> View All Tasks
                </a>
            </div>
        </div>
    </div>

    {{-- ── Recent Transactions ───────────────────────────────────────────── --}}
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5><i class="bi bi-clock-history me-2" style="color:var(--lions-gold)"></i>Recent Transactions</h5>
                <a href="{{ route('transactions.index') }}" class="btn btn-sm btn-outline-secondary">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table mb-0">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Account</th>
                            <th>Category</th>
                            <th class="text-end">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentTransactions as $tx)
                        <tr>
                            <td style="white-space:nowrap">{{ $tx->transaction_date->format('d M Y') }}</td>
                            <td>
                                <span class="badge {{ $tx->account->type === 'administrative' ? 'badge-admin' : 'badge-activity' }}">
                                    {{ $tx->account->type === 'administrative' ? 'Admin' : 'Activity' }}
                                </span>
                            </td>
                            <td style="font-size:13px">{{ $tx->category }}</td>
                            <td class="text-end fw-semibold {{ $tx->type === 'income' ? 'text-success' : 'text-danger' }}">
                                {{ $tx->type === 'income' ? '+' : '−' }}${{ number_format($tx->amount, 2) }}
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted py-4">No transactions yet.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- ── Overdue Invoices ──────────────────────────────────────────────── --}}
    <div class="col-lg-5">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5><i class="bi bi-exclamation-circle me-2" style="color:#e74c3c"></i>Overdue Dues</h5>
                <a href="{{ route('dues.invoices') }}?status=unpaid" class="btn btn-sm btn-outline-danger">View All</a>
            </div>
            <div class="card-body p-0">
                @forelse($overdueInvoices->take(6) as $inv)
                <div class="d-flex align-items-center justify-content-between px-3 py-2 border-bottom">
                    <div>
                        <div style="font-size:13px;font-weight:600;">{{ $inv->member->full_name }}</div>
                        <div style="font-size:11px;color:#6b7280;">
                            {{ $inv->days_overdue }} days overdue
                            @if($inv->lci_compliance_flag)
                                · <span class="text-danger fw-semibold">Good Standing risk</span>
                            @endif
                        </div>
                    </div>
                    <div class="text-end">
                        <div class="fw-bold text-danger" style="font-size:13px;">${{ number_format($inv->balance_due, 2) }}</div>
                    </div>
                </div>
                @empty
                <div class="text-center text-muted py-4">
                    <i class="bi bi-check-circle-fill text-success" style="font-size:24px;"></i>
                    <div class="mt-1" style="font-size:13px;">All dues are current!</div>
                </div>
                @endforelse
            </div>
        </div>
    </div>

</div><!-- /row -->

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
<script>
(function() {
    const data = @json($trendData);
    const ctx  = document.getElementById('trendChart').getContext('2d');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels:   data.map(d => d.label),
            datasets: [
                {
                    label:           'Income',
                    data:            data.map(d => d.income),
                    backgroundColor: 'rgba(26,115,64,.8)',
                    borderRadius:    4,
                },
                {
                    label:           'Expense',
                    data:            data.map(d => d.expense),
                    backgroundColor: 'rgba(192,57,43,.7)',
                    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