@extends('layouts.app')
@section('title', 'My Dashboard')
@section('page-title', 'My Account')

@section('content')
<div class="section-header mb-4">
    <div>
        <div class="section-title">Welcome, {{ explode(' ', auth()->user()->name)[0] }} 👋</div>
        <div class="section-sub">Member ID: {{ auth()->user()->member_id }} · {{ now()->format('l, F j, Y') }}</div>
    </div>
    <a href="{{ route('member.loans.apply') }}" class="btn btn-gold">
        <i class="fa-solid fa-file-signature me-1"></i> Apply for Loan
    </a>
</div>

{{-- Balance Cards --}}
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="stat-card gold">
            <div class="stat-icon gold"><i class="fa-solid fa-piggy-bank"></i></div>
            <div class="stat-value">${{ number_format($member->savings_balance, 2) }}</div>
            <div class="stat-label">Savings Balance</div>
            <div class="stat-change up"><i class="fa-solid fa-arrow-trend-up me-1"></i>+${{ number_format($thisMonthSavings, 2) }} this month</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card {{ $activeLoan ? 'red' : 'green' }}">
            <div class="stat-icon {{ $activeLoan ? 'red' : 'green' }}"><i class="fa-solid fa-hand-holding-dollar"></i></div>
            <div class="stat-value">${{ number_format($loanBalance, 2) }}</div>
            <div class="stat-label">Loan Outstanding</div>
            @if($activeLoan)
                <div class="stat-change down">{{ $activeLoan->term_months - $activeLoan->repaymentSchedules()->where('status','paid')->count() }} payments remaining</div>
            @else
                <div class="stat-change up">No active loan</div>
            @endif
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card blue">
            <div class="stat-icon blue"><i class="fa-solid fa-rotate-left"></i></div>
            <div class="stat-value">${{ number_format($totalRepaid, 2) }}</div>
            <div class="stat-label">Total Repaid</div>
            <div class="stat-change up">Lifetime repayments</div>
        </div>
    </div>
</div>

