@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>
        .register-container {
            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);
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.863);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }

        .register-container .form-check {
            margin-bottom: 10px;
        }

        .register-container .form-check label {
            display: inline-block;
            margin-left: 5px;
        }

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

@section('title', '| registrar')
@section('conteudo')

    <div class="register-container">
        <h1>Registrar</h1>
        <form method="POST" action="{{ route('register') }}" class="form">
            @csrf
            {{-- firstName --}}
            <div class="campo-input">
                <label for="first_name"><strong>Primeiro nome: </strong><span class="text-danger">*</span></label>
                <div class="position-relative">
                    <i class="fa-solid fa-user-tie fa-lg"></i>
                    <input id="first_name" type="text" name="first_name" value="{{ old('first_name') }}" required
                        autofocus autocomplete="first_name" placeholder="Informe seu primeiro nome">
                </div>
            </div>

            <!-- Name -->
            <div class="campo-input">
                <label for="name"><strong>Nome completo: </strong> <span class="text-danger">*</span></label>
                <div class="position-relative">
                    <i class="fa-solid fa-user fa-lg"></i>
                    <input id="name" type="text" name="name" value="{{ old('name') }}" required autofocus
                        autocomplete="name" placeholder="Informe seu nome completo">
                </div>
            </div>

            <!-- Email Address -->
            <div class="campo-input">
                <label for="email"><strong>Email: </strong> <span class="text-danger">*</span></label>
                <div class="position-relative">
                    <i class="fa-solid fa-envelope fa-lg"></i>
                    <input id="email" type="email" name="email" value="{{ old('email') }}" required
                        autocomplete="username" placeholder="Informe seu email">
                </div>
            </div>

            <!-- Password -->
            <div class="campo-input">
                <label for="password"><strong>Senha: </strong><span class="text-danger">*</span></label>
                <div class="position-relative">
                    <i class="fa-solid fa-lock fa-lg"></i>
                    <input id="password" type="password" name="password" required autocomplete="new-password"
                        placeholder="Informe sua senha">
                </div>
            </div>

            <!-- Confirm Password -->
            <div class="campo-input">
                <label for="password_confirmation"><strong>Confirme a Senha: </strong><span class="text-danger">*</span></label>
                <div class="position-relative">
                    <i class="fa-solid fa-lock fa-lg"></i>
                    <input id="password_confirmation" type="password" name="password_confirmation" required
                        autocomplete="new-password" placeholder="Confirme sua senha">
                </div>
            </div>

            <div>
                <button type="submit" class="btn btn-success">
                    <i class="fa-regular fa-circle-check"></i> Cadastrar-se
                </button>
                <a class="link-dark" href="{{ route('login') }}">
                    <i class="fa-solid fa-sign-in-alt"></i> Login
                </a>
            </div>
        </form>
    </div>
@endsection