@extends('layouts.app')
@section('titulo', 'Nuevo Usuario')

@section('contenido')
<div class="d-flex align-items-center mb-4">
    <a href="{{ route('usuarios.index') }}" class="btn btn-secondary btn-sm me-3">← Volver</a>
    <div>
        <h4 class="mb-0" style="font-weight:700;color:var(--text)">Nuevo Usuario</h4>
        <small style="color:var(--text-sub)">El correo será usado para ingresar a la plataforma</small>
    </div>
</div>

<div class="row justify-content-center">
<div class="col-md-6 col-lg-5">
<div class="card">
<div class="card-body" style="padding:1.75rem">

    @if($errors->any())
        <div style="background:#fef2f2;border-left:3px solid #dc2626;border-radius:7px;padding:11px 16px;margin-bottom:1.25rem">
            @foreach($errors->all() as $e)<div style="color:#dc2626;font-size:13px">• {{ $e }}</div>@endforeach
        </div>
    @endif

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

        <div class="mb-3">
            <label class="form-label" style="font-size:13px;font-weight:600">Nombre completo</label>
            <input type="text" name="nombre" class="form-control" value="{{ old('nombre') }}" required placeholder="Ej: María García López">
        </div>

        <div class="mb-3">
            <label class="form-label" style="font-size:13px;font-weight:600">Correo electrónico</label>
            <input type="email" name="email" class="form-control" value="{{ old('email') }}" required placeholder="Ej: maria.garcia@lafayette.com">
        </div>

        <div class="mb-3">
            <label class="form-label" style="font-size:13px;font-weight:600">Rol</label>
            <select name="rol" class="form-control" required>
                <option value="admin"      {{ old('rol')==='admin'      ? 'selected' : '' }}>Admin — acceso total (incluye Configuración)</option>
                <option value="operador"   {{ old('rol')==='operador'   ? 'selected' : '' }}>Operador — gestiona eventos, sorteos y participantes</option>
                <option value="observador" {{ old('rol')==='observador' ? 'selected' : '' }}>Observador — solo lectura</option>
            </select>
        </div>

        <div class="mb-3">
            <label class="form-label" style="font-size:13px;font-weight:600">Contraseña</label>
            <input type="password" name="password" class="form-control" required placeholder="Mínimo 4 caracteres">
        </div>

        <div class="mb-4">
            <label class="form-label" style="font-size:13px;font-weight:600">Confirmar contraseña</label>
            <input type="password" name="password_confirmation" class="form-control" required>
        </div>

        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">Crear Usuario</button>
            <a href="{{ route('usuarios.index') }}" class="btn btn-secondary">Cancelar</a>
        </div>
    </form>

</div>
</div>
</div>
</div>
@endsection