<div> <x-vuexy-admin::offcanvas.basic :id="$offcanvasId" :tag-name="$tagName"> <x-vuexy-admin::form :id="$formId" :mode="$mode" wireSubmit="onSubmit"> <x-slot name="actions"> <x-vuexy-admin::button.offcanvas-buttons :mode="$mode" :tagName="$tagName" /> </x-slot> {{-- Selección de Sucursal --}} <x-vuexy-admin::form.select :uid="$uniqueId" model="store_id" label="Sucursal" placeholder="Selecciona una sucursal" :options="$store_options" /> <x-vuexy-admin::form.select :uid="$uniqueId" model="work_center_id" label="Área de trabajo" placeholder="Selecciona el área de trabajo" :options="$work_center_options" /> {{-- Identificación y Configuración --}} <div class="row"> <x-vuexy-admin::form.select :uid="$uniqueId" model="manager_id" label="Gerente" placeholder="Selecciona el gerente" :options="$manager_options" class="select2 form-select" /> </div> {{-- Código y Prioridad --}} <hr> <div class="row"> <x-vuexy-admin::form.input :uid="$uniqueId" model="code" label="Código de almacén" icon="ti ti-tag" parentClass="col-md-8" autocomplete="off"/> <x-vuexy-admin::form.input :uid="$uniqueId" model="priority" label="Prioridad" type="number" max="99" parentClass="col-md-4" class="text-center" /> </div> {{-- Detalles del Almacén --}} <x-vuexy-admin::form.input :uid="$uniqueId" model="name" label="Nombre del almacén" /> <x-vuexy-admin::form.textarea :uid="$uniqueId" model="description" label="Descripción" placeholder="Ingresa una breve descripción del almacén" helperText="Describe el propósito y características del almacén." /> {{-- Información de Contacto --}} <hr> <div class="row"> <x-vuexy-admin::form.input type="tel" :uid="$uniqueId" model="tel" label="Teléfono" icon="ti ti-phone" phoneMode="national" /> <x-vuexy-admin::form.input type="tel" :uid="$uniqueId" model="tel2" label="Teléfono 2" icon="ti ti-phone" phoneMode="national" /> </div> {{-- Configuración Adicional --}} <hr> <x-vuexy-admin::form.checkbox :uid="$uniqueId" wire:model="status" label="Activo" switch switchType="square" size="lg" color="success" /> </x-vuexy-admin::form> </x-vuexy-admin::offcanvas.basic> </div> @push('page-script') <script> const csrf_token = "{{ csrf_token() }}"; const initializeContactForm = () => { // Inicializar Select2 sin jQuery const initializeSelect2 = () => { $("#manager_id_{{ $uniqueId }}") .select2({ dropdownAutoWidth: true, width: '100%', dropdownParent: document.getElementById('warehouseForm') }).on('select2:clear', function (e) { @this.manager_id = null; }).on('select2:select', function (e) { @this.manager_id = e.params.data.id; }); }; const storeIdElement = document.getElementById('store_id_{{ $uniqueId }}'); const workCenterIdElement = document.getElementById('work_center_id_{{ $uniqueId }}'); const managerIdElement = document.getElementById('manager_id_{{ $uniqueId }}'); // Evento de cambio en store_id storeIdElement.addEventListener('change', async function () { // Limpiar y deshabilitar el select workCenterIdElement.innerHTML = '<option value="">Selecciona el área de trabajo</option>'; workCenterIdElement.disabled = true; const storeIdValue = storeIdElement.value; if (storeIdValue) { try { // Mostrar mensaje de carga workCenterIdElement.innerHTML = '<option value="">Cargando áreas de trabajo...</option>'; const response = await fetch("{{ route('admin.store-manager.work-centers.ajax') }}", { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf_token, // Agregar CSRF token }, body: JSON.stringify({ store_id: storeIdValue, responseType: 'keyValue', limit: -1 // Sin límite }), }); if (!response.ok) { throw new Error('Error en la solicitud'); } const result = await response.json(); if (result && typeof result === 'object' && Object.keys(result).length > 0) { // Limpiar y agregar nuevas opciones workCenterIdElement.innerHTML = '<option value="">Selecciona el área de trabajo</option>'; Object.entries(result).forEach(([key, value]) => { workCenterIdElement.append(new Option(value, key, false, false)); }); } else { // Si no hay datos disponibles workCenterIdElement.innerHTML = '<option value="">No hay áreas de trabajo disponibles</option>'; } // Habilitar el select después de completar la carga workCenterIdElement.disabled = false; } catch (error) { console.error('Error al cargar los centros de trabajo:', error); // En caso de error, mostrar mensaje por defecto workCenterIdElement.innerHTML = '<option value="">Selecciona el área de trabajo</option>'; workCenterIdElement.disabled = false; } } }); setTimeout(() => { // Inicializa los select2 initializeSelect2(); }, 1); } // Evento para inicializar el formulario cuando se carga la página document.addEventListener("DOMContentLoaded", () => { var myOffcanvas = document.getElementById('{{ $offcanvasId }}') myOffcanvas.addEventListener('show.bs.offcanvas', function () { initializeContactForm(); }); }); </script> @endpush