@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">
            Officer 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">
                Select Data Range
            </h4>
            <form action="{{ route('reports.officers.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" required
                        value="{{ old('start_date') }}" />
                    <x-form.input name="end_date" type="date" label="End Date" required 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('gender') 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 selected>Select branch</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="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('gender') 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 selected>Select officer</option>

                        </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">
                    <x-button label="Filter" type="submit" />
                </div>
            </form>
        </div>
    </div>

    @push('scripts')
        <script>
            $(document).ready(function() {
                $('#branch').change(function() {
                    $("#officers").empty();
                    const branch = $(this).val()
                    const url = `/api/branch/${branch}/officers`;
                    fetch(url, {
                            method: 'GET',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector(
                                        'meta[name="csrf-token"]')
                                    .getAttribute('content')
                            }
                        })
                        .then(response => {
                            if (!response.ok) {
                                $("#officers").append(
                                    new Option("No records found", "", true,
                                        true)
                                ).trigger('change');
                            }
                            response.json().then(officers => {
                                // Convert officers object to an array using Object.values()
                                const officersArray = Object.values(officers);

                                //Add the all option
                                $("#officers").append(
                                    new Option("All Officers", "All", false,
                                        false)
                                ).trigger('change');

                                // Iterate over the array of officers
                                officersArray.forEach(officer => {
                                    // Append officer full name and id to the select element with id "officers"
                                    $("#officers").append(
                                        new Option(officer.fullname, officer.id, false,
                                            false)
                                    ).trigger('change');
                                });


                            })
                        })
                        .catch(error => {
                            $("#officers").append(
                                new Option("Could not fetch records", "", true,
                                    true)
                            ).trigger('change');

                        });

                })
            })
        </script>
    @endpush
@endsection