@extends('frontend_eng.layouts.app')
@section('title', 'Doctors')
@section('meta', 'Welcome to Om Hospital and Research Center PVt. Ltd.')
@section('content')
    <!-- BREADCRUMB
                   ============================================= -->
    <div id="breadcrumb" class="division">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class=" breadcrumb-holder">
                        <h4 class="h4-sm text-white">Our Doctors</h4>
                        <!-- Breadcrumb Nav -->
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('homepage') }}" class="text-white">Home</a>
                                </li>
                                <li class="breadcrumb-item active text-white" aria-current="page">Doctor</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Title -->
                </div>
            </div>
        </div> <!-- End row -->
    </div> <!-- End container -->
    <div class="slider-overlay"></div>

    <!-- START SECTION BLOG -->
    <section class="bg_gray">
        <div class="container">
            @if ($services->isNotEmpty())
                <div class="row p-5">
                    <div class="col-lg-4 offset-lg-4 col-md-12 col-12">
                        <form action="#">
                            <select name="dept_id" id="service_id_dropdown" class="form-control service_id_dropdown">
                                <option>Select a Service</option>
                                @foreach ($services as $service)
                                    <option value="{{ $service->id }}">{{ $service->name }}</option>
                                @endforeach
                            </select>
                        </form>
                    </div>
                </div>
            @endif

            @if ($doctors->isNotEmpty())
                <div class="row justify-content-center" id="doctorList">
                    <!-- DOCTOR #1 -->
                    @foreach ($doctors as $doctor)
                        <div class="col-md-6 col-lg-4 col-12">
                            <div class="doctor-2">

                                <!-- Doctor Photo -->
                                <div class="hover-overlay">
                                    <img class="img"
                                        src="{{ $doctor->image ? asset($doctor->image_path) : asset('assets/images/omhospital/favicon.png') }}"
                                        alt="doctor-foto" loading="lazy">
                                </div>

                                <!-- Doctor Meta -->
                                <div class="doctor-meta">

                                    <h4 class="h5-xs">{{ $doctor->name }}</h4>
                                    <span>{{ $doctor->designation }}</span>

                                    <!-- Button -->
                                    <div class="doctorBtn">
                                        <a class="btn btn-blue blue-hover"
                                            href="{{ route('doctor.profile', $doctor->slug) }}" title="">View
                                            Profile</a>
                                        <a class="btn btn-danger blue-hover text-white doctorAppointmentBtn"
                                            id="doctorAppointmentBtn" data-toggle="modal" data-target="#appointmentModal"
                                            title="{{ $doctor->name }}" data-id="{{ $doctor->id }}">Book Appointment</a>
                                    </div>

                                </div>

                            </div>
                        </div> <!-- END DOCTOR #1 -->
                    @endforeach

                </div>
            @endif
            <div class="row justify-content-center" id="doctorListFromFilter"></div>
        </div>
        <!-- MODAL START -->
        <div class="modal fade" id="appointmentModal" tabindex="-1" aria-labelledby="appointmentModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="appointmentModalLabel">Book your appointment</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <form action="" id="appointmentForm">
                            <div class="row">
                                <div class="form-group col-lg-12 col-md-12 col-12 p-2">
                                    <label for="fullname" class="form-label p-0">Full Name <span
                                            class="text text-danger">*</span></label>
                                    <input type="text" class="form-control" id="fullname" name="full_name"
                                        value="">
                                    <span class="text text-danger" id="fullname_error"></span>

                                </div>
                                <div class="form-group col-lg-12 col-md-12 col-12 p-2">
                                    <label for="fullname" class="form-label p-0">Email<span
                                            class="text text-danger">*</span></label>
                                    <input type="email" class="form-control" id="email" name="email" value="">
                                    <span class="text text-danger" id="email_error"></span>

                                </div>
                                <div class="form-group col-lg-12 col-md-12 col-12 p-2">
                                    <label for="fullname" class="form-label p-0">Contact No.<span
                                            class="text text-danger">*</span></label>
                                    <input type="tel" class="form-control" id="contact" name="contact" value="">
                                    <span class="text text-danger" id="contact_error"></span>

                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-lg-6 col-md-6 col-12 p-2">
                                    <label for="gender">Gender <span class="text text-danger">*</span></label>
                                    <select name="gender" id="gender" class="form-control">
                                        <option value="" selected disabled>Select Gender</option>
                                        <option value="Male">Male</option>
                                        <option value="Female">Female</option>
                                    </select>
                                    <span class="text text-danger" id="gender_error"></span>

                                </div>
                                <div class="form-group col-lg-6 col-md-6 col-12 p-2">
                                    <label for="gender">Age <span class="text text-danger">*</span></label>
                                    <input type="number" class="form-control" id="age" name="age"
                                        min="1" value="">
                                    <span class="text text-danger" id="age_error"></span>
                                </div>
                                <div class="form-group col-lg-6 col-md-6 col-12 p-2">
                                    <label for="fullname" class="form-label p-0">Appointment Date</label>
                                    <input type="date" class="form-control" id="appointment_date"
                                        name="appointment_date" value="">

                                </div>
                                <div class="form-group col-lg-12 col-md-12 col-12 p-2">
                                    {!! NoCaptcha::renderJs() !!}
                                    {!! NoCaptcha::display() !!}
                                    <span class="text text-danger" id="g-recaptcha_error"></span>
                                </div>
                            </div>
                        </form>
                        <div class="message" id="success_message" style="display: none;">
                            <div class="alert alert-success p-3">
                                <p>You request has been submitted successfully! We'll be contacting you soon.</p>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary submitAppointmentBtn">Submit</button>
                        <button type="close" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END SECTION BLOG -->

