@extends('layouts.app')
@section('titulo', 'Editar 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)">
            Editar: <span style="color:var(--blue)">{{ $usuario->usuario }}</span>
        </h4>
        <small style="color:var(--text-sub)">Deja la contraseña en blanco para no cambiarla</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.update', $usuario) }}">
        @csrf @method('PUT')

        <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', $usuario->nombre) }}" required>
        </div>

        <div class="mb-3">
            <label class="form-label" style="font-size:13px;font-weight:600">Número de usuario</label>
            <input type="text" class="form-control" value="{{ $usuario->usuario }}" disabled
                   style="background:var(--bg);color:var(--text-sub)">
            <div style="font-size:11px;color:var(--text-sub);margin-top:3px">El número de usuario no puede modificarse.</div>
        </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"      {{ $usuario->rol==='admin'      ? 'selected' : '' }}>Admin — acceso total (incluye Configuración)</option>
                <option value="operador"   {{ $usuario->rol==='operador'   ? 'selected' : '' }}>Operador — gestiona eventos, sorteos y participantes</option>
                <option value="observador" {{ $usuario->rol==='observador' ? 'selected' : '' }}>Observador — solo lectura</option>
            </select>
        </div>

        <div class="mb-3">
            <label class="form-label" style="font-size:13px;font-weight:600">Estado</label>
            <div class="d-flex align-items-center gap-2">
                <input type="checkbox" name="activo" id="chk_activo" value="1"
                       {{ $usuario->activo ? 'checked' : '' }} style="width:16px;height:16px;cursor:pointer">
                <label for="chk_activo" style="font-size:13px;margin:0;cursor:pointer">Usuario activo</label>
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label" style="font-size:13px;font-weight:600">
                Nueva contraseña
                <span style="font-weight:400;color:var(--text-sub)">(opcional)</span>
            </label>
            <input type="password" name="password" class="form-control" placeholder="Dejar en blanco para no cambiar">
        </div>

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

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

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