@extends('layouts.app')

@section('title', 'Repayment Sheet')

@section('content')
<div class="max-w-7xl mx-auto py-6 print-area">
    <div class="bg-white shadow rounded-lg p-6">
        <button onclick="window.print()" class="mb-4 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded text-sm print:hidden">Print</button>
        <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4 print:hidden">
            <div>
                <label class="block text-sm font-medium text-gray-700">Branch</label>
                <select name="branch_id" class="w-full border rounded px-2 py-1 text-sm" onchange="this.form.submit()">
                    <option value="">Select Branch</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}" {{ $branch_id == $branch->id ? 'selected' : '' }}>
                            {{ $branch->branch_name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">CBO</label>
                <select name="cbo_id" class="w-full border rounded px-2 py-1 text-sm" onchange="this.form.submit()">
                    <option value="">Select CBO</option>
                    @foreach($cbos as $cbo)
                        <option value="{{ $cbo->cbo_id }}" {{ $cbo_id == $cbo->cbo_id ? 'selected' : '' }}>
                            {{ $cbo->cbo_name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Credit Officer</label>
                <select name="credit_officer_id" class="w-full border rounded px-2 py-1 text-sm" onchange="this.form.submit()">
                    <option value="">Select Officer</option>
                    @foreach($officers as $officer)
                        <option value="{{ $officer->id }}" {{ $credit_officer_id == $officer->id ? 'selected' : '' }}>
                            {{ $officer->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="flex items-end">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm">Preview</button>
            </div>
        </form>
        <style>
            @media print {
                body * { visibility: hidden !important; }
                .print-area, .print-area * { visibility: visible !important; }
                .print-area { position: absolute !important; left: 0; top: 0; width: 100vw !important; background: #fff !important; z-index: 9999; }
                .print\:hidden { display: none !important; }
                table { page-break-inside: avoid; }
                th, td { font-size: 10pt !important; }
                /* Hide scrollbars */
                ::-webkit-scrollbar { display: none; }
		/* Force A4 landscape */
                @page { size: A4 landscape; margin: 10mm; }
                html, body { width: 297mm; height: 210mm; }
                .print-area { width: 100%; max-width: 100vw; }
                .overflow-x-auto { overflow: visible !important; }
                .bg-blue-100 { background: #e0e7ff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
                .bg-gray-100 { background: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
            }
        </style>
        @if(isset($groupedRepaymentData) && $groupedRepaymentData->count())
        <div class="overflow-x-auto">
            <div class="mb-2">
                <div><strong>Center Manager - </strong>{{ optional($officers->where('id', $credit_officer_id)->first())->name }}</div>
                <div><strong>Route - </strong>{{ optional($cbos->where('cbo_id', $cbo_id)->first())->cbo_name }}</div>
            </div>
            <table class="min-w-full text-xs border border-black" style="border-collapse: collapse; width: 100%; table-layout: fixed;">
                <colgroup>
                    <col style="width:5%">
                    <col style="width:8%">
                    <col style="width:8%">
                    <col style="width:6%">
                    <col style="width:6%">
                    <col style="width:6%">
                    <col style="width:6%">
                    <col style="width:6%">
                    @for($i=0;$i<8;$i++)<col style="width:5.5%">@endfor
                </colgroup>
                <thead>
                    <tr>
                        <th class="border border-black px-1 py-1">Loan No</th>
                        <th class="border border-black px-1 py-1">Client</th>
                        <th class="border border-black px-1 py-1">Client Mobile</th>
                        <th class="border border-black px-1 py-1">Loan Amount</th>
                        <th class="border border-black px-1 py-1">DUE Amount</th>
                        <th class="border border-black px-1 py-1">Total Bal</th>
                        <th class="border border-black px-1 py-1">Total Paid</th>
                        <th class="border border-black px-1 py-1">Arrears</th>
                        @for($i=0;$i<8;$i++)<th class="border border-black px-1 py-1">&nbsp;</th>@endfor
                    </tr>
                </thead>
                <tbody>
                @foreach($groupedRepaymentData as $groupNumber => $loans)
                    <tr>
                        <td colspan="16" class="font-bold bg-blue-100">Group {{ $groupNumber }}</td>
                    </tr>
                    @foreach($loans as $m)
                    <tr>
                        <td class="border border-black px-1 py-1">{{ $m['loan_no'] }}</td>
                        <td class="border border-black px-1 py-1">{{ $m['client_name'] }}</td>
                        <td class="border border-black px-1 py-1">{{ $m['client_mobile'] }}</td>
                        <td class="border border-black px-1 py-1 text-right">{{ number_format($m['loan_amount'], ) }}</td>
                        <td class="border border-black px-1 py-1 text-right">{{ isset($m['rental_value']) ? number_format($m['rental_value'], ) : '' }}</td>
                        <td class="border border-black px-1 py-1 text-right">{{ number_format($m['outstanding_balance'], ) }}</td>
                        <td class="border border-black px-1 py-1 text-right">{{ number_format($m['total_paid'], ) }}</td>
                        <td class="border border-black px-1 py-1 text-right">{{ number_format($m['arrears'], ) }}</td>
                        @for($i=0;$i<8;$i++)<td class="border border-black px-1 py-1">&nbsp;</td>@endfor
                    </tr>
                    @endforeach
                @endforeach
                </tbody>
            </table>
            <!-- Summary/Signature Section -->  
            <table class="min-w-full text-xs border border-black mt-4" style="border-collapse: collapse; width: 100%;">
                <tr>
                    <td class="border border-black px-1 py-1" colspan="3">NO OF NOT PAID</td>
                    <td class="border border-black px-1 py-1" colspan="2"></td>
                    <td class="border border-black px-1 py-1" colspan="2">AMOUNT</td>
                    <td class="border border-black px-1 py-1" colspan="7"></td>
                </tr>
                <tr>
                    <td class="border border-black px-1 py-1" colspan="3">NO OF UNDERPAYMENT</td>
                    <td class="border border-black px-1 py-1" colspan="2"></td>
                    <td class="border border-black px-1 py-1" colspan="2">AMOUNT</td>
                    <td class="border border-black px-1 py-1" colspan="7"></td>
                </tr>
                <tr>
                    <td class="border border-black px-1 py-1" colspan="3">NO OF SETTLEMENT</td>
                    <td class="border border-black px-1 py-1" colspan="2"></td>
                    <td class="border border-black px-1 py-1" colspan="2">AMOUNT</td>
                    <td class="border border-black px-1 py-1" colspan="7"></td>
                </tr>
                <tr>
                    <td class="border border-black px-1 py-1" colspan="3">SIGNATURE OF CENTER MANAGER</td>
                    <td class="border border-black px-1 py-1" colspan="2"></td>
                    <td class="border border-black px-1 py-1" colspan="2">SLIP NO</td>
                    <td class="border border-black px-1 py-1" colspan="7"></td>
                </tr>
                <tr>
                    <td class="border border-black px-1 py-1" colspan="3">SIGNATURE OF CASHIER</td>
                    <td class="border border-black px-1 py-1" colspan="2"></td>
                    <td class="border border-black px-1 py-1" colspan="2">SIGNATURE OF BRANCH MANAGER</td>
                    <td class="border border-black px-1 py-1" colspan="7"></td>
                </tr>
            </table>
        </div>
        @elseif(isset($repaymentData) && $branch_id && $cbo_id && $credit_officer_id)
            <div class="text-center text-gray-500 mt-4">No repayment data found for the selected filters.</div>
        @endif
    </div>
</div>
@endsection