@endsection
@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#appointmentForm').validate();
            let doctor_id = '';
            $('.doctorAppointmentBtn').on('click', function(e) {
                e.preventDefault();
                doctor_id = $(this).data('id');
                $('#appointmentModal').modal('show');
            });
            $('.submitAppointmentBtn').on('click', function(e) {
                e.preventDefault();
                $(".submitAppointmentBtn").prepend('<i class="fa fa-spinner fa-spin"></i>');
                $(".submitAppointmentBtn").attr("disabled", 'disabled');
                let doctor = doctor_id;
                // console.log(doctor);
                let name = $('#fullname').val();
                let email = $('#email').val();
                let contact = $('#contact').val();
                let gender = $('#gender').val();
                let age = $('#age').val();
                let appointment_date = $('#appointment_date').val();
                // console.log(doctor,name,email,contact,gender,age,appointment_date);

                $.ajax({
                    type: "POST",
                    url: "{{ route('doctor.book_appointment') }}",
                    data: {
                        doctor_id: doctor,
                        fullname: name,
                        email: email,
                        phone: contact,
                        gender: gender,
                        age: age,
                        preferred_date: appointment_date,
                        _token: "{{ csrf_token() }}",
                    },
                    dataType: "json",
                    success: function(response) {
                        if ($.isEmptyObject(response.error)) {
                            // $('#appointmentModal').modal('hide');
                            // $('#message').html(`<div class="alert alert-success">${response.message}</div>`);
                            $(".submitAppointmentBtn").find(".fa-spinner").remove();
                            $(".submitAppointmentBtn").removeAttr("disabled");
                            setTimeout(function() {
                                $('#success_message').show();
                            }, 500);
                        } else {
                            // console.log(response.error.fullname);
                            $('#fullname_error').html(' ');
                            $('#fullname_error').append(`${response.error.fullname}`);
                            $('#gender_error').html(' ');
                            $('#gender_error').append(`${response.error.gender}`);
                            $('#age_error').html(' ');
                            $('#age_error').append(`${response.error.age}`);
                            $('#email_error').html(' ');
                            $('#email_error').append(`${response.error.email}`);
                            $('#contact_error').html(' ');
                            $('#contact_error').append(`${response.error.phone}`);
                        }

                    }
                });
            });

            $('#service_id_dropdown').on('change', function() {
                let service_id = $(this).val();
                // console.log(service_id);
                $.ajax({
                    type: "GET",
                    url: "{{ route('get_doctor_by_service') }}",
                    data: {
                        service_id: service_id,
                    },
                    dataType: "json",
                    success: function(response) {
                        $('#doctorList').html(' ');
                        $('#doctorListFromFilter').html(' ');
                        let image = "{{asset('assets/images/omhospital/favicon.png')}}";
                        if (response) {
                            $.each(response.message, function(key, val) {

                                $('#doctorListFromFilter').append(`
                                <div class="col-md-4 col-lg-3 col-12">
                                    <div class="doctor-2">

                                        <!-- Doctor Photo -->
                                        <div class="hover-overlay">
                                            <img class="img"
                                                src="${('uploads/doctor')}/${val.image}"
                                                alt="doctor-foto"  loading="lazy">
                                        </div>

                                        <div class="doctor-meta">

                                            <h4 class="h5-xs">${val.name}</h4>
                                            <span>${val.designation}</span>

                                            <!-- Button -->
                                            <div class="doctorBtn">
                                                <a class="btn btn-blue blue-hover"
                                                    href="doctor/${val.slug}/profile" title="">View
                                                    Profile</a>
                                                <a class="btn btn-danger blue-hover text-white doctorAppointmentBtn"
                                                    id="doctorAppointmentBtn" data-toggle="modal" data-target="#appointmentModal"
                                                    title="${val.name}" data-id="${val.id}">Book Appointment</a>
                                            </div>

                                        </div>

                                </div>
                            </div>
                            `);
                            });
                        }else{
                            $('#doctorListFromFilter').html('<h5>No doctors has been added in this service</h5>');
                        }
                        // console.log(response.message);

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