@extends('frontend.layouts.app')
@section('title', __('find-agent.title'))
@section('meta', __('find-agent.meta_title'))

@push('styles')
    <style>
        .dataTables_wrapper {
            overflow: auto;
        }

        table.dataTable {
            width: 100% !important;
        }
    </style>
@endpush

@php
    use App\Enum\HeadingTypeEnum;
@endphp

@section('content')
    <div class="min-h-screen">
        <!-- banner-section -->
        <section class="relative">
            <div class="mb-10">
                <img src="{{ asset('assets/images/become-an-agent/breadcrumb-serv.jpg') }}" alt="{{ __('find-agent.title') }}"
                    class="h-60 w-full object-cover" />
            </div>
            <div class="absolute w-full top-20">
                <div class="flex flex-col space-y-8 ml-10">
                    <h3 class="text-2xl md:text-4xl font-extrabold text-white">{{ __('find-agent.intro.title') }}</h3>
                    <div class="flex space-x-5 items-center">
                        <a href="{{ route('homepage') }}"
                            class="text-white font-bold">{{ __('find-agent.breadcrumb.home') }}</a>
                        <p class="text-white text-base fony-bold hover:cursor-pointer">></p>
                        <a href="{{ route('findAnAgent') }}"
                            class="text-accent font-bold">{{ __('find-agent.breadcrumb.find_agent') }}</a>
                    </div>
                </div>
        </section>

        <!-- banner-section -->
        <div class="mx-6 md:mx-10 lg:mx-20 xl:mx-40">
            @php
                $findAgentHeading = $headings->where('type', HeadingTypeEnum::FINDAGENT->value)->first();
            @endphp

            <section class="overflow-x-hidden">
                <div class="p-4 md:ml-8 lg:my-4 lg:mx-20 lg:mb-2">
                    <div class="flex flex-col items-center space-y-6">
                        <h1 class="font-bold text-accent uppercase text-lg tracking-wider"
                            style="
                                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.01);
                                -webkit-text-stroke: 1px rgba(19, 18, 18, 0.096);
                                ">
                            {{ __('find-agent.intro.title') }}
                        </h1>

                        <p class="text-2xl text-black font-bold md:text-4xl text-center">
                            {{ app()->getLocale() == 'en' ? $findAgentHeading->main_heading_en : $findAgentHeading->main_heading_np }}
                        </p>

                        <p class="p-2 text-lg text-[#737879] text-center max-w-4xl">
                            {{ app()->getLocale() == 'en' ? $findAgentHeading->sub_heading_en : $findAgentHeading->sub_heading_np }}
                        </p>
                    </div>
                </div>
            </section>

            <section>
                <div class="p-4 md:ml-8 lg:my-4 lg:mx-20 lg:mb-2">
                    <div class="flex flex-col md:flex-row gap-4">
                        <!-- State -->
                        <div class="w-full md:flex-1">
                            <label for="state" class="block text-sm font-bold text-gray-700">State</label>
                            <select name="state" id="state"
                                class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm bg-white focus:ring-blue-500 focus:border-blue-500 @error('state') border-red-500 @enderror">
                                <option value="">Select State</option>
                                @foreach ($states as $state)
                                    <option value="{{ $state->id }}">
                                        @isset($state->name_en)
                                            {{ $state->name_en . (isset($state->name_np) ? ' | ' . $state->name_np : '') }}
                                        @else
                                            {{ $state->name }}
                                        @endisset
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- District -->
                        <div class="w-full md:flex-1">
                            <label for="district" class="block text-sm font-bold text-gray-700">District</label>
                            <select name="district" id="district"
                                class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm bg-white focus:ring-blue-500 focus:border-blue-500 @error('district') border-red-500 @enderror">
                                <option value="">Select State First</option>
                            </select>
                        </div>

                        <!-- Button -->
                        <div class="w-full md:w-auto flex items-end hidden" id="filterBtnDiv">
                            <button
                                class="w-full md:w-auto px-6 py-2 rounded-lg shadow-sm font-semibold text-green-700 border border-green-700 focus:outline-none focus:ring-2 focus:ring-green-400"
                                id="agentFilterBtn">
                                Search
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            <section id="agentDetailList"></section>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@9.0.3"></script>

    <!-- Script to initialize DataTable with working column search -->
    <script>
        $('#agentFilterBtn').click(function(e) {
            e.preventDefault();

            filterAgentDetails();
        });

        $('#state, #district').change(function(e) {
            e.preventDefault();

            state = $('#state').val();
            district = $('#district').val();

            if (!state || !district) {
                $('#filterBtnDiv').addClass('hidden');
            } else {
                $('#filterBtnDiv').removeClass('hidden');
            }
        });

        districts = @json($districts);
        $('#state').change(function(e) {
            e.preventDefault();

            loadDistricts();
        });

        function filterAgentDetails() {
            state = $('#state').val();
            district = $('#district').val();

            $.ajax({
                type: "GET",
                url: "{{ route('filterAgent') }}",
                data: {
                    state: state,
                    district: district,
                },
                success: function(response) {
                    $('#agentDetailList').empty();
                    $('#agentDetailList').html(response.view);
                }
            });
        }

        function loadDistricts() {
            value = $('#state').val();
            $('#district').empty();

            filteredDistricts = districts.filter(item => item.state_id == value);

            $('#district').append($('<option>', {
                value: '',
                text: 'Select District'
            }));

            $.each(filteredDistricts, function(index, item) {
                $('#district').append($('<option>', {
                    value: item.id,
                    text: item.name_en,
                }));
            });
        }
    </script>
@endsection