<div class="row g-3">
    {{-- Active Loan Card --}}
    <div class="col-lg-7">
        @if($activeLoan)
        <div class="card mb-3">
            <div class="card-header">
                <div class="card-header-title"><i class="fa-solid fa-hand-holding-dollar me-2" style="color:#1565c0;"></i>Active Loan</div>
                <a href="{{ route('member.loans.show', $activeLoan) }}" class="btn btn-sm btn-outline-navy">Details</a>
            </div>
            <div class="card-body">
                <div class="row g-3 mb-3">
                    <div class="col-6">
                        <div style="font-size:.72rem; color:#aaa; text-transform:uppercase; letter-spacing:.05em;">Loan Amount</div>
                        <div class="amount-lg">${{ number_format($activeLoan->amount, 2) }}</div>
                    </div>
                    <div class="col-6">
                        <div style="font-size:.72rem; color:#aaa; text-transform:uppercase; letter-spacing:.05em;">Monthly Installment</div>
                        <div class="amount-lg">${{ number_format($activeLoan->monthly_installment, 2) }}</div>
                    </div>
                    <div class="col-6">
                        <div style="font-size:.72rem; color:#aaa; text-transform:uppercase; letter-spacing:.05em;">Outstanding Balance</div>
                        <div class="amount-lg" style="color:#c0392b;">${{ number_format($activeLoan->outstanding_balance, 2) }}</div>
                    </div>
                    <div class="col-6">
                        <div style="font-size:.72rem; color:#aaa; text-transform:uppercase; letter-spacing:.05em;">Due Date</div>
                        <div style="font-size:1rem; font-weight:600;">{{ $activeLoan->due_date?->format('M Y') ?? '—' }}</div>
                    </div>
                </div>

                @php $pct = $activeLoan->amount > 0 ? min(100, ($activeLoan->amount_paid / $activeLoan->amount) * 100) : 0; @endphp
                <div style="font-size:.78rem; color:#6b7a8d; margin-bottom:6px;">Repayment Progress · {{ round($pct) }}% paid</div>
                <div class="progress" style="height:8px;"><div class="progress-bar" style="width:{{ $pct }}%;"></div></div>

                @php
                    $nextSchedule = $activeLoan->repaymentSchedules()->where('status','pending')->orderBy('due_date')->first();
                @endphp
                @if($nextSchedule)
                <div class="mt-3 p-3" style="background:rgba(212,130,10,.08); border-radius:9px; border-left:3px solid #d4820a;">
                    <div style="font-size:.78rem; color:#d4820a; font-weight:600;">
                        <i class="fa-solid fa-clock me-1"></i>
                        Next Payment Due: {{ $nextSchedule->due_date->format('M d, Y') }} — <span class="amount">${{ number_format($nextSchedule->amount, 2) }}</span>
                    </div>
                </div>
                @endif
            </div>
        </div>
        @else
        <div class="card mb-3">
            <div class="card-body text-center py-5">
                <div style="font-size:2.5rem; margin-bottom:12px;">💳</div>
                <div style="font-weight:600; font-size:1rem; margin-bottom:6px;">No Active Loan</div>
                <div style="font-size:.85rem; color:#6b7a8d; margin-bottom:20px;">You can apply for a loan at any time</div>
                <a href="{{ route('member.loans.apply') }}" class="btn btn-gold">Apply for a Loan</a>
            </div>
        </div>
        @endif

        {{-- Recent Transactions --}}
        <div class="card">
            <div class="card-header">
                <div class="card-header-title">Recent Transactions</div>
                <a href="{{ route('member.transactions') }}" class="btn btn-sm btn-outline-navy">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table">
                    <thead><tr><th>Type</th><th>Amount</th><th>Balance</th><th>Date</th></tr></thead>
                    <tbody>
                        @forelse($recentTransactions as $txn)
                        <tr>
                            <td><span class="badge-status {{ $txn->type === 'deposit' ? 'active' : 'rejected' }}">{{ ucfirst($txn->type) }}</span></td>
                            <td><span class="amount" style="color:{{ $txn->type === 'deposit' ? '#2e7d52' : '#c0392b' }};">{{ $txn->type === 'deposit' ? '+' : '-' }}${{ number_format($txn->amount, 2) }}</span></td>
                            <td><span class="amount">${{ number_format($txn->balance_after, 2) }}</span></td>
                            <td style="font-size:.78rem; color:#6b7a8d;">{{ $txn->created_at->format('M d, Y') }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="text-center py-3" style="color:#aaa; font-size:.85rem;">No transactions yet</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Quick info --}}
    <div class="col-lg-5">
        {{-- Loan Applications --}}
        <div class="card mb-3">
            <div class="card-header">
                <div class="card-header-title">My Loan Applications</div>
                <a href="{{ route('member.loans.index') }}" class="btn btn-sm btn-outline-navy">All</a>
            </div>
            <div class="card-body">
                @forelse($member->loans()->latest()->take(4)->get() as $loan)
                <div class="d-flex align-items-center justify-content-between py-2" style="border-bottom:1px solid var(--border);">
                    <div>
                        <div style="font-size:.85rem; font-weight:500;"><code>{{ $loan->loan_number }}</code></div>
                        <div style="font-size:.75rem; color:#6b7a8d;">{{ $loan->loan_type_label ?? ucfirst($loan->loan_type) }} · {{ $loan->created_at->format('M Y') }}</div>
                    </div>
                    <div class="text-end">
                        <div class="amount" style="font-size:.85rem;">${{ number_format($loan->amount, 2) }}</div>
                        <span class="badge-status {{ $loan->status }}" style="font-size:.65rem;">{{ ucfirst($loan->status) }}</span>
                    </div>
                </div>
                @empty
                <div class="text-center py-3" style="color:#aaa; font-size:.85rem;">No loan applications</div>
                @endforelse
            </div>
        </div>

        {{-- Account Info --}}
        <div class="card">
            <div class="card-header"><div class="card-header-title">Account Details</div></div>
            <div class="card-body">
                @foreach([
                    ['Member ID', $member->member_id],
                    ['Department', $member->department ?? '—'],
                    ['Monthly Contribution', '$'.number_format($member->monthly_contribution, 2)],
                    ['Member Since', $member->created_at->format('F Y')],
                    ['Status', ucfirst($member->status)],
                ] as [$label, $value])
                <div class="d-flex justify-content-between py-2" style="border-bottom:1px solid var(--border); font-size:.875rem;">
                    <span style="color:#6b7a8d;">{{ $label }}</span>
                    <strong>{{ $value }}</strong>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection