@extends('layouts.layout')

@include('components.js.confirm-action')
@include('components.js.cancel-action')
@include('components.js.alert-action')

@section('content')

<x-ui.title text="{{ $title }}" />

<x-ui.card class="mt-4 mb-4" >   
    <x-ui.form 
        action="{{ route( 'inventario.articulos.update',$articulo->id ) }}"
        method="POST"
        formMethod="POST"
        class="space-y-4"
        x-data="{
            ...confirmActionHelper(),
            ...cancelActionHelper(),
            ...alertActionHelper(),
            ...articuloCreate(),
            @js($pedidoPresentacion),
        }" 
        @update-item-presentaciones.window="itemPresentaciones = $event.detail"
        x-ref="formArticulo"
    >
        <x-ui.subtitle text="Datos basicos" />

        <x-ui.row gap="6">

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Codigo" />
                <x-ui.input
                    name="codigo"
                    value="{{ old('codigo', $articulo->codigo ) }}"
                />
            </x-ui.col>

            <x-ui.col xs="12" md="12" lg="4">
                <x-ui.label value="Nombre" />
                <x-ui.input
                    name="nombre"
                    value="{{ old('nombre', $articulo->nombre ) }}"
                />
            </x-ui.col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Estado :" />
                <x-ui.select
                    name="estado"
                    :options="$estado"
                    value="{{ old('estado', $articulo->nombre ) }}"
          
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Ver en :" />
                <x-ui.select
                    name="verArti"
                    :options="$origenModulo"
                    value="{{ old('verArti', $articulo->verArti ) }}"
          
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Descontinuado " />
                <x-ui.checkbox
                    name="descon"
                    value="{{ old('descon', $articulo->descon ) }}"
                />
            </x-ui-col>

        </x-ui.row>

        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="3">
                <x-ui.label value="Referencia : " />
                <x-ui.input
                    name="referencia"
                    value="{{ old('referencia') }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="7">
                <x-ui.label value="Descripción : " />
                <x-ui.textarea
                    name="comen"
                    value="{{ old('comen', $articulo->comen ) }}"
                />
            </x-ui-col>


            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Marca :" />
                <x-ui.select
                    name="idMarca"
                    :options="$marcas"
                    value="{{ old('idMarca', $articulo->idMarca) }}"
                />
            </x-ui-col>
        
        </x-ui.row>

        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="4">
                <x-ui.label value="Nombre comercial: : " />
                <x-ui.input
                    name="nombreCom"
                    value="{{ old('nombreCom', $articulo->nombreCom) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Tipo de articulo:" />
                <x-ui.select
                    name="tipo"
                    :options="$tipoArticulo"
                    value="{{ old('tipo', $articulo->tipo) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Maneja lote:" />
                <x-ui.checkbox
                    name="lote"
                    value="{{ old('lote', $articulo->lote) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Maneja ubicación :" />
                <x-ui.checkbox
                    name="ubicacion"
                    value="{{ old('ubicacion', $articulo->ubicacion) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Unidad de almacenamiento  :" />
                <x-ui.select
                    name="idTuni"
                    :options="$tipoUnidaMedidaSelect"
                    value="{{ old('idTuni', $articulo->idTuni) }}"
                />
            </x-ui-col>

        </x-ui.row>

        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Unidad de compra  :" />
                <x-ui.select
                    name="idUnCom"
                    :options="$tipoUnidaMedidaSelect"
                    value="{{ old('idUnCom', $articulo->idUnCom) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Unidad de conversión : " />
                <x-ui.input
                    name="unidaCom"
                    value="{{ old('unidaCom', $articulo->unidaCom) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Unidad de venta :" />
                <x-ui.select
                    name="idUnEmp"
                    :options="$tipoUnidaMedidaSelect"
                    value="{{ old('idUnEmp', $articulo->idUnEmp) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="3">
                <x-ui.label value="Tipos descuentos financiero por producto :" />
                <x-ui.select
                    name="idTipDescFin"
                    :options="$tipoDescuentoFinanciero"
                    value="{{ old('idTipDescFin', $articulo->idTipDescFin) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="1">
                <x-ui.label value="Stock mínimo : " />
                <x-ui.input
                    name="stockMin"
                    value="{{ old('stockMin', $articulo->stockMin) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="1">
                <x-ui.label value="Stock máximo: " />
                <x-ui.input
                    name="stockMax"
                    value="{{ old('stockMax', $articulo->stockMax) }}"
                />
            </x-ui-col>

        </x-ui.row>
            @php
                $columns = [
                    [
                'label'=>'Presentacion',
                'field'=>'idPres',
                'select' => true,
                'show_empty' => true,
                'options' => $presentaciones,
                'width' => 'w-50',
                ],
                [
                    'label'=>'Cantidad', 
                    'field'=>'cantidad', 
                    'type' => 'number',
                    'width' => 'w-38',
                ],
                [
                    'label'=>'Unidad de compra',
                    'field'=>'idUnMed', 
                    'select' => true,
                    'show_empty' => true,
                    'options' => $tipoUnidaMedida,
                    'width' => 'w-38',
                ],
                [
                    'label'=>'Unidad de conversión',
                    'field'=>'uniConvert', 
                    'type' => 'number',
                    'width' => 'w-38',
                ],
            ];
        @endphp

        <x-ui.data-table-dynamic 
            :rows="$articuloPresentaciones"
            :columns="$columns" 
            type="basic" 
            x-model="itemPresentaciones"
            event-name="update-item-presentaciones"
        />

        <x-ui.subtitle text="Datos contables del artículo" />
        
        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Iva :" />
                <x-ui.select
                    name="idIva"
                    :options="$tarifas"
                    value="{{ old('idIva', $articulo->idIva) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="1">
                <x-ui.label value="% Descuento: " />
                <x-ui.input
                    name="descuento"
                    value="{{ old('descuento', $articulo->descuento) }}"
                />
            </x-ui-col>
        
        </x-ui.row>

        <x-ui.subtitle text="Información técnica" />
        
        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Fecha: " />
                <x-ui.input
                    type="date"
                    name="fecInvima"
                    value="{{ old('fecInvima', $articulo->fecInvima) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Código invima: " />
                <x-ui.input
                    name="codigoInvima"
                    value="{{ old('codigoInvima', $articulo->codigoInvima) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Código CUM: " />
                <x-ui.input
                    name="codigoCum"
                    value="{{ old('codigoCum', $articulo->codigoCum) }}"
                />
            </x-ui-col>


            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Concentración: " />
                <x-ui.input
                    name="concentra"
                    type="number"
                    value="{{ old('concentra', $articulo->concentra) }}"
                />
            </x-ui-col>


            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Temperatura: " />
                <x-ui.input
                    name="temperatura"
                    type="number"
                    value="{{ old('temperatura', $articulo->temperatura) }}"
                />
            </x-ui-col>

        </x-ui.row>

        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Peso: " />
                <x-ui.input
                    type="number"
                    name="peso"
                    value="{{ old('peso', $articulo->peso ) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Volumen: " />
                <x-ui.input
                    type="number"
                    name="volumen"
                    value="{{ old('volumen', $articulo->volumen) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Ancho: " />
                <x-ui.input
                    type="number"
                    name="ancho"
                    value="{{ old('ancho', $articulo->ancho) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Alto: " />
                <x-ui.input
                    type="number"
                    name="alto"
                    value="{{ old('alto', $articulo->alto) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Largo: " />
                <x-ui.input
                    type="number"
                    name="largo"
                    value="{{ old('largo', $articulo->largo) }}"
                />
            </x-ui-col>

        </x-ui.row>

        <x-ui.subtitle text="Clasificación del articulo" />

        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Tipo de inventario : " />
                <x-ui.select
                    name="idTinv"
                    :options="$tipoInventario"
                    value="{{ old('idTinv', $articulo->idTinv) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Líneas: " />
                <x-ui.select
                    name="idLin"
                    :options="$lineas"
                    value="{{ old('idLin', $articulo->idLin) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Sublíneas: " />
                <x-ui.select
                    name="idSubLin"
                    :options="$sublineas"
                    value="{{ old('idSubLin', $articulo->idSubLin) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Grupo: " />
                <x-ui.select
                    name="idGrup"
                    :options="$grupos"
                    value="{{ old('idGrup', $articulo->idGrup) }}"
          
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Clasificacion 1: " />
                <x-ui.select
                    name="idCla1"
                    :options="$clasificacion1"
                    value="{{ old('idCla1', $articulo->idCla1) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Clasificacion 2: " />
                <x-ui.select
                    name="idCla2"
                    :options="$clasificacion2"
                    value="{{ old('idCla2', $articulo->idCla2) }}"
                />
            </x-ui-col>

        </x-ui.row>

        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Linea proceso contable: " />
                <x-ui.select
                    name="idCuentaInv"
                    :options="$cuentaInventario"
                    value="{{ old('idCuentaInv', $articulo->idCuentaInv) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Es producto terminado : " />
                <x-ui.checkbox
                    name="esPt"
                    value="{{ old('esPt') }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Es materia prima: " />
                <x-ui.checkbox
                    name="esMp"
                    value="{{ old('esMp', $articulo->esMp) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Es producción : " />
                <x-ui.checkbox
                    name="esProduc"
                    value="{{ old('esProduc', $articulo->esProduc) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Es servicio ? " />
                <x-ui.checkbox
                    name="esMaquila"
                    value="{{ old('esMaquila', $articulo->esMaquila) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Es flete  ? " />
                <x-ui.checkbox
                    name="esFlete"
                    value="{{ old('esFlete', $articulo->esFlete) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Sin control de invetario ? " />
                <x-ui.checkbox
                    name="sinControlInv"
                    value="{{ old('esFlete', $articulo->sinControlInv) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="4">

                <x-ui.label value="Artículos gemelos :" />

                <x-ui.multi-select
                    name="idGemelos"
                    :options="[]"
                    :values="[]"
                    placeholder="Selecciona uno o más"
                />  
            </x-ui-col>

        </x-ui.row>
            @php
                $columns = [
                    [
                'label'=>'Presentacion',
                'field'=>'idPres',
                'select' => true,
                'show_empty' => true,
                'options' => $presentaciones,
                'width' => 'w-50',
                ],
                [
                    'label'=>'Cantidad', 
                    'field'=>'cantidad', 
                    'type' => 'number',
                    'width' => 'w-38',
                ],
                [
                    'label'=>'Unidad de compra',
                    'field'=>'idUnMed', 
                    'select' => true,
                    'show_empty' => true,
                    'options' => $tipoUnidaMedida,
                    'width' => 'w-38',
                ],
                [
                    'label'=>'Unidad de conversión',
                    'field'=>'uniConvert', 
                    'type' => 'number',
                    'width' => 'w-38',
                ],
            ];
        @endphp

        <x-ui.data-table-dynamic 
            :rows="$articuloPresentaciones"
            :columns="$columns" 
            type="basic" 
            x-model="itemPresentaciones"
            event-name="update-item-presentaciones"
        />

        <x-ui.button-save-doc 
            icon="lucide-save" 
            type="submit"
            value="Guardar"
            @click="submitArticulo($refs.formArticulo)" 
        />

    </x-ui.form>
