@extends('layout')

@section('pedidos-active', 'active')
@section('pedido-active', 'active')

@section('bread-module', 'Pedidos')
@section('bread-submodule', 'Pedidos')
@section('hero-title', 'Registrar Pedido')
@section('hero-subtitle', 'Pedidos')

@section('content')
    @include('ventas.cotizaciones.modal-cliente')

    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-lg-12">
                <div class="ibox">
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-12">

                                @include('pedidos.pedido.forms.form_pedido_create')

                            </div>
                        </div>
                        <hr>

                        <div class="row">
                            <div class="col-lg-12 col-xs-12">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">
                                        <h4><b>SELECCIONAR PRODUCTOS</b></h4>
                                    </div>
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-lg-12">

                                                <div class="form-group row">

                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-3">
                                                        <label class="required" style="font-weight: bold;">CATEGORÍA - MARCA
                                                            - MODELO - PRODUCTO</label>
                                                        <select id="producto" class="" onchange="getColoresTallas()">
                                                            <option value=""></option>
                                                        </select>
                                                    </div>

                                                    <div class="col-12"></div>
                                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                                        <label class="required" style="font-weight: bold;">PRECIO
                                                            VENTA</label>
                                                        <select id="precio_venta" class="select2_form form-control">
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group row mt-3">
                                                    <div class="col-lg-12">
                                                        <div class="table-responsive">
                                                            @include('pedidos.pedido.tables.table_pedido_stocks')
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row mt-1">
                                                    <div class="col-lg-2 col-xs-12">
                                                        <button disabled type="button" id="btn_agregar_detalle"
                                                            class="btn btn-warning btn-block"><i class="fa fa-plus"></i>
                                                            AGREGAR</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">
                                        <h4><b>Detalle del Pedido</b></h4>
                                    </div>
                                    <div class="panel-body">
                                        <div class="table-responsive">
                                            @include('pedidos.pedido.tables.table_pedido_detalle')
                                        </div>
                                    </div>
                                    <div class="panel-footer panel-primary">
                                        <div class="table-responsive">
                                            @include('pedidos.pedido.tables.table_montos_atender')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group row">
                                    <div class="col-md-6 text-left">
                                        <i class="fa fa-exclamation-circle leyenda-required"></i> <small
                                            class="leyenda-required">Los campos marcados con asterisco
                                            (<label class="required"></label>) son obligatorios.</small>
                                    </div>
                                    <div class="col-md-6 text-right">
                                        <a href="{{ route('pedidos.pedido.index') }}" id="btn_cancelar"
                                            class="btn btn-w-m btn-default">
                                            <i class="fa fa-arrow-left"></i> Regresar
                                        </a>

                                        <button type="submit" id="btn_grabar" form="form-pedido"
                                            class="btn btn-w-m btn-primary">
                                            <i class="fa fa-save"></i> Grabar
                                        </button>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .search-length-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .buttons-container {
            display: flex;
            justify-content: end;
        }


        .custom-button {
            background-color: #ffffff !important;
            color: #000000 !important;
            border: 1px solid #dcdcdc !important;
            border-radius: 5px;
            padding: 8px 16px;
            font-size: 14px;
            margin: 8px 0px !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: background-color 3s, color 3s;
        }

        .custom-button:hover {
            background-color: #d7e9fb !important;
            color: #000000 !important;
            border-color: #d7e9fb !important;
        }
    </style>
@endpush

