@include('patient.layout.header')

<!-- //wrapper -->
<div class="wrapper" id="wrapper">
    <section id="" class="dose p-70" style="background-image:url(landing/images/dose-bg.png)">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="white_shadow_rs">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="middle_name">
                                    <h3>Dear Patient,</h3>
                                    <p>Did you forget to take your medicine? We can help you stay on track. Register
                                        here to set up dosage reminders, and we'll notify you when it's time to take
                                        your medication.</p>
                                    <div class="tabs_login">
                                        <ul class="tabs">
                                            <li class="tab-link current" data-tab="tab-1">Register</li>
                                            <li class="tab-link" data-tab="tab-2">Login</li>
                                        </ul>

                                        <div id="tab-1" class="tab-content current">
                                            <div class="form_rs registerform">
                                                {!! Form::open([
                                                    'url' => '#',
                                                    'name' => 'validateForm',
                                                    'id' => 'validateForm',
                                                    'enctype' => 'multipart/form-data',
                                                ]) !!}
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                                        <div class="mb-3">
                                                            <label for="" class="form-label">Doctor
                                                                Name</label>
                                                            <input type="text" class="form-control" id="doctor_name"
                                                                name="doctor_name" placeholder="Enter Doctor Name"
                                                                value="{{ isset($doctorName) ? $doctorName : '' }}"
                                                                readonly>
                                                        </div>
                                                    </div>
                                                    <input type="hidden" id="patient_id"
                                                        value="{{ $patient->id ?? '' }}">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                                        <div class="mb-3">
                                                            <label for="" class="form-label">Full
                                                                Name</label>
                                                            <input type="text" class="form-control" id="patient_name"
                                                                name="patient_name" placeholder="Enter Full Name">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                                        <div class="mb-3">
                                                            <label for="" class="form-label">Mobile
                                                                No.</label>
                                                            <input type="text" class="form-control" id="mob_no"
                                                                maxlength="10"
                                                                oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');;"
                                                                name="mob_no" placeholder="Enter Mobile No.">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                                        <div class="mb-3">
                                                            <label for="" class="form-label">State</label>
                                                            <select class="form-select form-control"
                                                                aria-label="Default select example" name="state"
                                                                id="state">
                                                                <option value="" selected>Select State
                                                                </option>
                                                                @foreach ($states as $state)
                                                                    <option value="{{ $state->id }}">
                                                                        {{ $state->state_name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                                        <div class="mb-3">
                                                            <label for="" class="form-label">City</label>
                                                            <select class="form-select form-control"
                                                                aria-label="Default select example" name="city"
                                                                id="city" disabled>
                                                                <option value="">Select City</option>
                                                                @foreach ($citys as $city)
                                                                    <option value="{{ $city->id }}">
                                                                        {{ $city->city_name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                                        <div class="mb-3">
                                                            <label for="" class="form-label">Pin
                                                                Code</label>
                                                            <input type="text" maxlength="6" class="form-control"
                                                                id="pincode" name="pincode"
                                                                placeholder="Enter Pin Code"
                                                                oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');;">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                                        <div class="mb-3">
                                                            <button type="button" id="otp" name="otp"
                                                                class="btn btn-primary">Get OTP</button>
                                                        </div>
                                                    </div>
                                                </div>
                                                {!! Form::close() !!}
                                            </div>
                                            <div class="otp_form" id="otp_form" style="display:none;">
                                                <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                                    <div class="mb-3 resend_rs">
                                                        <p> Please enter the OTP send to <a href="javascript:void(0)"
                                                                id="edit_mobno_register">
                                                                <span id="retunemob_no"></span> <img
                                                                    src="{{ asset('landing/images/edit.png') }}"></a>
                                                        </p>
                                                    </div>
                                                    <div class="mb-3 otp_rs">
                                                        <input type="text"
                                                            class="form-control otp-input registerotp" id="otp_1"
                                                            maxlength="1"
                                                            oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');;"
                                                            placeholder="0">
                                                        <input type="text"
                                                            class="form-control otp-input registerotp" id="otp_2"
                                                            maxlength="1"
                                                            oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');;"
                                                            placeholder="0">
                                                        <input type="text"
                                                            class="form-control otp-input registerotp" id="otp_3"
                                                            maxlength="1"
                                                            oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');;"
                                                            placeholder="0">
                                                        <input type="text"
                                                            class="form-control otp-input registerotp" id="otp_4"
                                                            maxlength="1"
                                                            oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');;"
                                                            placeholder="0">
                                                    </div>
                                                    <div class="mb-3 resend_rs">
                                                        <p>Don't receive an OTP? <a href="javascript:void(0)"
                                                                id="resendOtpRegistation">Resend OTP</a></p>
                                                    </div>
                                                    <div class="mb-3">
                                                        <button type="button" class="btn btn-primary register"
                                                            id="verifyOtpBtn">Login</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- </form> --}}
                                    </div>
                                    <div id="tab-2" class="tab-content">
                                        <div class="form_rs login">
                                            {!! Form::open([
                                                'url' => '#',
                                                'name' => 'loginValidateForm',
                                                'id' => 'loginValidateForm',
                                                'enctype' => 'multipart/form-data',
                                            ]) !!}
                                            <div class="row">
                                                <div class="col-lg-10 col-md-10 col-sm-12 col-12">
                                                    <div class="mb-3">
                                                        <label for="" class="form-label">Mobile
                                                            No.</label>
                                                        <input type="text" class="form-control" maxlength="10"
                                                            oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');;"
                                                            name="login_mob_no" id="login_mob_no"
                                                            placeholder="Enter Mobile No.">
                                                    </div>
                                                </div>
                                                <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                                    <div class="mb-3">
                                                        <button type="button" class="btn btn-primary get_login_otp"
                                                            id="login_otp">Get
                                                            OTP</button>
                                                    </div>
                                                </div>
                                            </div>
                                            {!! Form::close() !!}
                                        </div>
                                        <div class="login_otp_form" id="login_otp_form" style="display:none;">
                                            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                                <div class="mb-3 resend_rs">
                                                    <p> Please enter the OTP sent to <a href="javascript:void(0)"
                                                            id="edit_mobno"><span id="patient_mob"></span> <img
                                                                src="{{ asset('landing/images/edit.png') }}"></a>
                                                    </p>
                                                </div>
                                                <div class="mb-3 otp_rs">
                                                    <input type="text" class="form-control otp-input loginotp"
                                                        id="login_otp_1" maxlength="1"
                                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');;"
                                                        placeholder="0">
                                                    <input type="text" class="form-control otp-input loginotp"
                                                        id="login_otp_2" maxlength="1"
                                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');;"
                                                        placeholder="0">
                                                    <input type="text" class="form-control otp-input loginotp"
                                                        id="login_otp_3" maxlength="1"
                                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');;"
                                                        placeholder="0">
                                                    <input type="text" class="form-control otp-input loginotp"
                                                        id="login_otp_4" maxlength="1"
                                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');;"
                                                        placeholder="0">
                                                </div>
                                                <div class="mb-3 resend_rs">
                                                    <p>Don't receive an OTP? <a href="javascript:void(0)"
                                                            id="resendOtpLogin">Resend OTP</a></p>
                                                </div>
                                                <div class="mb-3">
                                                    <button type="button" class="btn btn-primary"
                                                        id="verifyLoginOtpBtn">Login</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="login_bg">
                                    <img src="{{ asset('landing/images/login-bg.png') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>
</section>
</div> <!--  wrapper end  -->
<!-- //wrapper-end -->

@include('patient.layout.footer')

<script>
    $(document).ready(function() {

        $('ul.tabs li').click(function() {
            var tab_id = $(this).attr('data-tab');

            $('ul.tabs li').removeClass('current');
            $('.tab-content').removeClass('current');

            $(this).addClass('current');
            $("#" + tab_id).addClass('current');
        })

    })
</script>
<script>
    $(document).ready(function() {
        $('#state').change(function() {
            var stateId = $(this).val();

            if (stateId) {
                $('#city').prop('disabled', false);
                $('#city').rules('add', 'required');
                $.ajax({
                    url: '/cities/' + stateId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#city').empty();
                        $('#city').append('<option value="">Select City</option>');
                        $.each(data, function(key, value) {
                            $('#city').append('<option value="' + value.id + '">' +
                                value.city_name + '</option>');
                        });
                    }
                });
            } else {
                $('#city').prop('disabled', true);
                // $('#city').removeClass('error');
                // $('#city').next('.error-message').remove();
                $('#city').rules('remove', 'required');
                $('#city').empty();
                $('#city').append('<option value="">Select City</option>');
            }
        });
    });
</script>

<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.validator.addMethod("noSpaces", function(value, element) {
            return this.optional(element) || $.trim(value).length > 0;
        }, "Please enter valid text, not just spaces.");

        $.validator.addMethod("validMobile", function(value, element) {
            return this.optional(element) || (value.length === 10 && /^[0-9]+$/.test(value));
        }, "Please enter a valid 10-digit mobile number.");

        $.validator.addMethod("validPincode", function(value, element) {
            return this.optional(element) || (value.length === 6 && /^[0-9]+$/.test(value));
        }, "Please enter a valid 6-digit pin code.");

        $('#validateForm').validate({
            rules: {
                doctor_name: {
                    required: true,
                    noSpaces: true,
                },
                patient_name: {
                    required: true,
                    noSpaces: true,
                    maxlength: 30
                },
                mob_no: {
                    required: true,
                    validMobile: true,
                    maxlength: 10,
                },
                pincode: {
                    required: true,
                    validPincode: true,
                    maxlength: 6,
                },
                city: "required",
                state: "required"
            },
            messages: {
                doctor_name: "Please enter a doctor name",
                patient_name: {
                    required: "Please enter a valid Patient Name",
                    maxlength: "Name cannot be longer than 30 characters"
                },
                mob_no: "Please enter a valid Mobile No.",
                pincode: "Please enter a valid Pin Code No.",
                validMobile: "Please enter a valid 10-digit mobile number.",
                state: "Please select or enter a state",
                city: "Please select or enter a city"
            },
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            },
        });

        $('#state').on('change', function() {
            let stateSelected = $(this).val();

            if (stateSelected === '') {
                $('#city').prop('disabled', true);
                $('#city').rules('remove', 'required');
                $('#city').valid();
            }
        });

        $('#otp').on('click', function(e) {
            e.preventDefault();
            sendOtp();
        });

        $('#validateForm input').on('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                $('#otp').trigger('click');
            }
        });

        function sendOtp() {
            // e.preventDefault();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            let form = $('#validateForm');
            if (form.valid()) {
                $("#otp").attr('disabled', true);
                let mobileNumber = $('#mob_no').val();
                let patient_id = $('#patient_id').val();

                let formData = form
                    .serializeArray();
                formData.push({
                    name: 'mobile_number',
                    value: mobileNumber
                });
                formData.push({
                    name: 'patientId',
                    value: patient_id
                });
                $.ajax({
                    url: "{{ route('patient.store') }}",
                    type: "POST",
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            $("#otp").attr('disabled', false);
                            toastr.success('send otp on Mobile No. successfully!');

                            // alert('Your OTP: ' + response.link);
                            $('#patient_id').val(response.patient_id);
                            $('#retunemob_no').text(mobileNumber);
                            // $("#patient_name").val('');
                            // $("#mob_no").val('');
                            // $("#pincode").val('');
                            // $("#city").val('');
                            // $("#state").val('');
                            $(".registerform").hide(800);
                            $("#otp_form").show(800);
                            $('#otp_1').val('');
                            $('#otp_2').val('');
                            $('#otp_3').val('');
                            $('#otp_4').val('');
                        } else {
                            $("#otp").attr('disabled', false);
                            toastr.error(response.message, 'Error', {
                                timeOut: 3000
                            });
                        }
                    },
                    error: function(xhr) {
                        $("#otp").attr('disabled', false);
                        toastr.error('Failed to Send Otp ! please try again.');
                        console.error(xhr.responseText);
                    }
                });
            }
        };
    });
