
    <link href="/webview/assets/toastr/toastr.css" rel="stylesheet" />
    <link href="/webview/assets/flag/css/intlTelInput.css" rel="stylesheet" />




    <form action='check-phone' method="POST" class="formAjax" id="checkPhone">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">

        <div class="info text-center">
            <h3 class="title"><%=i18n.__('auth.login')%></h3>
            <p class="text mb-4"><%=i18n.__('auth.please_enter_your_login_details')%></p>
        </div>

        <div>
            <div class="main-input mb-3">
                <input type="hidden" id="country_code" name="country_code">
                <input type="hidden" id="iso" name="iso">

                <input type="number" name="phone" class="input-me" id="telephone" placeholder=" <%=i18n.__('auth.please_enter_mobile_number')%>">
            </div>
            
            <div class="main-input mb-3">
                <select name="userType" id="villageDropdown" class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true">
                    <option disabled value="" selected> <%=i18n.__('auth.userType')%></option>
                    <option value="client"><%=i18n.__('auth.client')%></option>
                    <option value="provider"><%=i18n.__('auth.providerWebView')%></option>
                </select>
            </div>

            <button type='submit' class="main-btn up mx-auto mt-4 w-100 submit-button"><%=i18n.__('auth.login')%></button>
            <div class="main-btn up mx-auto mt-4 w-100 d-none uploadProgress"><i class="fas fa-spinner"></i></div>


        </div>
    </form>

    <!--********** Start Modals **********-->
    <div class="modal fade" id="password-modal" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
    <!-- ==================================== Password Modal ==================================== -->
        <div class="modal-dialog xs modal-dialog-centered">
            <div class="modal-content">

                <form action="checkPhonePassword" class="w-100 formAjax" method="POST">
                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                    <div class="modal-body">
                        <h3 class="modal-title"><%=i18n.__('auth.please_enter_password')%></h3>

                        <input type="hidden" class="input-me phone" name="phone" placeholder="phone">

                        <div class="main-input">
                            <input type="password" name="password" class="input-me" placeholder="<%=i18n.__('auth.please_enter_password')%>">
                        </div>
                        <button type="submit" class="main-btn w-100 mt-3 up submit-button"><%=i18n.__('auth.affirmation')%></button>
                        <div class="main-btn up mx-auto mt-4 w-100 d-none uploadProgress"><i class="fas fa-spinner"></i></div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- ==================================== Code Modal ==================================== -->
    <div class="modal fade" id="account-activation" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
        <div class="modal-dialog sm modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header">
                    <img src="/webview/assets/imgs/color_logo.png" alt="" class="modal-img">
                </div>

                <form action="account-activation" class="w-100 formAjax" method="PATCH">
                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                    <div class="modal-body">
                        <h3 class="modal-title"><%=i18n.__('auth.account_activation')%></h3>

                        <div class="mt-4">
                            <input type="hidden" class="input-me phone" name="phone" placeholder="phone">
                            <input type="hidden" class="input-me userType" name="userType" placeholder="userType">
                            <input type="hidden" class="input-me country" name="country" placeholder="country">
                            <!-- Code Inputs -->
                            <div class="code-container">
                                <input type="number" class="code" min="0" max="9" required />
                                <input type="number" class="code" min="0" max="9" required />
                                <input type="number" class="code" min="0" max="9" required />
                                <input type="number" class="code" min="0" max="9" required />
                                <input type="number" class="code" min="0" max="9" required />
                                <input type="number" class="code" min="0" max="9" required />
                                <input type="hidden" name="code" class="all_code">
                            </div>

                            <button type="submit" class="main-btn w-100 mt-3 up submit-button"><%=i18n.__('auth.activation')%></button>
                            <div class="main-btn up mx-auto mt-4 w-100 d-none uploadProgress"><i class="fas fa-spinner"></i></div>

                        </div>

                        <div class="d-flex justify-content-between align-items-center mt-3" id="counter">
                            <button type="button" class="bg-transparent p-0 c-hint border-0 gap-1 new-code cu-pointer">
                                <%=i18n.__('auth.you_did_not_receive_the_activation_code')%>
                                <span class="c-main retransmission"> <%=i18n.__('auth.retransmission')%></span>               
                            </button>

                            <span class="counter"></span>
                        </div>
                    </div>

                </form>

            </div>
        </div>
    </div>


    <!-- ==================================== Delete Modal ==================================== -->
    <div class="modal fade" id="delete-account" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
        <div class="modal-dialog xs modal-dialog-centered">
            <div class="modal-content">

                <form action="delete-account-submit" class="w-100 formAjax" method="DELETE">
                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                    <input type="hidden" class="input-me phone" name="phone" placeholder="phone">
                    <input type="hidden" class="input-me userType" name="userType" placeholder="userType">
                    <input type="hidden" class="input-me country" name="country" placeholder="country">

                    <div class="modal-body">
                        <h3 class="modal-title"><%=i18n.__('auth.delete_account')%></h3>
                        <div class="mt-4 text-center">
                            <img src="/webview/assets/warning.png" width="100" alt="" class="warning">
                        </div> 
                        <p class="fs14 mt-3 text-center c-red"><%=i18n.__('auth.do_you_really_want_to_delete_the_account')%></p>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="main-btn red up submit-button">
                            <%=i18n.__('auth.yes_delete')%>
                        </button>
                        <div class="main-btn up mx-auto mt-4 w-100 d-none uploadProgress"><i class="fas fa-spinner"></i></div>
                        <button type="button" data-bs-dismiss="modal" class="main-btn up"><%=i18n.__('common.back')%></button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!--********** End Modals **********-->



    <script src="/webview/assets/jquery.form.min.js"></script>
    <script src="/webview/assets/toastr/toastr.js"></script>
    <script src="/webview/assets/flag/js/intlTelInput.min.js"></script>

    <script>
        let sorry_something_went_wrong = "<%=i18n.__('auth.sorry_something_went_wrong')%>",
            retransmissionSuccessFull  = "<%=i18n.__('auth.retransmissionSuccessFull')%>";
        var input                      = document.querySelector("#telephone");
        let iti                        = window.intlTelInput(input, {
            initialCountry             : "SA",
            separateDialCode           : true,
        });

        $("#country_code").val(iti.getSelectedCountryData().dialCode);
        $("#iso").val(iti.getSelectedCountryData().iso2);
        input.addEventListener("countrychange", function () {
            $("#country_code").val(iti.getSelectedCountryData().dialCode);
            $("#iso").val(iti.getSelectedCountryData().iso2);
        });

        $('.formAjax').on('submit', function(e){
            e.preventDefault();
            sendRequest($(this), '.submit-button', '.uploadProgress');
        });
        function sendRequest(form, btn , uploadProgress) {
            let url    = form.attr('action'),
                method = form.attr('method');

            form.ajaxSubmit({
                type: method,
                url: url,
                beforeSend: function () {
                    let submitForm = form.find(btn);
                    submitForm.attr('disabled', true).addClass('d-none');
                    form.find(uploadProgress).removeClass('d-none').html("<i class='fas fa-spinner'></i>");
                },
                uploadProgress:function (event,position,total,percentComplete) {
                    form.find(uploadProgress).text(percentComplete+'%');
                },
                success: (res) =>  {
                    let response = res.data;
                    form.find(btn).removeClass('d-none').attr('disabled', false);
                    form.find(uploadProgress).addClass('d-none').html("<i class='fas fa-spinner'></i>");

                    if(response.hasOwnProperty('model')){
                        $('.modal').modal('hide');
                        $('.code').val('');
                        $('#' + response.model).modal('show');
                    }

                    if(response.hasOwnProperty('phone')){
                        $('.phone').val(response.phone);
                        $('.country').val(response.country);
                        $('.userType').val(response.userType);
                    }

                    if (response.hasOwnProperty('url')) {
                        setTimeout(function () {
                            window.location.replace(response.url)
                        }, 2000);
                    }

                    if(response.hasOwnProperty('count')){
                        $('.counter').data('count', response.count);
                        clearInterval(counter);
                        codeCounter();
                    }

                    if(response.hasOwnProperty('status')){
                        $('.modal').modal('hide');
                        if (response.status == 'success'){
                            toastr.success(response.msg)
                        }

                        if (response.status == 'fail'){
                            toastr.error(response.msg)
                        }
                    }
                },
                error: function(xhr) {
                    form.find(btn).removeClass('d-none').attr('disabled', false);
                    form.find(uploadProgress).addClass('d-none').html("<i class='fas fa-spinner'></i>");
                    if(xhr.responseJSON.hasOwnProperty('errors')){
                        $.each(xhr.responseJSON.errors, function(key, value) {
                            toastr.error(value)
                        });
                        return;
                    }
                    toastr.error(xhr.responseJSON.message);


                },
            });
        }

        $('.retransmission').on('click', function(){
            $('.modal').modal('hide');
            $('#checkPhone').submit();
            $('.code').val('');
            toastr.success(retransmissionSuccessFull)
  
        })


    </script>