{% extends 'tbudddy/tbudddy.html.twig' %}

{% block body %}
    <style type="text/css">
        #customer_size_width_out {
            height: 450px;
            width: 100%;
        }
        #customer_size_width > DIV > DIV {
            width: 100%;
        }
        #customer_size_width {
            text-align: left;
        }

        @media screen and (min-width: 1024px) {
            #customer_size_width > DIV > DIV {
                display: inline-block;
                width: 600px;
                height: 100%;
            }

            #customer_size_width {
                position: absolute;
                left: 0px;
                background-image: url('/assets/tbudddy/images/slider/customer_login.png');
                background-size: 50%;
            }

            .customer_content_form_login {
                display: flex;
                height: calc(100% - 50px);
                justify-content: center;
                align-items: center;
                text-align: left;
            }

            .form-group .modal_labels {
                text-align: left!important;
            }

        }
    </style>

    <div class="container" style="padding-top: 80px">
        <div id="customer_size_width_out">
            <div id="customer_size_width">
                <div class="container float-right" style="width: 100%; height: 100%; display: block; text-align: center; background-color: #fff">
                    <div class="d-inline-block">
                        <div class="form-group text-right pt-4 m-0" style="height: 50px">
                            Não tem conta? <a href="/join">Inscreva-se</a>
                        </div>
                        <div class="customer_content_form_login">
                            <div style="width: 100%; height: 400px">
                                <div class="alert alert-danger" role="alert" id="customer_login_msg" style="display: none"></div>
                                <form id="form_customer_login">
                                <div class="form-group text-left">
                                    <h1>Login</h1>
                                </div>
                                <div class="form-group">
                                    <label class="modal_labels">Email</label>
                                    <input type="email" id="customer_login_email" name="email" placeholder="{% trans %}customer.email{% endtrans %}" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label class="modal_labels">Palavra Passe</label>
                                    <input type="password" id="customer_login_password" name="password" placeholder="{% trans %}customer.password{% endtrans %}" class="form-control">
                                </div>
                                <div class="clearfix" id="modal_login_show_password">
                                    <a href="#" class="pull-right modal_labels ">Mostrar Palavra Passe</a>
                                </div>
                                <div class="form-group">
                                    <div class="spinner-border d-none float-right" role="status">
                                        <span class="sr-only">Carregando...</span>
                                    </div>
                                    <span class="spinner-label d-none float-right font-weight-bold m-1">Autenticando...</span>

                                    <input type="submit" value="Entrar" class="custom-button" style="width: 100%; padding: 10px; margin: 4px">
                                </div>
                                <div class="clearfix" id="modal_login_forget_password">
                                    <label class="pull-left modal_labels"><a href="#">Esqueceu a senha?</a></label>
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script language="javascript">
        $(document).ready(function(e) {
            var width = $(window).width();
            if (width > 1024) {
                var height = $(window).height();
                width = width - 10;

                $('#customer_size_width').width(width + 'px');
                $('#customer_size_width').height(height + 'px');
                $('#customer_size_width_out').height((height - 64) + 'px');

            }
        });

        $('#form_customer_login').submit(function(e) {
            e.preventDefault();

            var email = $('#customer_login_email').val();
            var password = $('#customer_login_password').val();

            $.ajax({
                url:'{{ path('tbudddy_customer_auth') }}',
                type: "POST",
                data: {email: email, password: password},
                success:function (data) {
                    console.log(data);
                    if (data.return == 'invalid-data') {
                        $('#customer_login_msg').html('{% trans %}customer.login_invalid_data{% endtrans %}');
                        $('#customer_login_msg').show();

                    } else if (data.return == 'success') {
                        window.open('/customer', '_self');
                    }
                }
            });
        });
    </script>
{% endblock %}