</script>
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('.otp-input').on('keyup', function(e) {
            let currentInput = $(this);
            let nextInput = currentInput.next('.otp-input');
            let prevInput = currentInput.prev('.otp-input');

            if (currentInput.val().length === 1 && nextInput.length) {
                nextInput.focus();
            }

            if (e.key === "Backspace" && currentInput.val().length === 0 && prevInput.length) {
                prevInput.focus();
            }
        });

        $('.registerotp').on('keypress', function(e) {
            if (e.which === 13) {
                e.preventDefault();
                $('#verifyOtpBtn').trigger('click');
            }
        });

        $('#verifyOtpBtn').on('click', function(e) {
            $("#verifyOtpBtn").attr('disabled', true);
            let otp = $('#otp_1').val() + $('#otp_2').val() + $('#otp_3').val() + $('#otp_4').val();
            // let patientId = $('#doctor_id').val();
            let patientId = $('#patient_id').val();

            $.ajax({
                url: "{{ route('verifyOtp') }}",
                type: "POST",
                data: {
                    otp: otp,
                    patient_id: patientId
                },
                success: function(response) {
                    if (response.success) {

                        $("#verifyOtpBtn").attr('disabled', false);
                        toastr.success(response.message);
                        $("#otp_form").hide(500);
                        setTimeout(function() {
                            window.location.href = response.redirect_url;
                        }, 500);
                    } else {
                        $("#verifyOtpBtn").attr('disabled', false);
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    $("#verifyOtpBtn").attr('disabled', false);
                    toastr.error('Failed to verify OTP.');
                    console.error(xhr.responseText);
                }
            });

        });
    });

    $('#resendOtpRegistation').on('click', function(e) {
        e.preventDefault();

        let patientId = $('#patient_id').val();
        $("#resendOtpRegistation").attr('disabled', true);
        $.ajax({
            url: "{{ route('resendOtpRegistation') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                patient_id: patientId
            },
            success: function(response) {
                if (response.success) {
                    $("#resendOtpRegistation").attr('disabled', false);
                    toastr.success(response.message);
                    $('#otp_1').val('');
                    $('#otp_2').val('');
                    $('#otp_3').val('');
                    $('#otp_4').val('');
                } else {
                    $("#resendOtpRegistation").attr('disabled', false);
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                $("#resendOtpRegistation").attr('disabled', false);
                toastr.error('Failed to resend OTP.');
                console.error(xhr.responseText);
            }
        });
    });