@push('scripts')
    <script>
        const tfootSubtotal = document.querySelector('.subtotal');
        const tfootTotal = document.querySelector('.total');
        const tfootIgv = document.querySelector('.igv');
        const tfootTotalPagar = document.querySelector('.total-pagar');
        const tfootDescuento = document.querySelector('.descuento');
        const tfootEmbalaje = document.querySelector('.embalaje');
        const tfootEnvio = document.querySelector('.envio');

        const amountsPedido = {
            subtotal: 0,
            embalaje: 0,
            envio: 0,
            total: 0,
            igv: 0,
            totalPagar: 0,
            monto_descuento: 0
        }

        let pedidos_data_table = null;
        let carrito = [];
        let dataTableStocksPedido = null;


        document.addEventListener('DOMContentLoaded', async () => {
            mostrarAnimacion();
            loadSelect2();
            events();
            eventsCliente();
            ocultarAnimacion();
        })

        function events() {


            //====== ELIMINAR ITEM =========
            document.addEventListener('click', (e) => {
                if (e.target.classList.contains('delete-product')) {
                    mostrarAnimacion();
                    const productoId = e.target.getAttribute('data-producto');
                    const colorId = e.target.getAttribute('data-color');
                    eliminarProducto(productoId, colorId);
                    pintarDetallePedido(carrito);
                    clearInputsCantidad();
                    loadCarrito();
                    calcularMontos();
                    ocultarAnimacion();
                }
            })

            //====== SUBMIT FORM PEDIDOS =======
            document.querySelector('#form-pedido').addEventListener('submit', (e) => {

                e.preventDefault();
                registrarPedido(e.target);

            })


            //===== VALIDAR CONTENIDO DE INPUTS CANTIDAD ========
            //===== VALIDAR TFOOTS EMBALAJE Y ENVIO ======
            document.addEventListener('input', (e) => {

                if (e.target.classList.contains('inputCantidad')) {
                    e.target.value = e.target.value.replace(/^0+|[^0-9]/g, '');
                }

                if (e.target.classList.contains('detailDescuento')) {
                    //==== CONTROLANDO DE QUE EL VALOR SEA UN NÚMERO ====
                    const valor = event.target.value;
                    const producto_id = e.target.getAttribute('data-producto-id');
                    const color_id = e.target.getAttribute('data-color-id');

                    //==== SI EL INPUT ESTA VACÍO ====
                    if (valor.trim().length === 0) {
                        calcularDescuento(producto_id, color_id, 0);
                        return;
                    }

                    //===== EXPRESION REGULAR PARA EVITAR CARACTERES NO NUMÉRICOS EN LA CADENA ====
                    const regex = /^[0-9]+(\.[0-9]{0,2})?$/;
                    //==== BORRAR CARACTER NO NUMÉRICO ====
                    if (!regex.test(valor)) {
                        event.target.value = valor.slice(0, -1);
                        return;
                    }

                    //==== EN CASO SEA NUMÉRICO ====
                    let porcentaje_desc = parseFloat(event.target.value);

                    //==== EL MÁXIMO DESCUENTO ES 100% ====
                    if (porcentaje_desc > 100) {
                        event.target.value = 100;
                        porcentaje_desc = event.target.value;
                    }

                    //==== CALCULAR DESCUENTO ====
                    calcularDescuento(producto_id, color_id, porcentaje_desc)
                }

                //====== EMBALAJE Y ENVÍO =======
                if (e.target.classList.contains('embalaje') || e.target.classList.contains('envio')) {
                    // Eliminar ceros a la izquierda, excepto si es el único carácter en el campo o si es seguido por un punto decimal y al menos un dígito
                    e.target.value = e.target.value.replace(
                        /^0+(?=\d)|(?<=\D)0+(?=\d)|(?<=\d)0+(?=\.)|^0+(?=[1-9])/g, '');

                    // Evitar que el primer carácter sea un punto
                    e.target.value = e.target.value.replace(/^(\.)/, '');

                    // Reemplazar todo excepto los dígitos y el punto decimal
                    e.target.value = e.target.value.replace(/[^\d.]/g, '');

                    // Reemplazar múltiples puntos decimales con uno solo
                    e.target.value = e.target.value.replace(/(\..*)\./g, '$1');

                    calcularMontos();
                }
            })

            //======== AGREGAR PRODUCTO AL DETALLE =====
            document.querySelector('#btn_agregar_detalle').addEventListener('click', () => {

                if (!$('#precio_venta').val()) {
                    toastr.error('DEBE SELECCIONAR UN PRECIO DE VENTA', 'OPERACIÓN INCORRECTA');
                    return;
                }

                mostrarAnimacion();
                toastr.clear();

                agregarProducto();
                reordenarCarrito();
                calcularSubTotal();
                pintarDetallePedido(carrito);
                //===== RECALCULANDO DESCUENTOS Y MONTOS =====
                carrito.forEach((c) => {
                    calcularDescuento(c.producto_id, c.color_id, c.porcentaje_descuento);
                })
                //===== RECALCULANDO MONTOS =====
                calcularMontos();

                toastr.info('PRODUCTO AGREGADO');
                ocultarAnimacion();

            })
        }


        //====== SELECT2 =======
        function loadSelect2() {
            $(".select2_form").select2({
                placeholder: "SELECCIONAR",
                allowClear: true,
                height: '200px',
                width: '100%',
            });

            $(".select2_modal_cliente").select2({
                placeholder: "SELECCIONAR",
                allowClear: true,
                width: '100%'
            });

            $('#producto').select2({
                width: '100%',
                placeholder: "Buscar producto...",
                allowClear: true,
                language: {
                    inputTooShort: function(args) {
                        var min = args.minimum;
                        return "Por favor, ingrese " + min + " o más caracteres";
                    },
                    searching: function() {
                        return "BUSCANDO...";
                    },
                    noResults: function() {
                        return "No se encontraron productos";
                    }
                },
                ajax: {
                    url: '{{ route('pedidos.pedido.getProductos') }}',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            search: params.term,
                            almacen_id: $('#almacen').val(),
                            page: params.page || 1
                        };
                    },
                    processResults: function(data, params) {
                        if (data.success) {
                            params.page = params.page || 1;
                            const productos = data.productos;
                            return {
                                results: productos.map(item => ({
                                    id: item.producto_id,
                                    text: item.producto_completo
                                })),
                                pagination: {
                                    more: data.more
                                }
                            };
                        } else {
                            toastr.error(data.message, 'ERROR EN EL SERVIDOR');
                            return {
                                results: []
                            }
                        }

                    },
                    cache: true
                },
                minimumInputLength: 2,
                templateResult: function(data) {
                    if (data.loading) {
                        return $(
                            '<span><i style="color:blue;" class="fa fa-spinner fa-spin"></i> Buscando...</span>'
                        );
                    }
                    return data.text;
                },
            });

            $('#cliente').select2({
                width: '100%',
                placeholder: "Buscar Cliente...",
                allowClear: true,
                language: {
                    inputTooShort: function(args) {
                        var min = args.minimum;
                        return "Por favor, ingrese " + min + " o más caracteres";
                    },
                    searching: function() {
                        return "BUSCANDO...";
                    },
                    noResults: function() {
                        return "No se encontraron clientes";
                    }
                },
                ajax: {
                    url: '{{ route('utilidades.getClientes') }}',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            search: params.term,
                            page: params.page || 1
                        };
                    },
                    processResults: function(data, params) {
                        if (data.success) {
                            params.page = params.page || 1;
                            const clientes = data.clientes;
                            return {
                                results: clientes.map(item => ({
                                    id: item.id,
                                    text: item.descripcion
                                })),
                                pagination: {
                                    more: data.more
                                }
                            };
                        } else {
                            toastr.error(data.message, 'ERROR EN EL SERVIDOR');
                            return {
                                results: []
                            }
                        }

                    },
                    cache: true
                },
                minimumInputLength: 2,
                templateResult: function(data) {
                    if (data.loading) {
                        return $(
                            '<span><i style="color:blue;" class="fa fa-spinner fa-spin"></i> Buscando...</span>'
                        );
                    }
                    return data.text;
                },
            });
        }

        //========= SWAL ======
        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger',
            },
            buttonsStyling: false
        })

        //======== ELIMINAR ITEM ========
        const eliminarProducto = (productoId, colorId) => {
            carrito = carrito.filter((p) => {
                return !(p.producto_id == productoId && p.color_id == colorId);
            })
        }


        //===== LIMPIAR INPUTS DEL TABLERO PRODUCTOS ======
        function clearInputsCantidad() {
            const inputsCantidad = document.querySelectorAll('.inputCantidad');
            inputsCantidad.forEach((inputCantidad) => {
                inputCantidad.value = '';
            })
        }

        function agregarProducto() {
            const inputsCantidad = document.querySelectorAll('.inputCantidad');

            for (const ic of inputsCantidad) {

                const cantidad = ic.value ? ic.value : null;
                if (cantidad) {

                    const producto = formarProducto(ic);
                    const indiceExiste = carrito.findIndex(p => p.producto_id == producto.producto_id && p.color_id ==
                        producto.color_id);

                    //===== PRODUCTO NUEVO =====
                    if (indiceExiste == -1) {
                        const objProduct = {
                            producto_id: producto.producto_id,
                            color_id: producto.color_id,
                            modelo_nombre: producto.modelo_nombre,
                            producto_nombre: producto.producto_nombre,
                            producto_codigo: producto.producto_codigo,
                            color_nombre: producto.color_nombre,
                            precio_venta: producto.precio_venta,
                            monto_descuento: 0,
                            porcentaje_descuento: 0,
                            precio_venta_nuevo: 0,
                            subtotal_nuevo: 0,
                            tallas: [{
                                talla_id: producto.talla_id,
                                talla_nombre: producto.talla_nombre,
                                cantidad: producto.cantidad
                            }]
                        };

                        carrito.push(objProduct);
                    } else {
                        const productoModificar = carrito[indiceExiste];
                        productoModificar.precio_venta = producto.precio_venta;

                        const indexTalla = productoModificar.tallas.findIndex(t => t.talla_id == producto.talla_id);

                        if (indexTalla !== -1) {
                            const cantidadAnterior = productoModificar.tallas[indexTalla].cantidad;
                            productoModificar.tallas[indexTalla].cantidad = producto.cantidad;
                            carrito[indiceExiste] = productoModificar;
                        } else {
                            const objTallaProduct = {
                                talla_id: producto.talla_id,
                                talla_nombre: producto.talla_nombre,
                                cantidad: producto.cantidad
                            };
                            carrito[indiceExiste].tallas.push(objTallaProduct);
                        }
                    }
                } else {
                    const producto = formarProducto(ic);
                    const indiceProductoColor = carrito.findIndex(p => p.producto_id == producto.producto_id && p
                        .color_id == producto.color_id);

                    if (indiceProductoColor !== -1) {
                        const indiceTalla = carrito[indiceProductoColor].tallas.findIndex(t => t.talla_id == producto
                            .talla_id);

                        if (indiceTalla !== -1) {
                            const cantidadAnterior = carrito[indiceProductoColor].tallas[indiceTalla].cantidad;
                            carrito[indiceProductoColor].tallas.splice(indiceTalla, 1);

                            const cantidadTallas = carrito[indiceProductoColor].tallas.length;

                            if (cantidadTallas == 0) {
                                carrito.splice(indiceProductoColor, 1);
                            }
                        }
                    }
                }
            }
        }

        //======= CALCULAR MONTOS =======
        const calcularMontos = () => {

            let subtotal = 0;
            let embalaje = tfootEmbalaje.value ? parseFloat(tfootEmbalaje.value) : 0;
            let envio = tfootEnvio.value ? parseFloat(tfootEnvio.value) : 0;
            let total = 0;
            let igv = 0;
            let total_pagar = 0;
            let descuento = 0;

            //====== subtotal es la suma de todos los productos ======
            carrito.forEach((c) => {
                if (c.porcentaje_descuento === 0) {
                    subtotal += parseFloat(c.subtotal);
                } else {
                    subtotal += parseFloat(c.subtotal_nuevo);
                }
                descuento += parseFloat(c.monto_descuento);
            })

            total_pagar = subtotal + embalaje + envio;
            total = total_pagar / 1.18;
            igv = total_pagar - total;

            tfootTotalPagar.textContent = 'S/. ' + total_pagar.toFixed(2);
            tfootIgv.textContent = 'S/. ' + igv.toFixed(2);
            tfootTotal.textContent = 'S/. ' + total.toFixed(2);
            tfootSubtotal.textContent = 'S/. ' + subtotal.toFixed(2);
            tfootDescuento.textContent = 'S/. ' + descuento.toFixed(2);

            amountsPedido.totalPagar = total_pagar;
            amountsPedido.igv = igv;
            amountsPedido.total = total;
            amountsPedido.embalaje = embalaje;
            amountsPedido.envio = envio;
            amountsPedido.subtotal = subtotal;
            amountsPedido.monto_descuento = descuento;
        }

        const calcularDescuento = (producto_id, color_id, porcentaje_descuento) => {
            const indiceExiste = carrito.findIndex((c) => {
                return c.producto_id == producto_id && c.color_id == color_id;
            });

            if (indiceExiste !== -1) {
                const producto_color_editar = carrito[indiceExiste];

                //===== APLICANDO DESCUENTO ======
                producto_color_editar.porcentaje_descuento = porcentaje_descuento;
                producto_color_editar.monto_descuento = porcentaje_descuento === 0 ?
                    0 :
                    parseFloat(producto_color_editar.subtotal * (porcentaje_descuento / 100));

                producto_color_editar.precio_venta_nuevo = porcentaje_descuento === 0 ?
                    0 :
                    parseFloat(producto_color_editar.precio_venta * (1 - porcentaje_descuento / 100));

                producto_color_editar.subtotal_nuevo = porcentaje_descuento === 0 ?
                    0 :
                    parseFloat(producto_color_editar.subtotal * (1 - porcentaje_descuento / 100));

                carrito[indiceExiste] = producto_color_editar;

                //==== RECALCULANDO MONTOS ====
                calcularMontos();

                //==== ACTUALIZANDO PRECIO VENTA Y SUBTOTAL EN EL HTML ====
                const detailPrecioVenta = document.querySelector(
                    `.precio_venta_${producto_color_editar.producto_id}_${producto_color_editar.color_id}`
                );
                const detailSubtotal = document.querySelector(
                    `.subtotal_${producto_color_editar.producto_id}_${producto_color_editar.color_id}`
                );

                if (porcentaje_descuento !== 0) {
                    detailPrecioVenta.textContent = formatoMoneda(producto_color_editar.precio_venta_nuevo);
                    detailSubtotal.textContent = formatoMoneda(producto_color_editar.subtotal_nuevo);
                } else {
                    detailPrecioVenta.textContent = formatoMoneda(producto_color_editar.precio_venta);
                    detailSubtotal.textContent = formatoMoneda(producto_color_editar.subtotal);
                }
            }
        };

        //========= REORDENAR CARRITO =========
        const reordenarCarrito = () => {
            carrito.sort(function(a, b) {
                if (a.producto_id === b.producto_id) {
                    return a.color_id - b.color_id;
                } else {
                    return a.producto_id - b.producto_id;
                }
            });
        }

        //=========== FORMAR PRODUCTO =========
        const formarProducto = (ic) => {
            const producto_id = ic.getAttribute('data-producto-id');
            const modelo_nombre = $('#modelo').find('option:selected').text();
            const producto_nombre = ic.getAttribute('data-producto-nombre');
            const producto_codigo = ic.getAttribute('data-producto-codigo');
            const color_id = ic.getAttribute('data-color-id');
            const color_nombre = ic.getAttribute('data-color-nombre');
            const talla_id = ic.getAttribute('data-talla-id');
            const talla_nombre = ic.getAttribute('data-talla-nombre');
            const precio_venta = $('#precio_venta').val();
            const cantidad = ic.value ? ic.value : 0;
            const subtotal = 0;
            const subtotal_nuevo = 0;
            const porcentaje_descuento = 0;
            const monto_descuento = 0;
            const precio_venta_nuevo = 0;

            const producto = {
                producto_id,
                producto_nombre,
                producto_codigo,
                modelo_nombre,
                color_id,
                color_nombre,
                talla_id,
                talla_nombre,
                cantidad,
                precio_venta,
                subtotal,
                subtotal_nuevo,
                porcentaje_descuento,
                monto_descuento,
                precio_venta_nuevo
            };
            return producto;
        }


        //======== CALCULAR SUBTOTAL POR PRODUCTO COLOR EN EL DETALLE ======
        const calcularSubTotal = () => {
            let subtotal = 0;

            carrito.forEach((p) => {
                p.tallas.forEach((t) => {
                    subtotal += parseFloat(p.precio_venta) * parseFloat(t.cantidad);
                })

                p.subtotal = subtotal;
                subtotal = 0;
            })
        }

        //========= PINTAR DETALLE PEDIDO =======
        function pintarDetallePedido(carrito) {
            let fila = ``;
            let htmlTallas = ``;
            const bodyDetalleTable = document.querySelector('#table-detalle-pedido tbody');
            const tallas = @json($tallas);
            clearTabla(bodyDetalleTable);

            carrito.forEach((c) => {
                htmlTallas = ``;
                fila += `<tr>
                            <td>
                                <i class="fas fa-trash-alt btn btn-danger delete-product"
                                data-producto="${c.producto_id}" data-color="${c.color_id}">
                                </i>
                            </td>
                            <th>
                                <div style="width:120px;">${c.producto_nombre}</div>
                            </th>
                            <th>${c.color_nombre}</th>`;


                //tallas
                tallas.forEach((t) => {
                    let cantidad = c.tallas.filter((ct) => {
                        return t.id == ct.talla_id;
                    });
                    cantidad.length != 0 ? cantidad = cantidad[0].cantidad : cantidad = '';
                    htmlTallas += `<td>${cantidad}</td>`;
                })


                htmlTallas += `
                <td style="text-align: right;">
                    <div style="width:100px;">
                        <span class="precio_venta_${c.producto_id}_${c.color_id}">
                            ${c.porcentaje_descuento === 0
                                ? formatoMoneda(c.precio_venta)
                                : formatoMoneda(c.precio_venta_nuevo)}
                        </span>
                    </div>
                </td>
                <td class="td-subtotal" style="text-align: right;">
                    <span class="subtotal_${c.producto_id}_${c.color_id}">
                        ${c.porcentaje_descuento === 0
                            ? formatoMoneda(c.subtotal)
                            : formatoMoneda(c.subtotal_nuevo)}
                    </span>
                </td>
                <td style="text-align: center;">
                    <input data-producto-id="${c.producto_id}" data-color-id="${c.color_id}"
                        style="width:130px; margin: 0 auto;" value="${c.porcentaje_descuento}"
                        class="form-control detailDescuento"></input>
                </td>
            </tr>`;

                fila += htmlTallas;
                bodyDetalleTable.innerHTML = fila;
            })
        }

        //========== OBTENER PRODUCTOS POR MODELO =========
        async function getProductosByModelo(e) {
            toastr.clear();
            mostrarAnimacion();
            const bodyTableStocks = document.querySelector('#table-stocks-pedidos tbody');
            const btnAgregarDetalle = document.querySelector('#btn_agregar_detalle');
            clearTabla(bodyTableStocks);

            const modelo_id = e.value;
            btnAgregarDetalle.disabled = true;

            if (modelo_id) {
                try {
                    const res = await axios.get(route('pedidos.pedido.getProductosByModelo', modelo_id));
                    if (res.data.success) {
                        pintarSelectProductos(res.data.productos);
                        toastr.info('PRODUCTOS CARGADOS', 'OPERACIÓN COMPLETADA');
                    } else {
                        ocultarAnimacion();
                        toastr.error(res.data.message, 'ERROR EN EL SERVIDOR');
                    }
                } catch (error) {
                    ocultarAnimacion();
                    toastr.error(error, 'ERROR EN LA PETICIÓN DE OBTENER PRODUCTOS');
                }

            } else {
                ocultarAnimacion();
            }
        }

        function destruirDataTableStocks() {
            if (dataTableStocksPedido) {
                dataTableStocksPedido.destroy();
                dataTableStocksPedido = null;
            }
        }

        //======= OBTENER COLORES Y TALLAS POR PRODUCTO =======
        async function getColoresTallas() {
            mostrarAnimacion();
            const producto_id = $('#producto').val();
            const almacen_id = $('#almacen').val();

            if (producto_id && almacen_id) {
                try {
                    const res = await axios.get(route('pedidos.pedido.getColoresTallas', {
                        almacen_id,
                        producto_id
                    }));
                    if (res.data.success) {
                        destruirDataTableStocks();
                        pintarTableStocks(res.data.producto_color_tallas);
                        loadDataTableStocksPedido();
                        pintarPreciosVenta(res.data.producto_color_tallas);
                        loadCarrito();
                        loadPrecioVentaProductoCarrito(producto_id);
                    } else {
                        toastr.error(res.data.message, 'ERROR EN EL SERVIDOR');
                    }
                } catch (error) {
                    toastr.error(error, 'ERROR EN LA PETICIÓN OBTENER COLORES Y TALLAS');
                } finally {
                    ocultarAnimacion();
                }
            } else {
                destruirDataTableStocks();
                limpiarTableStocks();
                loadDataTableStocksPedido();
                limpiarSelectPreciosVenta();
                ocultarAnimacion();
            }
        }

        function loadDataTableStocksPedido() {
            dataTableStocksPedido = new DataTable('#table-stocks-pedidos', {
                language: {
                    "sEmptyTable": "No hay datos disponibles en la tabla",
                    "sInfo": "Mostrando _START_ a _END_ de _TOTAL_ entradas",
                    "sInfoEmpty": "Mostrando 0 a 0 de 0 entradas",
                    "sInfoFiltered": "(filtrado de _MAX_ entradas totales)",
                    "sInfoPostFix": "",
                    "sInfoThousands": ",",
                    "sLengthMenu": "Mostrar _MENU_ entradas",
                    "sLoadingRecords": "Cargando...",
                    "sProcessing": "Procesando...",
                    "sSearch": "Buscar:",
                    "sZeroRecords": "No se encontraron resultados",
                    "oPaginate": {
                        "sFirst": "Primero",
                        "sLast": "Último",
                        "sNext": "Siguiente",
                        "sPrevious": "Anterior"
                    },
                    "oAria": {
                        "sSortAscending": ": activar para ordenar la columna de manera ascendente",
                        "sSortDescending": ": activar para ordenar la columna de manera descendente"
                    }
                }
            });
        }

        const pintarTableStocks = (producto) => {

            let filas = ``;
            const tableStocksBody = document.querySelector('#table-stocks-pedidos tbody');
            const btnAgregarDetalle = document.querySelector('#btn_agregar_detalle')


            producto.colores.forEach((color) => {
                filas += `  <tr>
                            <th scope="row" data-producto=${producto.id} data-color=${color.id} >
                                <div style="width:200px;">${producto.nombre}</div>
                            </th>
                            <th scope="row">${color.nombre}</th>
                        `;

                color.tallas.forEach((talla) => {
                    filas += `<td style="background-color: rgb(210, 242, 242);">
                                        <p style="margin:0;width:20px;text-align:center;${talla.stock_logico != 0?'font-weight:bold':''};">${talla.stock_logico}</p>
                            </td>
                            <td width="8%">
                                <input style="width:50px;text-align:center;" type="text" class="form-control inputCantidad"
                                id="inputCantidad_${producto.id}_${color.id}_${talla.id}"
                                data-producto-id="${producto.id}"
                                data-producto-nombre="${producto.nombre}"
                                data-color-nombre="${color.nombre}"
                                data-talla-nombre="${talla.nombre}"
                                data-color-id="${color.id}" data-talla-id="${talla.id}"
                                data-producto-codigo="${producto.codigo}"></input>
                            </td>`;
                })

                filas += `</tr>`;

            })

            tableStocksBody.innerHTML = filas;
            btnAgregarDetalle.disabled = false;

        }


        function limpiarTableStocks() {
            const tableStocksBody = document.querySelector('#table-stocks-pedidos tbody');

            while (tableStocksBody.firstChild) {
                tableStocksBody.removeChild(tableStocksBody.firstChild);
            }
        }

        //======= PINTAR PRECIOS VENTA =======
        function pintarPreciosVenta(producto_color_tallas) {
            $('#precio_venta').empty();

            if (producto_color_tallas && Array.isArray(producto_color_tallas.precios)) {
                producto_color_tallas.precios.forEach((p) => {
                    const option = new Option(
                        p.precio + ' - ' + p.tipo_cliente_nombre,
                        p.precio,
                        false,
                        false
                    );
                    $('#precio_venta').append(option);
                });
            }

            // Refrescar Select2
            $('#precio_venta').trigger('change');
        }

        //======== PINTAR SELECT PRODUCTOS =======
        function pintarSelectProductos(productos) {
            //======= LIMPIAR SELECT2 DE PRODUCTOS ======
            $('#producto').empty();

            if (productos.length === 0) {
                ocultarAnimacion();
            }

            //====== LLENAR =======
            productos.forEach((producto) => {
                const option = new Option(producto.nombre, producto.id, false, false);
                $('#producto').append(option);
            });

            // Refrescar Select2
            //$('#producto').val(null);
            $('#producto').trigger('change');
        }

        function mostrarAnimacion() {
            document.querySelector('.overlay_pedido_create').style.visibility = 'visible';
        }

        function ocultarAnimacion() {
            document.querySelector('.overlay_pedido_create').style.visibility = 'hidden';
        }

        //====== CARGAR EL PRECIO DE VENTA ELEGIDO PARA EL PRODUCTO EN EL CARRITO ======
        function loadPrecioVentaProductoCarrito(producto_id) {
            const producto_elegido_id = producto_id;
            //===== LO BUSCAMOS EN EL CARRITO ======
            const indiceProducto = carrito.findIndex((p) => {
                return p.producto_id == producto_elegido_id;
            })

            if (indiceProducto !== -1) {
                const itemProducto = carrito[indiceProducto];
                let targetValue;
                //==== UBICANDO PRECIO VENTA SELECCIONADO ======
                $('#precio_venta option').each(function() {
                    if ($(this).text() == itemProducto.precio_venta) {
                        targetValue = $(this).val();
                        return false;
                    }
                });

                if (targetValue) {
                    $('#precio_venta').val(targetValue).trigger('change');
                    console.log('precio venta fijado');
                }
            } else {
                toastr.info('NO SE ENCONTRÓ PRECIO DE VENTA PREVIO PARA EL PRODUCTO');
            }

        }

        //======== LIMPIAR TABLA PRODUCTOS ========
        function clearTabla(bodyTable) {
            while (bodyTable.firstChild) {
                bodyTable.removeChild(bodyTable.firstChild);
            }
        }

        //======= LLENAR INPUTS CON CANTIDADES EXISTENTES EN EL CARRITO =========
        function setCantidadesTablero() {
            carrito.forEach((c) => {
                c.tallas.forEach((t) => {
                    const inputLoad = document.querySelector(
                        `#inputCantidad_${c.producto_id}_${c.color_id}_${t.talla_id}`);
                    if (inputLoad) {
                        inputLoad.value = t.cantidad;
                    }
                })
                //==== UBICANDO PRECIOS DE VENTA SELECCIONADOS ======
                const selectPrecioVenta = document.querySelector(`#precio-venta-${c.producto_id}`);
                if (selectPrecioVenta) {
                    selectPrecioVenta.value = c.precio_venta;
                }
            })
        }

        //============= ABRIR MODAL CLIENTE =============
        function openModalCliente() {
            $("#modal_cliente").modal("show");
        }

        //======= LLENAR INPUTS CON CANTIDADES EXISTENTES EN EL CARRITO =========
        function loadCarrito() {

            carrito.forEach((c) => {
                c.tallas.forEach((talla) => {
                    let llave = `#inputCantidad_${c.producto_id}_${c.color_id}_${talla.talla_id}`;
                    const inputLoad = document.querySelector(llave);
                    console.log(inputLoad)
                    if (inputLoad) {
                        inputLoad.value = talla.cantidad;
                    }
                })
            })

        }

        function registrarPedido(formPedido) {

            toastr.clear();
            if (carrito.length === 0) {
                toastr.error('EL DETALLE DEL PEDIDO ESTÁ VACÍO', 'ERROR');
                return;
            }

            Swal.fire({
                title: 'Opción Guardar',
                text: "¿Seguro que desea guardar cambios?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: "#1ab394",
                confirmButtonText: 'Si, Confirmar',
                cancelButtonText: "No, Cancelar",
            }).then(async (result) => {

                if (result.isConfirmed) {

                    Swal.fire({
                        title: "Registrando pedido...",
                        text: "Por favor, espere",
                        icon: "info",
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        showConfirmButton: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    try {
                        const formData = new FormData(formPedido);
                        formData.append('lstPedido', JSON.stringify(carrito));
                        formData.append('sede_id', @json($sede_id));
                        formData.append('registrador_id', @json($registrador->id));
                        formData.append('amountsPedido', JSON.stringify(amountsPedido));


                        const res = await axios.post(route('pedidos.pedido.store'), formData);
                        /*
                        const delay     =   new Promise(resolve => setTimeout(resolve, 10000));
                        const request   =   axios.post(route('pedidos.pedido.store'), formData);
                        const [res]     =   await Promise.all([request, delay]);
                        */

                        if (res.data.success) {
                            window.location = route('pedidos.pedido.index');
                            toastr.success(res.data.message, 'OPERACIÓN COMPLETADA');
                        } else {
                            Swal.close();
                            toastr.error(res.data.message, 'ERROR EN EL SERVIDOR');
                        }
                    } catch (error) {
                        if (error.response) {
                            if (error.response.status === 422) {
                                const errors = error.response.data.errors;
                                pintarErroresValidacion(errors, 'error');
                                Swal.close();
                                toastr.error("ERRORES DE VALIDACIÓN!!!");
                            } else {
                                Swal.close();
                                toastr.error(error.response.data.message, 'ERROR EN EL SERVIDOR');
                            }
                        } else if (error.request) {
                            Swal.close();
                            toastr.error('No se pudo contactar al servidor. Revisa tu conexión a internet.',
                                'ERROR DE CONEXIÓN');
                        } else {
                            Swal.close();
                            toastr.error(error.message, 'ERROR DESCONOCIDO');
                        }
                    }

                } else if (result.dismiss === Swal.DismissReason.cancel) {

                    swalWithBootstrapButtons.fire(
                        'Cancelado',
                        'La Solicitud se ha cancelado.',
                        'error'
                    )

                }
            })
        }

        function cambiarAlmacen(almacen_id) {

            toastr.clear();

            mostrarAnimacion();

            //======== LIMPIAR SELECTS ======
            $('#producto').val(null).trigger('change');

            //======= LIMPIAR TABLERO STOCKS ======
            destruirDataTable(dataTableStocksPedido);
            limpiarTabla('table-stocks-pedidos');
            loadDataTableStocksPedido();


            //========== LIMPIAR DETALLE DEL PEDIDO ========
            carrito.length = 0;
            destruirDataTableStocks();
            limpiarTabla('table-detalle-pedido');
            pintarDetallePedido(carrito);

            carrito.forEach((c) => {
                calcularDescuento(c.producto_id, c.color_id, c.porcentaje_descuento);
            })
            calcularMontos();

            ocultarAnimacion();
            toastr.info('SE HA LIMPIADO EL FORMULARIO');

        }
    </script>
@endpush