@extends('layouts.public.app')
<style>
    .button, .button:hover, .button-3d, .button-3d:hover {
        color: #fff !important;
    }

    .button.button-gray, .button-3d.button-gray {
        background-color: #e0e0e0;
        color: #111 !important;
    }

    .button-block {
        display: block;
        width: 100%;
        margin-top: 5px;
    }
    .button-md {
        font-size: 11px;
        padding: 12px 25px;
    }
    .button, .button:hover, .button-3d, .button-3d:hover {
        color: #fff !important;
    }
    .button, .button-3d, .button-o {
        display: inline-block;
        padding: 8px 16px;
        margin-bottom: 5px;
        font-size: 12px;
        font-weight: normal;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        font-family: 'Montserrat', sans-serif;
        text-transform: uppercase;
        text-shadow: none;
        font-weight: normal !important;
        letter-spacing: 1px;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    button, input, select, textarea {
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }
    button, html input[type=button], input[type=reset], input[type=submit] {
        -webkit-appearance: button;
        cursor: pointer;
    }
    button, select {
        text-transform: none;
    }
    button {
        overflow: visible;
    }
    button, input, optgroup, select, textarea {
        margin: 0;
        font: inherit;
        color: inherit;
    }
    .bg-login {
        background-color: #2bc37f !important;
    }
    .bg-gray3 {
        background-color: #e5e8ea !important;
    }
</style>
@section('content')

    <div class="p-4"></div>
    <div class="pb-5 pt-3 mt-5 bg-login"><!-- login section start -->
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-offset-4 col-md-4">
                    <div class="contact">
                        <div class="col-sm-12 col-xs-12 text-left mb20">
                            <div class="text-center">
                                <div class="p-1">
                                    <img src="{{asset('img/logos/logo-cemic-blanco.png')}}" alt="branding logo" width="150px"
                                         class="img-responsive center-block animated fadeIn visible my-5" data-animation="fadeIn" data-animation-delay="300">
                                </div>
                            </div>

                            <h1 class="font-size-normal color-light">
                                <strong class="text-white">Login</strong>
                            </h1>
                        </div>
                        <form method="POST" action="{{ route('login') }}">
                        @csrf

                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <input id="email" type="text" class="form-control"
                                       name="email" value="{{ old('email') }}" required
                                       autofocus placeholder="Usuario">
                                @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>

                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <input id="password" type="password" name="password" required
                                       class="form-control @error('password') is-invalid @enderror"
                                       placeholder="Contraseña" autocomplete="current-password">

                                @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>

                            <div class="row mb-0">
                                <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                    <button type="submit" class="button button-md button-block button-gray">
                                        INGRESAR
                                    </button>
                                </div>
                            </div>

                            @if (session('login_error'))
                                <div class="alert alert-danger" id="login_error" style="display: block;">
                                    {{ session('login_error') }}
                                </div>

                                <script>
                                    setTimeout(() => {
                                        $('#login_error').css('display', 'none');
                                    }, 3000);
                                </script>
                            @endif

                            @if (session('api_token_generated'))
                                <div class="alert alert-success" id="api_token_generated" style="display: block;">
                                    {{ session('api_token_generated') }}
                                </div>

                                <script>
                                    setTimeout(() => {
                                        $('#api_token_generated').css('display', 'none');
                                    }, 3000);
                                </script>
                            @endif

                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div><!-- login section end -->

    <div id="client" class="d-none d-md-block d-print-block bg-gray3 pt-5 pb-5"><!-- logos container start -->
        <div class="container">
            <div class="row">
                <div class="col-md-2 col-xs-1 justify-content-center">
                    <img src="{{asset('img/logos/footer-copy.gif')}}" width="118" height="87" alt="" class="img-responsive center-block animated fadeIn visible" data-animation="fadeIn" data-animation-delay="300">
                </div>
                <div class="col-md-2 col-xs-1">
                    <img src="{{asset('img/logos/footer-oaa.gif')}}" width="118" height="87" alt="" class="img-responsive center-block animated fadeIn visible" data-animation="fadeIn" data-animation-delay="300">
                </div>
                <div class="col-md-2 col-xs-1">
                    <img src="{{asset('img/logos/footer-tuv.gif')}}" width="118" height="87" alt="" class="img-responsive center-block animated fadeIn visible" data-animation="fadeIn" data-animation-delay="300">
                </div>
                <div class="col-md-2 col-xs-1">
                    <img src="{{asset('img/logos/footer-pdp.gif')}}" width="118" height="87" alt="" class="img-responsive center-block animated fadeIn visible" data-animation="fadeIn" data-animation-delay="300">
                </div>
                <div class="col-md-2 col-xs-1">
                    <img src="{{asset('img/logos/footer-cemic-instituto.gif')}}" width="118" height="87" alt="" class="img-responsive center-block animated fadeIn visible" data-animation="fadeIn" data-animation-delay="300">
                </div>
                <div class="col-md-2 col-xs-1">
                    <img src="{{asset('img/logos/footer-cemic.gif')}}" width="118" height="87" alt="" class="img-responsive center-block animated fadeIn visible" data-animation="fadeIn" data-animation-delay="300">
                </div>
            </div>
        </div>
    </div><!-- logos container end -->
@include('auth.footer-login')

@endsection