@extends('auth.template.layout')



@push('styles')
    <!-- Inclua a biblioteca Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <style>
        .conteiner-form {
            background-color: rgba(197, 211, 238, 0.041);
            border-radius: 5px;
            color: rgba(0, 0, 0, 0.863);
            width: 100%;
            max-width: 400px;
            padding: 20px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .campo-input {
            padding: 5px;
            position: relative;
        }

        .campo-input input {
            width: 100%;
            padding: 10px 10px 10px 40px;
            /* Ajuste o padding para dar espaço ao ícone */
            margin-top: 5px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: 1px solid rgba(0, 0, 0, 0.863);
        }

        .campo-input i {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(0, 0, 0, 0.5);
        }

        .campo-checkbox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        button {
            width: 100%;
            padding: 10px;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        a {
            text-align: center;
            text-decoration: none;
            display: block;
            margin-top: 10px;
            color: rgba(0, 0, 0, 0.863);
        }
    </style>
@endpush

@section('title', '| login')

@section('conteudo')
    <div class="conteiner-form">
        @if (session('status'))
            <div class="alert alert-danger mt-3 mb-3" role="alert">
                <i class="fa-solid fa-circle-exclamation"></i> {{ session('status') }}
            </div>
        @endif


        <form method="POST" action="{{ route('login') }}" class="form">
            @csrf
            <h1 class="title">Faça seu login</h1>
            <hr>
            <div class="barra-horizontal"></div>
            <div class="campo-input">
                <label for="email">Email</label>
                <div class="position-relative">
                    <i class="fa-solid fa-envelope"></i>
                    <input id="email" type="email" name="email" value="{{ old('email') }}" required
                        autocomplete="email" autofocus placeholder="Informe seu e-mail">
                </div>
            </div>
            <div class="campo-input">
                <label for="password">Senha</label>
                <div class="position-relative">
                    <i class="fa-solid fa-lock"></i>
                    <input id="password" type="password" name="password" required autocomplete="current-password"
                        placeholder="Informe sua senha">
                </div>
            </div>

            {{-- campo hidden necessario --}}
            <input type="hidden" name="redirect" value="{{ request('redirect') }}">

            <div class="campo-checkbox">
                <div>
                    <input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                    <label for="remember">
                        Lembrar-me
                    </label>
                </div>
            </div>
            <div>
                <button type="submit" class="btn btn-primary">
                    <i class="fa-solid fa-sign-in-alt"></i> Logar
                </button>

                @if (Route::has('password.request'))
                    <div class="d-md-flex justify-content-md-between gap-2">
                        <a class="link-dark" href="{{ route('password.request') }}">
                            <i class="fa-solid fa-key fa-sm"></i> Esqueci minha senha!
                        </a>

                        <a class="link-dark" href="{{ route('dashboard') }}">
                            <i class="fa-solid fa-home fa-sm"></i> Voltar
                        </a>
                    </div>
                    <div class="text-center">

                        <a class="link-dark" href="{{ route('register') }}">
                            <i class="fa-solid fa-user-plus fa-sm"></i> Cadastre-se
                        </a>
                    </div>
                @endif
            </div>
        </form>
    </div>
@endsection