@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.store') }}"
        method="POST"
        formMethod="POST"
        class="space-y-4"
        x-data="{
            ...confirmActionHelper(),
            ...cancelActionHelper(),
            ...alertActionHelper(),
            ...articuloCreate()
        }" 
        @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') }}"
                />
            </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') }}"
                />
            </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') }}"
          
                />
            </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') }}"
          
                />
            </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') }}"
                />
            </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') }}"
                />
            </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') }}"
          
                />
            </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') }}"
                />
            </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') }}"
          
                />
            </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') }}"
                />
            </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') }}"
                />
            </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') }}"
          
                />
            </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') }}"
          
                />
            </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') }}"
                />
            </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') }}"
          
                />
            </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') }}"
          
                />
            </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') }}"
                />
            </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') }}"
                />
            </x-ui-col>

        </x-ui.row>

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

                <x-ui.label value="Lista de precios :" />

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

        <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') }}"
                />
            </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') }}"
                />
            </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') }}"
                />
            </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') }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Código CUM: " />
                <x-ui.input
                    name="respReteIvaCl"
                    value="{{ old('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') }}"
                />
            </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') }}"
                />
            </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') }}"
                />
            </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') }}"
                />
            </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') }}"
                />
            </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') }}"
                />
            </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') }}"
                />
            </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') }}"
          
                />
            </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') }}"
          
                />
            </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') }}"
          
                />
            </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') }}"
          
                />
            </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') }}"
          
                />
            </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') }}"
          
                />
            </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') }}"
          
                />
            </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') }}"
                />
            </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') }}"
                />
            </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') }}"
                />
            </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') }}"
                />
            </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('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'=>'idUnidadCompra', 
                    'select' => true,
                    'show_empty' => true,
                    'options' => $tipoUnidaMedida,
                    'width' => 'w-38',
                ],
                [
                    'label'=>'Unidad de conversión',
                    'field'=>'idUnidadConversion', 
                    'type' => 'number',
                    'width' => 'w-38',
                ],
            ];
        @endphp

        
        <x-ui.data-table-dynamic 
            :rows="[]"
            :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 articuloCreate() {
    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 el artículo?',
                text: '¿Estás seguro de que deseas editar esta?',
                icon: 'question',
                method: 'POST',
                url: formElement.action,
                successTitle: '¡Éxito!',
                successText: 'Factura guardada correctamente',
                confirmButtonText: 'Sí, guardar',
                cancelButtonText: 'Cancelar',
                data:formData
            }).then(result => {
                if (result?.isConfirmed && result.value) {
                    window.location.href = '{{ route("inventario.articulos.index") }}';
                }
            });

        },
    }
}
</script>

@endsection