133 lines
6.7 KiB
PHP
133 lines
6.7 KiB
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
|