@extends('layouts/main-layout')
@section('meta_title') Request an Appointment | KM NU Hospitals
@endsection
@section('meta_description') Secure your healthcare journey at KM NU Hospitals. Request an appointment effortlessly for personalized care and timely services.
@endsection
@section('meta_keywords')
@endsection
@section('canonical') https://www.nuhospitals.com/
@endsection
@section('custom-css')
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
    .form-wrap {
        background: #fcfcfc;
        border: 1px solid #f0f0f0;
        display: block;
        padding: 36px 30px 60px;
    }

    /* .form-group {
        margin-bottom: 30px;
    } */
    .form-wrap {
        background: #fcfcfc;
        border: 1px solid #f0f0f0;
        display: block;
        padding: 15px 30px 10px;
    }

    p {
        margin-top: 0;
        margin-bottom: 0rem;
    }

    label.error {
        color: #c40303;
        font-size: 14px;
    }

    .form-control {
        background: #ffffff;
        border: 1px solid #2a62a9;
        color: #2a62a9;
        display: block;
        font-size: 14px;
        height: 50px;
        /* margin-bottom: 30px; */
        padding: 0 20px;
        width: 100%;
        transition: all 500ms ease;
        border-radius: 0;
    }

    .form-control::placeholder {
        color: #2a62a9;
    }

    select option {
        color: #2a62a9;
    }

    #submit-btn {
        padding: 10px;
    }

    #submit-btn-wrap {
        justify-content: center;
        display: flex;
        align-items: center;
    }

    .portal-frame {
        height: 90vh;
    }

    .tabs li {
        padding: 7px;
        text-transform: unset;
    }

    .tabs li h4 {
        font-size: 22px;
        margin-bottom: 0;
    }

    .iti.iti--allow-dropdown {
        width: 100% !important;
    }
</style>
@endsection @section('content')
<section>
    <div class="container pt-2">
        <!-- <h1 class="text-center mb-4">Request an Appointment</h1> -->
        <div class="row">
            <div class="content-holder col-md-12">
                <ul class="tabs text-center">

                    <li>
                        <h5>Register Now & Book Online </h5>
                    </li>
                    <li class="active-tab">
                        <h5>Request an Appointment</h5>
                    </li>
                </ul>
                <div class="tabs-content">
                    <div class="tab-cont-list">
                        <div class="col-md-12 mt-4">
                            <h5>You can now easily register, book and pay online before you visit the Hospital</h5>
                            <div class="row mt-4">
                                <div class="col-md-6">
                                    <p><b>For Existing Patient: </b></p>
                                    <ul>
                                        <li>Enter your registered Mobile number and click on OTP to login Or Enter your PRN # and Password or OTP to login</li>
                                        <li>To receive a new Password, click on “Forgot Password” Search by the doctor’s name and slot and book the appointment.</li>

                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <p><b>For New Patient:</b></p>
                                    <ul>
                                        <li>Click on Register Yourself</li>
                                        <li>Please fill in the Patient Registration Form and follow the instruction</li>
                                        <li>Search by the doctor’s name and slot and book the appointment.</li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 p-0 mt-3">
                            <!-- <iframe class="w-100 portal-frame form-wrap" src="https://access.nuhospitals.com/PatientPortal/" frameborder="0"></iframe> -->
                            <a href="https://access.nuhospitals.com/PatientPortal/" target="_blank" class="btn btn-card m-auto">Register/Book Now</a>
                        </div>
                    </div>
                    <div class="tab-cont-list">
                        <div class="col-md-12 mt-2">
                            <h5>Doctor’s Slot not available? </h5>
                            <p>You can now Request an Appointment and our representative will call you shortly and help you with alternative available slots</p>
                            <ul>
                                <li>For Existing and New Patients</li>
                                <li>Fill in complete details and submit it</li>
                            </ul>

                        </div>
                        <div class="col-md-12 p-0 mt-3">
                            <!-- <form class="form-wrap" action='/curlsubmit.php' method='post' name='BookAppointmentFrm' id='BookAppointmentFrm'> -->
                            <form class="form-wrap appointmentForm" id="book_appointment" name="BookAppointmentFrm" action="{{ route('submit-form') }}" method='post'>
                                @csrf
                                <input type="hidden" id="source" name="source" value="Web-NUH-Request Appointment" />
                                <input type="hidden" name="page" value="Make An Appointment" />
                                <input type="hidden" id="web_source" name="web_source" value="appointment-thankyou">
                                <input type="hidden" id="title" name="title" class="drvalue" value="KMNU Hospitals Book Appointment Page Request an Appointment For" />



                                <div class="row justify-content-end d-none" id="clear-filter-wrap">
                                    <div class="col-md-4 mb-3 text-right">
                                        <a style="text-decoration: underline;" href="/request-appointment"><span class="text-black-50">Clear
                                                Filter</span></a>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <input type="text" name="name" class="form-control" placeholder="Full Name *" required id="name">
                                            <span id="error_name4" class="error" style="color: #c40303;"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <input type="email" name="email" class="form-control" placeholder="Email" id="email" required>
                                            <span id="error_email4" class="error" style="color: #c40303;">
                                        </div>
                                    </div>
                                                                        <div class="col-md-4">
                                        <div class="form-group">
                                            <input type="text" name="phone" class="form-control TxtPhone" placeholder="Phone *" onkeypress="return event.charCode >= 48 && event.charCode <= 57" required id="phone" maxlength="13">
                                            <span id="error_phone4" class="error" style="color: #c40303;"></span>
                                        </div>
                                    </div>                                  
                                    <input type="hidden" value="" name="country">
                                    <div class="col-md-8">
                                        <div class="form-group">
                                            <textarea name="message" id="message" class="form-control p-2 pl-4" id="message" cols="30" rows="4" placeholder="Message"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        <input type="checkbox" id="field_terms" name="terms" checked required=""><small> &nbsp; I authorise KMNU Hospitals and its representative to contact me with updates and notifications via Email, SMS, WhatsApp, and Call. This will override the registry on DND / NDNC.</small>
                                    </div>



                                    <!-- <input type="hidden" name="primary_source" id='primary_source' value='website'>
                                    <input type="hidden" name="secondary_source" id='secondary_source' value='home-form'> -->

                                </div>
                                <div class="justify-content-center row">
                                    <div class="col-md-6" id="submit-btn-wrap">
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <button type="submit" id="submit-btn" class="bgclr-1 w-100 g-recaptcha" data-sitekey="{{ env('GOOGLE_RECAPTCHA_KEY') }}" data-action='submit' data-callback='onAppointmentForm'> Submit </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>

            </div>
        </div>