</x-ui.card>

<x-ui.button-back
    color="Atrás"  
    href="{{ url('inventario.articulos') }}"
/>

<script>
function articuloUpdate() {
    return {
        detallePresentacion: [],
        async submitArticulo(formElement) {

            if (this.detallePresentacion.length != 0) {

                const itemIncompleto = this.itemPresentaciones.some(item =>
                    !item.idPres ||
                    !item.cantidad ||
                    !item.idUnidadCompra ||
                    !item.idUnidadConversion
                );

                if (itemIncompleto) {
                    this.alert({
                        text: 'Todos los productos deben tener presentación, cantidad y unidades completas'
                    });
                    
                    return;
                }


                // 2️⃣ Validar presentación repetida
                const presentaciones = this.itemPresentaciones
                    .map(item => item.idPres)
                    .filter(id => id); // elimina null / undefined

                const presentacionRepetida = new Set(presentaciones).size !== presentaciones.length;

                if (presentacionRepetida) {
                    this.alert({
                        text: 'No puedes repetir la misma presentación'
                    });
                    return;
                }
            }

            const detallePresentacionLimpio = this.detallePresentacion.map(row => {
                const { results, loading, showSearch, ...datos } = row;
                return datos;
            });

            const formData = new FormData(formElement);
            

            // FORMA CORRECTA
            detallePresentacionLimpio.forEach((item, index) => {
                Object.keys(item).forEach(key => {
                    formData.append(`detallePresentacion[${index}][${key}]`, item[key]);
                });
            });

            this.confirmAction({
                title: '¿Guardar los cambios?',
                text: '¿Estás seguro de que deseas actualizar los cambios?',
                icon: 'question',
                method: 'PUT',
                url: formElement.action,
                successTitle: '¡Éxito!',
                successText: 'Proceso realizado de forma exitosa',
                confirmButtonText: 'Sí, realizar',
                cancelButtonText: 'Cancelar',
                data:formData
            });

        },
    }
}
</script>

@endsection