<style>
   #secure-portal-credential .input-group label.error {
        z-index: 10000000;
        position: absolute;
        left: 0;
        top: 32px;
    }
</style>

<div id="secure-portal-credential" class="modal fade" role="dialog">
    <?php echo $this->Form->create(null, array('id' => 'secure-portal-form')); ?>
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class=" modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Send Client New Login Password</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="">Password</label>
                            <div class="input-group">
                                <input id="main-password" type="password" name="password" class="form-control" required/>
                                <span style="cursor:pointer" class="input-group-addon btn-flat" onclick="showPlainPassword(this,`input[name='password']`)"><i class="fa fa-eye"></i></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="">Confirm Password</label>
                            <div class="input-group">
                                <input name="c_password" type="password" class="form-control" required/>
                                <span style="cursor:pointer" class="input-group-addon btn-flat" onclick="showPlainPassword(this,`input[name='c_password']`)"><i class="fa fa-eye"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-success text-white">Send Email</button>
                <button type="button" class="btn btn-default btn-orange-color" data-dismiss="modal">Close</button>
            </div>
        </div>
        <?php echo $this->Form->end(); ?>
    </div>
</div>

<?php echo $this->Html->script('jsvalidate/jquery.validate.min.js'); ?>
<?php echo $this->element('common/prepare_form_serialize'); ?>
<script>
    var validator = $('#secure-portal-form').validate({
        rules: {
            password: {
                required: true,
                minlength: 6
            },
            c_password: {
                required: true,
                minlength: 6,
                equalTo: "#main-password"
            }
        },
        submitHandler: function (form) {
            Swal.fire({
                width:'40rem',
                text: "Are you sure want to send credential to client ?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText:'No'
            }).then((result) => {
                if (result.value) {
                    var formData = prepareFormDataFromSerilize($(form).serializeArray())
                    formData['action'] = 'SEND_CLIENT_LOGIN_CREDENTIAL';
                    var method = 'POST';
                    var url = '<?php echo $this->Url->build('/ClientSecurePortalLogin'); ?>'
                    ajaxRequestForSecurePortalCredential(url,method,formData)
                    //$('#profile-form').submit();
                }
            })
        }
    });
    function validateEmpToEmpSendMessageForm(formData){
        if(formData) {
            for(var name in formData) {
                if(!formData[name]){
                    if(name == 'emp_message'){
                        alert('Please type your message.');
                    }else{
                        alert('Please provide required input.');
                    }
                    return false
                }
            }
        }

        return true;
    }

    function getSecurePortalCredentialPopup(contact_id){
        event.preventDefault()

        var formData = {
            action: 'GET_CLIENT_LOGIN_CREDENTIAL',
            contact_id: contact_id
        }
        var method = 'POST';
        var url = '<?php echo $this->Url->build('/ClientSecurePortalLogin'); ?>'

        if(contact_id > 0){
            $('#secure-portal-form label.error').remove()
            $('#secure-portal-form .error').removeClass('error');
            $(`input[name="contact_id"]`).remove();
            $("#secure-portal-credential #secure-portal-form input").val('');
            $("#secure-portal-credential #secure-portal-form").append(`<input type="hidden" name="contact_id" value="${contact_id}">`)
            $("#secure-portal-credential").modal("show")
        }
    }

    function getMessagingByEmployeeId(elem){
        var employee_id = $(elem).val();
        var formData = {
            action: 'GET_EMPLOYEE_TO_EMPLOYEE_ONCHANGE_DATA',
            employee_id: employee_id
        }
        var method = 'POST';
        var url = '<?php echo $this->Url->build('/Client/sendmessage'); ?>'
        $('#emp-emp-messaging .modal-body .box-body .direct-chat-msg').html('')
        $('#emp-emp-messaging #send-btn').attr('disabled',true)
        if(employee_id > 0){
            ajaxRequestForEmployeeToEmployee(url,method,formData);
        }
    }

    function sendToClientCredential(elem){
        event.preventDefault();
        var employee_id = $(`#emp-emp-messaging select[name="employee_id"]`).val();
        var formData = prepareFormDataFromSerilize($('#emp-emp-messaging form').serializeArray())
        formData['action'] = 'EMPLOYEE_TO_EMPLOYEE_SEND_MESSAGE';
        formData['employee_id'] = employee_id;
        if(validateEmpToEmpSendMessageForm(formData)) {
            var method = 'POST';
            var url = '<?php echo $this->Url->build('/Client/sendmessage'); ?>'
            ajaxRequestForSecurePortalCredential(url, method, formData);
        }
    }

    function makeCompleteEmpToEmpMessaging(employee_id){
        var formData = {}
        formData['action'] = 'EMPLOYEE_TO_EMPLOYEE_MESSAGE_COMPLETE';
        formData['employee_id'] = employee_id;
        var method = 'POST';
        var url = '<?php echo $this->Url->build('/Client/sendmessage'); ?>'
        ajaxRequestForEmployeeToEmployee(url, method, formData);
    }

    function ajaxRequestForSecurePortalCredential(url,method,formData){
        var loader = $('.loading');
        loader.show();

        $.ajax({
            type: method,
            data: formData,
            url: url,
            success: function(response) {
                loader.hide();
                response = JSON.parse(response);
                console.log(response)
                if(response) {
                    if (formData['action'] == "SEND_CLIENT_LOGIN_CREDENTIAL") {
                        $("#secure-portal-credential #secure-portal-form input[type='password']").val('');
                        $("#secure-portal-credential").modal("hide");
                        Swal.fire({
                            title: 'Success',
                            text: response,
                            icon: 'success',
                            confirmButtonText: 'OK',
                            width: 400
                        })
                    }
                }

            },
            error: function() {
                loader.hide();
            }
        })
    }
</script>