<style>
    #smtp-setup .required{
        color: red;
    }
</style>

<div class="modal fade" id="smtp-setup" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">

        <!-- Modal content-->
        <?= $this->Form->create(null, ['type' => 'file','id'=>'smtp-form', 'onsubmit' => 'smptpsubmit(this)', 'autocomplete' => 'chrome-off']); ?>
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">SMTP Setup</h4>
            </div>
            <div class="modal-body">
                <div class="form-group row <?php
                if (isset($errors['smtp_host'])) {
                    echo 'has-error';
                }
                ?>">
                    <label class="control-label col-lg-3">SMTP Host<span class="required <?php echo $required_hide; ?>"> *</span></label>
                    <div class="col-lg-9">
                        <?php echo $this->Form->input('smtp_host', ['label' => false, 'class' => 'form-control has-required', 'placeholder' => _('e.g, smtp.gmail.com'), $disabled, 'required' => true]); ?>
                        <span class="help-block text-center">
                            <?php
                            if (isset($errors['smtp_host']['_empty'])) {
                                echo $errors['smtp_host']['_empty'];
                            }
                            ?>
                        </span>
                    </div>
                </div>
                <div class="form-group row <?php
                if (isset($errors['username'])) {
                    echo 'has-error';
                }
                ?>">
                    <label class="control-label col-lg-3">Username<span class="required <?php echo $required_hide; ?>"> *</span></label>
                    <div class="col-lg-9">
                        <?php echo $this->Form->input('username', ['label' => false, 'class' => 'form-control has-required', 'placeholder' => _('e.g, username@gmail.com'), $disabled, 'autocomplete' => 'chrome-off', 'required' => true]); ?>
                        <span class="help-block text-center">
                            <?php
                            if (isset($errors['username']['_empty'])) {
                                echo $errors['username']['_empty'];
                            }
                            ?>
                        </span>
                    </div>
                </div>
                <div class="form-group row <?php
                if (isset($errors['rate_per_hour'])) {
                    echo 'has-error';
                }
                ?>">
                    <label class="control-label col-lg-3">Password<span class="required <?php echo $required_hide; ?>"> *</span></label>
                    <div class="col-lg-9">
                        <?php echo $this->Form->input('password', ['type' => 'password', 'label' => false, 'class' => 'form-control has-required', 'placeholder' => _('Your password'), $disabled, 'autocomplete' => 'new-password', 'required' => true]); ?>
                        <span class="help-block">
                            <?php
                            if (isset($errors['password']['_empty'])) {
                                echo $errors['password']['_empty'];
                            } else if (isset($errors['password']['integer'])) {
                                echo $errors['password']['integer'];
                            }
                            ?>
                        </span>
                    </div>
                </div>

                <div class="form-group row <?php
                if (isset($errors['smtp_port'])) {
                    echo 'has-error';
                }
                ?>">
                    <label class="control-label col-lg-3">SMTP Port<span class="required <?php echo $required_hide; ?>"> *</span></label>
                    <div class="col-lg-9">
                        <?php echo $this->Form->input('smtp_port', ['label' => false, 'type'=>'number', 'class' => 'form-control has-required', 'placeholder' => _('e.g, 587'), $disabled, 'required' => true]); ?>
                        <span class="help-block text-center">
                            <?php
                            if (isset($errors['smtp_port']['_empty'])) {
                                echo $errors['smtp_port']['_empty'];
                            }
                            ?>
                        </span>
                    </div>
                </div>
                <div class="form-group row <?php
                if (isset($errors['smtp_from'])) {
                    echo 'has-error';
                }
                ?>">
                    <label class="control-label col-lg-3">SMTP From<span class="required <?php echo $required_hide; ?>"> *</span></label>
                    <div class="col-lg-9">
                        <?php echo $this->Form->input('smtp_from', ['label' => false, 'placeholder' => __('e.g, from@example.com'), 'class' => 'form-control has-required', $disabled, 'required' => true]); ?>
                        <span class="help-block text-center">
                            <?php
                            if (isset($errors['smtp_from']['_empty'])) {
                                echo $errors['smtp_from']['_empty'];
                            }
                            ?>
                        </span>
                    </div>
                </div>
                <div class="form-group row <?php
                if (isset($errors['email_signature'])) {
                    echo 'has-error';
                }
                ?>">
                    <label class="control-label col-lg-3">Email Signature<span class="required <?php echo $required_hide; ?>"> *</span></label>
                    <div class="col-lg-9">
                        <?php echo $this->Form->textarea('email_signature', ['rows' => 2, 'label' => false, 'class' => 'form-control', 'placeholder' => __('e.g, My Team'), 'required' => true]); ?>
                        <span class="help-block text-center">
                            <?php
                            if (isset($errors['smtp_from']['_empty'])) {
                                echo $errors['smtp_from']['_empty'];
                            }
                            ?>
                        </span>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <img id="smtp-loader" style="display:none" src="<?php echo $this->Url->build('/images/ajax-loader.gif'); ?>"/>
                <button id="save-btn-smtp" type="submit" class="btn btn-default btn-orange-color">Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <?= $this->Form->end() ?>
    </div>
</div>

<script>
     function smptpsubmit(elem){
        event.preventDefault();
        var formData = getFormData($(elem));
        console.log(formData);
        formData['action'] = 'SMTP_SETUP';
        var loader = $('#smtp-loader');
        SMTP_URL = $('#smtp-form').attr('action');
        loader.show();
        $.ajax({
                type: "POST",
                data: formData,
                url: SMTP_URL,
                success: function (response) {
                    
                    loader.hide();
                    response = JSON.parse(response);
                    console.log(response);
                    if(response.status){
                        alert(response.message);
                        if(response.message_type == 1){
                            $('#smtp-setup').modal('hide');
                            is_smtp_active = 1;
                        }
                    }
                    
                },
                error:function () {
                    $('#smtp-setup').modal('hide');
                    loader.hide();
                }
            })
    }
    
    
    function getFormData($form){
        var unindexed_array = $form.serializeArray();
        var indexed_array = {};

        $.map(unindexed_array, function(n, i){
            indexed_array[n['name']] = n['value'];
        });

        return indexed_array;
}
</script>