@extends('admin_dashboard')
@section('admin')

<style>
    .card { border: none; border-radius: 16px; }
    .section-heading {
        font-size: .78rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .7px; color: #6b7280; margin: 0 0 14px;
        display: flex; align-items: center; gap: 8px;
    }
    .section-heading::after { content:''; flex:1; height:1px; background:#e5e7eb; }
    .badge-disbursed { background:#d1fae5; color:#065f46; font-size:.75rem; font-weight:600; padding:3px 10px; border-radius:20px; }
</style>

<div class="container-fluid my-3">

    <div class="d-flex align-items-center justify-content-between mb-3">
        <div>
            <h5 class="fw-bold mb-0" style="color:#0f4c35;"><i class="bi bi-cash-stack me-2"></i>Disbursement List</h5>
        </div>
        <a href="{{ route('loan.disbursement') }}" class="btn btn-sm text-white" style="background:#1a7a5e; border-radius:8px;">
            <i class="bi bi-plus-lg me-1"></i> New Disbursement
        </a>
    </div>

    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        <i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <div class="card shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead style="background:linear-gradient(135deg,#0f4c35,#1a7a5e); color:#fff;">
                        <tr>
                            <th class="ps-3 py-3" style="font-size:.78rem;">#</th>
                            <th style="font-size:.78rem;">Loan A/C</th>
                            <th style="font-size:.78rem;">Member</th>
                            <th style="font-size:.78rem;">Loan Type</th>
                            <th style="font-size:.78rem;">Disburse Date</th>
                            <th style="font-size:.78rem;">Amount</th>
                            <th style="font-size:.78rem;">Pay Terms</th>
                            <th style="font-size:.78rem;">Status</th>
                            <th style="font-size:.78rem;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($disbursements as $i => $d)
                        <tr style="border-bottom:1px solid #f0f0f0;">
                            <td class="ps-3 text-muted small">{{ $disbursements->firstItem() + $i }}</td>
                            <td>
                                <span style="background:#e8f5ee; color:#1a7a5e; padding:3px 10px; border-radius:20px; font-size:.8rem; font-weight:700; font-family:monospace;">
                                    {{ $d->loan_ac_number }}
                                </span>
                            </td>
                            <td>
                                <div class="fw-semibold" style="font-size:.9rem;">{{ $d->loanMember->memberInfo->member_name ?? '—' }}</div>
                                <small class="text-muted">{{ $d->loanMember->memberInfo->member_mobile ?? '' }}</small>
                            </td>
                            <td>
                                <span style="background:#ede9fe; color:#7c3aed; padding:3px 10px; border-radius:20px; font-size:.75rem; font-weight:600;">
                                    {{ $d->loanMember->loan_type ?? '—' }}
                                </span>
                            </td>
                            <td class="small text-muted">
                                <i class="bi bi-calendar2 me-1"></i>
                                {{ \Carbon\Carbon::parse($d->disbursement_date)->format('d M Y') }}
                            </td>
                            <td class="fw-bold" style="color:#1a7a5e;">৳ {{ number_format($d->disbursed_amount, 2) }}</td>
                            <td class="text-center small">{{ $d->loanMember->pay_term ?? '—' }}</td>
                            <td><span class="badge-disbursed"><i class="bi bi-check-circle-fill me-1"></i>Disbursed</span></td>
                            <td>
                                <a href="{{ route('loan.disbursement.collection', $d->id) }}"
                                   class="btn btn-sm btn-outline-success px-2" title="View Collection Sheet">
                                    <i class="bi bi-table me-1"></i>Collection
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="9" class="text-center py-5 text-muted">
                                <i class="bi bi-inbox fs-2 d-block mb-2"></i>No disbursements yet.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    @if($disbursements->hasPages())
    <div class="d-flex align-items-center justify-content-between mt-3 px-1">
        <small class="text-muted">Showing {{ $disbursements->firstItem() }}–{{ $disbursements->lastItem() }} of {{ $disbursements->total() }}</small>
        {{ $disbursements->links('pagination::bootstrap-5') }}
    </div>
    @endif

</div>
@endsection