@extends('layouts.auth')

@section('content')
    <div class="login-image">
        <div class="welcome-text">
            <h2>Cadastro na Procuradoria da Mulher</h2>
            <p>Junte-se à nossa rede de proteção e apoio</p>
        </div>
    </div>

    <div class="login-form">
        <div class="logo-wrapper text-center">
            <img src="{{ asset('img/logo-promu.png') }}" alt="Logo Procuradoria da Mulher" class="logo">
        </div>

        <form method="POST" action="{{ route('register') }}">
            @csrf

            <!-- Name -->
            <div class="form-floating">
                <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name"
                    placeholder="Nome completo" value="{{ old('name') }}" required autofocus>
                <label for="name">Nome completo</label>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="input-icon" fill="#b56297"
                    viewBox="0 0 24 24" @error('name') style="display:none" @enderror>
                    <path
                        d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4Z" />
                </svg>
                @error('name')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Email -->
            <div class="form-floating">
                <input type="email" class="form-control @error('email') is-invalid @enderror" id="email"
                    name="email" placeholder="nome@exemplo.com" value="{{ old('email') }}" required>
                <label for="email">Email</label>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="input-icon" fill="#b56297"
                    viewBox="0 0 256 256" @error('email') style="display:none" @enderror>
                    <path
                        d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z" />
                </svg>
                @error('email')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Password -->
            <div class="form-floating">
                <input type="password" class="form-control @error('password') is-invalid @enderror" id="password"
                    name="password" placeholder="Senha" required>
                <label for="password">Senha</label>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="input-icon" fill="#b56297"
                    viewBox="0 0 256 256" @error('password') style="display:none" @enderror>
                    <path
                        d="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z" />
                </svg>
                @error('password')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Confirm Password -->
            <div class="form-floating">
                <input type="password" class="form-control" id="password_confirmation" name="password_confirmation"
                    placeholder="Confirme sua senha" required>
                <label for="password_confirmation">Confirme sua senha</label>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="input-icon" fill="#b56297"
                    viewBox="0 0 256 256">
                    <path
                        d="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z" />
                </svg>
            </div>

            <div class="d-flex justify-content-between align-items-center mt-4">
                <a href="{{ route('login') }}" class="forgot-password">
                    Já possui conta? Faça login
                </a>
            </div>

            <button type="submit" class="btn btn-login text-white">
                Registrar
            </button>
        </form>
    </div>
@endsection