@extends('layout.template')
@section('title', 'SICCAP ICATEP')
@section('content')
    <div class="content-body">
        <!-- row -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12 ">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Editar Usuario</h4>
                            <div class="row align-items-end">
                                <a href="{{ route('perfilCreate') }}" class="btn btn-primary w-100">Agregar Perfil</a>
                            </div>
                            <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                                <ol class="breadcrumb">
                                    <a href="{{ url('usuarios') }}" class="btn btn-rounded btn-dark back-fixed"
                                        aria-label="Regresar">
                                        <span class="btn-icon-start text-dark"><i class="fa fa-arrow-left"></i></span>
                                        Regresar
                                    </a>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- se creo el perfil exitosamente -->
                @if (session('success'))
                    <div class="alert alert-primary alert-dismissible fade show" id="alert-container">
                        <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"
                            stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="9 11 12 14 22 4"></polyline>
                            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                        </svg>
                        <strong id="alert-confirmacion"> {{ session('success') }}</strong>
                    </div>
                @endif
                <div class="col-xl-12 col-xxl-12 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">Datos del Usuario</h5>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('usuarioUpdate') }}" method="post" id="updateUserForm">
                                @csrf
                                <input type="hidden" name="id" value="{{ $usuario->usu_id }}">
                                <div class="row">
                                    <div class="col-lg-3 mb-3 col-md-6">
                                        <label class="form-label">Nombre(s)</label>
                                        <input type="text" name="nombre_psc" class="form-control" value="{{ old('nombre_psc', $usuario->usu_nombre ?? '') }}" placeholder="" id="nombre_psc" onkeyup="this.value = this.value.toUpperCase()" >
                                        @error('nombre_psc')<div class="text-danger">{{ $message }}</div> @enderror
                                    </div>
                                    <div class="col-lg-2 mb-3 col-md-6">
                                        <label class="form-label">Apellido Paterno</label>
                                        <input type="text" name="ape_paterno" class="form-control" value="{{ old('ape_paterno', $usuario->usu_apellido_paterno ?? '') }}" placeholder="" id="ape_paterno" onkeyup="this.value = this.value.toUpperCase()" >
                                        @error('ape_paterno')<div class="text-danger">{{ $message }}</div> @enderror
                                    </div>
                                    <div class="col-lg-2 mb-3 col-md-6">
                                        <label class="form-label">Apellido Materno</label>
                                        <input type="text" name="ape_materno" class="form-control" value="{{ old('ape_materno', $usuario->usu_apellido_materno ?? '') }}" placeholder="" id="ape_materno" onkeyup="this.value = this.value.toUpperCase()" >
                                        @error('ape_materno')<div class="text-danger">{{ $message }}</div> @enderror
                                    </div>
                                    <!-- Unidades: select -->
                                    <div class="col-lg-3 mb-3 col-md-6">
                                        <label class="form-label">Unidad</label>
                                        <select class="form-control" id="unidad" name="unidad">
                                            <option value="">Seleccione una unidad</option>
                                            @foreach ($unidades as $unidad)
                                                <option value="{{ $unidad->uni_id }}" {{ old('unidad') == $unidad->uni_id ? 'selected' : ($usuario->usu_unidad_id == $unidad->uni_id ? 'selected' : '') }}>{{ $unidad->uni_nombre }}</option>
                                            @endforeach
                                        </select>
                                        @error('unidad')<div class="text-danger">{{ $message }}</div> @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-3 mb-3 col-md-6">
                                        <label class="form-label">Usuario</label>
                                        <input type="text" name="usuario" class="form-control" value="{{ old('usuario', $usuario->usu_usuario ?? '') }}" placeholder="" id="usuario">
                                        @error('usuario')<div class="text-danger">{{ $message }}</div> @enderror
                                    </div>
                                    <div class="col-lg-3 mb-3 col-md-6">
                                        <label class="form-label" for="password">Password</label>
                                        <div class="input-group pass-group">
                                            <input id="password" name="password" type="password" class="form-control pass-input" placeholder="Dejar en blanco para no cambiar">
                                            <span class="input-group-text pass-handle"><i class="fa fa-eye-slash"></i><i class="fa fa-eye"></i></span>
                                        </div>
                                        @error('password')<div class="text-danger">{{ $message }}</div> @enderror
                                    </div>
                                    <div class="col-lg-2 mb-3 col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">Perfil</label>
                                            <select class="form-control" id="perfil" name="perfil">
                                                <option value="">Seleccione un perfil</option>
                                                @foreach ($perfiles as $perfil)
                                                    <option value="{{ $perfil->perf_id }}" {{ old('perfil') == $perfil->perf_id ? 'selected' : ($usuario->usu_perfil_id == $perfil->perf_id ? 'selected' : '') }}>{{ $perfil->perf_nombre }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @error('perfil')<div class="text-danger">{{ $message }}</div>@enderror
                                    </div>
                                    <!-- boton para guardar -->
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label class="form-label">&nbsp;</label>
                                            <button type="submit" class="btn btn-primary w-100">Actualizar Usuario</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function convertToUpperCase(selector) {
            document.querySelectorAll(selector).forEach(input => {
                input.addEventListener('input', function(event) {
                    const cursorPos = this.selectionStart; // Guarda la posición del cursor
                    this.value = this.value.toUpperCase(); // Convierte el texto a mayúsculas
                    this.setSelectionRange(cursorPos, cursorPos); // Restaura la posición del cursor
                });
            });
        }

        $(document).ready(function() {
            convertToUpperCase('#nombre_psc, #ape_paterno, #ape_materno');
        });
    </script>
@endpush