@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">
        Daily Repayments 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.daily-repayments.filter') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <!-- Date Selection -->
            <div class="mb-6">
                <h5 class="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">
                    Select Report Date
                </h5>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <x-form.input name="date" type="date" label="Report Date *" value="{{ old('date', date('Y-m-d')) }}"
                        required />
                    <div class="flex items-center">
                        <div class="text-sm text-gray-500 bg-blue-50 dark:bg-blue-900 p-3 rounded-lg">
                            <p class="font-medium text-blue-800 dark:text-blue-200">Quick Select:</p>
                            <button type="button"
                                onclick="document.querySelector('input[name=date]').value = '{{ date('Y-m-d') }}'"
                                class="text-blue-600 hover:text-blue-800 text-xs">Today</button> |
                            <button type="button"
                                onclick="document.querySelector('input[name=date]').value = '{{ date('Y-m-d', strtotime('-1 day')) }}'"
                                class="text-blue-600 hover:text-blue-800 text-xs">Yesterday</button> |
                            <button type="button"
                                onclick="document.querySelector('input[name=date]').value = '{{ date('Y-m-d', strtotime('-7 days')) }}'"
                                class="text-blue-600 hover:text-blue-800 text-xs">Last Week</button>
                        </div>
                    </div>
                </div>
            </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 Daily Report" type="submit" />
            </div>
        </form>
    </div>

    <!-- Information Section -->
    <div class="px-4 py-3 mb-4 bg-green-50 rounded-lg border border-green-200 dark:bg-green-900 dark:border-green-700">
        <h5 class="mb-2 text-sm font-semibold text-green-800 dark:text-green-200">
            Daily Repayments Report Features
        </h5>
        <div class="text-xs text-green-700 dark:text-green-300 space-y-1">
            <p><strong>📅 Daily Focus:</strong> Shows all loan payments made on a specific date</p>
            <p><strong>💰 Payment Tracking:</strong> Displays payment amounts, remaining balances, and loan progress</p>
            <p><strong>👥 Client Details:</strong> Includes client names, contact information, and loan officers</p>
            <p><strong>📊 Performance Metrics:</strong> Officer performance and time-based payment analysis</p>
            <p><strong>📤 Excel Export:</strong> Professional export with payment summaries and analytics</p>
            <p><strong>⏰ Real-Time Data:</strong> Shows payments as soon as they are recorded in the system</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-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">
                    Payment Tracking
                </p>
                <p class="text-xs text-gray-500">
                    Real-time payment 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-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 fill-rule="evenodd"
                        d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                        clip-rule="evenodd"></path>
                </svg>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                    Daily Analysis
                </p>
                <p class="text-xs text-gray-500">
                    Date-specific reporting
                </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="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">
                    Officer Performance
                </p>
                <p class="text-xs text-gray-500">
                    Collection efficiency metrics
                </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">
                    Detailed analytics export
                </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 date to today
                    const dateInput = document.querySelector('input[name="date"]');
                    if (dateInput) {
                        dateInput.value = '{{ date('Y-m-d') }}';
                    }

                    // 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('Daily Repayments form reset completed');
                });
            }

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