@extends('layouts.app')

@section('title', 'CBO-wise Micro Loan Collection Report (Member Details)')

@section('content')
<style>
    @media print {
        @page {
            size: A4;
            margin: 1cm;
        }
        body {
            font-size: 10px !important;
        }
        .no-print {
            display: none !important;
        }
        .print-only {
            display: block !important;
        }
        .summary-stats {
            display: none !important;
        }
        .table {
            font-size: 8px !important;
            width: 100% !important;
        }
        .table th, .table td {
            padding: 2px 3px !important;
            font-size: 8px !important;
            border: 1px solid #000 !important;
        }
        .card {
            border: none !important;
            box-shadow: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        .card-header {
            display: none !important;
        }
        .card-body {
            padding: 5px !important;
        }
        .badge {
            font-size: 7px !important;
            padding: 1px 2px !important;
        }
        .text-end {
            text-align: right !important;
        }
        .text-center {
            text-align: center !important;
        }
        .bg-light {
            background-color: #f8f9fa !important;
        }
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(0,0,0,.05) !important;
        }
        .table-bordered {
            border: 1px solid #000 !important;
        }
        .table-bordered th,
        .table-bordered td {
            border: 1px solid #000 !important;
        }
        .table-dark {
            background-color: #000 !important;
            color: white !important;
        }
        .table-dark th {
            background-color: #000 !important;
            color: white !important;
        }
        .container-fluid {
            padding: 0 !important;
            margin: 0 !important;
        }
        .row {
            margin: 0 !important;
        }
        .col-12 {
            padding: 0 !important;
        }
    }
    
    .print-header {
        display: none;
    }
    
    @media print {
        .print-header {
            display: block;
            text-align: center;
            margin-bottom: 10px;
            border-bottom: 1px solid #000;
            padding-bottom: 5px;
        }
        .print-header h1 {
            font-size: 14px;
            margin: 0;
            font-weight: bold;
        }
        .print-header p {
            font-size: 8px;
            margin: 2px 0 0 0;
            color: #000;
        }
    }
</style>

