@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">
            Outstanding Loans 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.outstanding.filter') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <x-form.input name="start_date" type="date" label="Start Date (Optional)"
                        value="{{ old('start_date') }}" />
                    <x-form.input name="end_date" type="date" label="End Date (Optional)"
                        value="{{ old('end_date') }}" />
                </div>

                <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> 

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    @if ($groups->count() > 0)
                        <label class="block mb-4 text-sm">
                            <span class="text-gray-700 dark:text-gray-400">Select Group</span>
                            <select name="group" id="group"
                                class="select2 block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select @error('group') 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="all" @selected(old('group') == 'all')>All Groups</option>
                                @foreach ($groups as $group)
                                    <option value="{{ $group->id }}" @selected($group->id == old('group'))>
                                        {{ $group->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('group')
                                <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </label>
                    @endif

                    <label class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">*Select Loan Status</span>
                        <select name="loan_status" id="loan_status"
                            class="select2 block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select @error('loan_status') 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 loan status</option>
                            <option value="all" @selected(old('loan_status') == 'all')>All Outstanding</option>
                            <option value="unpaid" @selected(old('loan_status') == 'unpaid')>Unpaid</option>
                            <option value="partial" @selected(old('loan_status') == 'partial')>Partially Paid</option>
                            <option value="overdue" @selected(old('loan_status') == 'overdue')>Overdue</option>
                            <option value="bad" @selected(old('loan_status') == 'bad')>Bad Loans</option>
                        </select>
                        @error('loan_status')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>
                </div>

                <div class="flex justify-end mt-6 gap-4">
                    <x-button label="Generate Report" type="submit" />
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // 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
            }
        });
    </script>
@endpush