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

<style>
    .card { border: none; border-radius: 16px; }
    .info-chip {
        display:inline-flex; align-items:center; gap:6px;
        background:#f3f4f6; border-radius:8px; padding:6px 12px;
        font-size:.82rem; color:#374151;
    }
    .info-chip strong { color:#1a7a5e; font-family:monospace; }
    .status-paid    { background:#d1fae5; color:#065f46; font-size:.72rem; font-weight:600; padding:2px 9px; border-radius:20px; }
    .status-pending { background:#fef3c7; color:#92400e; font-size:.72rem; font-weight:600; padding:2px 9px; border-radius:20px; }
    .status-overdue { background:#fee2e2; color:#991b1b; font-size:.72rem; font-weight:600; padding:2px 9px; border-radius:20px; }
    @media print {
        .no-print { display:none !important; }
        .card { box-shadow: none !important; }
    }
</style>

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

    {{-- Header --}}
    <div class="card shadow-sm mb-3">
        <div class="card-body py-3 px-4">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h5 class="fw-bold mb-1" style="color:#0f4c35;">
                        <i class="bi bi-table me-2"></i>Collection Sheet
                    </h5>
                    <div class="d-flex flex-wrap gap-2 mt-1">
                        <span class="info-chip"><i class="bi bi-cash-coin"></i> Loan A/C: <strong>{{ $disbursement->loan_ac_number }}</strong></span>
                        <span class="info-chip"><i class="bi bi-person-fill"></i> {{ $disbursement->loanMember->memberInfo->member_name ?? '—' }}</span>
                        <span class="info-chip"><i class="bi bi-phone-fill"></i> {{ $disbursement->loanMember->memberInfo->member_mobile ?? '—' }}</span>
                        <span class="info-chip"><i class="bi bi-calendar2"></i> Disbursed: <strong>{{ \Carbon\Carbon::parse($disbursement->disbursement_date)->format('d M Y') }}</strong></span>
                        <span class="info-chip"><i class="bi bi-currency-dollar"></i> ৳ {{ number_format($disbursement->disbursed_amount, 2) }}</span>
                        <span class="info-chip"><i class="bi bi-tag-fill"></i> {{ $disbursement->loanMember->loan_type ?? '—' }}</span>
                    </div>
                </div>
                <div class="d-flex gap-2 no-print">
                    <button onclick="window.print()" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-printer me-1"></i> Print
                    </button>
                    <a href="{{ route('loan.disbursement.index') }}" class="btn btn-sm btn-outline-dark">
                        <i class="bi bi-arrow-left me-1"></i> Back
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Summary stats --}}
    @php
        $totalAmt  = $collections->sum('installment_amount');
        $paidAmt   = $collections->sum('paid_amount');
        $balanceAmt= $totalAmt - $paidAmt;
        $paidCount = $collections->where('status', 1)->count();
        $dueCount  = $collections->where('status', 0)->count();
    @endphp
    <div class="row g-3 mb-3">
        @foreach([
            ['Total Terms',       $collections->count(), '#1a3a5c',  '#dbeafe', 'bi-list-ol'],
            ['Paid Terms',        $paidCount,             '#065f46',  '#d1fae5', 'bi-check-circle-fill'],
            ['Pending Terms',     $dueCount,              '#92400e',  '#fef3c7', 'bi-hourglass-split'],
            ['Total Collected',   '৳ '.number_format($paidAmt,2), '#1a7a5e', '#f0fdf4', 'bi-cash-coin'],
            ['Balance Due',       '৳ '.number_format($balanceAmt,2), '#991b1b', '#fee2e2', 'bi-exclamation-circle'],
        ] as $s)
        <div class="col-6 col-md">
            <div class="card p-3 shadow-sm" style="border-left:4px solid {{ $s[2] }} !important;">
                <div style="font-size:.72rem; font-weight:700; text-transform:uppercase; color:{{ $s[2] }}; letter-spacing:.5px;">{{ $s[0] }}</div>
                <div style="font-size:1.2rem; font-weight:800; color:#111827; margin-top:4px;">{{ $s[1] }}</div>
            </div>
        </div>
        @endforeach
    </div>

    {{-- Collection table --}}
    <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;">Term No.</th>
                            <th style="font-size:.78rem;">Collection Date</th>
                            <th style="font-size:.78rem;">Instalment (৳)</th>
                            <th style="font-size:.78rem;">Paid (৳)</th>
                            <th style="font-size:.78rem;">Balance (৳)</th>
                            <th style="font-size:.78rem;">Paid Date</th>
                            <th style="font-size:.78rem;">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($collections as $i => $c)
                        @php
                            $isOverdue = $c->status === 0 && \Carbon\Carbon::parse($c->collection_date)->isPast();
                        @endphp
                        <tr style="border-bottom:1px solid #f0f0f0; {{ $isOverdue ? 'background:#fff5f5;' : '' }}">
                            <td class="ps-3 text-muted small">{{ $i + 1 }}</td>
                            <td class="fw-semibold" style="font-size:.85rem;">{{ $c->installment_no }}</td>
                            <td class="small {{ $isOverdue ? 'text-danger fw-semibold' : 'text-muted' }}">
                                <i class="bi bi-calendar2 me-1"></i>
                                {{ \Carbon\Carbon::parse($c->collection_date)->format('d M Y') }}
                                @if($isOverdue) <span class="ms-1" style="font-size:.7rem;">(overdue)</span> @endif
                            </td>
                            <td class="fw-semibold" style="color:#1a7a5e;">৳ {{ number_format($c->installment_amount, 2) }}</td>
                            <td style="color:#065f46;">৳ {{ number_format($c->paid_amount, 2) }}</td>
                            <td style="color:{{ $c->balance > 0 ? '#991b1b' : '#065f46' }}; font-weight:600;">
                                ৳ {{ number_format($c->balance, 2) }}
                            </td>
                            <td class="small text-muted">
                                {{ $c->paid_date ? \Carbon\Carbon::parse($c->paid_date)->format('d M Y') : '—' }}
                            </td>
                            <td>
                                @if($c->status === 1)
                                    <span class="status-paid"><i class="bi bi-check-circle-fill me-1"></i>Paid</span>
                                @elseif($isOverdue)
                                    <span class="status-overdue"><i class="bi bi-exclamation-circle-fill me-1"></i>Overdue</span>
                                @else
                                    <span class="status-pending"><i class="bi bi-clock me-1"></i>Pending</span>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot style="background:#f9fafb;">
                        <tr>
                            <td colspan="3" class="ps-3 fw-bold py-2" style="font-size:.85rem;">Total</td>
                            <td class="fw-bold" style="color:#1a7a5e;">৳ {{ number_format($totalAmt, 2) }}</td>
                            <td class="fw-bold" style="color:#065f46;">৳ {{ number_format($paidAmt, 2) }}</td>
                            <td class="fw-bold" style="color:#991b1b;">৳ {{ number_format($balanceAmt, 2) }}</td>
                            <td colspan="2"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

</div>
@endsection