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

@section('content')
<div class="section-header mb-4">
    <div>
        <div class="section-title">Loan Applications</div>
        <div class="section-sub">Track your loan applications and repayments</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>

@if($loans->isEmpty())
<div class="card">
    <div class="card-body text-center py-5">
        <div style="font-size:3rem;margin-bottom:12px;">💳</div>
        <div style="font-weight:600;font-size:1.1rem;margin-bottom:8px;">No Loan Applications</div>
        <div style="font-size:.875rem;color:#6b7a8d;margin-bottom:24px;">You haven't applied for a loan yet.</div>
        <a href="{{ route('member.loans.apply') }}" class="btn btn-gold">Apply Now</a>
    </div>
</div>
@else
<div class="d-flex flex-column gap-3">
    @foreach($loans as $loan)
    <div class="card">
        <div class="card-body">
            <div class="row g-3 align-items-center">
                <div class="col-md-3">
                    <div style="font-size:.7rem;color:#aaa;text-transform:uppercase;letter-spacing:.05em;">Loan Number</div>
                    <code style="font-size:1rem;">{{ $loan->loan_number }}</code>
                    <div style="font-size:.78rem;color:#6b7a8d;margin-top:2px;">{{ $loan->loan_type_label }} · Applied {{ $loan->created_at->format('M Y') }}</div>
                </div>
                <div class="col-md-2">
                    <div style="font-size:.7rem;color:#aaa;text-transform:uppercase;letter-spacing:.05em;">Amount</div>
                    <div class="amount-lg">${{ number_format($loan->amount,2) }}</div>
                </div>
                <div class="col-md-2">
                    <div style="font-size:.7rem;color:#aaa;text-transform:uppercase;letter-spacing:.05em;">Outstanding</div>
                    <div class="amount-lg" style="color:#c0392b;">${{ number_format($loan->outstanding_balance,2) }}</div>
                </div>
                <div class="col-md-2">
                    <div style="font-size:.7rem;color:#aaa;text-transform:uppercase;letter-spacing:.05em;">Term</div>
                    <div style="font-size:.9rem;font-weight:500;">{{ $loan->term_months }} mo @ {{ $loan->interest_rate }}%</div>
                </div>
                <div class="col-md-2 text-center">
                    <span class="badge-status {{ $loan->status }}" style="font-size:.78rem;padding:6px 14px;">{{ ucfirst($loan->status) }}</span>
                </div>
                <div class="col-md-1 text-end">
                    <a href="{{ route('member.loans.show',$loan) }}" class="btn btn-outline-navy" style="font-size:.8rem;padding:6px 14px;">
                        Details
                    </a>
                </div>
            </div>
            @if(in_array($loan->status,['approved','disbursed']) && $loan->amount > 0)
            @php $pct = min(100,($loan->amount_paid/$loan->amount)*100); @endphp
            <div class="mt-3">
                <div class="progress" style="height:5px;"><div class="progress-bar" style="width:{{ $pct }}%;"></div></div>
                <div style="font-size:.72rem;color:#aaa;margin-top:4px;">{{ round($pct) }}% repaid</div>
            </div>
            @endif
        </div>
    </div>
    @endforeach
</div>
@if($loans->hasPages())
<div class="mt-3">{{ $loans->links() }}</div>
@endif
@endif
@endsection