<html>

<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
    <style>
        body {
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }

        main {
            flex: 1 0 auto;
        }

        body {
            background: #fff;
        }

        .input-field input[type=date]:focus+label,
        .input-field input[type=text]:focus+label,
        .input-field input[type=email]:focus+label,
        .input-field input[type=password]:focus+label {
            color: #e91e63;
        }

        .input-field input[type=date]:focus,
        .input-field input[type=text]:focus,
        .input-field input[type=email]:focus,
        .input-field input[type=password]:focus {
            border-bottom: 2px solid #e91e63;
            box-shadow: none;
        }
    </style>
</head>

<body>
    <div class="section"></div>
    <main>
        <center>

            <div class="section"></div>

            <h5 class="indigo-text">Inicia sesión</h5>
            <div class="section"></div>

            <div class="container">
                <div class="z-depth-1 grey lighten-4 row"
                    style="display: inline-block; padding: 32px 48px 0px 48px; border: 1px solid #EEE;">

                    <div class="col s12">
                        <div class='row'>
                            <div class='col s12'>
                                <h3 class="indigo-text">TeleVox</h3>
                            </div>
                        </div>

                        <div class='row'>
                            <div class='input-field col s12'>
                                <input class='validate' type="text" id='user' />
                                <label for='user'>Escibe tu usuario</label>
                            </div>
                        </div>

                        <div class='row'>
                            <div class='input-field col s12'>
                                <input class='validate' type='password' name='password' id='password' />
                                <label for='password'>Escribe tu contraseña</label>
                            </div>

                        </div>

                        <br />
                        <center>
                            <div class='row'>
                                <button onclick="entrar()" name='btn_login'
                                    class='col s12 btn btn-large waves-effect indigo'>Login</button>
                            </div>
                        </center>
                    </div>
                </div>
            </div>

        </center>

        <div class="section"></div>
        <div class="section"></div>
    </main>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
    </script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

    <script type="text/javascript">
        function entrar() {
            $.post("login/entra", {
                usuario: document.getElementById("user").value,
                password: document.getElementById("password").value,
                _token: "{{ csrf_token() }}"
            }).catch(data => {

                console.log(data);

            }).done((data) => {
                if (data.Estado == "ok") {
                    window.location.replace("{{ config('app.url') }}/Grabaciones");
                }
                console.log(data)
            }).fail(data => {
                console.log(data)
            }).always(data => {
                console.log(data)
            });

        }
    </script>
</body>

</html>
