<!-- Modal -->
<div class="modal fade p-0" id="doctorAppointmentModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" id="appointmentCallbackForm">
                <div class="modal-header py-2">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                    <button type="button" class="btn-close closebtn" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {!! RecaptchaV3::field('needHelpRecaptcha') !!}
                    <input type="hidden" name="doctorId" id="doctorId">
                    <input type="hidden" name="formType" value="Appointment Request">
                    <input type="hidden" name="source_url" id="source_url" value="{{ request()->fullUrl() }}">
                    <input type="hidden" name="subject_line" value="Help for Doctor Appointment">
                    <div class="row mb-2 mt-2">
                        <div class="col-md-6 mb-2 mb-md-0">
                            <div class="mb-1">
                                <!-- <label for="name" class="col-form-label">Name</label> -->
                                <input type="text" class="form-control inputBox" id="name" name="name" placeholder="Name" onkeydown="return /[a-z, ]/i.test(event.key)"
                                onblur="if (this.value == '') {this.value = '';}"
                                onfocus="if (this.value == '') {this.value='';}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1">
                            <!-- <label for="phone" class="col-form-label">Phone</label> -->
                            <input type="text"
                                class="form-control inputBox"
                                id="phone"
                                minlength="5"
                                maxlength="10"
                                pattern="[0-9]{10}"
                                name="phone"
                                placeholder="Mobile"
                            >
                        </div>
                        </div>
                    </div>

                    <div class="row mb-2">
                        <div class="col-md-12">
                            <div class="mb-1">
                                <!-- <label for="email" class="col-form-label">Email</label> -->
                                <input type="text" class="form-control inputBox" id="email" name="email" placeholder="Email ID">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="mb-1">
                            <!-- <label for="remarks" class="col-form-label">Query</label> -->
                            <textarea name="remark" class="form-control inputBox" id="remarks" rows="3" placeholder="Query"></textarea>
                        </div>
                    </div>
                    <div class="mb-1 mt-2 terms-condition-error">
                        <div class="form-check">
                            <input class="form-check-input inputBox" type="checkbox" id="tc" name="tc" checked>
                            <label class="form-check-label f-14 text-black" for="tc">I agree to the
                                {{-- <a href="javascript:void(0)" class="no-underline clrBlueDark open-TC">terms and conditions</a> --}}
                                <a href="{{ url('terms-and-conditions') }}" class="no-underline clrBlueDark">terms and conditions</a>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary closebtn" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="appointmentCallbackReq">Request a Callback</button>
                </div>
            </form>
            <!-- Terms and Conditions -->
            <div class="TC-sm-popup">
                <p class="text-justify">
                    You agree to ensure that any information provided by you shall be complete and accurate. You shall not at any time provide us with information which is false, inaccurate, misleading, obsolete or deceptive. If the information is found false/ deceptive/inaccurate/misleading, AHL holds right to cancel the appointment/transaction and refund/stop the payment.
                </p>
                <div class="text-center mt-3">
                    <a href="javascript:void(0)" class="btn text-decoratione-none agree-btn"> I agree </a>
                </div>
            </div>
        </div>
    </div>
</div>

@section('javascript')
    @parent
    <script>
        $(document).ready(function() {
            $('#doctorAppointmentModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget)
                var doctorName = button.data('doctor-name')
                var doctorId = button.data('doctor-id')
                var hospitalName = button.data('hospital-name');
                var hospitalNum = button.data('hospital-num');
                var modal = $(this)
                modal.find('.modal-title').text('Request appointment for ' + doctorName)
                modal.find('.modal-body #doctorId').val(doctorId)
            })

            var validator = $("#jobApplyForm").validate();
            $('#JobApplyModal').on('hidden.bs.modal', function() {
                $('.inputBox').removeClass('is-invalid');
                validator.resetForm();
            });
        });

        $(".TC-sm-popup").hide();

        $(".agree-btn").click(function(){
            $('#tc').attr('checked', true);
          $(".TC-sm-popup").hide();
        });

        $(".open-TC").click(function(){
          $(".TC-sm-popup").show();
        });
    </script>
@stop