</section>
@endsection @section('custom-js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{asset('assets/js/doctors-json.js?ver=2.0')}}"></script>

<script>
    var url_string = window.location.href;
    var url = new URL(url_string);
    var doctor_name = url.searchParams.get("doctor");

    var doctors_filtered_data = "";


    if (doctor_name !== "" && doctor_name !== undefined && doctor_name !== null) {

        var doctors_filtered_data = doctors_data.doctors_list.find(function(el) {
            return (el.name.indexOf(doctor_name) !== -1);
        });

        $("#location").val(doctors_filtered_data.location);

        var selectedDoctorLocation = doctors_filtered_data.location.split(",");
        var locations_options_html = "";
        $.each(selectedDoctorLocation, function(index, value) {
            var locations_options = '<option value="OptionVal">OptionName</option>';

            locations_options_html += locations_options.replace(/OptionName/, value)
                .replace(/OptionVal/, value);
        });

        $("#location").html(locations_options_html);

        var selectedDoctorSpecialities = doctors_filtered_data.speciality.split(",");
        var specialities_options_html = "";
        $.each(selectedDoctorSpecialities, function(index, value) {
            var specialities_options = '<option value="OptionVal">OptionName</option>';

            specialities_options_html += specialities_options.replace(/OptionName/, value)
                .replace(/OptionVal/, value);
        });

        $("#department").html(specialities_options_html);

        var selectedDoctorOption = '<option value="' + doctors_filtered_data.name + '">' + doctors_filtered_data.name + '</option>';
        $("#doctor").html(selectedDoctorOption);

        $("#clear-filter-wrap").removeClass("d-none");
        $(".tabs li").removeClass("active-tab");
        $(".tabs li:nth-child(2)").addClass("active-tab");
        $(".tab-cont-list:nth-child(2)").show();
    }

    var append_doctor = {
        'Cardiology': [{
            'name': 'Dr. Vatchsala Sree Varadharajan'
        }],
        'Reproductive Medicine': [{
            'name': 'Dr. Sneha J'
        }],
        'General Surgery': [{
            'name': 'Dr. Fasiulla'
        }],
        'Microbiology': [{
            'name': 'Dr. Vanitha S'
        }],
        'Pathology': [{
            'name': ' Dr. Aswini Koti'
        }]
    }


    $("#department").on('change', function() {
        var selected_speciality = $(this).val();
        doctors_filtered_data = doctors_data.doctors_list.filter(function(el) {
            return (el.speciality.indexOf(selected_speciality) !== -1);
        });
        if (selected_speciality in append_doctor === true) {
            doctors_filtered_data = jQuery.merge(doctors_filtered_data, append_doctor[selected_speciality])
        }
        var doctors_options_html;
        if (doctors_filtered_data.length > 0) {
            $.each(doctors_filtered_data, function(index, value) {
                if (index == 0) {
                    var doctors_options = '<option value="">Select Doctor</option><option value="OptionVal">OptionName</option>';
                } else {
                    var doctors_options = '<option value="OptionVal">OptionName</option>';
                }

                doctors_options_html += doctors_options.replace(/OptionName/, value.name)
                    .replace(/OptionVal/, value.name);
            });
        } else {
            var doctors_options = '<option value="">Select Doctor</option>';
            doctors_options_html = doctors_options;
        }


        $("#doctor").html(doctors_options_html);
    });

    $("#doctor").on('change', function() {
        var doctors_options_html;
        var selected_doctor = $(this).val();
        doctors_filtered_data = doctors_data.doctors_list.filter(function(el) {
            return (el.name.indexOf(selected_doctor) !== -1);
        });
        var doctors_options = '<option value="OptionVal">OptionName</option>';

        var locations = doctors_filtered_data[0].location.split(',');

        $.each(locations, function(index, value) {
            if (index == 0) {
                var doctors_options = '<option value="">Select Location</option><option value="OptionVal">OptionName</option>';
            } else {
                var doctors_options = '<option value="OptionVal">OptionName</option>';
            }
            doctors_options_html += doctors_options.replace(/OptionName/, value)
                .replace(/OptionVal/, value);
        });


        $("#location").html(doctors_options_html);
    });

    $("#appoint_type").on('change', function() {
        if ($(this).val() == "Existing Appointment") {
            $("#prn-num-wrap").removeClass("d-none");
        } else {
            $("#prn-num-wrap").addClass("d-none");
            $("#prn-num-wrap input").removeAttr("required");
        }
    });

    $("#location").on('change', function() {

        var selected_location = $(this).val();

        var specialities_by_location = specialities_list[selected_location];

        var specialities_options_html;

        if (specialities_by_location.length > 0) {
            $.each(specialities_by_location, function(index, value) {
                if (index == 0) {
                    var specialities_options =
                        '<option value="">Select Speciality</option><option value="OptionVal">OptionName</option>';
                } else {
                    var specialities_options = '<option value="OptionVal">OptionName</option>';
                }

                specialities_options_html += specialities_options.replace(/OptionName/, value)
                    .replace(/OptionVal/, value);
            });
        } else {
            var specialities_options = '<option value="">Select Speciality</option>';
            specialities_options_html = specialities_options;
        }

        $("#department").html(specialities_options_html);

    });

    function validateNumber(event) {
        var key = window.event ? event.keyCode : event.which;
        if (event.keyCode === 8 || event.keyCode === 46) {
            return true;
        } else if (key < 48 || key > 57) {
            return false;
        } else {
            return true;
        }
    };
    $(document).ready(function() {
        $('[name="phone"]').keypress(validateNumber);
    });

    $('[name="name"]').keypress(function(e) {
        var regex = new RegExp("^[a-zA-Z ]+$");
        var strigChar = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(strigChar)) {
            return true;
        }
        return false
    });

    $(document).ready(function() {
        $("#BookAppointmentFrm").validate({
            rules: {
                email: {
                    required: true,
                    email: true
                },
            }
        });
    });

    $("#appoint-date").datepicker({
        formate: 'dd/mm/yy',
        dateFormat: 'dd/mm/yy',
        altFormat: "dd/mm/yy",
        minDate: "+1",
        maxDate: new Date("30/11/2021"),
        altField: "#formatted_date"
    });
