@extends('layout.master', [
    'activePage' => $activePage,
    'categoria' => $categoria,
    'menuParent' => $menuParent,
    'titlePage' => $titlePage
])

@push('plugin-styles')
{!! Html::style('plugins/apex/apexcharts.css') !!}
{!! Html::style('assets/css/dashboard/dashboard_1.css') !!}
{!! Html::style('plugins/flatpickr/flatpickr.css') !!}
{!! Html::style('plugins/flatpickr/custom-flatpickr.css') !!}
{!! Html::style('assets/css/elements/tooltip.css') !!}
{!! Html::style('plugins/table/datatable/datatables.css') !!}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css"></link>

<style>

    .ui-autocomplete-input {
        font-size: 14px;
        z-index: 1000;
        position: relative;
    }

    .ui-menu .ui-menu-item a {
        font-size: 12px;
    }

    .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000 !important;
        float: left;
        display: none;
        min-width: 160px;
        width: 160px;
        padding: 4px 0;
        margin: 2px 0 0 0;
        list-style: none;
        background-color: #ffffff;
        border-color: #ccc;
        border-color: rgba(0, 0, 0, 0.2);
        border-style: solid;
        border-width: 1px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        *border-right-width: 2px;
        *border-bottom-width: 2px;
    }

    .ui-menu .ui-menu-item{
        cursor: pointer;
    }

    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    }

    .ui-menu-item>a.ui-corner-all {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555555;
        white-space: nowrap;
        text-decoration: none;
    }

    .ui-state-hover,
    .ui-state-active {
        color: #ffffff;
        text-decoration: none;
        background-color: #0088cc;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        background-image: none;
    }
    .text-bold {
        font-weight: bold !important;
    }

    .text-normal {
        font-weight: normal !important;
    }

    input[type="date"].form-control-sm {
        padding: .25rem .5rem !important;
    }

    input[type="file"].form-control-sm {
        padding: 0rem 1rem !important;
    }

    .btn-submit:hover {
        background-color: #E8C552 !important;
        color: black !important;
        border-color: #E8C552 !important
    }

    .results-table {
        margin: 40px !important;
        padding: .2rem !important;
        th {
            color: white !important;
            font-size: 12px !important;
        };
        td {
            text-align: center !important;

        };


        .table_body {
            margin-bottom: 10px !important;
        }
    }

    .icon-large {
        font-size: 1.5em !important;
    }

    .icon-xl {
        font-size: 2em !important;
    }

    .btn-pdf {
        background-color: #C62A2A !important;
        color: white;
        border-color: #C62A2A !important;
    }

    .input-impuesto {
        max-width: 9rem !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered  {
        display: contents;
    }

    .select2-container--bootstrap {
        min-width: 15rem !important;
    }

    .select2-container--bootstrap .select2-selection--single{
        max-height: 1.5rem !important;
        height: auto !important;
        font-size: smaller !important;
        margin-bottom: -.8rem
    }

    .hide-element {
        display: none !important;
    }

    .btn-link-xml:hover {
        color: #27b4eb !important;
    }

    .btn-link-pdf:hover {
        color: #C62A2A !important;
    }

    .btn-check {
        padding: 0rem .6rem !important
    }

    .image-loading {
        margin-left: .2rem !important;
        max-width: 2rem;
        max-height: 2rem;
        width: auto;
        height: auto;
    }

    .btn-link-xml:hover {
        color: #27b4eb !important;
    }

    .btn-link-pdf:hover {
        color: #C62A2A !important;
    }

    .col-descripcion {
        width: 34rem !important;
    }

    .col-codigo {
        width: 14rem !important;
    }

    .image-loading {
        margin-left: .2rem !important;
        max-width: 2rem;
        max-height: 2rem;
        width: auto;
        height: auto;
    }

    .btn-delete-row {
        background-color: #C62A2A !important;
        margin-right: .2rem !important;
    }

    .btn-delete-row:hover {
        color: #ffffff !important;
    }

    .producto-cancelado {
        background-color: #E8C552 !important;
    }

    .btn-help {
        float: right;
        font-weight: 700;
        line-height: 1;
        color: #000;
        text-shadow: 0 1px 0 #fff;
        opacity: .5;
        border: 0;
        background: 0 0;
        cursor: pointer;
    }

    .btn-help:hover {
        color: #000;
        text-decoration: none;
        opacity: .75;
    }

    .blinking {
        animation: parpadeo-borde 1s infinite;
    }

    @keyframes parpadeo-borde {
        0% {
            border-color: #ccc;
        }
        50% {
            border-color: #f00;
        }
        100% {
            border-color: #ccc;
        }
    }

</style>
@endpush

@section('content')
    <div class="sub-header-container">
        <header class="header navbar navbar-expand-sm">
            <ul class="navbar-nav flex-row">
                <li>
                    <div class="page-header">
                        <nav class="breadcrumb-one" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0);"> {{__('Operaciones')}}</a></li>
                                <li class="breadcrumb-item active" aria-current="page"><span> {{__('CAPTURA ORDENES DE COMPRA')}}</span> <button class="btn-help bs-popover" data-placement="bottom" data-container="body" data-trigger="hover" data-content="Para buscar una orden de compra, presione F9 y, a continuación, ingrese el folio de la orden de compra."><i class="las la-question-circle icon-xl"></i></button></li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </header>
    </div>

    <div class="layout-px-spacing">
        <div class="container-fluid p-0">
            <div class="row d-flex justify-content-center">
                <div class="card col-md-12 mt-3">
                    <div class="card-body">
                        <div class="row">
                            <input type="hidden" name="idOC" id="idOC">
                            <div class="col text-right hide-element" id="fragmento_info_oc">
                                <h5 class="card-title"> <b>Folio: </b><span id="txtFolio">-</span>. <b>Estatus: </b><span id="txtEstatus">-</span></h5>
                            </div>
                        </div>

                        <form action="#" method="post" id="frm_captura">
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="btn-group btn-group-tipo-producto btn-group-sm margin-radio-group d-flex justify-content-center mt-3" role="group" aria-label="Seleccionar opción">
                                        <input type="radio" id="radio-mercancia" name="tipo_producto" value="mercancia" onchange="selectTipoProductoOption(this)" checked hidden>
                                        <label class="btn btn-outline-secondary btn-sm active" for="radio-mercancia">Mercancías</label>

                                        <input type="radio" id="radio-consumible" name="tipo_producto" value="consumible" onchange="selectTipoProductoOption(this)" hidden>
                                        <label class="btn btn-outline-secondary btn-sm" for="radio-consumible">Consumibles</label>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <input type="hidden" id="proveedor" name="proveedor">
                                    <label class="text-bold">Proveedor:</label>
                                    <input type="text" class="form-control form-control-sm" id="proveedor_search" onkeydown="if (event.key === 'Enter') { searchProveedor(); } else { validateNumber(event); }">
                                </div>
                                <div class="col-md-1">
                                    <button class="btn btn-secondary btn-submit mt-4" type="button" onclick="searchProveedor()">Buscar</button>
                                </div>
                                <div class="col-md-6">
                                    <label class="text-bold">Nombre del proveedor:</label>
                                    <div class="d-flex justify-content-center">
                                        <input type="text" class="form-control form-control-sm bs-popover" id="name_proveedor" data-container="body" data-trigger="hover" data-content="Teclea el nombre del proveedor a buscar.">
                                        <img id="loadingSearchProveedor" class="image-loading" src="{{ asset('assets/img/loading.gif')  }}" alt="Loading..." style="display: none">
                                    </div>
                                </div>

                                <div class="col-md-1">
                                    <label class="text-bold">Moneda:</label>
                                    <input type="text" class="form-control form-control-sm" id="moneda" readonly>
                                </div>
                            </div>
                            <div class="row">

                                <div class="col-lg">
                                    <label class="text-bold">Plazo: </label>
                                    <select id="plazo" name="plazo" class="form-control form-control-sm text-center" required>
                                        @foreach ($plazos as $plazo)
                                            <option value="{{ $plazo->id }}">{{ $plazo->descripcion }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg">
                                    <label class="text-bold">Plazo Anticipo: </label>
                                    <select id="plazo_anticipo" name="plazo_anticipo" class="form-control form-control-sm text-center" required onchange="habilitarMontoAnticipo(this)">
                                        <option value="0" selected>Sin anticipo</option>
                                        @foreach ($plazos as $plazo)
                                            <option value="{{ $plazo->id }}">{{ $plazo->descripcion }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg">
                                    <label class="text-bold">Importe anticipo: </label>
                                    <div class="input-group input-group-sm mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">$</span>
                                        </div>
                                        <input type="text" class="form-control form-control-sm" name="anticipo" id="anticipo" oninput="formatoMonto(this, 6)" readonly>
                                    </div>
                                </div>
                                <div class="col-lg">
                                    <label class="text-bold">Fecha Entrega: </label>
                                    <div class="input-group input-group-sm mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="las la-calendar icon-large"></i>
                                            </span>
                                        </div>
                                        <input id="fecha_entrega" name="fecha_entrega" type="date" class="form-control form-control-sm" value="{{ $fecha_actual }}" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg">
                                    <label class="text-bold">Almacén: </label>
                                    <select id="almacen" name="almacen" class="form-control form-control-sm text-center" required>
                                        @foreach ($almacenes as $almacen)
                                            <option value="{{ $almacen->id }}">{{ $almacen->almacen . '-' . $almacen->descripcion }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg">
                                    <label class="text-bold">Condiciones de entrega: </label>
                                    <select id="condiciones_entrega" name="condiciones_entrega" class="form-control form-control-sm text-center" required>
                                        @foreach ($condiciones as $condicion)
                                            <option value="{{ $condicion->id }}">{{ $condicion->descripcion }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg">
                                    <label class="text-bold">Clasificación: </label>
                                    <select id="clasificacion" name="clasificacion" class="form-control form-control-sm text-center" required>
                                        @foreach ($clasificaciones as $clasificacion)
                                            <option value="{{ $clasificacion->id }}">{{ $clasificacion->descripcion }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg">
                                    <label class="text-bold">Descuento: </label>
                                    <div class="input-group input-group-sm mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">%</span>
                                        </div>
                                        <input type="text" class="form-control form-control-sm" name="descuento" id="descuento" oninput="formatoMonto(this, 6); validarPorcentaje(this); calcularResumenTotal()">
                                    </div>
                                </div>

                                <div class="col-lg">
                                    <label class="text-bold">Flete: </label>
                                    <select id="flete" name="flete" class="form-control form-control-sm text-center" required>
                                        <option value="0" selected>Sin flete</option>
                                        @foreach ($fletes as $flete)
                                            <option value="{{ $flete->id }}">{{ $flete->descripcion }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-lg-1" id="fragmento_btn_continuar">
                                    <button id="btnContinuar" class="btn btn-primary btn-submit mt-4" type="button" onclick="continuarAnadirProductos()" disabled>Continuar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div id="fragmento_productos" class="row mt-2 hide-element">
                <table id="productos_table" class="table table-responsive-sm table-sm">
                    <thead>
                        <tr>
                            @foreach ($camposTablaProductos as $campo)
                                <th style="text-align: center">{{ $campo }}</th>
                            @endforeach
                            <th class="hide-element fragmento-checkbox" style="text-align: center">
                                <input type="checkbox" id="checkAllProducts">
                            </th>
                        </tr>
                    </thead>
                    <tbody id="productos_body">
                        <tr>
                            <td class="col-codigo">
                                <input type="hidden" name="producto[]">
                                <div class="d-flex justify-content-center">
                                    <button type="button" class="close btn-delete-row" onclick="deleteProducto(this)" title="Eliminar esta fila.">
                                        <i class="las la-times "></i>
                                    </button>
                                    <input type="text" class="form-control form-control-sm input-codigo" placeholder="Código..." onkeydown="if (event.key === 'Enter') { searchProducto(this); } ">
                                </div>
                            </td>
                            <td class="col-descripcion">
                                <div class="d-flex justify-content-center">
                                    <input type="text" class="form-control form-control-sm bs-popover" id="name_producto_0" placeholder="Descripción..." data-container="body" data-trigger="hover" data-content="Teclea el nombre del producto a buscar.">
                                    <img class="image-loading" src="{{ asset('assets/img/loading.gif')  }}" alt="Loading..." style="display: none">
                                </div>
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm text-right" placeholder="Cantidad..." name="cantidad[]" oninput="formatoMonto(this, {{ $decimales }}); calcularImporte(this)" onkeydown="if (event.key === 'Enter') { nextCosto(this); } " disabled>
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm input-costo-f text-right" placeholder="Costo F..." readonly>
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm input-costo-uc text-right" placeholder="Costo UC..." readonly>
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm text-right" placeholder="Costo Compra..." name="costo_compra[]" oninput="formatoMonto(this, 6); calcularImporte(this)" onkeydown="if (event.key === 'Enter') { nextProducto(this); } " disabled>
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm input-importe text-right" placeholder="Importe..." readonly value="0">
                            </td>
                            <th class="hide-element fragmento-checkbox" style="text-align: center">
                                <input type="checkbox" class="productSelected">
                            </th>
                        </tr>
                    </tbody>
                </table>

                <div class="col-lg-5 justify-content-end">
                    <div class="row">
                        <div class="col d-flex justify-content-end">
                            <span class="mr-2 text-black">TOTAL ARTICULOS: </span>
                            <span class="text-bold text-black" id="txtArticulos"> 0 </span>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 ml-auto">
                    <div class="row">
                        <div class="col d-flex justify-content-between align-items-center">
                            <span class="text-black">SUMA: </span>
                            <span class="text-bold text-black" id="txtSuma"> - </span>
                        </div>
                    </div>
                    <div class="row" id="fragmento_descuento">
                        <div class="col d-flex justify-content-between align-items-center">
                            <span class="text-black">DESCUENTO: </span>
                            <span class="text-bold text-black" id="txtDescuento"> - </span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col d-flex justify-content-between align-items-center">
                            <span class="text-black">NETO: </span>
                            <span class="text-bold text-black" id="txtNeto"> - </span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col d-flex justify-content-between align-items-center">
                            <span class="text-black">I.E.P.S: </span>
                            <span class="text-bold text-black" id="txtIeps"> - </span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col d-flex justify-content-between align-items-center">
                            <span class="text-black">I.V.A: </span>
                            <span class="text-bold text-black" id="txtIva"> - </span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col d-flex justify-content-between align-items-center">
                            <span class="text-black">RETENCIONES I.V.A: </span>
                            <span class="text-bold text-black" id="txtRetIva"> - </span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col d-flex justify-content-between align-items-center">
                            <span class="text-black">TOTAL: </span>
                            <span class="text-bold text-black" id="txtTotal"> - </span>
                        </div>
                    </div>
                </div>


                <div class="col-md-12 d-flex justify-content-center mt-2" >
                    <button type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center mb-3 mr-2 nueva-orden" onclick="generarOC()">
                        <i class="las la-plus-circle icon-large"></i>
                        <span class="ml-2">Generar</span>
                    </button>
                    <input type="file" hidden id="file-csv" accept=".csv">
                    <button type="button" class="btn btn-outline-secondary btn-submit d-inline-flex align-items-center mb-3 mr-2 nueva-orden" title="Cargar datos de manera masiva" onclick="massiveLoadCSV()">
                        <i class="las la-file-csv icon-large"></i>
                        <span class="ml-2">Carga masiva</span>
                    </button>
                    <button id="btnGuardarCambios" type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center mb-3 mr-2 orden-existente hide-element" onclick="actualizarOrden()">
                        <i class="las la-save icon-large"></i>
                        <span class="ml-2">Guardar cambios</span>
                    </button>
                    <button type="button" class="btn btn-outline-primary btn-submit d-inline-flex align-items-center mb-3 mr-2 orden-existente hide-element" onclick="limpiarFormulario()">
                        <i class="las la-sync icon-large"></i>
                        <span class="ml-2">Restaurar</span>
                    </button>
                    <button type="button" class="btn btn-secondary btn-submit d-inline-flex align-items-center mb-3 mr-2" onclick="addNota()">
                        <i class="las la-file-alt icon-large"></i>
                        <span class="ml-2">Notas</span>
                    </button>
                    <button type="button" class="btn btn-danger btn-submit d-inline-flex align-items-center mb-3 mr-2 orden-existente hide-element" onclick="darDeBajaOrden()">
                        <i class="las la-caret-square-down icon-large"></i>
                        <span class="ml-2">Dar de baja</span>
                    </button>
                    <button id="btnCancelarOrden" type="button" class="btn btn-danger btn-submit d-inline-flex align-items-center mb-3 mr-2 orden-existente hide-element" disabled onclick="cancelarProductos()">
                        <i class="las la-times icon-large"></i>
                        <span class="ml-2">Cancelar</span>
                    </button>
                    <button id="btnAutorizar" type="button" class="btn btn-warning btn-submit d-inline-flex align-items-center mb-3 mr-2 orden-existente hide-element" onclick="autorizarOrden()">
                        <i class="las la-check-circle icon-large"></i>
                        <span class="ml-2">Autorizar</span>
                    </button>
                    <button type="button" class="btn btn-pdf btn-submit d-inline-flex align-items-center mb-3 mr-2 orden-existente hide-element" onclick="reimprimirPDF()">
                        <i class="las la-file-pdf icon-large"></i>
                        <span class="ml-2">Reimprimir PDF</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade draggable " id="modal-nota" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1500;">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="title-modal-buscar-por">Nota de orden de compra</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <textarea id="nota" cols="30" rows="10" class="form-control form-control-lg" placeholder="Empiece a escribir aqui..."></textarea>
                        </div>
                        <div class="col-md-12 hide-element" id="notaCaracteresMaximos">
                            <label class="text-danger">Máximo de caracteres permitidos: 1024. <b>¡Límite alcanzado!</b></label>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center mb-3 mr-2" data-dismiss="modal" aria-label="Close">
                        <i class="las la-save icon-large"></i>
                        <span class="ml-2">Guardar</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade draggable " id="modal-buscar-orden" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1500;">
        <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="title-modal-buscar-por">Buscar orden de compra por folio</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <label class="text-bold">Folio a buscar:</label>
                            <input type="text" class="form-control form-control-sm" id="folio" onkeydown="if (event.key === 'Enter') { searchOrdenCompra(); } else { validateNumber(event); } ">
                        </div>
                        <div class="col-md-12 hide-element" id="ordenNoEncontradaMensaje">
                            <label class="text-danger">¡No se ha encontrado esa<b> orden de compra</b>!</label>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center mb-3 mr-2" onclick="searchOrdenCompra()">
                        <i class="las la-search icon-large"></i>
                        <span class="ml-2">Buscar</span>
                    </button>
                    <button type="button" class="btn btn-outline-primary btn-submit d-inline-flex align-items-center mb-3 mr-2" data-dismiss="modal" aria-label="Close">
                        <span>Cancelar</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('plugin-scripts')
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}
    {!! Html::script('plugins/table/datatable/datatables.js') !!}
@endpush

@push('custom-scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>

        let incrementalProductos = 1;
        let tipoProductos = 'mercancia';
        let aplicanImpuestos = true;

        const noProvideerContentMessageOptions = {
            icon: 'info',
            title: '¡Sin resultados!',
            text: 'No se encontro ningún proveedor con esa información.',
            confirmButtonText: 'Aceptar',
            customClass: {
                container: 'alert-in-modal'
            },
        }

        const noProductContentMessageOptions = {
            icon: 'info',
            title: '¡Sin resultados!',
            text: 'No se encontro ningún producto con ese código.',
            confirmButtonText: 'Aceptar',
            customClass: {
                container: 'alert-in-modal'
            },
        }

        const ajaxErrorMessage = {
            icon: 'error',
            title: '¡Lo sentimos!',
            text: 'Ha ocurrido un error inesperado, intentelo de nuevo más tarde'
        }

        const productAlreadyExisteMessageOptions = {
            icon: 'info',
            title: '¡Producto añadido!',
            text: 'El producto que intenta ingresar ya ha sido añadido en la lista'
        }

        const noOrderAddedMessage = {
            icon: 'warning',
            title: '¡No ha agregado ningun producto!',
            html: 'Se necesita <b>al menos un producto</b> para crear una <b>Orden de Compra</b>.'
        }

        const orderGeneratedSucessfully = {
            icon: 'success',
            title: '¡Orden de compra creada exítosamente!',
            html: 'La orden de compra se ha creado con éxito'
        }

        const orderCancelledSucessfully = {
            icon: 'success',
            title: '¡Productos cancelados!',
            html: '¡Los productos han sido cancelados con éxito!',
        }

        const exchangeNeededForProviderMessage = {
            icon: 'warning',
            title: '¡Sin tipo de cambio!',
            html: '¡El proveedor necesita un tipo de cambio para continuar!',
        }

        const orderUpdatedSucessfullyMessage = {
            icon: 'success',
            title: '¡Orden actualizada!',
            html: '¡La orden de compra ha sido actualizada de manera éxitosa!',
        }

        const otherCurrencyMessage = {
            icon: 'warning',
            title: '¡Moneda extranjera!',
            html: '¡Los importes se guardarán en la <b>moneda del proveedor</b>!',
        }

        const productoCancelledMessageOptions = {
            icon: 'warning',
            title: '¡Producto cancelado!',
        }

        const noProductsForMassiveBulk = {
            icon: 'warning',
            title: '¡Sin datos para importar masivamente!',
            text: 'El documento seleccionado no incluye productos para añadir o contiene productos ya ingresados.'
        }
        

        $(document).ready(() => {
            inicializarAutoCompletadoProductos(0);
            $(document).tooltip();

            $('.input-codigo').on('input', function() {
                const $row = $(this).closest('tr');
                $row.find('input[name="cantidad[]"]').first().val('').attr('disabled', true);
                $row.find('input[name="costo_compra[]"]').first().val('').attr('disabled', true);
                $row.find('input[name="producto[]"]').first().val('');
                $row.find('.input-importe').first().val('');
                $row.find('.input-costo-f').val('');
                $row.find('.input-costo-uc').val('');

                calcularResumenTotal();
            });

            $('.bs-popover').on('input', function() {
                const $row = $(this).closest('tr');
                $row.find('input[name="cantidad[]"]').first().val('').attr('disabled', true);
                $row.find('input[name="costo_compra[]"]').first().val('').attr('disabled', true);
                $row.find('input[name="producto[]"]').first().val('');
                $row.find('.input-importe').first().val('');
                $row.find('.input-costo-f').val('');
                $row.find('.input-costo-uc').val('');

                calcularResumenTotal();
            });

            $('#radio-mercancia').prop('checked', true).trigger('change');

            $('#name_proveedor').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{url('operaciones/captura-ordenes-compra/buscar-proveedor-por-descripcion')}}",
                        dataType: 'json',
                        data: {
                            descripcion: request.term
                        },
                        success: function(data) {
                            response(data)
                        }
                    })
                },
                select: function(event, ui) {
                    fillProveedor(ui.item);
                    validarCapturaDatos()
                },
                selectFirst: true,
                minLength: 3
            });

            $("#name_proveedor").on("autocompleteresponse", function() {
                $(this).next().hide();
            });

            $("#name_proveedor").on("autocompletesearch", function() {
                $(this).next().show();
            });

            habilitarEliminarProductos();

            $('#frm_captura input').on('input', function() {
                validarCapturaDatos()
            });

            validarCapturaDatos();

            $(document).keydown(function(event) {
                if (event.key === 'F9') {
                    event.preventDefault();
                    $('#modal-buscar-orden').modal('show');
                }
            });

            $('#modal-nota').on('shown.bs.modal', function() {
                $('#nota').focus();
            });

            $('#modal-buscar-orden').on('shown.bs.modal', function() {
                $('#folio').focus();
            });

            $('#modal-buscar-orden').on('hidden.bs.modal', function() {
                $('#folio').val('');
                $('#ordenNoEncontradaMensaje').addClass('hide-element');
            });

            $('#folio').on('input', function() {
                let $mensaje = $('#ordenNoEncontradaMensaje');
                if (!$mensaje.hasClass('hide-element')) {
                    $mensaje.addClass('hide-element');
                }
            });

            $('#nota').on('input', function() {
                const nota = this.value;

                if(nota.length > 1024) {
                    this.value = nota.substring(0, 1024);
                    $('#notaCaracteresMaximos').removeClass('hide-element');
                    return false;
                }

                $('#notaCaracteresMaximos').addClass('hide-element');
            });

            $('input[name="cantidad[]"]').attr('disabled', true);
            $('input[name="costo_compra[]"]').attr('disabled', true);

            $('#checkAllProducts').change(function() {
                const marcarTodos = $(this).is(':checked');

                $('.productSelected').each(function() {
                    if(!$(this).is(':disabled')) {
                        $(this).prop('checked', marcarTodos);
                    }
                });

                $('#btnCancelarOrden').attr('disabled', !marcarTodos);
            });

            $('#file-csv').on('change', function (event) {
                const file = event.target.files[0];
                const reader = new FileReader();

                reader.onload = function(e) {
                    const text = e.target.result;
                    processCSV(text);
                };

                reader.readAsText(file);
            });
        });

        function processCSV(text) {
            const lines = text.split('\n');

            const codigosProductos = [];
            const cantidades = [];
            const costos = [];
            const codigosAdicionados = [];

            let flagCodigosDuplicados = false;

            $('.input-codigo').each(function() {
                // Agrega el valor de cada input al array
                if($(this).val() !== '') {
                    codigosAdicionados.push($(this).val());
                }
            });


            lines.forEach((line) => {
                const columns = eliminarTextoInnecesario(line).split(',');


                if(columns.length === 3) {
                    const codigo = columns[0].replace(/[\n\r|]/g, "");
                    const cantidad = columns[1].replace(/[\n\r|]/g, "");
                    const costo = columns[2].replace(/[\n\r|]/g, "");

                    if(!codigosAdicionados.includes(codigo) && !codigosProductos.includes(codigo) && cantidad.length > 0 && costo.length > 0) {
                        codigosProductos.push(codigo)
                        cantidades.push(cantidad)
                        costos.push(costo)
                    } else {
                        flagCodigosDuplicados = true;
                    }
                }
            });


            if(codigosProductos.length > 0) {
                getProductosMasivamente(codigosProductos, cantidades, costos).then(response => {
                    fillArticulosInputs(response, flagCodigosDuplicados)
                });
                return;
            }

            Swal.fire(noProductsForMassiveBulk);

            return false;
        }

        function fillArticulosInputs(response, flagCodigosDuplicados) {
            const infoProductos = response.infoProductos;

            if(infoProductos.length === 0) {
                Swal.fire(noProductsForMassiveBulk);
                return;
            }

            $('#productos_body').empty();

            for(const infoProducto of infoProductos) {
                const detallesProducto = `
                    <tr>
                        <td>
                            <input type="hidden" name="producto[]" value="${infoProducto.id}">
                            <div class="d-flex justify-content-center">
                                <button type="button" class="close btn-delete-row" onclick="deleteProducto(this)" title="Eliminar esta fila.">
                                    <i class="las la-times "></i>
                                </button>
                                <input type="text" value="${infoProducto.codigo}" class="form-control form-control-sm input-codigo" placeholder="Código..." onkeydown="if (event.key === 'Enter') { searchProducto(this); } ">
                            </div>
                        </td>
                        <td class="col-descripcion">
                            <div class="d-flex justify-content-center">
                                <input type="text" class="form-control form-control-sm bs-popover" value="${infoProducto.descripcion}" id="name_producto_${incrementalProductos}" placeholder="Descripción..." data-container="body" data-trigger="hover" data-content="Teclea el nombre del producto a buscar.">
                                <img class="image-loading" src="{{ asset('assets/img/loading.gif')  }}" alt="Loading..." style="display: none">
                            </div>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm text-right" placeholder="Cantidad..." name="cantidad[]" data-iva="${infoProducto.iva}" data-ieps="${infoProducto.ieps}" data-r-iva="${infoProducto.rIva}" value="${infoProducto.cantidad}" oninput="formatoMonto(this, {{ $decimales }}); calcularImporte(this)" onkeydown="if (event.key === 'Enter') { nextCosto(this); } ">
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm input-costo-f text-right" placeholder="Costo F..." value="${infoProducto.costoF}" readonly>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm input-costo-uc text-right" placeholder="Costo UC..." value="${infoProducto.costoUC}" readonly>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm text-right" placeholder="Costo Compra..." name="costo_compra[]" value="${infoProducto.costoCompra}" oninput="formatoMonto(this, 6); calcularImporte(this)" onkeydown="if (event.key === 'Enter') { nextProducto(this); } ">
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm input-importe text-right" placeholder="Importe..." readonly value="0">
                        </td>
                    </tr>
                `;

                $('#productos_body').append(detallesProducto);
                inicializarAutoCompletadoProductos(incrementalProductos);
                incrementalProductos++;
            }

            $('#productos_body input[name="cantidad[]"]').trigger('input');

            calcularResumenTotal();
            habilitarEliminarProductos();
        }


        function getProductosMasivamente(codigosProductos, cantidades, costos) {
            return new Promise((resolve, reject) => {
                const route = tipoProductos == 'mercancia' ? '/producto-por-codigo-masivamente' : '/producto-consumible-por-codigo-masivamente'
                let infoProductos = [];

                $.ajax({
                    url: "{{ url('operaciones/captura-ordenes-compra') }}" + route,
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        codigos: codigosProductos,
                        cantidades: cantidades,
                        costos: costos,
                    },
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")
                        }, 500);

                        resolve(res);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")
                            if(error.status == 422) {
                                Swal.fire({
                                    icon: "error",
                                    title: "Error al procesar la petición",
                                    text: error.responseText
                                });

                                return;
                            }

                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                        reject(error);
                    },
                });
            });
        }

        function eliminarTextoInnecesario(texto) {
            const ultimaComaIndex = texto.lastIndexOf(',');

            if (ultimaComaIndex !== -1) {
                return texto.substring(0, ultimaComaIndex);
            } else {
                return texto;
            }
        }

        function massiveLoadCSV() {
            $('#file-csv').click();
        }

        function inicializarCheckboxes() {
            $('.productSelected').change(function() {
                let todosMarcados = $('.productSelected').length === $('.productSelected:checked').length;
                $('#checkAllProducts').prop('checked', todosMarcados);

                let seleccionaronProductos = $('.productSelected').is(':checked');
                $('#btnCancelarOrden').attr('disabled', !seleccionaronProductos);
            })
        }

        function inicializarAutoCompletadoProductos(id) {
            $('.bs-popover').autocomplete({
                source: function(request, response) {
                    const route = tipoProductos == 'mercancia' ? '/buscar-producto-por-descripcion' : '/buscar-producto-consumible-por-descripcion'

                    $.ajax({
                        url: "{{url('operaciones/captura-ordenes-compra')}}" + route,
                        dataType: 'json',
                        data: {
                            descripcion: request.term
                        },
                        success: function(data) {
                            response(data)
                        }
                    })
                },
                select: function(event, ui) {
                    fillProducto(event.target, ui.item);
                },
                selectFirst: true,
                minLength: 3
            });


            $('.bs-popover').on("autocompleteresponse", function() {
                $(this).next().hide();
            });

            $('.bs-popover').on("autocompletesearch", function() {
                $(this).next().show();
            });
        }


        function validarCapturaDatos() {
            const form = $('#frm_captura')[0];
            const proveedor = $('#proveedor').val().trim();

            const esFormularioValido = form.checkValidity();
            const esProveedorValido = proveedor !== '';

            $('#btnContinuar').attr('disabled', !esFormularioValido || !esProveedorValido);
            $('#btnGuardarCambios').attr('disabled', !esFormularioValido || !esProveedorValido);
        }

        function validarPorcentaje(input) {
            const porcentaje = $(input).val().replace(/[^\d.]/g, '');

            if(porcentaje > 100) {
                $(input).val(100);
            }
        }

        function searchProveedor() {
            const proveedor = $('#proveedor_search').val();

            if(proveedor != '') {
                $.ajax({
                    url: "{{ url('operaciones/captura-ordenes-compra/buscar-proveedor-por-numero') }}",
                    data: {
                        numero: proveedor
                    },
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {

                            $("#loadingModal").modal("hide")

                            if(jqXHR.status == 204) {
                                return Swal.fire(noProvideerContentMessageOptions);
                            }
                            const proveedor = res.proveedor;

                            fillProveedor(proveedor);
                            validarCapturaDatos()
                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")

                            if(error.status == 400) {
                                Swal.fire(exchangeNeededForProviderMessage);
                                return;
                            }

                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                })
            }
        }

        function searchProducto(input) {
            const codigo = $(input).val();

            if(codigo != '') {
                const route = tipoProductos == 'mercancia' ? '/buscar-producto-por-codigo' : '/buscar-producto-consumible-por-codigo'

                $.ajax({
                    url: "{{ url('operaciones/captura-ordenes-compra') }}" + route,
                    data: {
                        codigo: codigo
                    },
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {

                            $("#loadingModal").modal("hide")

                            if(jqXHR.status == 204) {
                                return Swal.fire(noProductContentMessageOptions);
                            }

                            const producto = res.producto;

                            fillProducto(input, producto);
                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")

                            if(error.status == 400) {
                                Swal.fire(productoCancelledMessageOptions);
                                return;
                            }
                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                })
            }
        }

        function fillProveedor(proveedor) {
            $('#proveedor').val(proveedor.id);
            $('#proveedor_search').val(proveedor.proveedor);
            $('#name_proveedor').val(proveedor.nombre);
            $('#moneda').val(proveedor.moneda);

            aplicanImpuestos = proveedor.aplicanImpuestos;

            if(proveedor.monedaExtranjera) {
                Swal.fire(otherCurrencyMessage);
            }

            $('#moneda').toggleClass('blinking', proveedor.monedaExtranjera);
        }

        function fillProducto(input, producto) {
            const $row = $(input).closest('tr');

            const productoYaExiste = $('input[name="producto[]"]').map(function() {
                return $(this).val();
            }).get().some(function(valor) {
                return valor == producto.id;
            });

            if(productoYaExiste) {
                Swal.fire(productAlreadyExisteMessageOptions);
                $row.find('.input-codigo').val('');
                $(input).focus();
                $row.find('.bs-popover').val('');
                $row.find('input[name="cantidad[]"]').first().attr('disabled', true);
                $row.find('input[name="costo_compra[]"]').first().attr('disabled', true);

                return false;
            }

            $row.find('input[type="hidden"][name="producto[]"]').first().val(producto.id);
            $row.find('input[name="cantidad[]"]').first().val('');
            $row.find('input[name="cantidad[]"]').first().attr('disabled', false);
            $row.find('input[name="cantidad[]"]').first().focus();
            $row.find('input[name="cantidad[]"]')[0].dataset.iva = producto.iva;
            $row.find('input[name="cantidad[]"]')[0].dataset.ieps = producto.ieps;
            $row.find('input[name="cantidad[]"]')[0].dataset.rIva = producto.rIva;
            $row.find('input[name="costo_compra[]"]').first().val('');
            $row.find('input[name="costo_compra[]"]').first().attr('disabled', false);
            $row.find('.input-codigo').val(producto.codigo);
            $row.find('.input-costo-f').val(producto.costoF);
            $row.find('.input-costo-uc').val(producto.costoUC);
            $row.find('.input-importe').val(0);
            $row.find('.input-codigo').attr('disabled', false);
            $row.find('.bs-popover').val(producto.descripcion);

            calcularResumenTotal();
        }

        function calcularImporte(input) {
            const $row = $(input).closest('tr');
            let cantidad = parseFloat($row.find('input[name="cantidad[]"]').first().val().replace(/[^\d.]/g, ''));
            let costoCompra = parseFloat($row.find('input[name="costo_compra[]"]').first().val().replace(/[^\d.]/g, ''));

            cantidad = isNaN(cantidad) ? 0 : cantidad;
            costoCompra = isNaN(costoCompra) ? 0 : costoCompra;

            let importe = cantidad * costoCompra;
            importe = Math.round(importe * 1000000) / 1000000;  // Redondear a 6 decimales

            $row.find('.input-importe').val(aplicarRegexMonto(importe.toString(), 6));

            calcularResumenTotal();
        }

        function calcularResumenTotal() {
            const inputsCantidad = $('input[name="cantidad[]"]')
            const inputsCostoCompra = $('input[name="costo_compra[]"]')
            const inputDescuento = parseFloat($('#descuento').val());

            let articulos = 0;
            let suma = 0;
            let descuento = 0;
            let neto = 0;
            let ieps = 0;
            let iva = 0;
            let rIva = 0;
            let total = 0;

            for (let index = 0; index < inputsCantidad.length; index++) {
                const cantidad = parseFloat(inputsCantidad[index].value.replace(/[^\d.]/g, ''));
                const costo = parseFloat(inputsCostoCompra[index].value.replace(/[^\d.]/g, ''));
                const porcentajeIva = aplicanImpuestos ? parseFloat(inputsCantidad[index].dataset.iva ?? 0) : 0;
                const porcentajeIeps = aplicanImpuestos ? parseFloat(inputsCantidad[index].dataset.ieps ?? 0) : 0;
                const porcentajeRIva = aplicanImpuestos ? parseFloat(inputsCantidad[index].dataset.rIva ?? 0) : 0;
                const importe = isNaN(cantidad) || isNaN(costo) ? 0 : cantidad * costo;
                const importeDescuento = inputDescuento == 0 ? 0 : importe * (inputDescuento / 100);

                articulos += isNaN(cantidad) ? 0 : cantidad;
                suma += importe;
                iva += porcentajeIva > 0 ? (importe - (importeDescuento) ) * (porcentajeIva / 100) : 0;
                ieps += porcentajeIeps > 0 ? (importe - (importeDescuento) ) * (porcentajeIeps / 100) : 0;
                rIva += porcentajeRIva > 0 ? (importe - (importeDescuento) ) * (porcentajeRIva / 100) : 0;
            }

            descuento = inputDescuento > 0 ? suma * (inputDescuento / 100) : 0;
            neto = suma - descuento;
            total = suma - descuento + ieps + iva + rIva;

            $('#txtArticulos').text(articulos > 0 ? aplicarRegexMonto(articulos.toFixed({{ $decimales }}).toString(), {{ $decimales }}) : '0');
            $('#txtSuma').text(suma > 0 ? aplicarRegexMonto(suma.toFixed(6).toString(), 6) : '-');
            $('#txtDescuento').text(descuento > 0 ? aplicarRegexMonto(descuento.toFixed(6).toString(), 6) : '-');
            $('#txtNeto').text(neto > 0 ? aplicarRegexMonto(neto.toFixed(6).toString(), 6) : '-');
            $('#txtIeps').text(ieps > 0 ? aplicarRegexMonto(ieps.toFixed(6).toString(), 6) : '-');
            $('#txtIva').text(iva > 0 ? aplicarRegexMonto(iva.toFixed(6).toString(), 6) : '-');
            $('#txtRetIva').text(rIva > 0 ? aplicarRegexMonto(rIva.toFixed(6).toString(), 6) : '-');
            $('#txtTotal').text(total > 0 ? aplicarRegexMonto(total.toFixed(6).toString(), 6) : '-');
        }

        function nextProducto(input) {
            const $row = $(input).closest('tr');
            const importe = parseFloat($row.find('.input-importe').val().replace(/[^\d.]/g, ''));

            if(importe > 0){
                const newRow = `
                    <tr>
                        <td>
                            <input type="hidden" name="producto[]">
                            <div class="d-flex justify-content-center">
                                <button type="button" class="close btn-delete-row" onclick="deleteProducto(this)" title="Eliminar esta fila.">
                                    <i class="las la-times "></i>
                                </button>
                                <input type="text" class="form-control form-control-sm input-codigo" placeholder="Código..." onkeydown="if (event.key === 'Enter') { searchProducto(this); } ">
                            </div>
                        </td>
                        <td class="col-descripcion">
                            <div class="d-flex justify-content-center">
                                <input type="text" class="form-control form-control-sm bs-popover" id="name_producto_${incrementalProductos}" placeholder="Descripción..." data-container="body" data-trigger="hover" data-content="Teclea el nombre del producto a buscar.">
                                <img class="image-loading" src="{{ asset('assets/img/loading.gif')  }}" alt="Loading..." style="display: none">
                            </div>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm text-right" placeholder="Cantidad..." name="cantidad[]" oninput="formatoMonto(this, {{ $decimales }}); calcularImporte(this)" onkeydown="if (event.key === 'Enter') { nextCosto(this); } " disabled>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm input-costo-f text-right" placeholder="Costo F..." readonly>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm input-costo-uc text-right" placeholder="Costo UC..." readonly>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm text-right" placeholder="Costo Compra..." name="costo_compra[]" oninput="formatoMonto(this, 6); calcularImporte(this)" onkeydown="if (event.key === 'Enter') { nextProducto(this); } " disabled>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm input-importe text-right" placeholder="Importe..." readonly value="0">
                        </td>
                    </tr>
                `;

                $('#productos_body').append(newRow);

                let $siguienteRow = $row.next();

                while ($siguienteRow.length > 0) {
                    const $inputCodigo = $siguienteRow.find('.input-codigo').first();

                    if (!$inputCodigo.prop('readonly')) {
                        $siguienteRow.find('.input-codigo').first().focus();
                        break;
                    }
                    $siguienteRow = $siguienteRow.next();
                }

                calcularResumenTotal();
                inicializarAutoCompletadoProductos(incrementalProductos);
                incrementalProductos++;
            }

            habilitarEliminarProductos();
        }

        function continuarAnadirProductos() {
            const $form = $('#frm_captura');
            const $descuento = $('#descuento');
            const $anticipo = $('#anticipo');
            const descuento = parseFloat($descuento.val()) || 0;
            const anticipo = parseFloat($anticipo.val()) || 0;

            $descuento.val(descuento);
            $anticipo.val(anticipo);

            $form.find('input, select').attr('readonly', true);
            $form.find('input[type="radio"], button').attr('disabled', true);

            $('#fragmento_productos')
                .removeClass('hide-element')
                .find('input').val('').first().focus();

            $('#fragmento_productos').find('.input-codigo').first().focus();
            $('#fragmento_descuento').toggleClass('hide-element', !descuento);
        }

        function deleteProducto(input) {
            const $row = $(input).closest('tr');
            $row.remove();

            habilitarEliminarProductos();
            calcularResumenTotal();
        }

        function habilitarEliminarProductos() {
            const productosIngresados = $('#productos_body tr').length;
            const botonesEliminar = $('#productos_body .btn-delete-row');
            botonesEliminar.attr('disabled', productosIngresados <= 1);
        }

        function selectTipoProductoOption(input) {
            $('.btn-group-tipo-producto .btn').removeClass('active');

            if ($(input).is(':checked')) {
                $(input).next('label').addClass('active');
                tipoProductos = $(input).val();
            }
        }

        function generarOC() {
            const inputsCantidad = $('input[name="cantidad[]"]')
            const inputsCostoCompra = $('input[name="costo_compra[]"]')
            const inputsProducto = $('input[name="producto[]"]')

            let formData = new FormData($('#frm_captura')[0]);

            let ordenesAgregadas = 0;

            for (let index = 0; index < inputsCantidad.length; index++) {
                const cantidad = inputsCantidad[index].value.replace(/[^\d.]/g, '');
                const costoCompra = inputsCostoCompra[index].value.replace(/[^\d.]/g, '');
                const producto = inputsProducto[index].value.replace(/[^\d.]/g, '');

                if(cantidad.length > 0 && costoCompra.length > 0 && producto.length > 0) {
                    formData.append('cantidad[]', cantidad);
                    formData.append('costo_compra[]', costoCompra);
                    formData.append('producto[]', producto);
                    ordenesAgregadas++;
                }
            }

            if(ordenesAgregadas <= 0) {
                Swal.fire(noOrderAddedMessage);
                return;
            }

            formData.append('anticipo', formData.get('anticipo').replace(/[^\d.]/g, ''));
            formData.append('tipo_producto', tipoProductos)
            formData.append('nota', $('#nota').val());

            $.ajax({
                url: "{{ url('operaciones/captura-ordenes-compra/generar-orden-compra') }}",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        const folio = res.folio;
                        const estatus = res.estatus;
                        const id = res.idOC;

                        fillOrdenInfo(folio, estatus, id);

                        Swal.fire(orderGeneratedSucessfully)
                        mostrarBotonesOrdenCreada(true);
                        downloadPdfWithUrl(res.pdfUrl, res.pdfFileName)
                        $('.fragmento-checkbox').removeClass('hide-element');
                        $('#checkAllProducts').prop('checked', false);
                        $('#btnCancelarOrden').attr('disabled', true);

                        inicializarCheckboxes()
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")

                        if(error.status == 400) {
                            Swal.fire({
                                icon: "error",
                                title: "Error al procesar la petición",
                                text: error.responseText
                            });

                            return false;
                        }

                        Swal.fire(ajaxErrorMessage);
                    }, 500);
                }
            })
        }

        function mostrarBotonesOrdenCreada(ordenCreada) {
            if(ordenCreada) {
                $('.nueva-orden').addClass('hide-element');
                $('.orden-existente').removeClass('hide-element');
                return false;
            }

            $('.nueva-orden').removeClass('hide-element');
            $('.orden-existente').addClass('hide-element')
        }

        function fillOrdenInfo(folio, estatus, id) {
            $('#txtFolio').text(folio);
            $('#txtEstatus').text(estatus);
            $('#fragmento_info_oc').removeClass('hide-element');
            $('#idOC').val(id)
        }

        function downloadPdfWithUrl(url, fileName) {
            let link = document.createElement('a');
            link.href = url;
            link.download = fileName;

            // Descarga PDF
            link.click();
            link.remove();
        }

        function nextCosto(input) {
            const cantidad = parseFloat($(input).val().replace(/[^\d.]/g, ''));

            if(!isNaN(cantidad) && cantidad > 0) {
                const $row = $(input).closest('tr');
                $row.find('input[name="costo_compra[]"]').first().focus();
            }
        }

        function addNota() {
            $('#modal-nota').modal('show');
        }

        function fillCapturaOrden(datosCaptura) {
            const $form = $('#frm_captura');
            $form.find('input').attr('readonly', false);
            $form.find('button').attr('disabled', true);
            $form.find('input[type="radio"]').attr('disabled', false);
            $form.find('select').attr('readonly', false);

            if(datosCaptura.monedaExtranjera) {
                Swal.fire(otherCurrencyMessage);
            }

            $('#proveedor').val(datosCaptura.idProveedor ?? '');
            $('#proveedor_search').val(datosCaptura.numeroProveedor ?? '');
            $('#name_proveedor').val(datosCaptura.nombreProveedor ?? '');
            $('#moneda').val(datosCaptura.moneda ?? '');
            $('#moneda').toggleClass('blinking', datosCaptura.monedaExtranjera);
            $('#plazo').val(datosCaptura.plazo);
            $('#plazo_anticipo').val(datosCaptura.plazoAnticipo);
            $('#anticipo').val(datosCaptura.importeAnticipo ?? '');
            $('#fecha_entrega').val(datosCaptura.fechaEntrega);
            $('#almacen').val(datosCaptura.almacen);
            $('#condiciones_entrega').val(datosCaptura.entrega);
            $('#clasificacion').val(datosCaptura.clasificacion);
            $('#descuento').val(datosCaptura.descuento ?? '');
            $('#flete').val(datosCaptura.flete);
            $('#nota').val(datosCaptura.notas);
        }

        function searchOrdenCompra() {
            const folio = $('#folio').val();

            if(folio != '') {
                $.ajax({
                    url: "{{ url('operaciones/captura-ordenes-compra/buscar-orden-compra') }}",
                    data: {
                        folio: folio
                    },
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {

                            $("#loadingModal").modal("hide");

                            if(jqXHR.status == 204) {
                                $('#ordenNoEncontradaMensaje').removeClass('hide-element');
                                return false;
                            }

                            fillOrdenInfo(res.folio, res.estatus, res.id);
                            fillCapturaOrden(res.datosCaptura);
                            fillInfoProductos(res.infoProductos);
                            mostrarBotonesOrdenCreada(true);
                            $('#frm_captura').find('input[type="radio"]').attr('disabled', true);
                            $('#fragmento_btn_continuar').addClass('hide-element');
                            $('#modal-buscar-orden').modal('hide');

                            if(res.estatus == 'Cancelado') {
                                adaptarOrdenCompraCancelada(true);
                            }

                            if(res.estatus == 'Levantado sin autorizar') {
                                $('#btnAutorizar').addClass('hide-element');
                            }

                            validarCapturaDatos()
                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")
                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                })
            }
        }

        function fillInfoProductos(infoProductos) {
            $('#fragmento_productos').removeClass('hide-element');
            $('#fragmentoInfoOrdenCompra').removeClass('hide-element');
            let $tabla = $('#productos_body');
            $tabla.empty();
            $('.fragmento-checkbox').removeClass('hide-element');
            $('#checkAllProducts').prop('checked', false);
            $('#btnCancelarOrden').attr('disabled', true);

            infoProductos.forEach(infoProducto => {
                const row = `
                    <tr class="${infoProducto.cancelado ? 'producto-cancelado' : ''}">
                        <td>
                            <input type="hidden" name="producto[]" value="${infoProducto.cancelado ? '' : infoProducto.idProducto}">
                            <div class="d-flex justify-content-center">
                                <input type="text" class="form-control form-control-sm" value="${infoProducto.codigo}" placeholder="Código..." readonly>
                            </div>
                        </td>
                        <td class="col-descripcion">
                            <div class="d-flex justify-content-center">
                                <input type="text" class="form-control form-control-sm bs-popover" value="${infoProducto.descripcion}" id="name_producto_${incrementalProductos}" placeholder="Descripción..." data-container="body" data-trigger="hover" data-content="Teclea el nombre del producto a buscar." readonly>
                                <img class="image-loading" src="{{ asset('assets/img/loading.gif')  }}" alt="Loading..." style="display: none">
                            </div>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm text-right" data-iva="${infoProducto.iva}" data-ieps="${infoProducto.ieps}" data-rIva="${infoProducto.rIva}" placeholder="Cantidad..." ${infoProducto.cancelado ? 'readonly' : ''} value="${infoProducto.cantidad}" ${infoProducto.cancelado ? '' : 'name="cantidad[]"'} oninput="formatoMonto(this, {{ $decimales }}); calcularImporte(this)" onkeydown="if (event.key === 'Enter') { nextCosto(this); } ">
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm input-costo-f" value="${infoProducto.costoF}" placeholder="Costo F..." readonly>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm input-costo-uc" value="${infoProducto.costoUC}" placeholder="Costo UC..." readonly>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm text-right" placeholder="Costo Compra..." ${infoProducto.cancelado ? 'readonly' : ''} value="${infoProducto.costoCompra}" ${infoProducto.cancelado ? '' : 'name="costo_compra[]"'} oninput="formatoMonto(this, 6); calcularImporte(this)" onkeydown="if (event.key === 'Enter') { nextProducto(this); } ">
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm text-right input-importe" placeholder="Importe..." readonly value="${infoProducto.importe}">
                        </td>
                        <th class="fragmento-checkbox" style="text-align: center">
                            <input type="checkbox" class="productSelected" ${infoProducto.cancelado ? 'disabled' : ''}>
                        </th>
                    </tr>
                `;

                $tabla.append(row);

                calcularResumenTotal();
                inicializarAutoCompletadoProductos(incrementalProductos);
                incrementalProductos++;
                inicializarCheckboxes()
            });
        }

        function darDeBajaOrden() {
            const idOrdenCompra = $('#idOC').val();

            if(idOrdenCompra != '') {
                const formData = new FormData();

                formData.append('idOrdenCompra', idOrdenCompra);

                $.ajax({
                    url: "{{ url('operaciones/captura-ordenes-compra/baja-orden-compra') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide");

                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")

                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                })
            }
        }

        function cancelarProductos() {
            const formData = new FormData();

            $('.productSelected').each(function() {
                const $this = $(this);

                if($this.is(":checked")) {
                    const $row = $($this).closest('tr');
                    $row.addClass('producto-cancelado');
                    $row.find('input').attr('readonly', true);
                    $this.attr('disabled', true);
                    formData.append('productos[]', $row.find('input[name="producto[]"]').first().val());
                    $row.find('input[name="producto[]"]').first().val('');
                }
            });

            const idOrdenCompra = $('#idOC').val();

            if(idOrdenCompra != '' && formData.getAll('productos[]').length > 0) {

                formData.append('idOrdenCompra', idOrdenCompra);

                $.ajax({
                    url: "{{ url('operaciones/captura-ordenes-compra/cancelar-orden-compra') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide");

                            Swal.fire(orderCancelledSucessfully);

                            const estatus = res.estatus;

                            $('#txtEstatus').text(estatus);

                            if(estatus == 'Cancelado') {
                                adaptarOrdenCompraCancelada(true);
                            }
                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")

                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                })
            }
        }

        function adaptarOrdenCompraCancelada(cancelada) {
            if(cancelada) {
                $('#btnGuardarCambios').addClass('hide-element')
                $('#btnCancelarOrden').addClass('hide-element')
                $('#btnAutorizar').addClass('hide-element')

                const $form = $('#frm_captura');
                $form.find('input').attr('readonly', true);
                $form.find('button').attr('disabled', true);
                $form.find('input[type="radio"]').attr('disabled', true);
                $form.find('select').attr('readonly', true);

                return false;
            }

            $('#btnGuardarCambios').removeClass('hide-element')
            $('#btnCancelarOrden').removeClass('hide-element')
            $('#btnAutorizar').removeClass('hide-element')

            const $form = $('#frm_captura');
            $form.find('input').attr('readonly', false);
            $form.find('button').attr('disabled', false);
            $form.find('input[type="radio"]').attr('disabled', false);
            $form.find('select').attr('readonly', false);
        }

        function autorizarOrden() {
            const idOrdenCompra = $('#idOC').val();

            if(idOrdenCompra != '') {
                const formData = new FormData();

                formData.append('idOrdenCompra', idOrdenCompra);

                $.ajax({
                    url: "{{ url('operaciones/captura-ordenes-compra/autorizar-orden-compra') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide");

                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")

                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                })
            }
        }

        function reimprimirPDF() {
            const idOrdenCompra = $('#idOC').val();

            if(idOrdenCompra != '') {
                const formData = new FormData();

                formData.append('idOrdenCompra', idOrdenCompra);

                $.ajax({
                    url: "{{ url('operaciones/captura-ordenes-compra/reimprimir-orden-compra') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide");
                            downloadPdfWithUrl(res.pdfUrl, res.pdfFileName)
                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")

                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                })
            }
        }

        function limpiarFormulario() {
            $('#fragmento_productos').addClass('hide-element');
            $('#productos_body').empty();
            $('.fragmento-checkbox').addClass('hide-element');
            $('#checkAllProducts').prop('checked', false);
            $('#btnCancelarOrden').attr('disabled', true);

            const newRow = `
                    <tr>
                        <td>
                            <input type="hidden" name="producto[]">
                            <div class="d-flex justify-content-center">
                                <button type="button" class="close btn-delete-row" onclick="deleteProducto(this)" title="Eliminar esta fila.">
                                    <i class="las la-times "></i>
                                </button>
                                <input type="text" class="form-control form-control-sm input-codigo" placeholder="Código..." onkeydown="if (event.key === 'Enter') { searchProducto(this); } ">
                            </div>
                        </td>
                        <td class="col-descripcion">
                            <div class="d-flex justify-content-center">
                                <input type="text" class="form-control form-control-sm bs-popover" id="name_producto_${incrementalProductos}" placeholder="Descripción..." data-container="body" data-trigger="hover" data-content="Teclea el nombre del producto a buscar.">
                                <img class="image-loading" src="{{ asset('assets/img/loading.gif')  }}" alt="Loading..." style="display: none">
                            </div>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm text-right" placeholder="Cantidad..." name="cantidad[]" oninput="formatoMonto(this, {{ $decimales }}); calcularImporte(this)" onkeydown="if (event.key === 'Enter') { nextCosto(this); } " disabled>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm input-costo-f text-right" placeholder="Costo F..." readonly>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm input-costo-uc text-right" placeholder="Costo UC..." readonly>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm text-right" placeholder="Costo Compra..." name="costo_compra[]" oninput="formatoMonto(this, 6); calcularImporte(this)" onkeydown="if (event.key === 'Enter') { nextProducto(this); } " disabled>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm input-importe text-right" placeholder="Importe..." readonly value="0">
                        </td>
                        <th class="hide-element fragmento-checkbox" style="text-align: center">
                            <input type="checkbox" class="productSelected">
                        </th>
                    </tr>
                `;

            $('#productos_body').append(newRow);
            calcularResumenTotal();
            inicializarAutoCompletadoProductos(incrementalProductos);
            incrementalProductos++;

            const $form = $('#frm_captura');
            $form.find('input').attr('readonly', false);
            $form.find('button').attr('disabled', true);
            $form.find('input[type="radio"]').attr('disabled', false);
            $form.find('select').attr('readonly', false);

            $('#proveedor').val('')
            $('#proveedor_search').val('')
            $('#name_proveedor').val('')
            $('#moneda').val('')
            $('#anticipo').val('')
            $('#descuento').val('')
            $('#nota').val('')

            const hoy = new Date();
            const año = hoy.getFullYear();
            const mes = ('0' + (hoy.getMonth() + 1)).slice(-2);
            const dia = ('0' + hoy.getDate()).slice(-2);
            const fechaHoy = año + '-' + mes + '-' + dia;

            $('#fecha_entrega').val(fechaHoy)

            const primerOpcionPlazo = $('#plazo option:first').val();
            $('#plazo').val(primerOpcionPlazo).trigger('change');

            const primerOpcionPlazoAnticipo = $('#plazo_anticipo option:first').val();
            $('#plazo_anticipo').val(primerOpcionPlazoAnticipo).trigger('change');

            const primerOpcionAlmacen = $('#almacen option:first').val();
            $('#almacen').val(primerOpcionAlmacen).trigger('change');

            const primerOpcionEntrega = $('#condiciones_entrega option:first').val();
            $('#condiciones_entrega').val(primerOpcionEntrega).trigger('change');

            const primerOpcionClasificacion = $('#clasificacion option:first').val();
            $('#clasificacion').val(primerOpcionClasificacion).trigger('change');

            const primerOpcionFlete = $('#flete option:first').val();
            $('#flete').val(primerOpcionFlete).trigger('change');

            $('#fragmento_info_oc').addClass('hide-element');
            $('#idOC').val('');
            $('#frm_captura').find('input[type="radio"]').attr('disabled', false);
            $('#fragmento_btn_continuar').removeClass('hide-element');

            mostrarBotonesOrdenCreada(false);

            inicializarCheckboxes()
        }

        function habilitarMontoAnticipo(input) {
            const plazoAnticipo = $(input).val();
            const $anticipo = $('#anticipo');

            $anticipo.attr('readonly', plazoAnticipo == '0')
            $anticipo.val(plazoAnticipo == '0' ? '' : $anticipo.val())
        }

        function actualizarOrden() {
            const idOrdenCompra = $('#idOC').val();

            if(idOrdenCompra != '') {
                let formData = new FormData($('#frm_captura')[0]);

                formData.append('idOrdenCompra', idOrdenCompra);

                const inputsCantidad = $('input[name="cantidad[]"]')
                const inputsCostoCompra = $('input[name="costo_compra[]"]')
                const inputsProducto = $('input[name="producto[]"]')

                for (let index = 0; index < inputsCantidad.length; index++) {
                    const cantidad = inputsCantidad[index].value.replace(/[^\d.]/g, '');
                    const costoCompra = inputsCostoCompra[index].value.replace(/[^\d.]/g, '');
                    const producto = inputsProducto[index].value.replace(/[^\d.]/g, '');

                    if(cantidad.length > 0 && costoCompra.length > 0 && producto.length > 0) {
                        formData.append('cantidad[]', cantidad);
                        formData.append('costo_compra[]', costoCompra);
                        formData.append('producto[]', producto);
                    }
                }

                formData.append('anticipo', formData.get('anticipo').replace(/[^\d.]/g, ''));
                formData.append('tipo_producto', tipoProductos)
                formData.append('nota', $('#nota').val());

                $.ajax({
                    url: "{{ url('operaciones/captura-ordenes-compra/actualizar-orden-compra') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide");
                            Swal.fire(orderUpdatedSucessfullyMessage);
                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")

                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                })
            }
        }
    </script>
@endpush