@extends('layouts.app')

@section('content')
<div class="bg-body-light">
    <div class="content content-full">
        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
            <div class="flex-grow-1">
                <h1 class="h3 fw-bold mb-2">
                    <i class="fa fa-user-gear text-danger me-2"></i>Ajustes de Usuario
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Modificando la cuenta de <span class="nav-main-link-badge badge bg-danger-light text-danger">{{ $usuario->login }}</span>
                </h2>
            </div>
            <div class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3">
                <a href="{{ route('usuarios.show', $usuario->id) }}" class="btn btn-alt-secondary">
                    <i class="fa fa-arrow-left me-1"></i> Cancelar
                </a>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <div class="row justify-content-center">
        <div class="col-md-11 col-lg-10">
            
            {{-- Errores de Validación --}}
            @if($errors->any())
                <div class="alert alert-danger d-flex align-items-center mb-4" role="alert">
                    <i class="fa fa-fw fa-times-circle me-3"></i>
                    <div class="flex-grow-1">
                        <p class="mb-0 fw-semibold">Por favor, corrija los siguientes errores:</p>
                        <ul class="mb-0 fs-sm">
                            @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                        </ul>
                    </div>
                </div>
            @endif

            <form method="POST" action="{{ route('usuarios.update', $usuario->id) }}" id="formEdit">
                @csrf
                @method('PUT')
                
                <div class="block block-rounded block-bordered">
                    <div class="block-header block-header-default border-bottom">
                        <h3 class="block-title">Formulario de Edición</h3>
                        <div class="block-options">
                            <span class="nav-main-link-badge badge bg-dark px-2">ID: {{ $usuario->id }}</span>
                        </div>
                    </div>
                    
                    <div class="block-content">
                        <div class="row items-push">
                            {{-- Sección: Información Personal --}}
                            <div class="col-md-6">
                                <h4 class="fw-bold border-bottom pb-2 mb-3 fs-sm text-uppercase text-muted">
                                    <i class="fa fa-address-card me-1"></i> Datos Personales
                                </h4>
                                
                                <div class="mb-4">
                                    <label class="form-label fs-sm" for="nombre">
                                        Nombres <span class="nav-main-link-badge badge bg-danger-light text-danger">*</span>
                                    </label>
                                    <input type="text" name="nombre" id="nombre"
                                           class="form-control form-control-alt @error('nombre') is-invalid @enderror"
                                           value="{{ old('nombre', $usuario->nombre) }}" maxlength="100">
                                </div>

                                <div class="mb-4">
                                    <label class="form-label fs-sm" for="apellidos">
                                        Apellidos <span class="nav-main-link-badge badge bg-danger-light text-danger">*</span>
                                    </label>
                                    <input type="text" name="apellidos" id="apellidos"
                                           class="form-control form-control-alt @error('apellidos') is-invalid @enderror"
                                           value="{{ old('apellidos', $usuario->apellidos) }}" maxlength="100">
                                </div>

                                <div class="mb-4">
                                    <label class="form-label fs-sm" for="email">Correo Electrónico</label>
                                    <input type="email" name="email" id="email"
                                           class="form-control form-control-alt @error('email') is-invalid @enderror"
                                           value="{{ old('email', $usuario->email) }}" maxlength="100">
                                </div>

                                <div class="mb-4">
                                    <label class="form-label fs-sm">Tipo de Usuario</label>
                                    <div class="form-control form-control-alt bg-body-light fw-semibold">
                                        {{ $usuario->tipo_texto }}
                                    </div>
                                </div>
                            </div>

                            {{-- Sección: Credenciales y Seguridad --}}
                            <div class="col-md-6">
                                <h4 class="fw-bold border-bottom pb-2 mb-3 fs-sm text-uppercase text-muted">
                                    <i class="fa fa-shield-halved me-1"></i> Seguridad
                                </h4>

                                <div class="row mb-4">
                                    <div class="col-6">
                                        <label class="form-label fs-xs text-muted">LOGIN</label>
                                        <div class="fw-bold text-danger fs-lg">{{ $usuario->login }}</div>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label fs-xs text-muted">ESTADO</label>
                                        <div>
                                            <span class="nav-main-link-badge badge bg-info-light text-info">{{ $usuario->estado_texto }}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-4">
                                    <label class="form-label fs-sm text-danger fw-bold" for="pass_anterior">
                                        Contraseña Anterior <span class="nav-main-link-badge badge bg-danger-light text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-white"><i class="fa fa-lock-open text-muted"></i></span>
                                        <input type="password" name="pass_anterior" id="pass_anterior"
                                               class="form-control form-control-alt @error('pass_anterior') is-invalid @enderror"
                                               placeholder="Verifique su clave actual">
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fs-sm" for="pass1">
                                        Nueva Contraseña <span class="nav-main-link-badge badge bg-danger-light text-danger">*</span>
                                    </label>
                                    <input type="password" name="pass1" id="pass1"
                                           class="form-control form-control-alt @error('pass1') is-invalid @enderror"
                                           placeholder="Mínimo 8 caracteres">
                                </div>

                                <div class="mb-4">
                                    <label class="form-label fs-sm" for="pass2">
                                        Confirmar Nueva Contraseña <span class="nav-main-link-badge badge bg-danger-light text-danger">*</span>
                                    </label>
                                    <input type="password" name="pass2" id="pass2"
                                           class="form-control form-control-alt"
                                           placeholder="Repita la nueva clave" onblur="validarPass()">
                                    <div id="msgPass" class="invalid-feedback fw-bold mt-1" style="display:none"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="block-content block-content-full block-content-sm bg-body-light border-top text-end">
                        <button type="reset" class="btn btn-alt-secondary">
                            <i class="fa fa-sync-alt me-1"></i> Restaurar
                        </button>
                        <button type="submit" class="btn btn-danger px-4" onclick="return confirmarGuardar()">
                            <i class="fa fa-save me-1"></i> Guardar Cambios
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function validarPass() {
    const p1 = document.getElementById('pass1');
    const p2 = document.getElementById('pass2');
    const msg = document.getElementById('msgPass');

    if (p1.value === '' && p2.value === '') {
        p2.classList.remove('is-invalid');
        msg.style.display = 'none';
        return true;
    }
    
    if (p1.value.includes(' ') || p1.value.length < 4) {
        msg.textContent = 'La contraseña debe tener al menos 4 caracteres y sin espacios.';
        msg.style.display = 'block';
        p2.classList.add('is-invalid');
        return false;
    }

    if (p1.value !== p2.value) {
        msg.textContent = 'Las contraseñas nuevas no coinciden.';
        msg.style.display = 'block';
        p2.classList.add('is-invalid');
        return false;
    }

    msg.style.display = 'none';
    p2.classList.remove('is-invalid');
    p2.classList.add('is-valid');
    return true;
}

function confirmarGuardar() {
    if (!validarPass()) return false;
    return confirm('¿Desea actualizar los datos y credenciales del usuario?');
}
</script>
@endsection