@extends('Templates.PlantillaFull', ['PaginaTitulo' => 'goEAT-Afiliado', 'PaginaUrl' => 'perfiles-view', 'Padre' => '1'])

@section('Contenido')
    <div class="row mt-1">
        @csrf
        <div class="col-md-7 mb-1">
            <div class="card mb-1">
                <div class="card-body">
                    <p class="font-weight-bold">Elija una categoría:</p>
                    <div class="overflow-auto d-flex" style="width: 100%; padding-bottom: 6px;">
                        @foreach ($CategoriasGlobales as $c)
                            <div class="d-inline-block" style="margin-right: 15px">
                                @if ($c->CATG_NOMBRE == 'Mandaditos')
                                    <button onclick="openModal('{{ route('crear-mandadito') }}','POST', 'Crear orden', '')"
                                        data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $c->CATG_NOMBRE }}"
                                        class="btn btn-default h-full"
                                        style="background-color: {{ $c->CATG_COLOR }}; width: 100px; font-size: 10px;">
                                        <img src="{{ $c->CATG_ICONO }}" width="20px" /> {{ $c->CATG_NOMBRE }}
                                    </button>
                                @else
                                    <button onclick="cargarTipoComercio({{ $c->CATG_ID }}, '{{ $c->CATG_NOMBRE }}')"
                                        data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $c->CATG_NOMBRE }}"
                                        class="btn btn-default h-full"
                                        style="background-color: {{ $c->CATG_COLOR }}; width: 100px; font-size: 10px;">
                                        <img src="{{ $c->CATG_ICONO }}" width="20px" /> {{ $c->CATG_NOMBRE }}
                                    </button>
                                @endif
                            </div>
                        @endforeach
                    </div>

                    <div class="row mb-1 mt-2">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Tipo comercio</label>
                                <select class="form-control" name="t_comercio" id="t_comercio"
                                    onchange="cargarComercios(this.value)">
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Comercio</label>
                                <select class="form-control" name="comercio" id="comercio"
                                    onchange="cargarCategorias(this.value)">
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="row row-cols-1 row-deck row-cols-md-4 mt-2 mb-2 p-2" id="DivProductos">
                <div style="height: 280px; width: 100%" class="d-flex justify-content-center align-items-center">
                    <div>
                        <p class="text-center"><img
                                src="https://img.icons8.com/external-flatart-icons-flat-flatarticons/64/000000/external-cart-supermarket-flatart-icons-flat-flatarticons.png" />
                        </p>
                        <p class="h4">¡No hay productos para mostrar!</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="row mb-3">
                <div class="card">
                    <div class="card-body">
                        <h6 class="card-title">Información del pedido</h6>
                        <form id="orden">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label">Driver</label>
                                    <select class="form-control" style="width: 100%" name="empl_id" id="empl_id">
                                        @foreach ($repartidores as $r)
                                            <option value="{{ $r->CLIE_ID }}">{{ $r->repartidor }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row col-12 mb-3">
                                <div class="col-12 col-md-10">
                                    <input type="text" class="form-control" id="cliente" name="cliente"
                                        placeholder="Cliente" required>
                                </div>
                                <div class="col-12 col-md-2">
                                    <a onclick="MakeRequestData('{{ route('pedidos.buscarClientesModal') }}', '#CuerpoLModal', 'POST', 2, '', '#LModalInfo', true, false, false,['Id/0', 'Contenedor/0', 'Tipo/3'])"
                                        class="btn btn-white h-full" data-bs-toggle="tooltip" target="_blank"
                                        title="Buscar clientes">
                                        <i class="fas fa-user"></i>
                                    </a>
                                </div>
                            </div>

                            <div class="mb-3">
                                <input data-mask="0000-0000" type="text" class="form-control" id="telefono"
                                    name="telefono" placeholder="Teléfono" required>
                            </div>

                            <div class="mb-3">
                                <input type="text" class="form-control" id="PEDI_DIRECCION" name="PEDI_DIRECCION"
                                    placeholder="Dirección" required>
                            </div>

                            <div class="mb-3 row">
                                <div class="row col-12 col-md-6">
                                    <div class="col">
                                        <input required type="text" class="form-control" id="coordenadaQR"
                                            name="coordenada_QR" placeholder="Coordenadas del cliente">
                                    </div>
                                    <div class="col-auto">
                                        <a href="https://www.google.com/maps/@13.7166848,-89.7286144,15z"
                                            class="btn btn-white h-full" data-bs-toggle="tooltip" target="_blank"
                                            title="Buscar coordenadas">
                                            <i class="fas fa-globe"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <input type="text" name="pedi_referencia" id="pedi_referencia"
                                        placeholder="Punto de referencia" class="form-control" required>
                                </div>
                            </div>



                            <div class="mb-3">
                                <select class="form-control" onchange="getRessComision(this.value)" required
                                    name="forma_pago" id="forma_pago">
                                    <option value="">Forma de pago</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <textarea class="form-control" name="comentario" id="comentario" placeholder="Comentario"></textarea>
                            </div>

                            <div class="mb-3">
                                <select onchange="calcularTotal()" name="PEDI_CARGO" id="PEDI_CARGO"
                                    class="form-control" required>
                                    <option value="">Tarifa</option>
                                    @foreach ($tarifas as $item)
                                        <option value="{{ $item->TARI_VALOR }}">
                                            {{ $item->TARI_NOMBRE . ' $ ' . $item->TARI_VALOR }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="row col-12 mb-3">
                                <div class="col-12 col-md-10">
                                    <input type="text" class="form-control d-none" id="PEDI_PROMO" name="PEDI_PROMO" placeholder="Código promoción">
                                    <input type="text" class="form-control" id="PEDI_PROMO_" name="PEDI_PROMO_" placeholder="Código promoción">
                                </div>
                                <div class="col-12 col-md-2">
                                    <a onclick="MakeRequestData('{{ route('pedidoDetalle.promosDisponibles') }}', '#CuerpoLModal', 'POST', 2, '', '#LModalInfo', true, false, false,['Id/0', 'Contenedor/0', 'Tipo/3'])"
                                        class="btn btn-white h-full" data-bs-toggle="tooltip" title="Promos disponibles">
                                        <i class="fas fa-search"></i>
                                    </a>
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <div class="col-12 col-md-6">
                                    <input readonly onblur="calcularTotal()" type="number" class="form-control"
                                        id="PEDI_PROMOCOMERCIO" name="PEDI_PROMOCOMERCIO"
                                        placeholder="Descuento comercio" step="0.01">
                                </div>
                                <div class="col-12 col-md-6">
                                    <input readonly onblur="calcularTotal()" type="number" class="form-control"
                                        id="PEDI_PROMODESCUENTO" name="PEDI_PROMODESCUENTO" placeholder="Descuento App"
                                        step="0.01">
                                </div>
                                <div class="col-12 col-md-12 mt-3">
                                    <input onblur="calcularTotal()" type="number" class="form-control"
                                        id="PEDI_PROMOTARJETA" name="descTj" placeholder="Descuento tarjeta"
                                        step="0.01">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="card">
                    <div class="card-body">
                        <h6 class="card-title">Detalle de pago</h6>
                        <div class="table-responsive">
                            <table class="table table-vcenter">
                                <thead>
                                    <tr>
                                        <th>Producto</th>
                                        <th>Cantidad</th>
                                        <th>P. Venta</th>
                                        <th>Extra</th>
                                        <th>Subtotal</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="cuerpoTabla">
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="4">
                                            <b>Subtotal:</b>
                                        </td>
                                        <td colspan="2" style="color: gray;">
                                            $&nbsp;
                                            <input onblur="calcularTotal()" type="text" id="PEDI_SUBTOTAL"
                                                name="PEDI_SUBTOTAL" step="0.01" style="border: none; color: gray;"
                                                onfocus="this.style.outline = 'none';" readonly value="0.00">
                                            {{-- <b>$<span id="total">0.00</span></b> --}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="4">
                                            <b>Envío:</b>
                                        </td>
                                        <td colspan="2" style="color: gray;">
                                            $&nbsp;
                                            <input onblur="calcularTotal()" type="text" id="PEDI_CARGO_"
                                                name="PEDI_CARGO_" step="0.01" style="border: none; color: gray;"
                                                onfocus="this.style.outline = 'none';" readonly value="0.00" required>
                                            {{-- <b>$<span id="total">0.00</span></b> --}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="4">
                                            <b>Impuesto:</b>
                                        </td>
                                        <td colspan="2" style="color: gray;">
                                            $&nbsp;
                                            <input onblur="calcularTotal()" type="text" id="PEDI_IMPUESTO"
                                                name="PEDI_IMPUESTO" step="0.01" style="border: none; color: gray;"
                                                onfocus="this.style.outline = 'none';" readonly value="0.00">
                                            {{-- <b>$<span id="total">0.00</span></b> --}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="4">
                                            <b>Descuentos:</b>
                                        </td>
                                        <td colspan="2" style="color: red;">
                                            $&nbsp;
                                            <input onblur="calcularTotal()" type="text" id="DESCUENTOS"
                                                name="DESCUENTOS" step="0.01" style="border: none; color: red;"
                                                onfocus="this.style.outline = 'none';" readonly value="0.00">
                                            {{-- <b>$<span id="total">0.00</span></b> --}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="4">
                                            <b>Comisión:</b>
                                        </td>
                                        <td colspan="2" style="color: red;">
                                            $&nbsp;
                                            <input onblur="calcularTotal()" type="text" id="PEDI_FEEEXTRA"
                                                name="PEDI_FEEEXTRA" step="0.01" style="border: none; color: red;"
                                                onfocus="this.style.outline = 'none';" readonly value="0.00">
                                            {{-- <b>$<span id="total">0.00</span></b> --}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="4">
                                            <b>TOTAL:</b>
                                        </td>
                                        <td colspan="2" style="color: green;">
                                            $&nbsp;
                                            <input onblur="calcularTotal()" step="0.01" type="text"
                                                id="total_pagar" name="total_pagar"
                                                style="border: none; color: green; font-weight: bold"
                                                onfocus="this.style.outline = 'none';" value="0.00" readonly>
                                            {{-- <b>$<span id="total">0.00</span></b> --}}
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>

                        <div class="col text-center">
                            <button onclick="enviar()" type="button" data-bs-toggle="tooltip" data-bs-placement="top"
                                title="Enviar" class="btn btn-success">
                                <i class="fas fa-paper-plane"></i> &nbsp;Enviar
                            </button>
                            <button onclick="window.close()" type="button" data-bs-toggle="tooltip"
                                data-bs-placement="top" title="Anular" class="btn btn-danger">
                                <i class="fas fa-times"></i> &nbsp;Anular
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var productos = new Array();
        let PEDI_SUBTOTAL = 0;
        var total_pagar = 0;

        let RESC_ABSORBE = 0;
        let RESC_MINIMO = 0;
        let RESC_COMISION = 0;
        let RESC_TIPOCOMISION = 0;

        let RESS_TAX = 0;
        let RESS_TAXTIPO = 0;
        let RESS_TAXVALOR = 0;
        let promocion = null;

        $(document).ready(function() {
            initSelect3('#driver');
            initSelect3('#comercio');
            initSelect3('#categoria');
            initSelect3('#producto');
            initSelect3('#empl_id');
            // initSelect3('#forma_pago', null, 'Forma de pago');
            initSelect3('#t_comercio');

            // cargarCategorias('0000000219');
        });

        $('#categoria').change(function() {
            let RESS_ID = $('#comercio').val();
            let CATE_ID = this.value;
        });

        $('#coordenadaQR').change(function(e) {
            $.ajax({
                type: "GET",
                url: "{{ route('pedidos.calcularTarifa') }}",
                data: {
                    coordenadaCliente: e.target.value,
                    RESS_ID: $('#comercio').val()
                    // RESS_ID: '0000000219'
                },
                dataType: "JSON",
                beforeSend: function() {
                    LoadingAlert();
                },
                success: function(response) {
                    console.log(response);
                    if (response == 0) {
                        Swal.fire('Fuera de rango',
                            'Verifique que las coordenadas del comercio y las del cliente sean correctas.',
                            'error');
                    } else {
                        if (response.valorACobrar == 0) {
                            Swal.fire('Fuera de rango',
                                'Verifique que las coordenadas del comercio y las del cliente sean correctas.',
                                'error');
                        } else {
                            $('#PEDI_CARGO').val(response.valorACobrar);
                            $('#PEDI_CARGO_').val(response.valorACobrar);
                        }
                    }
                    calcularTotal();
                },
                error: function(error) {
                    console.log(error);
                    ErrorRequest(error);
                },
                complete: function() {
                    $.unblockUI();
                }
            });
        });

        function obtenerPromocion(PROM_CODIGO) {
            if (!$('#forma_pago').val() || !$('#PEDI_SUBTOTAL').val() || !$('#comercio').val()) {
                Swal.fire({
                    icon: 'error',
                    title: 'Agregue los productos a comprar y seleccione la forma de pago.'
                });
                $('#PEDI_PROMO_').val('');
                return;
            }

            $.ajax({
                type: "GET",
                url: "{{ route('pedidos.promocionPorCodigo') }}",
                data: {
                    codPromo: PROM_CODIGO,
                    idComercio: $('#comercio').val(),
                    subtotal: $('#PEDI_SUBTOTAL').val(),
                    formaPago: $('#forma_pago').val()
                },
                beforeSend: function() {
                    LoadingAlert();
                },
                dataType: "JSON",
                success: function(response) {
                    promocion = response;
                    mostrar();
                },
                error: function(e) {
                    ErrorRequest(e);
                    $('#PEDI_PROMO').val('');
                    console.log(e);
                },
                complete: function() {
                    $.unblockUI();
                }
            });
        }

        $('#PEDI_PROMO_').change(function(e) {
            obtenerPromocion(e.target.value);
        });

        function cargarProductos(idCard, CATE_ID, RESS_ID) {
            if ($('#' + idCard).html()) {
                return;
            }
            $.ajax({
                type: "GET",
                url: "{{ route('loadProductos') }}/" + CATE_ID + '/' + RESS_ID,
                dataType: "json",
                beforeSend: function() {
                    LoadingAlert();
                },
                success: function(response) {
                    console.log(response);
                    let html = `<div class="card-body"><div class="row">`;

                    response.forEach((element, index) => {
                        html +=
                            `
                        <div class="card mb-2 col-6 col-md-3">
                            <div title="${element.PROD_DESCRIPCION}" class="card-img-top img-responsive img-responsive-21x9" style="background-image: url(${element.PROD_IMAGEN1})">
                                </div>
                            <div class="card-body">
                                <h3 class="card-title">${element.PROD_NOMBRE}</h3>
                                <p class="text-center text-muted">Precio: ${element.PROD_PREVENTA}</p>
                            </div>
                            <div class="card-footer text-muted text-center">
                                <button data-nombre="${element.PROD_NOMBRE}" data-descripcion="${element.PROD_DESCRIPCION}" onclick="AgregarCarrito('${element.PROD_ID}', ${element.PROD_PREVENTA}, ${element.PROD_COMPLEMENTO}, ${index}, this)" class="btn btn-yellow"><i class="fas fa-plus"></i></button>
                            </div>
                        </div>
                            `;
                    });

                    html += `</div></div>`;

                    console.log(html);

                    $('#' + idCard).append(html);

                    $('#' + idCard).tooltip({
                        selector: '[data-toggle="tooltip"]'
                    });
                },
                complete: function() {
                    $.unblockUI();
                },
                error: function(error) {
                    console.log(error.responseText);
                    ErrorRequest(error);
                }
            });
        }

        function AgregarCarrito(PROD_ID, PROD_PREVENTA, prodComplemento, index, element) {
            if (Existe(PROD_ID)) {
                Swal.fire(
                    '¡El producto ya fue agregado!',
                    '',
                    'warning'
                )
            } else {
                let producto = {
                    PROD_ID: PROD_ID,
                    PROD_NOMBRE: element.dataset.nombre,
                    prodDescripcion: element.dataset.descripcion,
                    PROD_PREVENTA: PROD_PREVENTA,
                    TOTAL: PROD_PREVENTA,
                    PEDD_EXTRA: 0,
                    PEDD_DESCUENTO: 0,
                    PEDD_COMENTARIO: '',
                    prodComplemento: prodComplemento,
                    CANTIDAD: 1,
                    complementos: [],
                    edit: 0
                };

                if (prodComplemento == 1) {
                    producto._token = "{{ csrf_token() }}";
                    $.ajax({
                        type: "POST",
                        url: "{{ route('pedidos.getComplementosProducto') }}",
                        data: producto,
                        beforeSend: function() {
                            LoadingAlert();
                        },
                        success: function(response) {
                            $('#CuerpoLModal').html(response);
                            $('#LModalInfo').modal("show");
                        },
                        complete: function() {
                            $.unblockUI();
                        },
                        error: function(error) {
                            console.log(error.responseText);
                            ErrorRequest(error);
                        }
                    });
                } else {
                    productos.push(producto);
                }
            }

            mostrar();
        }

        function Eliminar(PROD_ID, prodComplemento, index) {
            if (productos[index].prodComplemento == 1) {
                Swal.fire({
                    title: '¿Eliminar detalle?',
                    text: 'Se eliminará todo el detalle, si desea cambiar la cantidad solicitada presione el botón "+"',
                    showDenyButton: true,
                    showCancelButton: true,
                    confirmButtonText: 'Sí, quitar',
                    denyButtonText: `Cancelar`,
                }).then((result) => {
                    if (result.isConfirmed) {
                        // productos = productos.filter(p => p.PROD_ID != PROD_ID);
                        productos.splice(index, 1);

                        mostrar();
                    }
                })
            } else {
                if (productos[index].CANTIDAD == 1) {
                    // productos = productos.filter(p => p.PROD_ID != PROD_ID);

                    productos.splice(index, 1);
                } else {
                    productos[index].CANTIDAD -= 1;
                    productos[index].TOTAL -= (productos[index].PROD_PREVENTA + productos[index].PEDD_EXTRA);
                }

                mostrar();
            }
        }

        function Existe(PROD_ID) {
            let res = productos.filter(function(producto) {
                return producto.PROD_ID == PROD_ID;
            });

            return res.length > 0;
        }

        function sumarCantidadYDinero(PROD_ID, index) {

            // productos.forEach(function(producto) {
            // if (producto.PROD_ID == PROD_ID) {
            if (productos[index].prodComplemento == 1) {
                productos[index]._token = "{{ csrf_token() }}";
                productos[index].index = index;
                $.ajax({
                    type: "POST",
                    url: "{{ route('pedidos.getComplementosProducto') }}",
                    data: productos[index],
                    beforeSend: function() {
                        LoadingAlert();
                    },
                    success: function(response) {
                        $('#CuerpoLModal').html(response);
                        $('#LModalInfo').modal("show");
                    },
                    complete: function() {
                        $.unblockUI();
                    },
                    error: function(error) {
                        console.log(error.responseText);
                        ErrorRequest(error);
                    }
                });
            } else {
                productos[index].TOTAL += (productos[index].PROD_PREVENTA + productos[index].PEDD_EXTRA);
                productos[index].CANTIDAD++;
            }
            // }
            // });

            mostrar();
        }

        // LLENA EL PRIMER COMBO AL SELECCIONAR UN CATEGORIA GLOBAL
        function cargarTipoComercio(CATG_ID) {
            $.ajax({
                type: "GET",
                url: "{{ route('loadCategoriasG') }}/" + CATG_ID,
                dataType: "json",
                beforeSend: function() {
                    LoadingAlert();
                },
                success: function(response) {
                    console.log(response)
                    let html = '<option value="" selected>- Seleccione -</option>';
                    response.forEach(element => {
                        html += `
                                    <option value="${element.TIPO_ID}">${element.TIPO_NOMBRE}</option>
                                    `;
                    });
                    $('#t_comercio').html(html);
                    $('#t_comercio').val("").trigger("change");
                    Swal.close();
                },
                complete: function() {
                    $.unblockUI();
                },
                error: function(error) {
                    console.error(error);
                    $.unblockUI();
                }
            });
        }

        function cargarComercios(TIPO_ID) {
            $.ajax({
                type: "GET",
                url: "{{ route('loadComerciosT') }}/" + TIPO_ID,
                dataType: "json",
                beforeSend: function() {
                    LoadingAlert();
                },
                success: function(response) {
                    console.log(response)
                    let html = '<option value="" selected>- Seleccione -</option>';
                    response.forEach(element => {
                        html += `
                                    <option value="${element.RESS_ID}">${element.RESS_NOMBRE}</option>
                                    `;
                    });
                    $('#comercio').html(html);
                    $('#comercio').val("").trigger("change");
                },
                complete: function() {
                    $.unblockUI();
                },
                error: function(error) {
                    console.error(error);
                    $.unblockUI();
                }
            });
        }

        function cargarCategorias(RESS_ID) {
            $.ajax({
                type: "GET",
                url: "{{ route('loadCategorias') }}/" + RESS_ID,
                dataType: "json",
                beforeSend: function() {
                    LoadingAlert();
                },
                success: function(response) {
                    console.log(response);
                    let html = `<div id="accordion" style="width: 100%">`;
                    response.Categorias.forEach((categoria, index) => {
                        html +=
                            `<div class="card mb-2">
                          <div class="card-header" id="headingOne" style="border-top: 2px solid #efd400">
                            <h5 class="mb-0">
                              <button class="btn-link" style="text-decoration: none;" data-toggle="collapse" data-target="#cate-${index}" onclick="cargarProductos('cate-${index}', '${categoria.CATE_ID}', '${categoria.RESS_ID}')" aria-expanded="true" aria-controls="cat1">
                                <img src="${categoria.CATE_IMAGEN??'/Images/defaultImage.png'}" class="rounded" style="height: 30px">&nbsp;&nbsp;&nbsp; <h2 class="d-inline-block">${categoria.CATE_NOMBRE}</h2>
                              </button>
                            </h5>
                          </div>

                          <div id="cate-${index}" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"></div>
                        </div>`;
                    });

                    html += `</div>`;

                    $('#DivProductos').html(html);


                    let options = `<option value="">Elija la forma de pago</option>`;
                    response.formasPago.forEach((formaPago, index) => {
                        options +=
                            `<option value="${formaPago.FORP_ID}">${formaPago.FORP_NOMBRE} - ${(formaPago.FORP_DESCRIPCION?formaPago.FORP_DESCRIPCION:'')}</option>`;
                    });

                    $('#forma_pago').html(options);

                    // let html = '<option value="" selected>- Seleccione -</option>';
                    // response.forEach(element => {
                    //     html += `
                //             <option value="${element.CATE_ID}">${element.CATE_NOMBRE}</option>
                //             `;
                    // });
                    // $('#categoria').html(html);
                },
                complete: function() {
                    $.unblockUI();
                },
                error: function(error) {
                    console.error(error);
                }
            });

            $.ajax({
                type: "GET",
                url: "{{ route('pedidos.comercioPorId') }}",
                data: {
                    RESS_ID: RESS_ID
                },
                dataType: "JSON",
                success: function(response) {
                    RESS_TAX = response.RESS_TAX;
                    RESS_TAXTIPO = response.RESS_TAXTIPO;
                    RESS_TAXVALOR = response.RESS_TAXVALOR;
                },
                error: function(e) {
                    console.log(e);
                }
            });
        }

        function getRessComision(FORP_ID) {
            if (!FORP_ID || !$('#comercio').val()) {
                return;
            }
            $.ajax({
                type: "GET",
                url: "{{ route('pedidos.getRessComision') }}",
                data: {
                    RESS_ID: $('#comercio').val(),
                    // RESS_ID: '0000000219',
                    FORP_ID: FORP_ID
                },
                beforeSend: function() {
                    LoadingAlert();
                },
                dataType: "JSON",
                success: function(response) {
                    console.log(response);

                    RESC_ABSORBE = response.RESC_ABSORBE;
                    RESC_MINIMO = response.RESC_MINIMO;
                    RESC_COMISION = response.RESC_COMISION;
                    RESC_TIPOCOMISION = response.RESC_TIPOCOMISION;
                    mostrar();
                },
                error: function(error) {
                    console.error(error);
                },
                complete: function(error) {
                    $.unblockUI();
                }
            });
        }

        function enviar() {
            if (getNum(parseFloat($('#PEDI_SUBTOTAL').val())) < RESC_MINIMO) {
                Swal.fire({
                    icon: 'error',
                    title: 'La compra mínima es $' + RESC_MINIMO
                });
                return;
            }

            let idForm = '#orden';
            if (idForm.includes('##')) {
                idForm = idForm.replace('##', '#');
            } else if (ValidarForm(idForm)) {
                return;
            }

            if (productos.length == 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Debe agregar al menos un producto al pedido.'
                });
                return;
            }

            $.ajax({
                type: "POST",
                url: '{{ route('saveAfiliado') }}',
                data: {
                    'productos': JSON.stringify(productos),
                    "_token": "{{ csrf_token() }}",
                    'comercio': $('#comercio').val(),
                    'cliente': $('#cliente').val(),
                    'telefono': $('#telefono').val(),
                    'forma_pago': $('#forma_pago').val(),
                    'comentario': $('#comentario').val(),
                    'empl_id': $('#empl_id').val(),
                    'coordenada_QR': $('#coordenadaQR').val(),
                    'pedi_referencia': $('#pedi_referencia').val(),
                    'total_pagar': $('#total_pagar').val(),
                    't_comercio': $('#t_comercio').val(),
                    'PEDI_CARGO': $('#PEDI_CARGO').val(),
                    'PEDI_SUBTOTAL': $('#PEDI_SUBTOTAL').val(),
                    'PEDI_PROMO': $('#PEDI_PROMO').val(),
                    'PEDI_PROMODESCUENTO': $('#PEDI_PROMODESCUENTO').val(),
                    'PEDI_PROMOCOMERCIO': $('#PEDI_PROMOCOMERCIO').val(),
                    'PEDI_DIRECCION': $('#PEDI_DIRECCION').val(),
                    'PEDI_IMPUESTO': $('#PEDI_IMPUESTO').val(),
                    'PEDI_FEEEXTRA': $('#PEDI_FEEEXTRA').val(),
                },
                beforeSend: function() {
                    LoadingAlert();
                },
                dataType: "json",
                success: function(response) {
                    console.log(response);

                    Swal.fire({
                        title: '¡Éxito!',
                        text: 'Pedido creado exitosamente!',
                        icon: 'success',
                        confirmButtonText: 'Aceptar'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.close();
                        }
                    })
                },
                complete: function() {
                    $.unblockUI();
                },
                error: function(error) {
                    console.log(error.responseText);
                    ErrorRequest(error);
                    $.unblockUI();
                }
            });
        }

        function agregarComentario(prodId, PEDD_COMENTARIO) {
            console.log(prodId);
            console.log(PEDD_COMENTARIO);
            Swal.fire({
                title: 'Agregar comentario',
                input: 'text',
                inputLabel: 'Tu comentario sobre el producto',
                inputValue: PEDD_COMENTARIO,
                inputPlaceholder: 'Comentario',
                inputAttributes: {
                    autocapitalize: 'off',
                },
                showCancelButton: true,
                confirmButtonText: 'Agregar comentario',
                showLoaderOnConfirm: true,
                preConfirm: (comentario) => {
                    console.log(comentario);

                    productos.forEach(element => {
                        if (element.PROD_ID == prodId) {
                            element.PEDD_COMENTARIO = comentario;
                        }
                    });
                    return comentario;
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                console.log(result);

                console.log(productos);

                mostrar();
            })
        }

        function mostrar() {

            calcularDescuentos();

            let html = ``;
            let total = 0;

            productos.forEach((elemento, index) => {
                total += elemento.TOTAL;

                html +=
                    `
                    <tr>
                        <td><span title="${elemento.prodDescripcion}" style="width: 160px; display: inline-block; text-overflow: ellipsis; overflow-x: hidden;">${elemento.PROD_NOMBRE}</span></td>
                        <td>${elemento.CANTIDAD}</td>
                        <td title="Descuento $${elemento.PEDD_DESCUENTO.toFixed(2)}">${elemento.PROD_PREVENTA}</td>
                        <td>${(elemento.PEDD_EXTRA*elemento.CANTIDAD).toFixed(2)}</td>
                        <td>$ ${elemento.TOTAL.toFixed(2)}</td>
                        <td>
                            <button style="margin-bottom: 1px;" onclick="sumarCantidadYDinero('${elemento.PROD_ID}', ${index})" class="btn btn-primary btn-sm d-block"><i class="fas fa-plus"></i></button>
                            <button style="margin-bottom: 1px;" onclick="Eliminar('${elemento.PROD_ID}', ${elemento.prodComplemento}, ${index})" class="btn btn-danger btn-sm d-block"><i class="fas fa-minus"></i></button>
                            <button onclick="agregarComentario('${elemento.PROD_ID}', '${elemento.PEDD_COMENTARIO}')" class="btn btn-secondary btn-sm d-block"><i class="fas fa-comment"></i></button>
                        </td>
                    </tr>
                `;
            });

            $('#cuerpoTabla').html(html);
            $('#PEDI_SUBTOTAL').val(parseFloat(total).toFixed(2));
            calcularTotal();
        }

        function calcularDescuentos() {
            if (promocion == null) {
                return;
            }

            // INICIO VALIDACION COMPRA MINIMA PROMO
            let sumSubtotal = 0;
            productos.forEach(prod => sumSubtotal += prod.TOTAL);

            if (sumSubtotal < promocion.valorCompraMin) {
                Swal.fire({
                    icon: 'error',
                    title: '¡Promoción ya no aplica!',
                    text: 'La compra mínima para poder hacer uso de la promoción es $ ' + promocion.valorCompraMin
                        .toFixed(2)
                });

                productos.forEach(element => element.PEDD_DESCUENTO = 0);

                $('#PEDI_PROMOCOMERCIO').val(0);
                $('#PEDI_PROMODESCUENTO').val(0);
                $('#PEDI_PROMO').val('');
                promocion = null;
                return;
            }
            // FIN INICIO VALIDACION COMPRA MINIMA PROMO


            let promValorcom = promocion.promValorCom / 100;
            let promValorapp = promocion.promValorApp / 100;

            switch (promocion.aplicadoPara.toString()) {
                case '0':
                    if (!$('#PEDI_CARGO').val()) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Seleccione el envío'
                        });
                        $('#PEDI_PROMOCOMERCIO').val('');

                        return;
                    } else {
                        if (promocion.tipoPromoDesc == 0) {
                            $('#PEDI_PROMOCOMERCIO').val(promocion.valor * promValorcom);
                            $('#PEDI_PROMODESCUENTO').val(promocion.valor * promValorapp);
                        } else {
                            let valDesc = (promocion.valor / 100) * parseFloat($('#PEDI_CARGO').val());
                            $('#PEDI_PROMOCOMERCIO').val(valDesc * promValorcom);
                            $('#PEDI_PROMODESCUENTO').val(valDesc * promValorapp);
                        }
                    }
                    break;
                case '1':

                    let valDesc = 0;

                    productos.forEach(element => {
                        promocion.productosPromo.forEach(e => {
                            if (element.PROD_ID == e.codigoProd) {
                                if (promocion.tipoPromoDesc == 0) {
                                    element.PEDD_DESCUENTO = promocion.valor * element.CANTIDAD;
                                    valDesc += (promocion.valor * element.CANTIDAD);
                                } else {
                                    element.PEDD_DESCUENTO = ((promocion.valor / 100) *
                                        element.PROD_PREVENTA) * element.CANTIDAD;
                                    valDesc += element.PEDD_DESCUENTO;
                                }
                            }
                        });
                    });

                    $('#PEDI_PROMOCOMERCIO').val(valDesc * promValorcom);
                    $('#PEDI_PROMODESCUENTO').val(valDesc * promValorapp);
                    break;
                case '2':
                    if (promocion.tipoPromoDesc == 0) {
                        $('#PEDI_PROMOCOMERCIO').val(promocion.valor * promValorcom);
                        $('#PEDI_PROMODESCUENTO').val(promocion.valor * promValorapp);
                    } else {
                        let valDesc = (promocion.valor / 100) * parseFloat($('#PEDI_SUBTOTAL').val());
                        $('#PEDI_PROMOCOMERCIO').val(valDesc * promValorcom);
                        $('#PEDI_PROMODESCUENTO').val(valDesc * promValorapp);
                    }
                    break;
            }

            $('#PEDI_PROMO').val(promocion.idCodPromo);
        }

        function calcularTotal() {
            let total = 0;
            let descuentos = 0;
            let comision = 0;

            let subtotal = getNum(parseFloat($('#PEDI_SUBTOTAL').val()));

            total += subtotal;

            // total = (subtotal + getNum(parseFloat($('#PEDI_CARGO').val())));

            // if (RESS_TAX == 1 || RESS_TAX == 2) {
            if (RESS_TAX == 2) {
                if (RESS_TAXTIPO == 0) {
                    $('#PEDI_IMPUESTO').val((subtotal * (getNum(parseFloat(RESS_TAXVALOR)) / 100)).toFixed(2));
                } else {
                    $('#PEDI_IMPUESTO').val(RESS_TAXVALOR.toFixed(2));
                }

                total += getNum(parseFloat($('#PEDI_IMPUESTO').val()));
            }

            // si es adicional
            // if (RESS_TAX == 2) {
            //     total += getNum(parseFloat($('#PEDI_IMPUESTO').val()));
            // }

            // SI NO ABSORBE LO COBRAMOS AL CLIENTE
            if (RESC_ABSORBE == 0) {
                if (parseInt(RESC_TIPOCOMISION) == 0) {
                    comision = RESC_COMISION;
                } else if (parseInt(RESC_TIPOCOMISION) == 1) {
                    comision = (total * (getNum(parseFloat(RESC_COMISION)) / 100));
                }
            }

            total += comision;

            $('#PEDI_FEEEXTRA').val(comision.toFixed(2));

            descuentos = (getNum(parseFloat($('#PEDI_PROMODESCUENTO').val())) + getNum(parseFloat($('#PEDI_PROMOCOMERCIO')
                .val())) + getNum(parseFloat($('#PEDI_PROMOTARJETA')
                .val())));

            $('#DESCUENTOS').val(descuentos.toFixed(2));

            total -= descuentos;
            total += getNum(parseFloat($('#PEDI_CARGO').val()));

            $('#total_pagar').val(total.toFixed(2));

            $('#PEDI_CARGO_').val($('#PEDI_CARGO').val());
        }
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"
        integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@endsection