@extends('layouts.header_auth', ['title' => 'Cadastre-se'])
@section('css')
<style type="text/css">
    .auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:url('/assets/images/unnamed333.jpg') center/cover no-repeat fixed;position:relative}
    .auth-page::before{content:"";position:fixed;inset:0;background:linear-gradient(180deg, rgba(8,10,20,.35), rgba(8,10,20,.45));pointer-events:none}
    .register-card{max-width:440px;width:100%;border:1px solid rgba(255,255,255,.22);border-radius:16px;box-shadow:0 14px 38px rgba(10,20,30,.32);position:relative;z-index:1;background:rgba(255,255,255,.12);backdrop-filter:blur(14px) saturate(150%);padding:1.25rem}
    @media (min-width: 768px){.register-card{padding:2rem}}
    .brand-logo{width:200px;margin:0 auto 8px auto;display:block}
    @media (max-width: 576px){.brand-logo{width:140px}}
    .auth-page .mb-3{margin-bottom:.7rem !important}
    .neo-eye{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15)}
    .register-card, .register-card label, .register-card h4, .register-card p{color:#0a0f1a}
    .register-card .form-control{color:#0a0f1a}
    .register-card .form-control::placeholder{color:#475569}
    .subtitle{color:#1f2937}
    .signup-prompt{color:#0a0f1a}
    .auth-link{background:linear-gradient(90deg,#7b5cff,#00d4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none;font-weight:700}
    .auth-link:hover{filter:brightness(1.1)}
    .neo-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;border-radius:10px;background:linear-gradient(90deg,#1f3c88,#0ea5e9);border:none;color:#fff;box-shadow:0 4px 16px rgba(14,165,233,.25)}
    .neo-btn:hover{filter:brightness(1.05)}
    .neo-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(31,60,136,.35),0 6px 18px rgba(14,165,233,.25)}
</style>
@endsection
@section('content')
<div class="auth-page">
    <div class="card register-card p-4 p-md-5">
        <img src="/logo.png" alt="logo" class="brand-logo">
        <h4 class="mb-1">Cadastre-se</h4>
        <p class="subtitle mb-3">Crie sua conta.</p>
        <form method="POST" action="{{ route('register') }}">
            @csrf
            <div class="mb-3">
                <label class="form-label">Nome</label>
                <input value="{{ old('name') }}" class="form-control @error('name') is-invalid @enderror" type="text" id="name" placeholder="Seu nome" required name="name">
                @error('name')
                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                @enderror
            </div>
            <div class="mb-3">
                <label class="form-label">Email</label>
                <input value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" type="email" id="email" placeholder="seu@email.com" required name="email">
                @error('email')
                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                @enderror
            </div>
            <div class="mb-3">
                <label class="form-label">Senha</label>
                <div class="input-group">
                    <input value="{{ old('password') }}" class="form-control @error('password') is-invalid @enderror" type="password" id="password" placeholder="Crie uma senha" required name="password">
                    <button class="btn neo-eye" type="button" id="togglePasswordReg" aria-label="Mostrar senha"><i class="ri-eye-line" id="eyeIconReg"></i></button>
                </div>
                @error('password')
                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                @enderror
            </div>
            <div class="mb-3">
                <label class="form-label">Confirme a Senha</label>
                <div class="input-group">
                    <input class="form-control @error('password_confirmation') is-invalid @enderror" type="password" id="password_confirmation" placeholder="Repita a senha" value="{{ old('password_confirmation') }}" required name="password_confirmation">
                    <button class="btn neo-eye" type="button" id="togglePasswordConfirmReg" aria-label="Mostrar senha"><i class="ri-eye-line" id="eyeIconConfirmReg"></i></button>
                </div>
                @error('password_confirmation')
                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                @enderror
            </div>
            <input type="hidden" name="captchaa" value="0">
            <button class="btn neo-btn w-100" type="submit">Cadastrar</button>
        </form>
        <div class="text-center mt-3">
            <p class="signup-prompt">Já tem conta? <a href="{{ route('login') }}" class="auth-link ms-1">Login</a></p>
        </div>
    </div>
</div>
@endsection
@section('js')
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function(){
    var pwd=document.getElementById('password');
    var btn=document.getElementById('togglePasswordReg');
    var icon=document.getElementById('eyeIconReg');
    if(btn&&pwd){btn.addEventListener('click',function(){var isText=pwd.type==='text';pwd.type=isText?'password':'text';if(icon){icon.className=isText?'ri-eye-line':'ri-eye-off-line'}});}
    var pwd2=document.getElementById('password_confirmation');
    var btn2=document.getElementById('togglePasswordConfirmReg');
    var icon2=document.getElementById('eyeIconConfirmReg');
    if(btn2&&pwd2){btn2.addEventListener('click',function(){var isText=pwd2.type==='text';pwd2.type=isText?'password':'text';if(icon2){icon2.className=isText?'ri-eye-line':'ri-eye-off-line'}});}
});
</script>
@endsection