</script>
<script>
    $(document).on("keyup", '#name', function(e) {
        e.preventDefault();
        var a = $('#name').val();
        var regexp = /^[a-zA-Z\s]+$/;
        if (regexp.test(a)) {
            $('#error_name4').text('');
            return true;
        } else {
            $('#error_name4').text('Enter only  alphabets');
            return false;
        }
    });

    $(document).on("change", '#email', function(e) {
        e.preventDefault();
        var a = $('#email').val();
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        if (emailReg.test(a)) {
            $('#error_email4').text('');
            return true;
        } else {
            $('#error_email4').text('Enter valid email');
            return false;
        }
    });

    $(document).on('change', '#phone', function() {
        validate();

    });

    function onAppointmentForm() {
        var a = $('#error_phone4').text();
        var b = $('#error_name4').text();
        var c = $('#error_email4').text();
        if (a || b || c) {
            return false;
        }

        const name = $('#name').val();
        const message = $('#message').val();
        const phone = $('#phone').val();
        const title = $('#title').val();
        const source = $('#source').val();
        const email = $('#email').val();
        const data = {
            name: name,
            email: email,
            phone: phone,
            message: message,
            title: title,
            'g-recaptcha-response': grecaptcha.getResponse(),
            "_token": "{{ csrf_token() }}"
        };
        if ($(".appointmentForm")[0].checkValidity()) {
            $(".appointmentForm")[0].submit();
            // $.ajax({
            //     type: 'POST',
            //     url: "{{url('submit-form')}}",
            //     data: data,
            //     success: function(data) {
            //         if (data.success) {
            //             console.log(data);
            //             Swal.fire({
            //                 title: "Thank You!",
            //                 text: data.message,
            //                 icon: "success"
            //             });
            //         } else {
            //             Swal.fire({
            //                 title: "Oops...!",
            //                 text: data.message,
            //                 icon: "error"
            //             });
            //         }
            //         $('#book_appointment')[0].reset();
            //     },
            //     error: function(err) {
            //         console.log(err);
            //     }

            // });
        } else {
            $(".appointmentForm")[0].reportValidity();
        }

    }
