@extends('layouts.main-app')
@section('title', 'Homepage')

@section('content')

@include('layouts.navbar', [
    'headerTitle' => 'Doctors and Specialists',
    'headerDescription' => ''
])


<div class="w-full  relative h-full mb-24">
        <img src="{{asset('assets/about/aboutbanner.png')}}" alt="Healthcare" class="w-full h-full object-cover absolute top-0 left-0 z-0">
        
            <div class="flex flex-col md:flex-row gap-2 justify-center items-center relative py-32"
            data-aos='fade-up'
            data-aos-duration='1100'
            >
                <span class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white inter-font"
                
                >Home > </span>
                <span class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white inter-font">Doctors and Specialists</span>
                
            </div>
    </div>


<section class="px-2 mt-20 sofia-font">
    <div class="space-y-10">
        <div class="mb-12 w-full flex flex-col justify-center items-center max-w-screen-lg mx-auto px-2 container">
            <div class="flex flex-col justify-start items-start w-full"
              data-aos='fade-up'
            data-aos-duration='1100'
            data-aos-delay='150'
            >
                <h3 class="text-blue-600 text-sm font-medium"
              
                >Doctors</h3>
                <h1 class="text-3xl font-normal text-gray-800 mb-8 text-left">Meet Our Specialists</h1>
            </div>

            <div class="w-full flex justify-center px-4 md:px-0"
              data-aos='fade-up'
            data-aos-duration='1100'
                        data-aos-delay='250'

            >
                <div class="bg-white rounded-xl p-8 w-full shadow-inner drop-shadow-xl">
                    <div class="text-center mb-6">
                        <h4 class="text-blue-600 text-sm font-semibold"
                         data-aos='fade-up'
            data-aos-duration='1100'
            data-aos-delay='200'
                        >Find A Doctor</h4>
                        <h1 class="mb-4 text-lg sm:text-xl md:text-2xl lg:text-3xl font-normal text-gray-800"
                         data-aos='fade-up'
            data-aos-duration='1100'
            data-aos-delay='300'
                        >
                            Easily Find the Right Doctor for Your Needs
                          </h1>                    
                           <div class="w-16 h-1 bg-blue-600 mx-auto mt-3 "
                           data-aos='fade-up'
            data-aos-duration='1100'
            data-aos-delay='350'
                           ></div>
                        </div>

                    <form method="GET" action="{{ route('doctors.search') }}" class="w-full space-y-6"
                      data-aos='fade-up'
            data-aos-duration='1100'
            data-aos-delay='450'
                    >
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="flex flex-col md:col-span-2 relative">
                                <label class="text-gray-700 font-medium">Doctor's Name</label>
                                <div class="relative">
                                    <span class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-500 pointer-events-none">
                                        Dr.
                                    </span>
                                    <input type="text" id="doctor-input" name="name" 
                                        class="border rounded-lg pl-12 pr-4 py-2 px-2 focus:ring-2 focus:ring-blue-400 focus:outline-none w-full"
                                        placeholder="Search doctor's name" autocomplete="off">

                                    <!-- Dropdown positioned under input -->
                                    <div id="doctor-dropdown"
                                        class="absolute w-full bg-white border border-gray-300 rounded-lg shadow-lg mt-2 hidden max-h-60 overflow-y-auto z-50">
                                        @foreach($doctors_name as $doctor)
                                            <div class="px-4 py-2 cursor-pointer hover:bg-blue-100 text-gray-700 doctor-option"
                                                data-value="{{ $doctor }}">
                                                Dr. {{ $doctor }}
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <div class="flex flex-col">
                                <label class="text-gray-700 font-medium">Gender</label>
                                <select name="gender" class="border rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none">
                                    <option value="" selected>---</option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                </select>
                            </div>

                            <div class="flex flex-col">
                                <label class="text-gray-700 font-medium">Language</label>
                                <select name="language" class="border rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none">
                                    <option value="">---</option>
                                    <option value="English" {{ request('language') == 'English' ? 'selected' : '' }}>English</option>
                                    <option value="Tagalog" {{ request('language') == 'Tagalog' ? 'selected' : '' }}>Tagalog</option>
                                    <option value="Filipino" {{ request('language') == 'Filipino' ? 'selected' : '' }}>Filipino</option>
                                </select>
                            </div>

                            <div class="flex flex-col md:col-span-2">
                                <label class="text-gray-700 font-medium">Specialization</label>
                                <select name="specialization" class="border rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none">
                                    <option value="" selected>---</option>
                                    @foreach($specializations as $specialization)
                                        <option value="{{ $specialization }}">{{ $specialization }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="flex flex-col md:col-span-2">
                                <label class="text-gray-700 font-medium">Sub-Specialization</label>
                                <select name="sub_specialization" class="border rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none">
                                    <option value="" selected>---</option>
                                    @foreach($sub_specializations as $sub_specialization)
                                        <option value="{{ $sub_specialization }}">{{ $sub_specialization }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="flex justify-center">
                            <button type="submit" class="bg-blue-700 text-white font-semibold px-6 py-3 rounded-full hover:bg-blue-800 transition-all duration-300 shadow-md">
                                Search Doctor →
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
       document.addEventListener("DOMContentLoaded", function () {
            const input = document.getElementById("doctor-input");
            const dropdown = document.getElementById("doctor-dropdown");
            const options = document.querySelectorAll(".doctor-option");

            // Show dropdown when input is focused
            input.addEventListener("focus", () => {
                dropdown.classList.remove("hidden");
                adjustDropdownPosition();
            });

            // Hide dropdown when clicking outside
            document.addEventListener("click", (e) => {
                if (!input.contains(e.target) && !dropdown.contains(e.target)) {
                    dropdown.classList.add("hidden");
                }
            });

            // Fill input when selecting an option
            options.forEach(option => {
                option.addEventListener("click", () => {
                    input.value = option.dataset.value;
                    dropdown.classList.add("hidden");
                });
            });

            // Filter results dynamically as user types
            input.addEventListener("input", function () {
                const search = input.value.toLowerCase();
                let hasResults = false;

                options.forEach(option => {
                    if (option.innerText.toLowerCase().includes(search)) {
                        option.classList.remove("hidden");
                        hasResults = true;
                    } else {
                        option.classList.add("hidden");
                    }
                });

                if (search.trim() === '' || !hasResults) {
                    dropdown.classList.add("hidden");
                } else {
                    dropdown.classList.remove("hidden");
                    adjustDropdownPosition();
                }
            });

            // Adjust the dropdown position dynamically
            function adjustDropdownPosition() {
                dropdown.style.top = input.offsetHeight + "px";
            }

            window.addEventListener("resize", adjustDropdownPosition);
       });
    </script>
</section>

@endsection