<?php
/**
 * @var \Sm\MiniLogin\Block\Popup $block
 */

?>
<?php
if (!$block->isLoggedIn()): ?>
    <div id="cont-minilogin" class="login-overlay">
        <div class="login-register-popup">
            <div class="response-msg"></div>
            <div class="login-container">
                <form id="form-login" class="popup-login-form" method="POST" action="">
                    <div class="contain">
                        <h4><?php
                            echo __('Login') ?></h4>

                        <label><b><?php
                                echo __('Email Address') ?></b></label>
                        <input type="email" placeholder="<?php
                        //echo __('Enter Email') ?>" name="username" data-validate='{"required":true}'>

                        <label><b><?php
                                echo __('Password') ?></b></label>
                        <input id="pass_log_id" type="password" placeholder="<?php
                        //echo __('Enter Password') ?>" name="password" data-validate='{"required":true}'>
                        <span class="toggle-password"></span>
                        <div class="forget-password-link"><a href="#"><?= __('¿Contraseña olvidada?') ?></a></div>
                        <button class="action login primary" type="submit"><?php
                            echo __('Open Session') ?></button>
                        <div class="register-link"><a href="#"><?php
                                echo __('Create Acount') ?></a></div>
                    </div>
                    <!--					<div class="container" style="background-color:#f1f1f1">-->
                    <!--						<button title="--><?php
                    //echo __('Click to close') ?><!--" type="button" class="cancelbtn">--><?php
                    //echo __('Cancel') ?><!--</button>-->
                    <!--						<span class="psw">--><?php
                    //echo __('Forgot') ?><!-- <a href="--><?php
                    //echo $block->getUrl('customer/account/forgotpassword') ?><!--">--><?php
                    //echo __('password') ?><!--?</a></span>-->
                    <!--					</div>-->
                </form>
            </div>
            <div class="forget-password-container">
                <form id="minilogin_form_forgotpassword" class="popup-forget-password-form" method="POST" action=""
                      data-mage-init='{"validation": {}}'>
                    <div class="contain">
                        <h4><?php
                            echo __('Forgot Password') ?></h4>
                        <p>Introduce tu dirección de correo electrónico asociada con esta cuenta:</p>
                        <label><b><?php
                                echo __('Email Address') ?></b></label>
                        <input type="email" placeholder="<?php
                        //echo __('Enter Email') ?>" name="email" data-validate='{"required":true}'>
                        <?php
                        echo $block->getChildHtml('form.additional.info'); ?>
                        <div class="login-link"><a href="#"><?php
                                echo __('Cancel') ?></a></div>
                        <button class="action forgetpassword primary" type="submit"><?php
                            echo __('Send') ?></button>

                    </div>
                    <!--                    <div class="container" style="background-color:#f1f1f1">-->
                    <!--                        <button title="--><?php
                    //echo __('Click to close') ?><!--" type="button" class="cancelbtn">--><?php
                    //echo __('Cancel') ?><!--</button>-->
                    <!--                        <span class="psw">--><?php
                    //echo __('Forgot') ?><!-- <a href="--><?php
                    //echo $block->getUrl('customer/account/forgotpassword') ?><!--">--><?php
                    //echo __('password') ?><!--?</a></span>-->
                    <!--                    </div>-->
                </form>
                <!--<form class="form password forget"
                      action="<?php
                //$block->escapeUrl($block->getUrl('*/*/forgotpasswordpost')) ?>"
                      method="post"
                      id="form-validate"
                      data-mage-init='{"validation":{}}'>
                    <fieldset class="fieldset" data-hasrequired="<?php
                //$block->escapeHtmlAttr(__('* Required Fields')) ?>">
                        <div class="field note"><?php
                //$block->escapeHtml(__('Please enter your email address below to receive a password reset link.')) ?></div>
                        <div class="field email required">
                            <label for="email_address" class="label"><span><?php
                //$block->escapeHtml(__('Email')) ?></span></label>
                            <div class="control">
                                <input type="email" name="email" alt="email" id="email_address" class="input-text" value="<?php
                //$block->escapeHtmlAttr($block->getEmailValue()) ?>" data-mage-init='{"mage/trim-input":{}}' data-validate="{required:true, 'validate-email':true}">
                            </div>
                        </div>
                        <?php
                //$block->getChildHtml('form_additional_info') ?>
                    </fieldset>
                    <div class="actions-toolbar">
                        <div class="primary">
                            <button type="submit" class="action submit primary" id="send2" <?php
                //if ($block->getButtonLockManager()->isDisabled('customer_forgot_password_form_submit')): ?> disabled="disabled" <?php
                //endif; ?>><span><?php
                //$block->escapeHtml(__('Reset My Password')) ?></span></button>
                        </div>
                        <div class="secondary">
                            <a class="action back" href="<?php
                //$block->escapeUrl($block->getLoginUrl()) ?>"><span><?php
                //$block->escapeHtml(__('Go back')) ?></span></a>
                        </div>
                    </div>
                </form> -->
            </div>
            <div class="register-container">
                <form id="minilogin_form_register" class="popup-register-form" method="POST" action="">
                    <div class="contain">
                        <h4><?php
                            echo __('Create Acount') ?></h4>

                        <label><b><?php
                                echo __('First Name') ?></b></label>
                        <input type="text" placeholder="<?php
                        //echo __('Enter First Name') ?>" name="firstname" data-validate='{"required":true}'>

                        <label><b><?php
                                echo __('Last Name') ?></b></label>
                        <input type="text" placeholder="<?php
                        //echo __('Enter Last Name') ?>" name="lastname" data-validate='{"required":true}'>

                        <label><b><?php
                                echo __('Email') ?></b></label>
                        <input type="email" placeholder="<?php
                        //echo __('Enter Email') ?>" name="email" data-validate='{"required":true}'>

                        <label><b><?php
                                echo __('Password') ?></b></label>
                        <input id="pass_log_id1" type="password" placeholder="<?php
                        //echo __('Enter Password') ?>" name="password" data-validate='{"required":true}'>
                        <span class="toggle-password1"></span>
                        <label><b><?php
                                echo __('Confirm Password') ?></b></label>
                        <input id="pass_log_id2" type="password" placeholder="<?php
                        //echo __('Confirm Password') ?>" name="password_confirmation"
                               data-validate='{"required":true}'>
                        <span class="toggle-password2"></span>
                        <?php
                        if ($block->isNewsletterEnabled()): ?>
                            <div class="field choice newsletter">
                                <input type="checkbox" name="is_subscribed" title="<?php
                                /* @escapeNotVerified */
                                echo __('Sign Up for Newsletter') ?>" value="1" id="is_subscribed" class="checkbox">
                                <label for="is_subscribed" class="label"><span><?php
                                        /* @escapeNotVerified */
                                        echo __('Sign Up for Newsletter') ?></span></label>
                            </div>
                        <?php
                        endif ?>
                        <?php
                        echo $block->getChildHtml('form.additional.info.register'); ?>

                        <div class="login-link"><a href="#"><?php
                                echo __('Cancel') ?></a></div>

                        <button class="action login primary" type="submit"><?php
                            echo __('Sign Up') ?></button>

                        <!--						<div class="login-link"><span>--><?php
                        ////echo __('Already have an Account?') ?><!--</span>&nbsp;<a href="#">--><?php
                        //echo __('Login') ?><!--</a></div>-->
                    </div>

                    <!--					<div class="container" style="background-color:#f1f1f1">-->
                    <!--						<button title="--><?php
                    //echo __('Click to close') ?><!--" type="button" class="cancelbtn">Cancel</button>-->
                    <!--					</div>-->
                </form>
            </div>

        </div>
    </div>
    <script type="text/x-magento-init">
        {
            "#minilogin_form_forgotpassword": {
                "validation": {}
            },

            "#minilogin_form_register": {
                "validation": {}
            }
        }
    </script>

    <script type="text/javascript">

        require(['jquery'], function ($) {
            let headerElem = $('.mini-login');
            let loginLink = headerElem.find('.authorization-link').children('a');
            let registerLink = headerElem.find('.authorization-link').next().children('a');
            let loginOverlay = $('.login-overlay');
            let loginBox = $('.login-overlay').find('.popup-login-form');
            let forgetPassword = $('.login-overlay').find('.popup-forget-password-form');
            let registerBox = $('.login-overlay').find('.popup-register-form');
            let loginButton = $('.popup-login-form').find('button[type=submit]');
            let forgetpasswordButton = $('.popup-forget-password-form').find('button[type=submit]');
            let registerButton = $('.popup-register-form').find('button[type=submit]');
            let loginUrl = "<?php echo $block->getUrl('minilogin/ajax/login') ?>";
            let forgetpasswordUrl = "<?php /* @escapeNotVerified */ echo $block->getFormAction(); ?>";
            let registerUrl = "<?php echo $block->getUrl('minilogin/ajax/register') ?>";

            // Texts
            let loginText = "<?php echo __('Login') ?>";
            let loggingText = "<?php echo __('Login') ?>";

            let forgetpasswordText = "<?php echo __('Forget Password') ?>";
            let forgetpasswordngText = "<?php echo __('Forget Password') ?>";

            let registerText = "<?php echo __('Sign Up') ?>";
            let registeringText = "<?php echo __('Sign Up') ?>";

            loginLink.click(function (e) {
                e.preventDefault(e);
                loginOverlay.show();
                loginBox.show();
                registerBox.hide();
                forgetPassword.hide();
            });

            /*registerLink.click(function(e){
                e.preventDefault(e);
                loginOverlay.show();
                registerBox.show();
            });*/

            $(document).on("click", function (event) {
                // If the target is not the container or a child of the container, then process
                // the click event for outside of the container.
                if (($(event.target).closest(".authorization-link").length === 0) && ($(event.target).closest("#cont-minilogin").length === 0)) {
                    loginOverlay.hide();
                    loginBox.hide();
                    registerBox.hide();
                    forgetPassword.hide();
                }

            });
            $("body").on('click', '.toggle-password', function () {
                $(this).toggleClass("fa-eye-slash");
                let input = $("#pass_log_id");
                if (input.attr("type") === "password") {
                    input.attr("type", "text");
                } else {
                    input.attr("type", "password");
                }

            });
            $("body").on('click', '.toggle-password1', function () {
                $(this).toggleClass("fa-eye-slash");
                let input = $("#pass_log_id1");
                if (input.attr("type") === "password") {
                    input.attr("type", "text");
                } else {
                    input.attr("type", "password");
                }

            });
            $("body").on('click', '.toggle-password2', function () {
                $(this).toggleClass("fa-eye-slash");
                let input = $("#pass_log_id2");
                if (input.attr("type") === "password") {
                    input.attr("type", "text");
                } else {
                    input.attr("type", "password");
                }

            });
            $('.logged-in').click(function () {
                window.location = "<?php echo $block->getUrl('customer/account/'); ?>"
            });

            $("body").on('click', '.logged-in', function () {


            });


            $('.cancelbtn').click(function () {
                loginOverlay.hide();
                loginBox.hide();
                registerBox.hide();
                forgetPassword.hide();
            });

            $('.login-link a').click(function (e) {


                e.preventDefault(e);
                loginBox.show();
                registerBox.hide();
                forgetPassword.hide();
            });

            $('.forget-password-link a').click(function (e) {
                e.preventDefault(e);
                loginBox.hide();
                registerBox.hide();
                forgetPassword.show();
            });

            $('.register-link a').click(function (e) {
                e.preventDefault(e);
                loginBox.hide();
                forgetPassword.hide();
                registerBox.show();
            });

            $('.popup-login-form').submit(function () {
                //loginButton.text(loggingText);
                //loginButton.attr("disabled", "disabled");
                let formData = getFormData($(this));
                $.ajax({
                    type: "POST",
                    url: loginUrl,
                    data: formData,
                    dataType: "json",
                    success: function (data) {
                        showResponse(data);
                        if (data.errors) {
                            //loginButton.text(loginText);
                            //loginButton.removeAttr('disabled');
                        } else {
                            location.reload();
                        }
                    }
                });
                return false;
            });

            $('.popup-forget-password-form').submit(function () {
                let formData = getFormData($(this));

                if ($('.popup-forget-password-form').valid()) {
                    $.ajax({
                        type: "POST",
                        url: forgetpasswordUrl,
                        data: formData,
                        dataType: "json",
                        success: function (data) {
                            showResponse(data);
                            console.log(data);
                            if (data.errors) {
                                //forgetpasswordButton.text(forgetpasswordText);
                                //forgetpasswordButton.removeAttr('disabled');
                            } else {
                                location.reload();
                            }
                        }
                    });
                }

                return false;
            });

            $('.popup-register-form').submit(function () {
                //registerButton.text(registeringText);
                //registerButton.attr("disabled", "disabled");
                let formData = getFormData($(this));
                $.ajax({
                    type: "POST",
                    url: registerUrl,
                    data: formData,
                    dataType: "json",
                    success: function (data) {
                        showResponse(data);
                        console.log(data);
                        if (data.errors) {
                            //registerButton.text(registerText);
                            //registerButton.removeAttr('disabled');
                        } else {
                            location.reload();
                        }
                    }
                });
                return false;
            });

            function getFormData(formElem) {
                let unindexed_array = formElem.serializeArray();
                let indexed_array = {};

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

                return indexed_array;
            }

            function showResponse(data) {
                if (data.errors) {
                    $('.response-msg').html("<div class='error'>" + data.message + "</div>");
                } else {
                    $('.response-msg').html("<div class='success'>" + data.message + "</div>");
                }
                setTimeout(function () {
                    $('.response-msg').html(null);
                }, 5000);
            }
        });
    </script>
<?php
endif; ?>
