@extends('auth.master')

@section('content')
    <div class="container sm:px-10">
        <div class="block xl:grid grid-cols-2 gap-4">
            <!-- BEGIN: Login Info -->
            <div class="hidden xl:flex flex-col min-h-screen">
                <div class="my-auto">
                    <img
                        class="-intro-x w-1/2 -mt-16"
                        src="{{ asset('dist/images/'.config('app.name_key').'/logo--white.svg') }}">
                </div>
            </div>
            <!-- END: Login Info -->
            <!-- BEGIN: Login Form -->
            <div class="h-screen xl:h-auto flex py-5 xl:py-0 my-10 xl:my-0 mt-0 pt-0">
                <form id="login-form" class="my-auto mx-auto xl:ml-20 bg-white xl:bg-transparent px-5 sm:px-8 py-8 xl:p-0 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto form-validator" method="POST" action="{{ route('login') }}">
                    @csrf
                    <h2 class="hidden xl:block intro---x font-bold text-2xl xl:text-3xl text-center xl:text-left">
                        {{__('auth.login')}}
                    </h2>
                    <img class="mx-auto block xl:hidden" src="{{ asset('dist/images/'.Config('app.name_key').'/logo--color.svg') }}" width="160">
                    <div class="intro---x mt-8">
                        <input type="text"
                               id="input-rut"
                               name="rut"
                               class="intro---x login__input input input--lg border border-gray-300 block"
                               placeholder="{{__('auth.rut') }}"
                               autofocus
                               maxlength="12"
                               onkeyup="formatCliente(this)"
                               value="{{ old('rut') }}"
                               data-rule="required|minlength-11">

                        <div id="error-rut" class="input__error w-5/6 text-theme-6 mt-2"></div>
                    </div>
                    <div class="intro---x mt-8">
                        <input name="password" type="password" id="input-password" class="intro---x login__input input input--lg border border-gray-300 block mt-4" placeholder="{{__('auth.password') }}" required data-rule="minlength-4|required">
                        <div id="error-password" class="input__error w-5/6 text-theme-6 mt-2"></div>
                    </div>
                    <div class="intro---x flex text-gray-700 text-xs sm:text-sm mt-4">
                        <div class="flex items-center mr-auto">
                            <input type="checkbox" id="input-remember-me" class="input border mr-2">
                            <label class="cursor-pointer select-none" for="input-remember-me">{{__('auth.remember_me') }}</label>
                        </div>
                        @if (Route::has('password.request'))
                            <a href="{{ route('password.request') }}">
                                {{ __('auth.forgot_password') }}
                            </a>
                        @endif
                    </div>
                    <div class="intro---x mt-5 xl:mt-8 xl:flex justify-center xl:justify-start">
                        <button id="btn-login" type="submit" class="button button--lg w-full xl:w-32 text-white bg-theme-1 xl:mr-3">
                            {{ __('auth.login') }}
                        </button>
                    </div>
                </form>
            </div>
            <!-- END: Login Form -->
        </div>
    </div>
@endsection

@section('script')
    @parent
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function() {

            var f = document.querySelector('.form-validator');

            if(f) {
                var submitForm = function(err,res) {
                    if (res) {
                        login()
                    }
                    return false;
                }

                f.setAttribute('novalidate', true);
                var options = {
                    rules: { rut: function (value) { return checkRut(value) } },
                    messages: {
                        es: { rut: { incorrect: 'RUT incorrecto' } },
                        en: { rut: { incorrect: 'RUT incorrect' } }
                    },
                    locale: @json(App::getLocale())
                };
                new Validator(f,function (err, res) {
                    submitForm(err, res);
                }, options);
            }
        });

        async function login() {
            // Reset state
            $('#login-form').find('.input').removeClass('border-theme-6')
            $('#login-form').find('.input__error').html('')

            // Post form
            let rut = $('#input-rut').val()
            let password = $('#input-password').val()
            let rememberMe = $('#input-remember-me').prop('checked')

            // Loading state
            $('#btn-login').html('<i data-loading-icon="oval" data-color="white" class="w-5 h-5 mx-auto"></i>').svgLoader()
            await helper.delay(1500)

            axios.post(@json(route('login')), {
                rut, password, rememberMe
            }).then(res => {
                window.location.replace(@json(url('/')))
            }).catch(err => {
                $('#btn-login').html('Login')
                if (err.response.data.message) {
                    $(`#error-rut`).html(err.response.data.message)
                } else {
                    for (const [key, val] of Object.entries(err.response.data.errors)) {
                        $(`#input-${key}`).addClass('border-theme-6')
                        $(`#error-${key}`).html(val)
                    }
                }
            })
        }
    </script>
@endsection