<!-- Print Header -->
<div class="print-header">
    <h1>CBO-wise Micro Loan Collection Report (Member Details)</h1>
    <p>Generated on: {{ now()->format('d/m/Y H:i:s') }}</p>
    <p>Period: {{ $startDate }} to {{ $endDate }}</p>
    @if($branchId != 'all')
        <p>Branch: {{ $branches->where('id', $branchId)->first()->branch_name ?? 'N/A' }}</p>
    @endif
    @if($cboId != 'all')
        <p>CBO: {{ $cbos->where('cbo_id', $cboId)->first()->cbo_name ?? 'N/A' }}</p>
    @endif
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header no-print">
                    <h4 class="card-title">
                        <i class="fas fa-users me-2"></i>
                        CBO-wise Micro Loan Collection Report (Member Details)
                    </h4>
                    <div class="card-tools">
                        <button onclick="window.print()" class="btn btn-outline-primary me-2">
                            <i class="fas fa-print me-2"></i>Print Report
                        </button>
                        <a href="{{ route('reports.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to Reports
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Filters -->
                    <div class="row mb-4 no-print">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-filter me-2"></i>Filters
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <form method="GET" action="{{ route('reports.cbo-micro-loan-collection') }}" class="row g-3">
                                        <div class="col-md-3">
                                            <label for="branch_id" class="form-label">Branch</label>
                                            <select name="branch_id" id="branch_id" class="form-select">
                                                <option value="all">All Branches</option>
                                                @foreach($branches as $branch)
                                                    <option value="{{ $branch->id }}" {{ $branchId == $branch->id ? 'selected' : '' }}>
                                                        {{ $branch->branch_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="cbo_id" class="form-label">CBO</label>
                                            <select name="cbo_id" id="cbo_id" class="form-select">
                                                <option value="all">All CBOs</option>
                                                @foreach($cbos as $cbo)
                                                    <option value="{{ $cbo->cbo_id }}" {{ $cboId == $cbo->cbo_id ? 'selected' : '' }}>
                                                        {{ $cbo->cbo_name }} ({{ $cbo->cbo_code }})
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label for="start_date" class="form-label">Start Date</label>
                                            <input type="date" name="start_date" id="start_date" class="form-control" value="{{ $startDate }}">
                                        </div>
                                        <div class="col-md-2">
                                            <label for="end_date" class="form-label">End Date</label>
                                            <input type="date" name="end_date" id="end_date" class="form-control" value="{{ $endDate }}">
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label">&nbsp;</label>
                                            <button type="submit" class="btn btn-primary d-block w-100">
                                                <i class="fas fa-search me-2"></i>Filter
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Summary Statistics -->
                    <div class="row mb-4 summary-stats">
                        <div class="col-md-12">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <div class="row text-center">
                                        <div class="col-md-3">
                                            <h6 class="text-muted mb-1">Total CBOs</h6>
                                            <h5 class="text-primary mb-0">{{ number_format($summary['total_cbos']) }}</h5>
                                        </div>
                                        <div class="col-md-3">
                                            <h6 class="text-muted mb-1">Total Members</h6>
                                            <h5 class="text-info mb-0">{{ number_format($summary['total_members']) }}</h5>
                                        </div>
                                        <div class="col-md-3">
                                            <h6 class="text-muted mb-1">Total Loans</h6>
                                            <h5 class="text-warning mb-0">{{ number_format($summary['total_loans']) }}</h5>
                                        </div>
                                        <div class="col-md-3">
                                            <h6 class="text-muted mb-1">Total Collections</h6>
                                            <h5 class="text-success mb-0">Rs. {{ number_format($summary['total_collections'], 2) }}</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Collection Data Table -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-list me-2"></i>CBO Collection Details
                                    </h5>
                                </div>
                                <div class="card-body">
                                    @if($collectionData->count() > 0)
                                        <div class="table-responsive">
                                            <table class="table table-striped table-bordered" style="font-size: 12px;">
                                                <thead class="table-dark">
                                                    <tr>
                                                        <th style="font-size: 11px; padding: 6px 4px;">CBO Code</th>
                                                        <th style="font-size: 11px; padding: 6px 4px;">CBO Name</th>
                                                        <th style="font-size: 11px; padding: 6px 4px;">Branch</th>
                                                        <th style="font-size: 11px; padding: 6px 4px;">Member Name</th>
                                                        <th style="font-size: 11px; padding: 6px 4px;">NIC</th>
                                                        <th style="font-size: 11px; padding: 6px 4px;">Loan ID</th>
                                                        <th style="font-size: 11px; padding: 6px 4px;">Payments</th>
                                                        <th style="font-size: 11px; padding: 6px 4px;">Capital</th>
                                                        <th style="font-size: 11px; padding: 6px 4px;">Interest</th>
                                                        <th style="font-size: 11px; padding: 6px 4px;">Penalty</th>
                                                        <th style="font-size: 11px; padding: 6px 4px;">Total Collected</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($collectionData as $data)
                                                        <tr style="font-size: 11px;">
                                                            <td style="padding: 4px 6px;">{{ $data->cbo_code }}</td>
                                                            <td style="padding: 4px 6px;">{{ $data->cbo_name }}</td>
                                                            <td style="padding: 4px 6px;">{{ $data->branch_name }}</td>
                                                            <td style="padding: 4px 6px;"><strong>{{ $data->member_name }}</strong></td>
                                                            <td style="padding: 4px 6px;">{{ $data->member_nic }}</td>
                                                            <td class="text-center" style="padding: 4px 6px;">{{ $data->loan_id }}</td>
                                                            <td class="text-center" style="padding: 4px 6px;">{{ number_format($data->payment_count) }}</td>
                                                            <td class="text-end" style="padding: 4px 6px;">Rs. {{ number_format($data->total_capital, 2) }}</td>
                                                            <td class="text-end" style="padding: 4px 6px;">Rs. {{ number_format($data->total_interest, 2) }}</td>
                                                            <td class="text-end" style="padding: 4px 6px;">Rs. {{ number_format($data->total_penalty, 2) }}</td>
                                                            <td class="text-end" style="padding: 4px 6px;"><strong>Rs. {{ number_format($data->total_collected, 2) }}</strong></td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                                <tfoot class="table-light">
                                                    <tr class="font-weight-bold" style="font-size: 11px;">
                                                        <td colspan="6" class="text-end" style="padding: 4px 6px;"><strong>Totals:</strong></td>
                                                        <td class="text-center" style="padding: 4px 6px;"><strong>{{ number_format($collectionData->sum('payment_count')) }}</strong></td>
                                                        <td class="text-end" style="padding: 4px 6px;"><strong>Rs. {{ number_format($collectionData->sum('total_capital'), 2) }}</strong></td>
                                                        <td class="text-end" style="padding: 4px 6px;"><strong>Rs. {{ number_format($collectionData->sum('total_interest'), 2) }}</strong></td>
                                                        <td class="text-end" style="padding: 4px 6px;"><strong>Rs. {{ number_format($collectionData->sum('total_penalty'), 2) }}</strong></td>
                                                        <td class="text-end" style="padding: 4px 6px;"><strong>Rs. {{ number_format($collectionData->sum('total_collected'), 2) }}</strong></td>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    @else
                                        <div class="alert alert-info text-center">
                                            <i class="fas fa-info-circle me-2"></i>
                                            No collection data found for the selected criteria.
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-submit form when filters change
    const filterSelects = document.querySelectorAll('#branch_id, #cbo_id, #start_date, #end_date');
    filterSelects.forEach(element => {
        element.addEventListener('change', function() {
            this.closest('form').submit();
        });
    });
});

// Print functionality
function printReport() {
    window.print();
}

// Add keyboard shortcut for printing (Ctrl+P)
document.addEventListener('keydown', function(e) {
    if (e.ctrlKey && e.key === 'p') {
        e.preventDefault();
        printReport();
    }
});
</script>
@endsection