@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">
            Enhanced Arrears Collections 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.arrears.filter') }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <!-- Date Range -->
                <div class="mb-6">
                    <h5 class="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">
                        Loan Disbursement Date Range (Optional)
                    </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">Leave empty to include all loans regardless of disbursement date</p>
                </div>

                <!-- Branch and Officer Selection -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
                    <label class="block 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 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">*Select Officer</span>
                        <select name="officer" id="officers"
                            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>

                <div class="flex justify-end mt-6 gap-4">
                    <button type="reset" id="reset-form-btn" 
                            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 Arrears Report" type="submit" />
                </div>
            </form>
        </div>

        <!-- Enhanced 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">
                Enhanced Arrears Report Features
            </h5>
            <div class="text-xs text-blue-700 dark:text-blue-300 space-y-1">
                <p><strong>📋 Comprehensive Tracking:</strong> Shows all missed and partial payments with detailed client information</p>
                <p><strong>💰 Payment Details:</strong> Displays installment dates, scheduled payments, amounts paid, and overdue amounts</p>
                <p><strong>📊 Cumulative Analysis:</strong> Tracks running total of arrears across all payment schedules</p>
                <p><strong>🔄 Auto-Update:</strong> Report automatically reflects incoming payments in real-time</p>
                <p><strong>📱 Action Buttons:</strong> Quick access to loan details, payment recording, and schedule viewing</p>
                <p><strong>📤 Excel Export:</strong> Professional export with conditional formatting and summary statistics</p>
            </div>
        </div>

        <!-- Feature Highlights -->
        <div class="grid gap-6 mb-6 md:grid-cols-2 xl:grid-cols-4">
            <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <div>
                    <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                        Schedule-Level Tracking
                    </p>
                    <p class="text-xs text-gray-500">
                        Individual installment monitoring
                    </p>
                </div>
            </div>

            <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                    </svg>
                </div>
                <div>
                    <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                        Real-Time Updates
                    </p>
                    <p class="text-xs text-gray-500">
                        Auto-reflects payments
                    </p>
                </div>
            </div>

            <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"></path>
                    </svg>
                </div>
                <div>
                    <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                        Cumulative Tracking
                    </p>
                    <p class="text-xs text-gray-500">
                        Running arrears totals
                    </p>
                </div>
            </div>

            <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                    </svg>
                </div>
                <div>
                    <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                        Excel Export
                    </p>
                    <p class="text-xs text-gray-500">
                        Professional formatting
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const branchSelect = document.getElementById('branch');
        const officerSelect = document.getElementById('officers');
        const resetBtn = document.getElementById('reset-form-btn');
        const form = document.querySelector('form');

        // Dynamic officer loading based on branch selection
        if (branchSelect) {
            branchSelect.addEventListener('change', function() {
                const branchId = this.value;
                
                if (branchId && branchId !== 'all' && officerSelect) {
                    // Show loading state
                    officerSelect.innerHTML = '<option value="">Loading officers...</option>';
                    officerSelect.disabled = true;
                    
                    // Make AJAX call to get officers for selected branch
                    fetch(`/api/branch/${branchId}/officers`, {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(officers => {
                        officerSelect.innerHTML = '<option value="All">All Officers</option>';
                        
                        // Convert officers object to array if needed
                        const officersArray = Array.isArray(officers) ? officers : Object.values(officers);
                        
                        officersArray.forEach(officer => {
                            officerSelect.innerHTML += `<option value="${officer.id}">${officer.fullname}</option>`;
                        });
                        
                        officerSelect.disabled = false;
                    })
                    .catch(error => {
                        console.error('Error loading officers:', error);
                        officerSelect.innerHTML = '<option value="All">All Officers</option>';
                        officerSelect.disabled = false;
                        
                        // Fallback: Reset to show all officers
                        @foreach ($officers as $officer)
                            officerSelect.innerHTML += '<option value="{{ $officer->id }}">{{ $officer->fullname }}</option>';
                        @endforeach
                    });
                } else if (officerSelect) {
                    // 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
                    officerSelect.disabled = false;
                }
            });
        }

        // Reset form functionality
        if (resetBtn) {
            resetBtn.addEventListener('click', function(e) {
                e.preventDefault();
                
                // Reset form
                if (form) {
                    form.reset();
                }
                
                // Reset select2 if you're using it
                if (typeof $ !== 'undefined' && typeof $('.select2').val === 'function') {
                    $('.select2').val(null).trigger('change');
                }
                
                // Reset branch and officer selects manually
                if (branchSelect) branchSelect.selectedIndex = 0;
                if (officerSelect) {
                    officerSelect.innerHTML = '<option value="All">All Officers</option>';
                    @foreach ($officers as $officer)
                        officerSelect.innerHTML += '<option value="{{ $officer->id }}">{{ $officer->fullname }}</option>';
                    @endforeach
                    officerSelect.selectedIndex = 0;
                }
                
                console.log('Arrears form reset completed');
            });
        }

        console.log('Enhanced Arrears Report form initialized successfully');
    });
</script>
@endpush