@extends('layout.main')

@section('content')
    <div class="container grid px-6 mx-auto">
        <h4 class="mb-4 mt-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
            Loan Aging Report
        </h4>
        <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <h4 class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
                Filter Options
            </h4>
            <form action="{{ route('reports.loan-aging.filter') }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <!-- Basic Filters -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <label class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">*Select Branch</span>
                        <select name="branch" id="branch"
                            class="select2 block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select @error('branch') border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray">
                            <option value="">Select branch</option>
                            <option value="all" @selected(old('branch')=='all')>All Branches</option>
                            @foreach ($branches as $branch)
                                <option value="{{ $branch->id }}" @selected($branch->id == old('branch'))>
                                    {{ $branch->town }} {{ $branch->address }}
                                </option>
                            @endforeach
                        </select>
                        @error('branch')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>

                    <label class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">*Select Officer</span>
                        <select name="officer" id="officer"
                            class="select2 block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select @error('officer') border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray">
                            <option value="">Select officer</option>
                            <option value="All" @selected(old('officer')=='All')>All Officers</option>
                            @foreach ($officers as $officer)
                                <option value="{{ $officer->id }}" @selected($officer->id == old('officer'))>
                                    {{ $officer->fullname }}
                                </option>
                            @endforeach
                        </select>
                        @error('officer')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>
                </div>

                <!-- Aging Period (Custom Range) -->
                <div class="mb-6">
                    <h5 class="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">
                        Aging Period (Days Overdue)
                    </h5>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <x-form.input 
                            name="aging_from" 
                            type="number" 
                            label="From (days)" 
                            value="{{ old('aging_from') }}"
                            placeholder="e.g., 30"
                            min="0" />
                        
                        <x-form.input 
                            name="aging_to" 
                            type="number" 
                            label="To (days)" 
                            value="{{ old('aging_to') }}"
                            placeholder="e.g., 90"
                            min="0" />
                    </div>
                    <p class="text-xs text-gray-500 mt-1">Leave empty to show all overdue loans</p>
                </div>

                <!-- Quick Aging Presets -->
                <div class="mb-6">
                    <h5 class="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">
                        Quick Presets
                    </h5>
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
                        <button type="button" onclick="setAgingRange(1, 30)" 
                                class="px-3 py-2 text-xs font-medium text-gray-600 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300">
                            1-30 days
                        </button>
                        <button type="button" onclick="setAgingRange(31, 60)" 
                                class="px-3 py-2 text-xs font-medium text-gray-600 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300">
                            31-60 days
                        </button>
                        <button type="button" onclick="setAgingRange(61, 90)" 
                                class="px-3 py-2 text-xs font-medium text-gray-600 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300">
                            61-90 days
                        </button>
                        <button type="button" onclick="setAgingRange(91, 180)" 
                                class="px-3 py-2 text-xs font-medium text-gray-600 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300">
                            91-180 days
                        </button>
                        <button type="button" onclick="setAgingRange(181, 365)" 
                                class="px-3 py-2 text-xs font-medium text-gray-600 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300">
                            181-365 days
                        </button>
                        <button type="button" onclick="setAgingRange(365, null)" 
                                class="px-3 py-2 text-xs font-medium text-gray-600 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300">
                            365+ days
                        </button>
                        <button type="button" onclick="clearAgingRange()" 
                                class="px-3 py-2 text-xs font-medium text-red-600 bg-red-100 rounded hover:bg-red-200 dark:bg-red-700 dark:text-red-300">
                            Clear
                        </button>
                    </div>
                </div>

                <!-- Optional Date Range Filter -->
                <div class="mb-6">
                    <h5 class="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">
                        Optional: Filter by Loan Disbursement Date
                    </h5>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <x-form.input name="start_date" type="date" label="Start Date" 
                            value="{{ old('start_date') }}" />
                        <x-form.input name="end_date" type="date" label="End Date" 
                            value="{{ old('end_date') }}" />
                    </div>
                    <p class="text-xs text-gray-500 mt-1">Optional: Only include loans disbursed within this date range</p>
                </div>

                <div class="flex justify-end mt-6 gap-4">
                    <button type="reset" onclick="resetForm()" 
                            class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 hover:border-gray-500 focus:outline-none focus:shadow-outline-gray">
                        Reset
                    </button>
                    <x-button label="Generate Aging Report" type="submit" />
                </div>
            </form>
        </div>

        <!-- Information Section -->
        <div class="px-4 py-3 mb-4 bg-blue-50 rounded-lg border border-blue-200 dark:bg-blue-900 dark:border-blue-700">
            <h5 class="mb-2 text-sm font-semibold text-blue-800 dark:text-blue-200">
                About Loan Aging Report
            </h5>
            <div class="text-xs text-blue-700 dark:text-blue-300 space-y-1">
                <p>• This report shows loans with overdue payments and how long they've been overdue</p>
                <p>• Use custom aging ranges to focus on specific overdue periods</p>
                <p>• Shows detailed client information, overdue amounts, and loan balances</p>
                <p>• Results can be exported to Excel for further analysis</p>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    // Set aging range from preset buttons
    function setAgingRange(from, to) {
        document.getElementById('aging_from').value = from;
        document.getElementById('aging_to').value = to || '';
    }

    // Clear aging range
    function clearAgingRange() {
        document.getElementById('aging_from').value = '';
        document.getElementById('aging_to').value = '';
    }

    // Reset entire form
    function resetForm() {
        document.querySelector('form').reset();
        // Reset select2 if you're using it
        if (typeof $('.select2') !== 'undefined') {
            $('.select2').val(null).trigger('change');
        }
    }

    // Dynamic officer loading based on branch selection
    document.getElementById('branch').addEventListener('change', function() {
        const branchId = this.value;
        const officerSelect = document.getElementById('officer');
        
        if (branchId && branchId !== 'all') {
            // Make AJAX call to get officers for selected branch
            fetch(`/api/branch/${branchId}/officers`)
                .then(response => response.json())
                .then(data => {
                    officerSelect.innerHTML = '<option value="All">All Officers</option>';
                    data.forEach(officer => {
                        officerSelect.innerHTML += `<option value="${officer.id}">${officer.fullname}</option>`;
                    });
                })
                .catch(error => console.error('Error:', error));
        } else {
            // Reset to show all officers
            officerSelect.innerHTML = '<option value="All">All Officers</option>';
            @foreach ($officers as $officer)
                officerSelect.innerHTML += '<option value="{{ $officer->id }}">{{ $officer->fullname }}</option>';
            @endforeach
        }
    });

    // Validate aging range
    document.getElementById('aging_to').addEventListener('change', function() {
        const from = parseInt(document.getElementById('aging_from').value);
        const to = parseInt(this.value);
        
        if (from && to && to < from) {
            alert('Aging "to" value must be greater than or equal to "from" value');
            this.value = '';
        }
    });
</script>
@endpush