@extends('layouts.app')

@section('title', 'Approved Loans')

@section('content')
<div class="container-fluid">
    <!-- Navigation Bar -->
    <div class="navigation-bar">
        <div class="row align-items-center">
            <div class="col-md-6">
                <div class="page-title">
                    <h1><i class="fas fa-check-circle me-2 text-success"></i>Approved Loans</h1>
                    <p class="text-muted mb-0">Loans approved and ready for disbursement</p>
                </div>
            </div>
            <div class="col-md-6 text-end">
                <div class="action-buttons-nav">
                    <!-- Create button removed as requested -->
                </div>
            </div>
        </div>
    </div>

    <!-- Approved Loans Statistics -->
    <div class="row mb-4 mx-0">
        <div class="col-xl-3 col-md-6 mb-4 px-1">
            <div class="stat-card card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="stat-icon stat-icon-success">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="ms-3">
                            <h3 class="fw-bold text-success mb-0">{{ $loans->total() }}</h3>
                            <p class="text-muted mb-0">Approved Loans</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4 px-1">
            <div class="stat-card card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="stat-icon">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                        <div class="ms-3">
                            <h3 class="fw-bold text-primary mb-0">${{ number_format($loans->sum('amount'), 2) }}</h3>
                            <p class="text-muted mb-0">Total Amount</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4 px-1">
            <div class="stat-card card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="stat-icon stat-icon-info">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                        <div class="ms-3">
                            <h3 class="fw-bold text-info mb-0">{{ $loans->where('loan_type', 'cash')->count() }}</h3>
                            <p class="text-muted mb-0">Cash Loans</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4 px-1">
            <div class="stat-card card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="stat-icon stat-icon-warning">
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                        <div class="ms-3">
                            <h3 class="fw-bold text-warning mb-0">{{ $loans->where('loan_type', 'product')->count() }}</h3>
                            <p class="text-muted mb-0">Product Loans</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="form-card card">
                <div class="card-body">
                    <!-- Loans Table -->
                    <div class="section-wrapper">
                        <div class="section-header">
                            <div class="icon-wrapper">
                                <i class="fas fa-money-bill-wave"></i>
                            </div>
                            <h5>Approved Loans Ready for Disbursement</h5>
                            <span class="badge bg-success ms-2">{{ $loans->total() }}</span>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-hover client-table">
                                <thead>
                                    <tr>
                                        <th>LOAN NUMBER</th>
                                        <th>CLIENT</th>
                                        <th>AMOUNT</th>
                                        <th>INTEREST RATE</th>
                                        <th>DURATION</th>
                                        <th>MONTHLY PAYMENT</th>
                                        <th>TOTAL REPAYMENT</th>
                                        <th>PURPOSE</th>
                                        <th>TYPE</th>
                                        <th>APPROVAL DATE</th>
                                        <th>ACTIONS</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($loans as $loan)
                                    <tr>
                                        <td>
                                            <strong>{{ $loan->loan_number }}</strong>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="client-avatar me-2">
                                                    <i class="fas fa-user"></i>
                                                </div>
                                                <div>
                                                    <div class="fw-semibold">{{ $loan->client->first_name }} {{ $loan->client->last_name }}</div>
                                                    <small class="text-muted">{{ $loan->client->client_number }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fw-semibold text-success">${{ number_format($loan->amount, 2) }}</td>
                                        <td>{{ number_format($loan->interest_rate, 2) }}%</td>
                                        <td>{{ $loan->duration_months }} months</td>
                                        <td>${{ number_format($loan->monthly_payment, 2) }}</td>
                                        <td>${{ number_format($loan->total_repayment, 2) }}</td>
                                        <td>
                                            <span class="status-badge badge bg-info">{{ $loan->purpose }}</span>
                                        </td>
                                        <td>
                                            <span class="status-badge badge bg-{{ $loan->loan_type === 'cash' ? 'success' : 'warning' }}">
                                                {{ ucfirst($loan->loan_type) }}
                                            </span>
                                        </td>
                                        <td>{{ $loan->approved_at ? $loan->approved_at->format('M d, Y') : 'N/A' }}</td>
                                        <td>
                                            <div class="action-buttons-table">
                                                <a href="{{ route('loans.show', $loan) }}" class="btn-action btn-view" title="View Loan">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                @if(Auth::user()->hasPermission('loans.approve'))
                                                <form method="POST" action="{{ route('loans.disburse', $loan) }}" class="d-inline">
                                                    @csrf
                                                    <button type="submit" class="btn-action btn-success" title="Disburse Loan">
                                                        <i class="fas fa-money-bill-wave"></i>
                                                    </button>
                                                </form>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="11" class="text-center py-5">
                                            <div class="empty-state">
                                                <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                                                <h4 class="text-muted">No approved loans found</h4>
                                                <p class="text-muted">All approved loans have been disbursed or there are no loans ready for disbursement.</p>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        @if($loans->hasPages())
                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <div class="text-muted">
                                Showing {{ $loans->firstItem() }} to {{ $loans->lastItem() }} of {{ $loans->total() }} loans
                            </div>
                            {{ $loans->appends(request()->query())->links() }}
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    /* Pagination Styles */
    .pagination {
        margin-bottom: 0;
    }

    .pagination .page-link {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        line-height: 1.25;
        border-radius: 0.375rem;
        margin: 0 0.125rem;
        border: 1px solid #dee2e6;
        color: #6c757d;
        font-weight: 500;
        transition: all 0.2s ease;
    }

    .pagination .page-link:hover {
        background-color: #198754;
        border-color: #198754;
        color: white;
        transform: translateY(-1px);
    }

    .pagination .page-item.active .page-link {
        background-color: #198754;
        border-color: #198754;
        color: white;
        box-shadow: 0 2px 4px rgba(25, 135, 84, 0.2);
    }

    .pagination .page-item.disabled .page-link {
        color: #6c757d;
        background-color: transparent;
        border-color: #dee2e6;
    }
</style>
@endsection