@extends('layouts.admin')

@section('content')
    <div class="card">
        <div class="card-header">
            <h3>IDP Reports</h3>
            <form id="searchForm" class="form-inline mb-3">
                <div class="form-group mx-sm-3 mb-2">
                    <label for="from_date" class="sr-only">From Date</label>
                    <input type="date" class="form-control" id="from_date" name="from_date">
                </div>
                <div class="form-group mx-sm-3 mb-2">
                    <label for="to_date" class="sr-only">To Date</label>
                    <input type="date" class="form-control" id="to_date" name="to_date">
                </div>
                <div class="form-group mx-sm-3 mb-2">
                    <label for="return_state" class="sr-only">Return State</label>
                    <select class="form-control select2" id="return_state" name="return_state">
                        <option value="">Select State</option>
                        @foreach (getRegionData() as $region)
                            <option value="{{ $region['name'] }}">{{ $region['name'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group mx-sm-3 mb-2">
                    <label for="return_country" class="sr-only">Return Country</label>
                    <select class="form-control select2" id="return_country" name="return_country">
                        <option value="">Select Country</option>
                    </select>
                </div>
                <div class="form-group mx-sm-3 mb-2">
                    <label for="return_payam" class="sr-only">Return Payam</label>
                    <select class="form-control select2" id="return_payam" name="return_payam">
                        <option value="">Select Payam</option>
                    </select>
                </div>
                <div class="form-group mx-sm-3 mb-2">
                    <label for="bordering_country" class="sr-only">Bordering Country</label>
                    <select class="form-control" id="bordering_country" name="bordering_country">
                        <option value="">Select Bordering Country</option>
                        @foreach (App\Models\Idp::BORDERING_COUNTRY_RADIO as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                {{-- <button type="submit" class="btn btn-primary mb-2">Search</button> --}}
                <button id="downloadExcel" class="btn btn-success mb-2 ml-2">Download Excel</button>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2();

            function fetchDropdownData(selectedValue, selectedDropdown, url) {
                if (selectedValue !== '') {
                    $.ajax({
                        url: url + selectedValue,
                        type: 'GET',
                        success: function(data) {
                            const dropdown = $(selectedDropdown);
                            dropdown.empty().append($('<option value="">Select</option>'));
                            $.each(data, function(index, item) {
                                dropdown.append($('<option>', {
                                    value: item.name,
                                    text: item.name
                                }));
                            });
                        }
                    });
                } else {
                    $(selectedDropdown).empty().append($('<option value="">Select</option>'));
                }
            }

            $('#return_state').on('change', function() {
                fetchDropdownData(
                    $(this).val(),
                    '#return_country',
                    '/get-counties/'
                );
            });

            $('#return_country').on('change', function() {
                fetchDropdownData(
                    $(this).val(),
                    '#return_payam',
                    '/get-payams-by-county/'
                );
            });

            $('#downloadExcel').on('click', function(e) {
                e.preventDefault();
                var params = $('#searchForm').serialize();
                var url = '{{ route('admin.data.report') }}' + '?' + params;
                window.location.href = url;
            });
        });
    </script>
@endsection