</script>


<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.validator.addMethod("validMobile", function(value, element) {
            return this.optional(element) || (value.length === 10 && /^[0-9]+$/.test(value));
        }, "Please enter a valid 10-digit mobile number.");


        $('#loginValidateForm').validate({
            rules: {
                login_mob_no: {
                    required: true,
                    validMobile: true,
                    maxlength: 10,
                },
            },
            messages: {
                login_mob_no: "Please enter a valid Mobile No.",
            },
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error);
                } else {
                    error.insertAfter(element);
                }
            },
        });

        $('#login_otp').on('click', function(e) {
            e.preventDefault();
            triggerOtpRequest();
        });

        $('#login_mob_no').on('keydown', function(e) {
            if (e.key === "Enter") {
                e.preventDefault();
                triggerOtpRequest();
            }
        });

        function triggerOtpRequest() {
            let form = $('#loginValidateForm');
            if (form.valid()) {
                $("#login_otp").attr('disabled', true);
                let mobileNumber = $('#login_mob_no').val();

                $.ajax({
                    url: "{{ route('patient.loginUserVerification') }}",
                    type: "POST",
                    data: {
                        mobile_number: mobileNumber
                    },
                    success: function(response) {
                        $("#login_otp").attr('disabled', false);
                        if (response.success) {
                            toastr.success(response.message);
                            $('#patient_mob').text(mobileNumber);
                            $('#patient_id').val(response.patient_id);
                            $(".login").hide(800);
                            $(".login_otp_form").show(800);
                            $('#login_otp_1').val('');
                            $('#login_otp_2').val('');
                            $('#login_otp_3').val('');
                            $('#login_otp_4').val('');
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr) {
                        $("#login_otp").attr('disabled', false);
                        toastr.error('Failed to send OTP.');
                    }
                });
            }
        }

        $('.otp-input').on('keyup', function(e) {
            let currentInput = $(this);
            let nextInput = currentInput.next('.otp-input');
            let prevInput = currentInput.prev('.otp-input');

            if (currentInput.val().length === 1 && nextInput.length) {
                nextInput.focus();
            }

            if (e.key === "Backspace" && currentInput.val().length === 0 && prevInput.length) {
                prevInput.focus();
            }
        });

        // Updated event listener for Enter key
        $('.loginotp').on('keypress', function(e) {
            if (e.which === 13) {
                e.preventDefault();
                $('#verifyLoginOtpBtn').trigger('click');
            }
        });

        $('#verifyLoginOtpBtn').on('click', function(e) {
            let otp = $('#login_otp_1').val() + $('#login_otp_2').val() + $('#login_otp_3').val() + $(
                '#login_otp_4').val();
            let patientId = $('#patient_id').val();
            $("#verifyLoginOtpBtn").attr('disabled', true);

            $.ajax({
                url: "{{ route('verifyOtp') }}",
                type: "POST",
                data: {
                    otp: otp,
                    patient_id: patientId
                },
                success: function(response) {
                    if (response.success) {
                        $("#verifyLoginOtpBtn").attr('disabled', false);
                        toastr.success(response.message);
                        setTimeout(function() {
                            window.location.href = "{{ route('home') }}";
                        }, 1500);
                    } else {
                        $("#verifyLoginOtpBtn").attr('disabled', false);
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    $("#verifyLoginOtpBtn").attr('disabled', false);
                    toastr.error('Failed to verify OTP.');
                }
            });
        });
    });


    $('#resendOtpLogin').on('click', function(e) {
        e.preventDefault();

        let patientId = $('#patient_id').val();
        $("#resendOtpLogin").attr('disabled', true);
        $.ajax({
            url: "{{ route('resendOtpLogin') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                patient_id: patientId
            },
            success: function(response) {
                if (response.success) {
                    $("#resendOtpLogin").attr('disabled', false);
                    toastr.success(response.message);
                    $('#login_otp_1').val('');
                    $('#login_otp_2').val('');
                    $('#login_otp_3').val('');
                    $('#login_otp_4').val('');
                } else {
                    $("#resendOtpLogin").attr('disabled', false);
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                $("#resendOtpLogin").attr('disabled', false);
                toastr.error('Failed to resend OTP.');
                console.error(xhr.responseText);
            }
        });
    });
</script>

<script>
    $('#edit_mobno').on('click', function() {
        let currentMobile = $('#patient_mob').text();
        $('#login_mob_no').val(currentMobile);
        $('.login').show(800);
        $('.login_otp_form').hide(800);
    });
</script>



<script>
    $('#edit_mobno_register').on('click', function() {
        let currentMobile = $('#retunemob_no').text();
        $('#mob_no').val(currentMobile);
        $('.registerform').show(800);
        $('.otp_form').hide(800);
        $("#patient_name").attr('disabled', true);
        $("#pincode").attr('disabled', true);
        $("#city").attr('disabled', true);
        $("#state").attr('disabled', true);
    });
</script>