</script>
<script>
    $(".TxtPhone").intlTelInput({
        initialCountry: "IN",
        geoIpLookup: function(callback) {
            $.get('https://iplist.cc/api/', function(resp) {
                var countryCode = (resp && resp.countrycode) ? resp.countrycode : "";
                callback(countryCode);
            });
        },
        nationalMode: !0,
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.1.0/js/utils.js"
    });

    function validate() {
        var number = $("#phone").intlTelInput('getNumber');
        var a = $('#phone').val();
        var filter = /^[0-9-+]+$/;
        iso = $("#phone").intlTelInput('getSelectedCountryData').iso2;
        var exampleNumber = intlTelInputUtils.getExampleNumber(iso, 0, 0);
        if (number == '')
            number = exampleNumber;
        var formattedNumber = intlTelInputUtils.formatNumber(number, iso, intlTelInputUtils.numberFormat.NATIONAL);
        var isValidNumber = intlTelInputUtils.isValidNumber(number, iso);
        var validationError = intlTelInputUtils.getValidationError(number, iso);
        if (isValidNumber) {
            if (filter.test(a)) {
                $('#error_phone4').text('');
                return true;
            } else {
                $('#error_phone4').text('Please enter only number');
            }
        } else {
            $('#error_phone4').text('Phone number is not valid');
        }

    }
    $("#phone4").intlTelInput({
        geoIpLookup: function(callback) {
            $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
                var countryCode = (resp && resp.country) ? resp.country : "";
                callback(countryCode);
            });
        },
        initialCountry: "auto",
        separateDialCode: true,
    });
    $('#phone').on('countrychange', function(e) {
        $(this).val('');
        var selectedCountry = $(this).intlTelInput('getSelectedCountryData');
        var dialCode = selectedCountry.dialCode;
        var maskNumber = intlTelInputUtils.getExampleNumber(selectedCountry.iso2, 0, 0);
        console.log("placeholder > " + maskNumber);
        maskNumber = intlTelInputUtils.formatNumber(maskNumber, selectedCountry.iso2, 2);
        console.log("placeholder > " + maskNumber);
        maskNumber = maskNumber.replace('+' + dialCode + ' ', '');
        var count = countNumericCharacters(maskNumber);
        console.log(count);
        console.log("placeholder > " + maskNumber);
        mask = maskNumber.replace(/[0-9+]/ig, '0');
        console.log("maskNumber > " + countNumericCharacters(maskNumber));

    });

    function countNumericCharacters(inputString) {
        console.log('dss');
        return (inputString.match(/\d/g) || []).length;
    }
</script>
<script>
    $(document).ready(function() {
        referrer = document.referrer;
        var segments = referrer.split('/');
        var action = segments[3];
        var name = localStorage.getItem('docter_name');
        if (action == 'doctors' && localStorage.getItem('docter_name') != "") {

            $('.drvalue').val('KMNU Hospitals Book Appointment Page Request an Appointment for ' + name)
        } else {
            $('.drvalue').val('KMNU Hospitals Book Appointment Page Request an Appointment')

        }

    });
</script>
@endsection