@extends('layouts.app')

@section('content')
    <style>
        .coloRojoM {
            background-color: #ba1010 !important;
            text-align: center;
        }

        .navbar {
            display: none;
        }

        .container {
            text-align: center;
        }

        body {
            background-color: #fff !important;
            min-height: 100vh;
        }

        .x-flex {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-med {
            background-color: #00887d;
            color: white;
            font-weight: 500;
        }

        .btn-med:hover {
            background-color: #003b36;
            color: white;
            font-weight: 500;
        }


        body {
            background: #00665e;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #00c0b0, #00665e);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #00c0b0, #00665e);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

        }
    </style>
    <section class="ftco-section x-flex">
        <div class="container mt-5">
            <div class="row row justify-content-center mt-5">
                <div class="col-md-6 col-lg-5 bg-white mt-5">
                    <div class="login-wrap p-4 p-md-5">
                        <div class="icon d-flex align-items-center justify-content-center">
                            <img src="{{ asset('images/logo.png') }}" alt="">
                        </div>
                        <form class="login-form mt-5" method="POST" action="{{ route('login') }}">
                            @csrf
                            <div class="form-group">
                                <input id="email" type="email"
                                    class="form-control @error('email') is-invalid @enderror" name="email"
                                    value="{{ old('email') }}" required autocomplete="email" placeholder="Usuario"
                                    autofocus>

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group d-flex">
                                <input id="password" type="password"
                                    class="form-control @error('password') is-invalid @enderror" name="password" required
                                    autocomplete="current-password" placeholder="Contraseña">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group d-md-flex">
                                <div class="w-50">
                                    <label class="checkbox-wrap checkbox-primary">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="remember" id="remember"
                                                {{ old('remember') ? 'checked' : '' }}>

                                            <label class="form-check-label" for="remember">
                                                {{ __('Recordarme') }}
                                            </label>
                                        </div>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-med w-50">
                                    {{ __('Acceder') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection