laravel-vuexy-warehouse/resources/views/livewire/warehouses/form-offcanvas.blade.php

<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