@extends('layouts.app')
@section('title', 'Editar Usuario — Configuración')
@section('page-title', 'Editar Usuario')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('configuracion.usuarios.index') }}">Usuarios</a></li>
    <li class="breadcrumb-item active">Editar</li>
@endsection
@section('content')

@php $prefijo = strtok($usuario->email, '@'); @endphp

<form method="POST" action="{{ route('configuracion.usuarios.update', $usuario) }}">
@csrf @method('PUT')
<div class="row">
    {{-- Datos personales --}}
    <div class="col-md-8">
        <div class="card card-outline card-primary">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-user mr-1"></i> Datos del Usuario</h3></div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Nombre completo <span class="text-danger">*</span></label>
                            <input type="text" name="name" value="{{ old('name', $usuario->name) }}"
                                   class="form-control @error('name') is-invalid @enderror">
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="form-group">
                            <label>Correo electrónico <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="text" name="usuario" value="{{ old('usuario', $prefijo) }}"
                                       class="form-control @error('usuario') is-invalid @enderror"
                                       pattern="[a-z0-9._-]+"
                                       title="Solo minúsculas, números, puntos y guiones">
                                <div class="input-group-append">
                                    <span class="input-group-text text-muted">@sbrmaybell.pe</span>
                                </div>
                                @error('usuario')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>DNI</label>
                            <input type="text" name="dni" value="{{ old('dni', $usuario->dni) }}"
                                   class="form-control @error('dni') is-invalid @enderror"
                                   maxlength="8">
                            @error('dni')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Cargo <span class="text-danger">*</span></label>
                            <input type="text" name="cargo" value="{{ old('cargo', $usuario->cargo) }}"
                                   class="form-control @error('cargo') is-invalid @enderror">
                            @error('cargo')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Área <span class="text-danger">*</span></label>
                            <select name="area" class="form-control @error('area') is-invalid @enderror">
                                <option value="">— Seleccionar —</option>
                                @foreach($areas as $a)
                                <option value="{{ $a }}" {{ old('area', $usuario->area) === $a ? 'selected' : '' }}>{{ $a }}</option>
                                @endforeach
                            </select>
                            @error('area')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Cambio de contraseña opcional --}}
        <div class="card card-outline card-secondary">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-lock mr-1"></i> Cambiar Contraseña</h3>
                <span class="text-muted small ml-2">(dejar en blanco para mantener la actual)</span>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Nueva contraseña</label>
                            <input type="password" name="password"
                                   class="form-control @error('password') is-invalid @enderror"
                                   placeholder="Mínimo 8 caracteres">
                            @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Confirmar nueva contraseña</label>
                            <input type="password" name="password_confirmation"
                                   class="form-control" placeholder="Repetir contraseña">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Rol y estado --}}
    <div class="col-md-4">
        <div class="card card-outline card-success">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-shield-alt mr-1"></i> Acceso</h3></div>
            <div class="card-body">
                <div class="form-group">
                    <label>Rol del sistema <span class="text-danger">*</span></label>
                    <select name="role" class="form-control @error('role') is-invalid @enderror"
                            {{ $usuario->id === auth()->id() && $usuario->hasRole('super-admin') ? 'disabled' : '' }}>
                        @foreach($roles as $r)
                        <option value="{{ $r->name }}"
                            {{ old('role', $usuario->roles->first()?->name) === $r->name ? 'selected' : '' }}>
                            {{ $r->name }}
                        </option>
                        @endforeach
                    </select>
                    @if($usuario->id === auth()->id() && $usuario->hasRole('super-admin'))
                        <input type="hidden" name="role" value="super-admin">
                        <small class="text-muted">No puedes cambiar tu propio rol de super-admin.</small>
                    @endif
                    @error('role')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="form-group">
                    <label>Estado</label>
                    <div class="custom-control custom-switch mt-1">
                        <input type="checkbox" class="custom-control-input" id="activo" name="activo" value="1"
                               {{ old('activo', $usuario->activo ? '1' : '0') === '1' ? 'checked' : '' }}
                               {{ $usuario->id === auth()->id() ? 'disabled' : '' }}>
                        <label class="custom-control-label" for="activo">Usuario activo</label>
                    </div>
                    @if($usuario->id === auth()->id())
                        <input type="hidden" name="activo" value="1">
                        <small class="text-muted">No puedes desactivar tu propia cuenta.</small>
                    @endif
                </div>
            </div>
        </div>

        <div class="card bg-light border-0">
            <div class="card-body">
                <p class="small text-muted mb-1"><i class="fas fa-info-circle mr-1"></i> Creado:</p>
                <p class="small mb-1">{{ $usuario->created_at->format('d/m/Y H:i') }}</p>
                <p class="small text-muted mb-1">Último acceso:</p>
                <p class="small mb-0">{{ $usuario->updated_at->format('d/m/Y H:i') }}</p>
            </div>
        </div>
    </div>
</div>

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

@push('scripts')
<script>
document.querySelector('[name="usuario"]').addEventListener('input', function () {
    // preview is not shown in edit, but live-update email suffix visual
});
</script>
@endpush
@endsection