@extends('frontend.layouts.app')
@section('title', 'Appointment')
@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">Online Appointment</h4>
                        <!-- Breadcrumb Nav -->
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="index.html" class="text-white">Home</a></li>
                                <li class="breadcrumb-item active text-white" aria-current="page">Appointment</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Title -->
                </div>
            </div>
        </div> <!-- End row -->
    </div> <!-- End container -->
    <div class="slider-overlay"></div>
  <!-- ======= Contact Section ======= -->
  <section id="contact" class="contact">
    <div class="container">
        <div class="row">

            <!-- CONTACT FORM -->
            <div class="col-lg-7 bg-lightgrey ">
                <div class="row p-3">
                    <div class="col-lg-12 col-12">
                        <h4 class="h4-md text-center steelblue-color">Request to Schedule your Appointment</h4>
                    </div>
                </div>
                <div class="form-holder mb-40">

                    <form action="#" method="" name="appointmentForm" class="row">
                        <!-- Contact Form Input -->
                        <div id="input-name" class="col-12 col-md-6 col-lg-6  py-2">
                            <label for="service">Service/Department <span class="text text-danger">*</span></label>
                            <select name="service_id" id="service_id_dd" class="form-control app_service_dd_np" required>
                                <option>Select Service/Department</option>
                                @foreach ($services as $service)
                                    <option value="{{$service->id}}">{{$service->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div id="input-name" class="col-12 col-md-6 col-lg-6  py-2">
                            <label for="doctor">Doctor<span class="text text-danger">*</span></label>

                            <select name="doctor_id" id="doctor_id_dd" class="form-control app_doctor_dd_np" required>
                                <option>Select Doctor</option>
                            </select>
                        </div>
                        <div id="input-name" class="col-12 col-md-6 col-lg-6  py-2">
                            <label for="name">Name<span class="text text-danger">*</span></label>
                            <input type="text" class="form-control" name="fullname" id="name" placeholder="Enter your Full Name">
                            <span class="text text-danger" id="fullname_error"></span>
                        </div>
                        <div id="input-name" class="col-12 col-md-6 col-lg-6  py-2">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" name="email" id="email" placeholder="Enter your Email">

                        </div>
                        <div id="input-name" class="col-12 col-md-12 col-lg-12  py-2">
                            <label for="phone">Phone Number <span class="text text-danger">*</span></label>
                            <input type="tel" class="form-control" name="phone" id="contact_no" placeholder="Enter your contact number">
                            <span class="text text-danger" id="contact_error"></span>

                        </div>
                        <div id="input-name" class="col-12 col-md-6 col-lg-6  py-2">
                            <label for="sex">Sex</label>
                            <select name="gender" id="gender" class="form-control">
                                <option value="Male" selected>Male</option>
                                <option value="Female">Female</option>
                            </select>
                        </div>
                        <div id="input-name" class="col-12 col-md-6 col-lg-6  py-2">
                            <label for="age">Age</label>
                            <input type="number" class="form-control" id="age" name="age">
                        </div>
                        <div id="input-name" class="col-12 col-md-6 col-lg-6  py-2">
                            <label for="date">Appointment Date <span class="text text-danger">*</span></label>
                            <input type="date" class="form-control" id="appointment_date" name="preferred_date">
                        </div>
                        <div id="captcha" class="col-md-12 py-2 px-3">
                            {!! NoCaptcha::renderJs() !!}
                            {!! NoCaptcha::display() !!}
                            <span class="text text-danger" id="g-recaptcha_error"></span>
                        </div>
                        <!-- Contact Form Button -->
                        <div class="col-lg-12 mt-15">
                            <button type="button" class="btn btn-blue blue-hover requestAptBtn" id="requestAptBtn">Request Now</button>
                        </div>
                    </form>
                    <div class="message my-2" 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> <!-- END CONTACT FORM -->
            <!-- CONTACTS INFO -->
            <div class="col-lg-5">

                <!-- Title-->

                <div class="row">
                    <div class="col-lg-6 col-md-6 col-12 p-2">
                        <div class="contact-info bx-wrapper bg-lightgrey text-center mb-md-40">
                            <div class="contact-info-wrapper">
                                <div class="icon mb-xl-20">
                                    <i class="fa fa-phone"
                                        style="
                                                font-size: 30px;
                                                color: #005154;
                                            "></i>
                                </div>
                                <h5 class="text-custom-black fw-600">Phone</h5>
                                <p class="text-light-white">Start working with Genmed that can provide everything
                                </p>
                                <a href="#" class="fs-14">+(347)123 456 7890</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-12 p-2">
                        <div class="contact-info bx-wrapper bg-custom-white text-center mb-md-40">
                            <div class="contact-info-wrapper">
                                <div class="icon mb-xl-20">
                                    <i class="fa fa-envelope"
                                        style="
                                                font-size: 30px;
                                                color: #005154;
                                            "></i>
                                </div>
                                <h5 class="text-custom-black fw-600">Email</h5>
                                <p class="text-light-white">Start working with Genmed that can provide everything
                                </p>
                                <a href="#" class="fs-14">contact@example.com</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-12 p-2">
                        <div class="contact-info bx-wrapper bg-custom-white text-center">
                            <div class="contact-info-wrapper">
                                <div class="icon mb-xl-20">
                                    <i class="fa fa-location-arrow"
                                        style="
                                                font-size: 30px;
                                                color: #005154;
                                            "></i>
                                </div>
                                <h5 class="text-custom-black fw-600">Location</h5>
                                <p class="text-light-white">Start working with Genmed that can provide everything
                                </p>
                                <a href="#" class="fs-14">View on Google map</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-12 p-2">
                        <div class="contact-info bx-wrapper bg-custom-white text-center">
                            <div class="contact-info-wrapper">
                                <div class="icon mb-xl-20">
                                    <i class="fa fa-clock"
                                        style="
                                                font-size: 30px;
                                                color: #005154;
                                            "></i>
                                </div>
                                <h5 class="text-custom-black fw-600">OPD Timing</h5>
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Days</th>
                                                <th>Time</th>
                                            </tr>
                                            <tr>
                                                <td>Sun-Fri</td>
                                                <td>10:00 AM - 5:00 PM</td>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- END CONTACTS INFO -->




        </div> <!-- End row -->

    </div>
</section>
<!-- End Contact Section -->
@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();
        $('#service_id_dd').on('change',function(){
            let service_id = $(this).val();
            $.ajax({
                type:"GET",
                url:"{{route('get_doctor_by_service')}}",
                data:{
                    service_id:service_id
                },
                dataType:"json",
                success:function(response){
                    // console.log(response.message);
                    $('#doctor_id_dd').html('<option>Select Doctor</option>');
                    $.each(response.message, function(key, value){
                        $('#doctor_id_dd').append(`

                           <option value="${value.id}">${value.name}</option>
                        `);
                    });
                }
            });
        });

        $('#requestAptBtn').on('click',function(e){
            e.preventDefault();
            $(".requestAptBtn").prepend('<i class="fa fa-spinner fa-spin"></i>');
            $(".requestAptBtn").attr("disabled", 'disabled');

            // console.log('clicked');
            let doctor_id = $('#doctor_id_dd').val();
            let name = $('#name').val();
            let email = $('#email').val();
            let contact = $('#contact_no').val();
            let gender = $('#gender').val();
            let age = $('#age').val();
            let appointment_date = $('#appointment_date').val();
            // console.log(doctor_id,name,email,contact,gender,age,appointment_date);

            $.ajax({
                    type: "POST",
                    url: "{{route('doctor.book_appointment')}}",
                    data:{
                        doctor_id:doctor_id,
                        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>`);
                            setTimeout(function(){
                                $('#success_message').show();
                            },500);
                            $(".requestAptBtn").find(".fa-spinner").remove();
                            $(".requestAptBtn").removeAttr("disabled");
                        } 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}`);
                        }

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