@extends('layoutsfrontend.master')
@section('content')
@php
$imagePath=getbannerimage();
@endphp
    <!-- Page Header Start -->
    <div class="page-header bg-section parallaxie" style="background-image: url({{$imagePath}});" >
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <!-- Page Header Box Start -->
                    <div class="page-header-box">
                        <h1 class="text-anime-style-3" data-cursor="-opaque">Find a Doctor</h1>
                        <nav class="wow fadeInUp">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                                <li class="breadcrumb-item">Find a Doctor</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Page Header Box End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->

 
    <div class="finddoctor_search">
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-6">
                    <input type="search" class="search_input_find_doctor" id="doctor_name" value="" name="s" placeholder="Search by name......">
                </div>
                <div class="col-lg-6">
                    <div class="select">
                          <select name="department" id="department">
                    <option value="" >Choose Department</option>
                    @foreach($department as $resdepartment)                                                   
                    <option value="{{ $resdepartment->id }}">{{ $resdepartment->name }}</option>
                    @endforeach   
                          </select>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="select">
                        <select id="specialty" name="specialty">
                            <option value="">Choose Specialty</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-2">
                        <button type="button" class="doctor_search_submit" id="btn_find_doctor" name="submit"><img src="{{ asset('images/search.png') }}"> Find</button>
                </div>
            </div>
        </div>
    </div>

    <div class="finddoctor_result">
        <div class="container" id="doctor_list_container">
             @include('frontend.partials.doctor_list', ['doctors' => $doctors, 'categoryId' => $categoryId])
        </div>
    </div>  
    <!-- Page Team Single End -->
@endsection
@section('script')
 <script>
    // Remove error on select
$('#department').change(function() {
    let departmentId = $(this).val();  
    $('#specialty').html('<option value="">Loading...</option>');
    if (departmentId) {
        $.ajax({
            url: "{{ route('frontend.getSpecialties') }}",
            type: "GET",
            data: {
                department_id: departmentId
            },
            success: function (response) {
                $('#specialty')
                    .empty()
                    .append('<option value="">Choose Specialty</option>');
                $.each(response, function (key, value) {
                    $('#specialty').append(
                        `<option value="${value.id}">${value.name}</option>`
                    );
                });
                $('#specialty').trigger('change');
            }
        });
    } else {
        $('#specialty').html('<option value="">Choose Specialty</option>');
    }
});

$('#btn_find_doctor').click(function() {
    let name = $('#doctor_name').val();
    let department = $('#department').val();
    let specialty = $('#specialty').val();

    $('#doctor_list_container').html('<div class="text-center"><h4>Searching...</h4></div>');

    $.ajax({
        url: "{{ route('frontend.searchdoctor') }}",
        type: "GET",
        data: {
            search: name,
            department: department,
            specialty: specialty
        },
        success: function(response) {
            $('#doctor_list_container').html(response.html);
        },
        error: function() {
            $('#doctor_list_container').html('<div class="alert alert-danger">Error fetching results.</div>');
        }
    });
});
</script>
@endsection