@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-plus text-danger me-2"></i>Nuevo Usuario
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Registre una nueva cuenta de acceso al sistema de <span class="nav-main-link-badge badge bg-danger-light text-danger">Seguridad</span>
                </h2>
            </div>
            <div class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3">
                <a href="{{ route('usuarios.index') }}" class="btn btn-alt-secondary">
                    <i class="fa fa-arrow-left me-1"></i> Volver al listado
                </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-exclamation-triangle me-3"></i>
                    <div class="flex-grow-1">
                        <p class="mb-0 fw-semibold">Atención: Revise los datos ingresados</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.store') }}" id="formNuevo">
                @csrf
                <div class="block block-rounded block-bordered shadow-sm">
                    <div class="block-header block-header-default border-bottom">
                        <h3 class="block-title">Adición de Nuevo Usuario</h3>
                        <div class="block-options">
                            <span class="nav-main-link-badge badge bg-info-light text-info">
                                <i class="fa fa-keyboard me-1"></i> Modo Ingreso
                            </span>
                        </div>
                    </div>

                    <div class="block-content">
                        <div class="row items-push">
                            {{-- Columna Izquierda: Perfil y Datos --}}
                            <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-id-card me-1"></i> Perfil y Datos
                                </h4>

                                <div class="mb-4">
                                    <label class="form-label fs-sm">
                                        Tipo de Usuario <span class="nav-main-link-badge badge bg-danger-light text-danger">*</span>
                                    </label>
                                    <div class="space-y-2 pt-1">
                                        @foreach($tipos as $val => $label)
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="tipo"
                                                       id="tipo{{ $val }}" value="{{ $val }}"
                                                       {{ old('tipo') == $val ? 'checked' : '' }}>
                                                <label class="form-check-label fs-sm" for="tipo{{ $val }}">
                                                    {{ $label }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                    @error('tipo') <div class="text-danger fs-xs mt-1">{{ $message }}</div> @enderror
                                </div>

                                <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') }}" placeholder="Ej. Juan Pedro">
                                </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') }}" placeholder="Ej. Pérez García">
                                </div>

                                <div class="mb-4">
                                    <label class="form-label fs-sm" for="email">Email Corporativo</label>
                                    <input type="email" name="email" id="email"
                                           class="form-control form-control-alt @error('email') is-invalid @enderror"
                                           value="{{ old('email') }}" placeholder="usuario@empresa.com">
                                </div>
                            </div>

                            {{-- Columna Derecha: Credenciales --}}
                            <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-key me-1"></i> Credenciales de Acceso
                                </h4>

                                <div class="mb-4">
                                    <label class="form-label fs-sm" for="login">
                                        Login / Usuario <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-user text-muted"></i></span>
                                        <input type="text" name="login" id="login"
                                               class="form-control form-control-alt @error('login') is-invalid @enderror"
                                               value="{{ old('login') }}" placeholder="Ej. jperez">
                                    </div>
                                </div>

                                <div class="mb-4">
                                    <label class="form-label fs-sm" for="pass1">
                                        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="Defina una clave segura">
                                </div>

                                <div class="mb-4">
                                    <label class="form-label fs-sm" for="pass2">
                                        Repita 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="Confirme la clave" onblur="validarPass()">
                                    <div id="msgPass" class="invalid-feedback fw-bold mt-1" style="display:none"></div>
                                </div>

                                <div class="alert alert-info py-2 fs-xs mb-0" role="alert">
                                    <i class="fa fa-info-circle me-1"></i>
                                    La cuenta se creará con estado <strong>Activo</strong> por defecto.
                                </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-eraser me-1"></i> Limpiar
                        </button>
                        <button type="submit" class="btn btn-danger px-4" onclick="return confirmarGuardar()">
                            <i class="fa fa-save me-1"></i> Guardar Usuario
                        </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 === '') {
        msg.textContent = 'Los campos de contraseña son obligatorios.';
        msg.style.display = 'block';
        p2.classList.add('is-invalid');
        return false;
    }
    if (p1.value !== p2.value) {
        msg.textContent = 'Las contraseñas deben coincidir exactamente.';
        msg.style.display = 'block';
        p2.classList.add('is-invalid');
        return false;
    }
    if (p1.value.includes(' ')) {
        msg.textContent = 'La contraseña no puede contener espacios en blanco.';
        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 dar de alta este nuevo usuario en el sistema?');
}
</script>
@endsection