@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: 500;
        position: relative;
    }

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

    .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999 !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-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;
    }

    input[type="date"].form-control-sm {
        padding: .25rem .5rem !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;
    }

    .btn-csv {
        background-color: #65666e !important;
        color: white;
        border-color: #65666e !important;
    }

    .input-importe {
        max-width: 15rem !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered  {
            display: contents;
            font-size: .8rem !important;
        }

    .select2-selection {
        max-height: 1.8rem !important;
    }

    .select2-container--bootstrap {
        min-width: 15rem !important;
        max-height: 2rem !important;
        margin-bottom: .5rem !important;
    }

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

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

    .popover {
        z-index: 9999 !important;
    }

    .btn-sm {
        max-height: 2rem !important;
        height: auto !important;
    }

    .first-insert {
        border-color: #1145bf;
        padding-right: calc(1.5em + .75rem);
        background-repeat: no-repeat;
        background-position: right calc(.375em + .1875rem) center;
        background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    }

    .select2-container .select2-results__option.optInvisible {
        display: none !important;
    }
</style>
@endpush


@section('content')
    <input type="hidden" id="codigoProductoLibre" value="{{ $codigoProductoLibre }}">
    <div id="sub-header" 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 MOVIMIENTOS ALMACEN')}}</span></li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </header>
    </div>

    <div class="layout-px-spacing mt-5" style="min-height: 50vh !important" id="contenedor_selector_operacion">
        <h4 class="card-title text-center">Por favor, seleccione la operación que desea realizar:</h4>
        <div class="d-flex justify-content-center mt-5 align-items-center">
            <button type="button" id="btnOpenCaptura" class="btn btn-primary btn-submit btn-lg d-inline-flex align-items-center mb-3 mr-5" title="Hacer una captura de movimientos a almacen." onclick="openCapturaMovimientos()">
                <i class="las la-pen-fancy icon-large"></i>
                <span class="ml-2">Capturar movimientos</span>
            </button>
            <button type="button" id="btnOpenConsulta" class="btn btn-outlined-secondary btn-submit btn-lg d-inline-flex align-items-center mb-3" title="Consultar y cancelar movimientos a almacenes." onclick="openConsultaMovimientos()">
                <i class="las la-search icon-large"></i>
                <span class="ml-2">Consultar movimientos</span>
            </button>
        </div>
    </div>

    <div class="layout-px-spacing mt-5" style="display: none !important" id="contenedor_consultar_movimientos">
        <div class="container-fluid p-0">
            <div class="row d-flex justify-content-center">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <form action="#" method="post" id="frm_search_mov">
                                <h4 class="card-title">Consulta de movimientos de almacen:</h4>
                                <div class="row">
                                    <div class="col">
                                        <label class="text-bold">Serie del movimiento: <span class="text-danger">*</span></label>
                                        <input type="text" name="serie" id="serie" class="form-control form-control-sm" onkeyup="if(event.key === 'Enter') { triggerSearchEvent() }" oninput="validitySearchMovementForm()" required>
                                    </div>
                                    <div class="col">
                                        <label class="text-bold">Folio del movimiento: <span class="text-danger">*</span></label>
                                        <input type="text" name="folio" id="folio" class="form-control form-control-sm" onkeyup="if(event.key === 'Enter') { triggerSearchEvent() }" onkeydown="validateNumber(event)" oninput="validitySearchMovementForm()" required>
                                    </div>
                                </div>

                                <hr>

                                <div class="row mt-3">
                                    <div class="col d-flex justify-content-center mb-3">
                                        <button id="btnSearchMovement" type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center mr-2" title="Consultar movimiento" onclick="searchMovement()" disabled>
                                            <i class="las la-search icon-large mr-2"></i> Consultar
                                        </button>
                                        <button type="button" class="btn btn-primary-outlined btn-submit d-inline-flex align-items-center" title="Volver al menu de operaciones" onclick="volverAlSelector('contenedor_consultar_movimientos')">
                                            <i class="las la-undo icon-large mr-2"></i> Volver
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layout-px-spacing mt-5" style="display: none !important" id="contenedor_informacion_movimiento">
        <div class="container-fluid p-0">
            <div class="row d-flex justify-content-center">
                <div class="col-md-10">
                    <div class="card">
                        <div class="card-body">
                            <form action="#" method="post" id="frm_search_mov">
                                <h5 class="card-title">Informacion del movimiento</h5>
                                <div class="row">
                                    <div class="col">
                                        <h6>Sucursal: <b id="descripcion-sucursal-consulta">Sucursal descripcion</b></h6>
                                    </div>
                                    <div class="col" id="fragmento-descripcion-proveedor">
                                        <h6>Proveedor: <b id="proveedor-consulta">Proveedor descripcion</b></h6>
                                    </div>
                                    <div class="col">
                                        <h6>Estatus: <b id="estatus-consulta">Estatus</b></h6>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col d-flex">
                                        <p class="text-bold mr-1">Folio:</p>
                                        <span id="infoFolio">Folio ejemplo</span>
                                    </div>
                                    <div class="col d-flex">
                                        <p class="text-bold mr-1">Movimiento:</p>
                                        <span id="infoMovimiento">Movimiento ejemplo</span>
                                    </div>
                                    <div class="col d-flex">
                                        <p class="text-bold mr-1">Fecha:</p>
                                        <span id="infoFecha">Fecha</span>
                                    </div>
                                </div>

                                <div class="row" id="fragmento-informacion-traspaso">
                                    <div class="col d-flex">
                                        <p class="text-bold mr-1">Almacen origen:</p>
                                        <span id="infoAlmacenOrigen">Almacen</span>
                                    </div>
                                    <div class="col d-flex">
                                        <p class="text-bold mr-1">Almacen destino:</p>
                                        <span id="infoAlmacenDestino">Almacen</span>
                                    </div>
                                </div>

                                <div class="row" id="fragmento-informacion-entrada-salida">
                                    <div class="col d-flex">
                                        <p class="text-bold mr-1">Almacen:</p>
                                        <span id="infoAlmacen">Almacen</span>
                                    </div>
                                </div>

                                <hr>

                                <div class="row mt-3">
                                    <div class="col d-flex justify-content-center mb-3">
                                        @if ($acciones[$clavesAcciones['permitirCancelar']]['habilitado'])
                                            <button type="button" class="btn btn-danger btn-submit d-inline-flex align-items-center mr-2" id="btn-cancelar-movimiento" title="Cancelar movimiento" onclick="cancelarMovimiento()">
                                                <i class="las la-times icon-large mr-2"></i> Cancelar
                                            </button>
                                        @endif
                                        <button type="button" class="btn btn-pdf btn-submit d-inline-flex align-items-center mr-2" title="Descargar PDF" onclick="downloadPdfWithoutUrl()">
                                            <i class="las la-file-pdf icon-large mr-2"></i> Descargar PDF
                                        </button>
                                        <button type="button" class="btn btn-primary-outlined btn-submit d-inline-flex align-items-center" title="Volver al menu de operaciones" onclick="volverPantallaConsulta()">
                                            <i class="las la-undo icon-large mr-2"></i> Volver
                                        </button>
                                    </div>
                                </div>

                                <hr>

                                <div id="fragmento-informacion-articulos"></div>

                                <hr>

                                <div class="row mt-3">
                                    <div class="col d-flex justify-content-center mb-3">
                                        <button type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center" title="Desplazar al inicio de la página" onclick="desplazarPaginaInicio()">
                                            <i class="las la-arrow-up icon-large mr-2"></i> Desplazar hacia arriba
                                        </button>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layout-px-spacing mt-5" style="display: none !important" id="contenedor_informacion_captura">
        <div class="container-fluid p-0">

            <div class="row d-flex justify-content-center">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-body">

                            <form action="#" method="post" id="frm_captura">
                                <h4 class="card-title">Información sobre la captura:</h4>

                                <div class="row">
                                    <div class="col">
                                        <input type="hidden" id="tasaIVA" required>
                                        <label class="text-bold">Sucursal: <span class="text-danger">*</span></label>
                                        <select id="sucursal" name="sucursal" class="form-control form-control-sm text-center form-select2" onchange="aplicarTasaIVA(this); validateFormCaptura();" required>
                                            <option value="" selected disabled>Selecciona una sucursal...</option>
                                            @foreach ($sucursales as $sucursal)
                                                <option value="{{ $sucursal->id }}" data-iva="{{ $sucursal->tasa_iva }}" @if ($sucursal->id === auth()->user()->id_sucursal) selected @endif>{{ $sucursal->sucursal . '-' .  $sucursal->descripcion }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    @if (
                                            $acciones[$clavesAcciones['permitirTraspasoAlmacenes']]['habilitado'] ||
                                            $acciones[$clavesAcciones['permitirSalidaAlmacenes']]['habilitado'] ||
                                            $acciones[$clavesAcciones['permitirTraspasoAlmacenes']]['habilitado']
                                        )
                                        <div class="col">
                                            <h6 class="text-bold text-center">Tipo de movimiento a capturar:</h6>
                                            <div class="btn-group btn-group-tipo-mov btn-group-sm margin-radio-group  d-flex justify-content-center" role="group" aria-label="Seleccionar opción">
                                                @if ($acciones[$clavesAcciones['permitirEntradaAlmacenes']]['habilitado'])
                                                    <input type="radio" id="radio-entrada" name="tipo_movimiento" value="entrada" onchange="selectTipoMovimientoOption(this)" checked hidden>
                                                    <label class="btn btn-outline-secondary active" for="radio-entrada">Entrada</label>
                                                @endif

                                                @if ($acciones[$clavesAcciones['permitirSalidaAlmacenes']]['habilitado'])
                                                    <input type="radio" id="radio-salida" name="tipo_movimiento" value="salida" onchange="selectTipoMovimientoOption(this)" hidden>
                                                    <label class="btn btn-outline-secondary" for="radio-salida">Salida</label>
                                                @endif

                                                @if ($acciones[$clavesAcciones['permitirTraspasoAlmacenes']]['habilitado'])
                                                    <input type="radio" id="radio-traspaso" name="tipo_movimiento" value="traspaso" onchange="selectTipoMovimientoOption(this)" hidden>
                                                    <label class="btn btn-outline-secondary" for="radio-traspaso">Traspaso</label>
                                                @endif
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <div class="row d-flex justify-content-center">
                                    <div class="col-md-6">
                                        <label class="text-bold">Fecha (dia/mes/año): <span class="text-danger">*</span></label>
                                        <input id="fecha" type="date" class="form-control form-control-sm" value="{{ $fecha_actual }}" required onchange="validateFormCaptura()" readonly>
                                    </div>
                                </div>

                                <hr>

                                <div class="row mt-3">
                                    <div class="col d-flex justify-content-center mb-3">
                                        <button id="btnContinuarProceso" type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center mr-2" title="Continuar con el proceso" onclick="continueWithProcess()" disabled>
                                            <i class="las la-forward icon-large mr-2"></i> Continuar
                                        </button>
                                        <button type="button" class="btn btn-primary-outlined btn-submit d-inline-flex align-items-center" title="Volver al menu de operaciones" onclick="volverAlSelector('contenedor_informacion_captura')">
                                            <i class="las la-undo icon-large mr-2"></i> Volver
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layout-px-spacing mt-3" id="contenedor-traspasos" style="display: none !important">
        <div class="container-fluid p-0">
            <div class="row d-flex justify-content-center" id="div_datos_traspaso">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <input type="hidden" id="captura">
                            <form action="#" method="post" id="frm_informacion_movimiento">
                                <div class="d-flex">
                                    <h6 id="titulo-movimiento" class="card-title">Titulo del movimiento:</h6>
                                    <h6 class="ml-2"><b id="descripcion-sucursal">Sucursal descripcion</b></h6>
                                </div>

                                <div id="fragmento-traspaso" class="hide-element">
                                    <div class="row">
                                        <div class="col">
                                            <label class="text-bold">Almacen de origen: <span class="text-danger">*</span></label>
                                            <select id="almacen_origen" name="almacen_origen" class="form-control form-control-sm text-center form-select2" required onchange="validateTraspasoOptions(); resetearListaArticulos(this); actualizarSelectDestino(this);">
                                                <option value="" selected disabled>Selecciona un almacen...</option>
                                            </select>
                                        </div>

                                        <div class="col">
                                            <label class="text-bold">Almacen de destino: <span class="text-danger">*</span></label>
                                            <select id="almacen_destino" name="almacen_destino" class="form-control form-control-sm text-center form-select2" required onchange="validateTraspasoOptions();">
                                                <option value="" selected disabled>Selecciona un almacen...</option>

                                                @foreach ($almacenesTraspaso as $almacen)
                                                    <option value="{{ $almacen['id'] }}">{{ $almacen['almacen'] . ' - ' . $almacen['descripcion'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col">
                                            <label class="text-bold text-center">Tipo de traspaso:</label>
                                            <div class="btn-group btn-group-tipo-traspaso btn-group-sm margin-radio-group d-flex justify-content-center" role="group" aria-label="Seleccionar opción">
                                                <input type="radio" id="radio-traspaso-normal" name="tipo_traspaso" value="normal" onchange="selectTipoTraspasoOption(this)" checked hidden>
                                                <label class="btn btn-outline-secondary btn-sm active" for="radio-traspaso-normal">Normal</label>

                                                <input type="radio" id="radio-traspaso-remision" name="tipo_traspaso" value="remision" onchange="selectTipoTraspasoOption(this)" hidden>
                                                <label class="btn btn-outline-secondary btn-sm" for="radio-traspaso-remision">Remisión</label>
                                            </div>
                                        </div>

                                        <div class="col">
                                            <label class="text-bold text-center">Aplicación:</label>
                                            <div class="btn-group btn-group-aplicacion btn-group-sm margin-radio-group d-flex justify-content-center" role="group" aria-label="Seleccionar opción">
                                                <input type="radio" id="radio-sin-aplicacion" name="aplicacion" value="sin-aplicacion" onchange="selectAplicacionOption(this)" checked hidden>
                                                <label class="btn btn-outline-secondary btn-sm active" for="radio-sin-aplicacion">Sin aplicacion</label>

                                                <input type="radio" id="radio-pedido" name="aplicacion" value="pedido" onchange="selectAplicacionOption(this)" hidden>
                                                <label class="btn btn-outline-secondary btn-sm" for="radio-pedido">Pedido</label>

                                                <input type="radio" id="radio-mov-almacen" name="aplicacion" value="mov-almacen" onchange="selectAplicacionOption(this)" hidden>
                                                <label class="btn btn-outline-secondary btn-sm" for="radio-mov-almacen">Mov. almacen</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-1 mb-2" id="fragmento-informacion-aplicacion">
                                        <div class="col">
                                            <label class="text-bold">Serie: <span class="text-danger">*</span></label>
                                            <input type="text" name="serie" class="form-control form-control-sm" oninput="validateTraspasoOptions();" required>
                                        </div>

                                        <div class="col">
                                            <label class="text-bold">Folio: <span class="text-danger">*</span></label>
                                            <input type="text" name="folio" class="form-control form-control-sm" onkeydown="validateNumber(event)" oninput="validateTraspasoOptions();" required>
                                        </div>
                                    </div>

                                    <div class="row mt-1">
                                        <div class="col d-flex justify-content-center">
                                            <button id="btnContinuarTraspaso" type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center mr-2" title="Continuar con traspaso" onclick="continuarConTraspaso()" disabled>
                                                <i class="las la-arrow-circle-right icon-large mr-2"></i> Continuar
                                            </button>
                                            <button type="button" class="btn btn-primary-outlined btn-submit d-inline-flex align-items-center" title="Volver al menu de información de captura" onclick="volverMenuInfo()">
                                                <i class="las la-undo icon-large mr-2"></i> Volver
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div id="fragmento-entrada-salida" class="hide-element">
                                    <div class="row">
                                        <div class="col">
                                            <label class="text-bold">Almacen: <span class="text-danger">*</span></label>
                                            <select id="almacen" name="almacen" class="form-control form-control-sm text-center form-select2" required onchange="validateEntradaSalidaOptions(); resetearListaArticulos(this);">
                                                <option value="" selected disabled>Selecciona un almacen...</option>
                                            </select>
                                        </div>

                                        <div class="col" id="movimientos-entrada">
                                            <label class="text-bold">Tipo de movimiento: <span class="text-danger">*</span></label>
                                            <select name="movimiento_almacen" id="movimiento_almacen_entrada" class="form-control form-control-sm text-center form-select2" required onchange="validateEntradaSalidaOptions();">
                                                <option value="" selected disabled>Selecciona un tipo de movimiento...</option>

                                                @foreach ($movimientosEntrada as $tipoMovimiento)
                                                    <option value="{{ $tipoMovimiento->id }}">{{ $tipoMovimiento->descripcion }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col" id="movimientos-salida">
                                            <label class="text-bold">Tipo de movimiento: <span class="text-danger">*</span></label>
                                            <select name="movimiento_almacen" id="movimiento_almacen_salida" class="form-control form-control-sm text-center form-select2" required onchange="validateEntradaSalidaOptions();">
                                                <option value="" selected disabled>Selecciona un tipo de movimiento...</option>

                                                @foreach ($movimientosSalida as $tipoMovimiento)
                                                    <option value="{{ $tipoMovimiento->id }}">{{ $tipoMovimiento->descripcion }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col">
                                            <label class="text-bold">Contraseña: <span class="text-danger">*</span></label>
                                            <input type="password" id="password" name="password" class="form-control form-control-sm" data-container="body" data-trigger="hover" data-content="Teclea la contraseña del tipo de movimiento." onkeyup="if(event.key === 'Enter') { continuarConEntradaSalida() } else {validateEntradaSalidaOptions()}" required>
                                        </div>

                                        <div class="col">
                                            <label class="text-bold">Proveedor: </label>
                                            <select id="proveedor" name="proveedor" class="form-control form-control-sm text-center form-select2">
                                                <option value="0" selected>Ninguno</option>

                                                @foreach ($proveedores as $proveedor)
                                                    <option value="{{ $proveedor->id }}">{{ $proveedor->proveedor . ' - ' . $proveedor->nombre }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col d-flex justify-content-center">
                                            <button id="btnContinuarEntradaSalida" type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center mr-2" title="Continuar con el proceso." onclick="continuarConEntradaSalida()" disabled>
                                                <i class="las la-arrow-circle-right icon-large mr-2"></i> Continuar
                                            </button>
                                            <button type="button" class="btn btn-primary-outlined btn-submit d-inline-flex align-items-center" title="Volver al menu de información de captura" onclick="volverMenuInfo()">
                                                <i class="las la-undo icon-large mr-2"></i> Volver
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row d-flex justify-content-center mt-3 hide-element" id="fragmento-ingresar-productos">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-title">Ingresar articulos</h6>

                            <form action="#" method="post" id="frm_articulos_traspasos">
                                <div class="row" id="fragmentoDescripcionesCampos">
                                    <div class="col">
                                        <label class="text-bold">Codigo: <span class="text-danger">*</span></label>
                                    </div>
                                    <div class="col">
                                        <label class="text-bold">Descripción: <span class="text-danger">*</span></label>
                                    </div>
                                    <div class="col">
                                        <label class="text-bold">Existencias: <span class="text-danger">*</span></label>
                                    </div>
                                    <div class="col">
                                        <label class="text-bold">Cantidad: <span class="text-danger">*</span></label>
                                    </div>
                                    <div class="col">
                                        <label class="text-bold">Costo: <span class="text-danger">*</span></label>
                                    </div>
                                    <div class="col">
                                        <label class="text-bold">Importe: <span class="text-danger">*</span></label>
                                    </div>
                                    <span class="invisible-item" style="display: inline-block; width: 5em; height: 20px;"></span>
                                </div>

                                <div id="fragmento-articulos">
                                </div>
                            </form>

                            <hr>

                            <div class="row d-flex justify-content-center" id="div_totales_traspasos">
                                <div class="col">
                                    <label class="text-bold">Articulos ingresados:</label>
                                    <input type="text" id="articulosIngresados" class="form-control form-control-sm" value="0" readonly>
                                </div>
                                <div class="col">
                                    <label class="text-bold">Importe neto:</label>
                                    <input type="text" id="importeNeto" class="form-control form-control-sm" value="0" readonly>
                                </div>
                                <div class="col">
                                    <label class="text-bold">I.V.A:</label>
                                    <input type="text" id="importeIVA" class="form-control form-control-sm" value="0" readonly>
                                </div>
                                <div class="col">
                                    <label class="text-bold">Importe total:</label>
                                    <input type="text" id="importeTotal" class="form-control form-control-sm" value="0" readonly>
                                </div>
                                <button id="btnCapturarTraspaso" type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center" title="Guardar información de traspasos" onclick="capturar()">
                                    <i class="las la-save icon-xl text-bold mr-2"></i> Guardar
                                </button>
                                <button type="button" class="btn btn-primary-outlined btn-submit d-inline-flex align-items-center ml-2" title="Reestablece los articulos seleccionados" onclick="cleanFragmentoArticulos(false)">
                                    <i class="las la-undo-alt icon-xl text-bold mr-2"></i> Restaurar
                                </button>
                                <input type="file" hidden id="file-csv" accept=".csv">
                                <button type="button" class="btn btn-csv btn-submit d-inline-flex align-items-center ml-2" title="Carga masiva por medio de CSV" onclick="massiveLoadCSV()">
                                    <i class="las la-file-csv icon-xl text-bold mr-2"></i> Carga masiva
                                </button>
                            </div>
                            <hr>
                            <label><b>Instrucciones:</b> Para buscar por descripcion un producto, tecleé <b>F9</b> dentro de la caja de texto <b>'CODIGO'</b>. Para buscar por codigo, primero debera ingresarlo dentro de la caja de texto <b>'CODIGO'</b>, despues tecleé <b>ENTER</b> y automaticamente se buscará y rellenará la información en caso de que se haya encontrado dicho producto, caso contrario, se le informará y devolvera a la caja de texto <b>'CODIGO'</b>.</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade draggable" id="modal-buscar-producto" tabindex="-1" role="dialog" aria-hidden="true">
        <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-nueva-tarjeta">Buscar codigo del producto.</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>

                <div class="modal-body">

                    <span><b>Instrucciones:</b> Ingrese la descripción del producto a buscar, despues de seleeccionarlo automáticamente se completará la información necesaria.</span>
                    <div class="row mt-2">
                        <input type="hidden" id="rowNumber">
                        <div class="col">
                            <label class="text-bold">Descripción del producto a buscar: </label>
                            <div class="d-flex justify-content-center">
                                <input type="text" class="form-control form-control-sm bs-popover" id="name_producto" data-container="body" data-trigger="hover" data-content="Teclea el nombre del producto a buscar.">
                                <img id="loadingSearchProducto" class="image-loading" src="{{ asset('assets/img/loading.gif')  }}" alt="Loading..." style="display: none">
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end mt-2">
                        <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Cerrar</button>
                    </div>
                </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 addedRowsCount = 0;
        let urlPdf = '';
        let filenamePdf = '';
        let opcionAntesDelCambio = '';
        let optionToRemove = null;

        const MOSTRAR_COSTOS = {!! json_encode($acciones[$clavesAcciones['mostrarCostos']]['habilitado'] ?? false) !!};
        const MODIFICAR_COSTOS = {!! json_encode($acciones[$clavesAcciones['modificarCostos']]['habilitado'] ?? false) !!};

        const Toast = Swal.mixin({
            toast: true,
            position: 'bottom-end',
            showConfirmButton: false,
            timer: 2500,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
                toast.addEventListener('click', () => {
                    Swal.close();
                });
            },
            customClass: {
                container: 'toast-index'
            }
        })

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

        const dynamicMessageError = {
            icon: 'warning',
            title: '¡Ha ocurrido un error!',
        }

        const dinamicMessageInfo = {
            icon: 'info',
            title: '¡Aviso!',
        }

        const csvFileLoadSuccessMessage = {
            icon: 'success',
            title: '¡Cargado correctamente!',
            text: '¡El archivo CSV ha sido cargado correctamente!'
        }

        const csvFileLoadWithDetailsMessage = {
            icon: 'warning',
            title: '¡Cargado con detalles!',
        }

        const repeatedProductMessageOptions = {
            icon: 'warning',
            title: '¡Producto ya incluido!',
            text: 'El producto que quiere ingresar ya ha sido seleccionado, por favor, ingrese otro.'
        }

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

        const noContentMessageOptions = {
            icon: 'info',
            title: '¡Sin contenido!',
            text: 'La consulta no obtuvo ningún resultado.',
            confirmButtonText: 'Aceptar',
            customClass: {
                container: 'alert-in-modal'
            },
        }

        const movementStoredSuccessMessage = {
            icon: 'success',
            title: '¡Movimiento registrado!',
            showConfirmButton: false,
            allowOutsideClick: false,
        }

        const cancelledMovSuccessMessage = {
            icon: 'success',
            title: '¡Hecho!',
            html: '¡Movimiento cancelado exitosamente!',
        }

        const passwordMovementAuthSuccessMessage = {
            icon: 'success',
            title: '¡Clave válida!',
        }

        const passwordMovementAuthErrorMessage = {
            icon: 'error',
            title: '¡Clave inválida!',
        }

        const showProductsErrorsMessage = {
            icon: 'warning',
            title: '¡Error al añadir algunos productos!',
        }

        function eliminarTextoDespuesSegundaComa(texto) {
            const segundaComaIndex = texto.indexOf(',', texto.indexOf(',') + 1);

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

        function processCSV(text) {

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

            let codigosProductos = [];
            let cantidades = [];
            let flagCodigosDuplicados = false;

            let codigosAdicionados = [];

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

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

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

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

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

            Swal.fire(noProductsForMassiveBulk);
        }

        function fillArticulosInputs(response, cantidades, flagCodigosDuplicados){

            const infoProductos = response.informacionEncontrada
            const rowsAddedBeforeBulk = addedRowsCount;
            let flagCantidadSuperaExistencia = false;
            const tipoCaptura = $('#captura').val();

            for(let i = 0; i < infoProductos.length; i++) {

                if($('#filaNumero0').find('.input-costo').val() != '0') {
                    insertNuevoArticulo();
                }

                const filaRellenar = addedRowsCount == 0 ?
                        $('#filaObligatoria') :
                        $(`#filaNumero${addedRowsCount - 1}`);

                if(filaRellenar !== undefined) {
                    filaRellenar.find('input[name="codigo[]"]').val(infoProductos[i].codigo);
                    filaRellenar.find('textarea[name="descripcion[]"]').val(infoProductos[i].descripcion);
                    filaRellenar.find('input[name="existencias[]"]').val(aplicarRegexMonto(infoProductos[i].existencias));
                    if(parseFloat(infoProductos[i].existencias.replace(/[^\d.]/g, '')) < parseFloat(infoProductos[i].cantidad.replace(/[^\d.]/g, '')) && tipoCaptura != 'entrada') {
                        flagCantidadSuperaExistencia = true;
                        filaRellenar.find('input[name="cantidad[]"]').addClass('is-invalid')
                        filaRellenar.find('input[name="cantidad[]"]').val(0);
                    }else {
                        filaRellenar.find('input[name="cantidad[]"]').val(aplicarRegexMonto(infoProductos[i].cantidad));
                    }

                    filaRellenar.find('input[name="cantidad[]"]').attr('disabled', false);
                    filaRellenar.find('.input-costo').val(aplicarRegexMonto(infoProductos[i].costo));
                    filaRellenar.find('input[name="importe[]"]').val(aplicarRegexMonto((parseFloat(infoProductos[i].costo) * parseFloat(infoProductos[i].cantidad)).toFixed(4).toString()));
                }
            }

            insertNuevoArticulo();

            calculosGeneralesArticulos();

            if(response.conteoErrores === 0 && !flagCantidadSuperaExistencia) {
                Swal.fire(csvFileLoadSuccessMessage);
                return;
            }

            let mensajeCargaMasiva = flagCantidadSuperaExistencia ?
                    `Total de registros con errores dentro del CSV: ${response.conteoErrores}. Observaciones: Algunos registros tienen cantidades mayores a la existencia actual del almacen <br>` :
                    `Total de registros con errores dentro del CSV: ${response.conteoErrores}. Observaciones:`;

            if(flagCodigosDuplicados) {
                mensajeCargaMasiva += '<br>¡Algunos productos estan <b>duplicados</b>!';
            }

            if(response.banderas.banderaProductoNoEncontrado) {
                mensajeCargaMasiva += '<br>¡Algunos codigos no fueron encontrados en la base de datos!'
            }

            if(response.banderas.banderaProductoSinExistencias) {
                mensajeCargaMasiva += '<br>¡Algunos productos no tienen existencias para este almacen!'
            }

            if(response.banderas.banderaProductoLibre) {
                mensajeCargaMasiva += '<br>¡Codigos de <b>productos libres</b> han sido <b>omitidos</b>!'
            }

            csvFileLoadWithDetailsMessage.html = mensajeCargaMasiva;
            Swal.fire(csvFileLoadWithDetailsMessage);
            return;
        }

        function getProductosMasivamente(codigosProductos, cantidades) {

            return new Promise((resolve, reject) => {
                const idAlmacen = $('#captura').val() === 'traspaso' ? $('#almacen_origen').val() : $('#almacen').val();
                let infoProductos = [];

                if (idAlmacen !== '') {
                    $.ajax({
                        url: "{{ url('operaciones/movimientos-almacen/obtener-producto-codigo-masivamente') }}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            codigos: codigosProductos,
                            cantidades: cantidades,
                            almacen: idAlmacen,
                            tipo_movimiento: $('#captura').val(),
                        },
                        beforeSend: () => {
                            $("#loadingModal").modal("show")
                        },
                        success: (res, _, jqXHR) => {
                            setTimeout(() => {
                                $("#loadingModal").modal("hide")
                            }, 500);

                            resolve(res);
                        },
                        error: (error) => {
                            setTimeout(() => {
                                $("#loadingModal").modal("hide")
                                if(error.status == 422) {
                                    dinamicMessageInfo.text = JSON.parse(error.responseText).message
                                    Swal.fire(dinamicMessageInfo);
                                    return;
                                }

                                Swal.fire(ajaxErrorMessage);
                            }, 500);
                            reject(error);
                        },
                    });
                } else {
                    reject("El ID del almacen está vacío");
                }
            });
        }

        $(document).ready(() => {
            $('#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);
            });

            $(".form-select2").select2({
                theme: "bootstrap",
            });

            $('#radio-entrada').prop('checked', true).trigger('change');
            $('#radio-traspaso-normal').prop('checked', true).trigger('change');
            $('#radio-sin-aplicacion').prop('checked', true).trigger('change');

            $('#fragmento-articulos').on('click', '.btn-delete-row', function() {
                $(this).closest('.row').remove();

                $('#fragmento-articulos .btn-delete-row').attr('disabled', $('#fragmento-articulos').find('div.row').length === 1);

                calculosGeneralesArticulos();
            });

            $('#name_producto').autocomplete({
                source: function(request, response) {
                    const idAlmacen = $('#captura').val() === 'traspaso' ? $('#almacen_origen').val() : $('#almacen').val();

                    $.ajax({
                        url: "{{url('catalogos/productos/obtener-producto-por-descripcion')}}",
                        dataType: 'json',
                        data: {
                            descripcion: request.term,
                            id_almacen: idAlmacen
                        },
                        success: function(data) {
                            response(data)
                        }
                    })
                },
                select: function(event, ui) {

                    if(validarProductoExiste(ui.item.codigo, true)) {
                        Swal.fire(repeatedProductMessageOptions);
                        return
                    }

                    const idAlmacen = $('#captura').val() === 'traspaso' ? $('#almacen_origen').val() : $('#almacen').val();

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

                    $.ajax({
                        url: "{{url('operaciones/movimientos-almacen/consultar-costo-promedio')}}",
                        dataType: 'json',
                        data: {
                            id_almacen: idAlmacen,
                            id_producto: ui.item.id,
                            tipo_movimiento: $('#captura').val()
                        },
                        success: function(res) {
                            setTimeout(() => {
                                const rowNumber = insertInformacionArticulo(ui.item.codigo, ui.item.label, ui.item.existencias, res.costo);

                                $("#loadingModal").modal("hide")
                                const inputCantidad =             $('#filaNumero' + rowNumber).find('input[name="cantidad[]"]')[0];

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

                                if(error.status == 400) {
                                    dinamicMessageInfo.text = JSON.parse(error.responseText).message
                                    Swal.fire(dinamicMessageInfo);
                                    return;
                                }

                                Swal.fire(ajaxErrorMessage);
                            }, 500);
                        }
                    })
                },
                selectFirst: true,
                minLength: 3
            });

            $("#name_producto").on("autocompleteresponse", function() {
                $('#loadingSearchProducto').hide();
            });

            $("#name_producto").on("autocompletesearch", function() {
                $('#loadingSearchProducto').show();
            });

            $('#modal-buscar-producto').on('hidden.bs.modal', function () {
                $('#name_producto').val('');
            });

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

            $('#almacen_origen').on('select2:opening', function() {
                opcionAntesDelCambio = $(this).val();
            });

            $('#sucursal').trigger('change');
        });

        function actualizarSelectDestino(input) {
            let almacenDestino = $('#almacen_destino');

            if(optionToRemove) {
                almacenDestino.append(optionToRemove);
                let $options = almacenDestino.find('option');
                let sortedOptions = $options.sort(function(a, b) {
                    return $(a).val() - $(b).val();
                });

                almacenDestino.empty().append(sortedOptions);
            }

            let selectedValue = $(input).val();
            optionToRemove = $(input).find('option[value="'+ selectedValue +'"]').clone();

            almacenDestino.find('option').each(function() {
                let option = $(this);
                if (option.val() == selectedValue) {
                    option.remove()
                }
            });

            almacenDestino.trigger('change');
        }

        function openCapturaMovimientos() {
            $('#contenedor_informacion_captura').show();
            $('#contenedor_selector_operacion').hide();
            validateFormCaptura();
        }

        function selectTipoMovimientoOption(input) {
            $('.btn-group-tipo-mov .btn').removeClass('active');

            if ($(input).is(':checked')) {
                $(input).next('label').addClass('active');
                const textoMovimiento = $(input).val() == 'traspaso' ? 'Capturar un nuevo ' + $(input).val() + ': ' : 'Capturar una nueva ' + $(input).val() + ': '
                $('#titulo-movimiento').text(textoMovimiento);
            }
        }

        function selectTipoTraspasoOption(input) {
            $('.btn-group-tipo-traspaso .btn').removeClass('active');

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

        function selectAplicacionOption(input) {
            $('.btn-group-aplicacion .btn').removeClass('active');

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

            if(input.value != 'sin-aplicacion') {
                $('#fragmento-informacion-aplicacion').removeClass('hide-element');
                $('#fragmento-informacion-aplicacion input').first().focus();
                $('#fragmento-informacion-aplicacion input').attr('required', true);
            } else {
                $('#fragmento-informacion-aplicacion').addClass('hide-element');
                $('#fragmento-informacion-aplicacion input').val('');
                $('#fragmento-informacion-aplicacion input').attr('required', false);
            }

            validateTraspasoOptions();
        }

        function volverAlSelector(contenedor) {
            $('#' + contenedor).hide();
            $('#contenedor_selector_operacion').show();
        }

        function continueWithProcess() {

            const procesoSeleccionado = $('input[name="tipo_movimiento"]:checked').val();

            switch (procesoSeleccionado) {
                case 'entrada':
                    buscarAlmacenes()
                        .then(almacenes => {
                            fillSelectAlmacenes(almacenes, false);
                            $('#contenedor_informacion_captura').hide();
                            $('#contenedor-traspasos').show();
                            $('#sub-header').addClass('hide-element');
                            $('#fragmento-traspaso').addClass('hide-element');
                            $('#fragmento-traspaso select').attr('disabled', true);
                            $('#fragmento-traspaso input').attr('disabled', true);
                            $('#fragmento-entrada-salida').removeClass('hide-element');
                            $('#fragmento-entrada-salida select').attr('disabled', false);
                            $('#fragmento-entrada-salida input').attr('disabled', false);
                            $('#movimientos-entrada').removeClass('hide-element');
                            $('#movimiento_almacen_entrada').attr('disabled', false);
                            $('#movimientos-salida').addClass('hide-element');
                            $('#movimiento_almacen_salida').attr('disabled', true);
                            $('#descripcion-sucursal').text($('#sucursal').find('option:selected').text());
                        })
                        .catch(error => {
                            console.error("Error al obtener los almacenes:", error);
                        });
                    break;
                case 'salida':
                    buscarAlmacenes()
                        .then(almacenes => {
                            fillSelectAlmacenes(almacenes, false);
                            $('#contenedor_informacion_captura').hide();
                            $('#contenedor-traspasos').show();
                            $('#sub-header').addClass('hide-element');
                            $('#fragmento-traspaso').addClass('hide-element');
                            $('#fragmento-traspaso select').attr('disabled', true);
                            $('#fragmento-traspaso input').attr('disabled', true);
                            $('#fragmento-entrada-salida').removeClass('hide-element');
                            $('#fragmento-entrada-salida select').attr('disabled', false);
                            $('#fragmento-entrada-salida input').attr('disabled', false);
                            $('#movimientos-entrada').addClass('hide-element');
                            $('#movimiento_almacen_entrada').attr('disabled', true);
                            $('#movimientos-salida').removeClass('hide-element');
                            $('#movimiento_almacen_salida').attr('disabled', false);
                            $('#descripcion-sucursal').text($('#sucursal').find('option:selected').text());
                        })
                        .catch(error => {
                            console.error("Error al obtener los almacenes:", error);
                        });
                    break;
                case 'traspaso':
                    buscarAlmacenes()
                        .then(almacenes => {
                            fillSelectAlmacenes(almacenes, true);
                            $('#contenedor_informacion_captura').hide();
                            $('#contenedor-traspasos').show();
                            $('#sub-header').addClass('hide-element');
                            $('#fragmento-traspaso').removeClass('hide-element');
                            $('#fragmento-traspaso select').attr('disabled', false);
                            $('#fragmento-traspaso input').attr('disabled', false);
                            $('#fragmento-entrada-salida').addClass('hide-element');
                            $('#fragmento-entrada-salida select').attr('disabled', true);
                            $('#fragmento-entrada-salida input').attr('disabled', true);
                            $('#descripcion-sucursal').text($('#sucursal').find('option:selected').text());
                        })
                        .catch(error => {
                            console.error("Error al obtener los almacenes:", error);
                        });
                    break;

                default:
                    console.log('Opcion no disponible :)');
                    break;
            }

            cleanFragmentoArticulos(true);
            $('#captura').val(procesoSeleccionado)
        }

        function volverMenuInfo() {
            $('#contenedor_informacion_captura').show();
            $('#contenedor-traspasos').hide();
            $('#sub-header').removeClass('hide-element');
        }

        function insertNuevoArticulo() {
            const nuevoArticuloHTML = `
                <div class="row mb-2" id="filaNumero${addedRowsCount}">
                    <div class="col d-flex justify-content-center">
                        <input type="text" class="form-control form-control-sm" name="codigo[]" placeholder="Codigo..." required oninput="changeValidatorClass(this)" onkeyup="if(event.key === 'Enter') buscarProducto(this, ${addedRowsCount}); else if(event.key === 'F9') openModalSearchProduct(${addedRowsCount})">
                        <button type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center ml-2" title="Buscar productos por descripcion" onclick="openModalSearchProduct(${addedRowsCount})">
                            <i class="las la-binoculars text-bold"></i>
                        </button>
                    </div>
                    <div class="col">
                        <textarea class="form-control form-control-sm" name="descripcion[]" cols="15" rows="1" placeholder="Descripción..." required readonly></textarea>
                    </div>
                    <div class="col">
                        <input type="text" class="form-control form-control-sm" name="existencias[]" placeholder="Existencias..." required readonly>
                    </div>
                    <div class="col">
                        <input type="text" class="form-control form-control-sm" name="cantidad[]" placeholder="Cantidad..." required onkeyup="calcularImporteArticulo(${addedRowsCount}); changeValidatorClass(this);" oninput="formatoMonto(this);" disabled>
                    </div>
                    <div class="col ${MOSTRAR_COSTOS ? '' : 'hide-element'}">
                        <input type="text" class="form-control form-control-sm input-costo" value="0" placeholder="Costo..." required onkeyup="calcularImporteArticulo(${addedRowsCount});" oninput="formatoMonto(this);" disabled>
                    </div>
                    <div class="col">
                        <input type="text" class="form-control form-control-sm" name="importe[]" placeholder="Importe..." value="0" required readonly>
                    </div>

                    <button type="button" class="btn btn-sm btn-pdf btn-submit d-inline-flex align-items-center btn-delete-row" title="Eliminar fila">
                        <i class="las la-times icon-xl text-bold"></i>
                    </button>

                </div>
            `;

            $('#fragmento-articulos').prepend(nuevoArticuloHTML);
            addedRowsCount++;

            $('#fragmento-articulos .btn-delete-row').attr('disabled', $('#fragmento-articulos').find('.row').length === 1);
        }

        function openModalSearchProduct(rowNumber) {
            $('#rowNumber').val(rowNumber);

            $('#modal-buscar-producto').modal('show');
        }

        function insertInformacionArticulo(codigo, descripcion, existencias, costo, rowNumber = null) {
            if(rowNumber === null) {
                rowNumber = $('#rowNumber').val();
            }

            const tipoCaptura = $('#captura').val();

            const inputsCodigo = $('#filaNumero' + rowNumber).find('input[name="codigo[]"]');

            inputsCodigo.each(function() {
                $(this).val(codigo);
            });

            const inputsDescripcion = $('#filaNumero' + rowNumber).find('textarea[name="descripcion[]"]');

            inputsDescripcion.each(function() {
                $(this).val(descripcion);
            });

            const inputsExistencias = $('#filaNumero' + rowNumber).find('input[name="existencias[]"]');

            inputsExistencias.each(function() {
                $(this).val(aplicarRegexMonto(existencias));
            });

            const inputsCantidad = $('#filaNumero' + rowNumber).find('input[name="cantidad[]"]');

            inputsCantidad.each(function() {
                $(this).attr('disabled', false);
                $(this).focus();
            });

            const inputsCosto = $('#filaNumero' + rowNumber).find('.input-costo');

            inputsCosto.each(function() {
                if(tipoCaptura == 'entrada' && MODIFICAR_COSTOS) {
                    $(this).attr('disabled', false);
                }

                $(this).val(aplicarRegexMonto(costo.toString()));
            });

            const inputsImporte = $('#filaNumero' + rowNumber).find('input[name="importe[]"]');

            inputsImporte.each(function() {
                $(this).val(0);
            });

            calculosGeneralesArticulos();

            $('#modal-buscar-producto').modal('hide');

            necesitaIngresarNuevoArticulo();

            return rowNumber
        }

        function necesitaIngresarNuevoArticulo() {
            let insertarNuevoArticulo = true;
            const textAreasDescripcion = $('textarea[name="descripcion[]');

            textAreasDescripcion.each(function() {
                if($(this).val() == '') {
                    insertarNuevoArticulo = false;
                }
            })

            if(insertarNuevoArticulo) {
                insertNuevoArticulo();
            }
        }

        function calcularImporteArticulo(rowNumber) {
            validarCantidad(rowNumber);

            const cantidad = parseFloat($('#filaNumero' + rowNumber).find('input[name="cantidad[]"]')[0].value.replace(/[^\d.]/g, ''));

            const costo = parseFloat($('#filaNumero' + rowNumber).find('.input-costo')[0].value.replace(/[^\d.]/g, ''));

            const importe = $('#filaNumero' + rowNumber).find('input[name="importe[]"]')[0];

            const calculoImporte = parseFloat(costo * cantidad);

            importe.value = isNaN(calculoImporte) ? 0 : aplicarRegexMonto(calculoImporte.toString());

            calculosGeneralesArticulos()
        }

        function calculosGeneralesArticulos() {
            const inputsImporte = $('input[name="importe[]"]');
            let importeNeto = 0;

            inputsImporte.each(function (){
                importeNeto += parseFloat(this.value.replace(/[^\d.]/g, ''));
            })

            const inputsCantidad = $('input[name="cantidad[]"]');
            let articulosTotales = 0;

            inputsCantidad.each(function (){
                const cantidad = this.value.replace(/[^\d.]/g, '')
                articulosTotales += parseFloat(cantidad === '' ? 0 : cantidad);
            })

            $('#articulosIngresados').val(articulosTotales)

            $('#importeNeto').val(isNaN(importeNeto) ? 0 : aplicarRegexMonto(importeNeto.toString()));

            const tasaIVA = parseFloat($('#tasaIVA').val())
            const importeIVA = tasaIVA != 0 ? importeNeto * (tasaIVA / 100) : 0;

            $('#importeIVA').val(isNaN(importeIVA) ? 0 : aplicarRegexMonto(importeIVA.toString()));

            const importeTotal = importeIVA + importeNeto;

            $('#importeTotal').val(isNaN(importeTotal) ? 0 : aplicarRegexMonto(importeTotal.toString()));
        }

        function validarCantidad(rowNumber) {
            const cantidadInput = $('#filaNumero' + rowNumber).find('input[name="cantidad[]"]')[0];

            const existenciasInput = $('#filaNumero' + rowNumber).find('input[name="existencias[]"]')[0];

            if($('#captura').val() !== 'entrada'){
                if(parseFloat(cantidadInput.value.replace(/[^\d.]/g, '')) > parseFloat(existenciasInput.value.replace(/[^\d.]/g, ''))) {
                    cantidadInput.value = aplicarRegexMonto(existenciasInput.value)
                }
            }
        }

        function buscarProducto(input, rowNumber) {
            const codigo = $(input).val();
            const idAlmacen = $('#captura').val() === 'traspaso' ? $('#almacen_origen').val() : $('#almacen').val();
            let productoEncontrado = false;

            if(validarProductoExiste(codigo, false)) {
                inputCodigo.focus();
                return Swal.fire(repeatedProductMessageOptions);
            }

            if(codigo != '') {
                $.ajax({
                    url: "{{ url('operaciones/movimientos-almacen/obtener-producto-codigo') }}",
                    data: {
                        codigo: codigo,
                        id_almacen: idAlmacen,
                        tipo_movimiento: $('#captura').val(),
                    },
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {

                        setTimeout(() => {
                            $("#loadingModal").modal("hide")
                            if(jqXHR.status == 204) {
                                input.focus();
                                return Swal.fire(noContentMessageOptions);
                            }

                            productoEncontrado = true;
                            insertInformacionArticulo(res.codigo, res.descripcion, res.existencias, res.costo, rowNumber);
                        }, 500);

                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")
                            if(error.status == 400) {
                                $(input).val('');
                                $(input).focus();
                                dinamicMessageInfo.text = error.responseText;
                                Swal.fire(dinamicMessageInfo);
                                return
                            }
                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                }).always(() => {
                    const inputCantidad = $('#filaNumero' + rowNumber).find('input[name="cantidad[]"]')[0];
                    const inputCosto = $('#filaNumero' + rowNumber).find('.input-costo')[0];
                    const inputImporte = $('#filaNumero' + rowNumber).find('input[name="importe[]"]')[0];

                    if(productoEncontrado) {
                        inputCantidad.focus();
                    } else {
                        const inputDescripcion = $('#filaNumero' + rowNumber).find('textarea[name="descripcion[]"]')[0];
                        const inputExistencias = $('#filaNumero' + rowNumber).find('input[name="existencias[]"]')[0];

                        input.focus();
                        $(inputCantidad).attr('disabled', true);
                        $(inputCosto).attr('disabled', true);
                        $(inputCosto).val(0);
                        $(inputImporte).val(0);
                        $(inputDescripcion).val('');
                        $(inputExistencias).val('');
                    }

                    calculosGeneralesArticulos();
                })
            }
        }

        function aplicarTasaIVA(select) {
            const tasaIVA = $(select).find('option:selected').data('iva');
            $('#tasaIVA').val(tasaIVA)
        }

        function validateFormCaptura() {
            $('#btnContinuarProceso').attr('disabled', !$('#frm_captura')[0].checkValidity());
        }

        function validarProductoExiste(codigo, porDescripcion) {
            const inputsCantidad = $('input[name="codigo[]"]');
            let productoExiste = false;
            let conteoVecesExiste = 0;
            const tolerancia = porDescripcion ? 0 : 1;

            inputsCantidad.each(function (){
                if($(this).val() === codigo) {
                    conteoVecesExiste++;
                }

                if(conteoVecesExiste > tolerancia) {
                    productoExiste = true;
                    return false;
                }
            })

            return productoExiste
        }

        function buscarAlmacenes() {
            return new Promise((resolve, reject) => {
                const idSucursal = $('#sucursal').find('option:selected').val();
                let almacenes = [];

                if (idSucursal !== '') {
                    $.ajax({
                        url: "{{ url('operaciones/movimientos-almacen/obtener-almacenes-por-sucursal') }}",
                        data: {
                            id_sucursal: idSucursal,
                        },
                        beforeSend: () => {
                            $("#loadingModal").modal("show")
                        },
                        success: (res, _, jqXHR) => {
                            almacenes = res.almacenes;
                            resolve(almacenes);
                        },
                        error: (error) => {
                            setTimeout(() => {
                                $("#loadingModal").modal("hide")
                            }, 500);
                            reject(error);
                        },
                        complete: () => {
                            setTimeout(() => {
                                $("#loadingModal").modal("hide")
                            }, 500);
                        }
                    });
                } else {
                    reject("El ID de la sucursal está vacío");
                }
            });
        }

        function fillSelectAlmacenes(almacenes, esTraspaso) {
            let selectAlmacenOrigen = $('#almacen_origen');
            let selectAlmacen = $('#almacen');

            selectAlmacenOrigen.empty();
            selectAlmacen.empty();

            selectAlmacenOrigen.append($('<option>', {value: '', text: 'Selecciona un almacen...', selected: 'selected', disabled: 'disabled'}));
            selectAlmacen.append($('<option>', {value: '', text: 'Selecciona un almacen...', selected: 'selected', disabled: 'disabled'}));

            if(esTraspaso) {
                for(const almacen of almacenes) {
                    selectAlmacenOrigen.append($('<option>', {value: almacen.id, text: almacen.almacen + ' - ' + almacen.descripcion}));
                }

                validateTraspasoOptions();
            } else {

                for(const almacen of almacenes) {
                    selectAlmacen.append($('<option>', {value: almacen.id, text: almacen.almacen + ' - ' + almacen.descripcion}));
                }

                validateEntradaSalidaOptions();
            }
        }

        function validateTraspasoOptions() {
            const almacenesDiferentes = $('#almacen_origen').val() != $('#almacen_destino').val();

            $('#btnContinuarTraspaso').attr('disabled', !($('#frm_informacion_movimiento')[0].checkValidity() && almacenesDiferentes));
        }

        function validateEntradaSalidaOptions() {
            $('#btnContinuarEntradaSalida').attr('disabled', !($('#frm_informacion_movimiento')[0].checkValidity()));
        }

        function continuarConTraspaso() {

            const tipoAplicacion = $('input[name="aplicacion"]:checked').val();

            switch (tipoAplicacion) {
                case 'sin-aplicacion':
                    $('#fragmento-ingresar-productos').removeClass('hide-element');
                    break;
                case 'pedido':
                    precargarProductosDocumento(tipoAplicacion);
                    break;
                case 'mov-almacen':
                    precargarProductosDocumento(tipoAplicacion);
                    break;

                default:
                    console.log('Opcion no disponible :)');
                    break;
            }
        }

        function precargarProductosDocumento(tipoAplicacion) {
            const serie = $('#fragmento-informacion-aplicacion input[name="serie"]').val();
            const folio = $('#fragmento-informacion-aplicacion input[name="folio"]').val();
            const almacen = $('#almacen_origen').val();

            if(serie && folio && almacen) {
                cleanFragmentoArticulos(false);

                $.ajax({
                    url: "{{ url('operaciones/movimientos-almacen/precargar') }}" + `/${tipoAplicacion}`,
                    data: {
                        serie: serie,
                        folio: folio,
                        almacen: almacen,
                    },
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide");

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

                            fillPrecargaProductos(res.productos);

                            if(res.errores && res.errores.length > 0) {
                                let list = `
                                    <h6>Los siguientes productos se <b>omitieron</b> en la precarga: </h6>
                                    <div style="max-height: 200px; overflow-y: auto;">
                                        <ul>
                                `;

                                res.errores.forEach((descripcion) => {
                                    list += `<li class="font-15">${descripcion}</li>`;
                                });

                                list += `
                                        </ul>
                                    </div>
                                `;

                                showProductsErrorsMessage.html = list;

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

        function fillPrecargaProductos(infoProductos) {
            $('#fragmento-ingresar-productos').removeClass('hide-element');

            for(let i = 0; i < infoProductos.length; i++) {

                if($('#filaNumero0').find('.input-costo').val() != '0') {
                    insertNuevoArticulo();
                }

                const filaRellenar = addedRowsCount == 0 ?
                        $('#filaObligatoria') :
                        $(`#filaNumero${addedRowsCount - 1}`);

                if(filaRellenar !== undefined) {
                    filaRellenar.find('input[name="codigo[]"]').val(infoProductos[i].codigo);
                    filaRellenar.find('textarea[name="descripcion[]"]').val(infoProductos[i].descripcion);
                    filaRellenar.find('input[name="existencias[]"]').val(aplicarRegexMonto(infoProductos[i].existencias));
                    if(parseFloat(infoProductos[i].existencias.replace(/[^\d.]/g, '')) < parseFloat(infoProductos[i].cantidad.replace(/[^\d.]/g, '')) && tipoCaptura != 'entrada') {
                        flagCantidadSuperaExistencia = true;
                        filaRellenar.find('input[name="cantidad[]"]').addClass('is-invalid')
                        filaRellenar.find('input[name="cantidad[]"]').val(0);
                    }else {
                        filaRellenar.find('input[name="cantidad[]"]').val(aplicarRegexMonto(infoProductos[i].cantidad));
                    }

                    filaRellenar.find('input[name="cantidad[]"]').attr('disabled', false);
                    filaRellenar.find('.input-costo').val(aplicarRegexMonto(infoProductos[i].costo));
                    filaRellenar.find('input[name="importe[]"]').val(aplicarRegexMonto((parseFloat(infoProductos[i].costo) * parseFloat(infoProductos[i].cantidad)).toFixed(4).toString()));
                }
            }

            insertNuevoArticulo();

            calculosGeneralesArticulos();
        }

        function capturar() {
            const tipoCaptura = $('#captura').val();
            let formData = new FormData($('#frm_articulos_traspasos')[0]);

            formData.append('tipoCaptura', tipoCaptura);

            let inputsCosto = document.getElementsByClassName('input-costo');

            for (const input of inputsCosto) {
                if(parseFloat(input.value.replace(/[^\d.]/g, '')) > 0) {
                    formData.append('costo[]', input.value);
                }
            }

            if(tipoCaptura === 'traspaso') {
                formData.append('almacen_origen', $('#almacen_origen').find('option:selected').val());
                formData.append('almacen_destino', $('#almacen_destino').find('option:selected').val());
                formData.append('tipo_traspaso', $('input[name="tipo_traspaso"]:checked').val());
                formData.append('sucursal', $('#sucursal').find('option:selected').val());
                formData.append('fecha', $('#fecha').val());

                $.ajax({
                    url: "{{ url('operaciones/movimientos-almacen/guardar-traspaso') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")

                            movementStoredSuccessMessage.title = "Traspaso registrado";

                            movementStoredSuccessMessage.html = `
                                Se ha <b>registrado correctamente</b> el traspaso.<br>Folio generado: <b>${res.folioGenerado}</b><br>
                                <button id="btnPdf" type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center mt-4" title="Cerrar modal" onclick="closeModal()">
                                    <i class="las la-check-circle icon-large mr-2"></i> Continuar
                                </button>

                                <button id="btnPdf" type="button" class="btn btn-pdf btn-submit d-inline-flex align-items-center mt-4" title="Descargar archivo PDF" onclick="downloadPdfWithUrl('${res.pdfUrl}', '${res.pdfFileName}')">
                                    <i class="las la-file-pdf icon-large mr-2"></i> Descargar
                                </button>
                            `;

                            Swal.fire(movementStoredSuccessMessage).then(() => {
                                cleanFragmentoArticulos(true);
                            });
                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")
                            dinamicMessageInfo.text = error.responseText
                            Swal.fire(dinamicMessageInfo);
                        }, 500);
                    }
                })
            } else {
                formData.append('almacen', $('#almacen').val());
                formData.append('tipo_movimiento', tipoCaptura === 'entrada' ? $('#movimiento_almacen_entrada').val() : $('#movimiento_almacen_salida').val()),
                formData.append('proveedor', $('#proveedor').val())
                formData.append('password', $('#password').val())
                formData.append('cliente', $('#cliente').val())
                formData.append('sucursal', $('#sucursal').find('option:selected').val());
                formData.append('fecha', $('#fecha').val());

                $.ajax({
                    url: "{{ url('operaciones/movimientos-almacen/guardar-') }}" + tipoCaptura,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")

                            movementStoredSuccessMessage.title = tipoCaptura == "entrada" ? "Entrada registrada" : "Salida registrada";

                            movementStoredSuccessMessage.html = `
                                Se ha <b>registrado correctamente</b> la ${tipoCaptura}.<br>Folio generado: <b>${res.folioGenerado}</b><br>
                                <button id="btnPdf" type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center mt-4" title="Cerrar modal" onclick="closeModal()">
                                    <i class="las la-check-circle icon-large mr-2"></i> Continuar
                                </button>

                                <button id="btnPdf" type="button" class="btn btn-pdf btn-submit d-inline-flex align-items-center mt-4" title="Descargar archivo PDF" onclick="downloadPdfWithUrl('${res.pdfUrl}', '${res.pdfFileName}')">
                                    <i class="las la-file-pdf icon-large mr-2"></i> Descargar
                                </button>
                            `;

                            Swal.fire(movementStoredSuccessMessage).then(() => {
                                cleanFragmentoArticulos(true);
                            });
                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")
                            dynamicMessageError.text = error.responseText;
                            Swal.fire(dynamicMessageError);
                        }, 500);
                    }
                })
            }
        }

        function cleanFragmentoArticulos(ocultarCardArticulos) {
            $('#fragmento-articulos').empty()
            addedRowsCount = 0;
            insertNuevoArticulo();

            $('#div_totales_traspasos input[type="text"]').val(0)

            if(ocultarCardArticulos) {
                $('#fragmento-ingresar-productos').addClass('hide-element');
            }

            $('input[name="codigo[]"]').first().focus();

        }

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

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

            Swal.close();
        }

        function closeModal() {
            Swal.close();
        }

        function fillCliente(cliente) {
            $('#codigo_cliente').val(cliente.codigo);
            $('#cliente').val(cliente.id);
        }

        function continuarConEntradaSalida() {
            if(!$('#btnContinuarEntradaSalida').prop('disabled')) {
                const formData = new FormData($('#frm_informacion_movimiento')[0]);

                $.ajax({
                    url: "{{ url('operaciones/movimientos-almacen/validar-contrasena-movimiento') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $('#loadingModal').modal("hide");
                            Toast.fire(passwordMovementAuthSuccessMessage);
                            $('#fragmento-ingresar-productos').removeClass('hide-element')
                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $('#loadingModal').modal("hide");
                            passwordMovementAuthErrorMessage.html = error.responseText
                            Swal.fire(passwordMovementAuthErrorMessage).then(() => {
                                $('#password').focus();
                            });
                        }, 500);
                    }
                })
            }
        }

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

        function changeValidatorClass(input) {
            $(input).removeClass('first-insert');
        }

        function searchMovement() {
            const formData = new FormData($('#frm_search_mov')[0]);

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

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

                        fillInformacionMovimiento(res.generalInfo, res.tipoMovimiento, res.pdfFileInfo);
                        fillRevisionArticulos(res.infoProductos);

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

        function fillInformacionMovimiento(generalInfo, tipoMovimiento, pdfFileInfo) {
            $('#descripcion-sucursal-consulta').text(generalInfo.sucursal)
            $('#estatus-consulta').text(generalInfo.estatus)
            $('#infoFolio').text(generalInfo.folio)
            $('#infoMovimiento').text(tipoMovimiento)
            $('#infoFecha').text(generalInfo.fecha)

            $('#btn-cancelar-movimiento').toggleClass('hide-element', generalInfo.estatus === 'Cancelado')

            if(generalInfo.proveedor != null) {
                $('#fragmento-descripcion-proveedor').removeClass('hide-element')
                $('#proveedor-consulta').text(generalInfo.proveedor)
            } else {
                $('#fragmento-descripcion-proveedor').addClass('hide-element')
            }

            if(generalInfo.almacenDestino == '') {
                $('#fragmento-informacion-entrada-salida').removeClass('hide-element')
                $('#fragmento-informacion-traspaso').addClass('hide-element')
                $('#infoAlmacen').text(generalInfo.almacenOrigen)
            } else {
                $('#fragmento-informacion-traspaso').removeClass('hide-element')
                $('#fragmento-informacion-entrada-salida').addClass('hide-element')
                $('#infoAlmacenOrigen').text(generalInfo.almacenOrigen)
                $('#infoAlmacenDestino').text(generalInfo.almacenDestino)
            }

            urlPdf = pdfFileInfo.pdfUrl
            filenamePdf = pdfFileInfo.pdfFileName
        }

        function validitySearchMovementForm() {
            $('#btnSearchMovement').attr('disabled', !$('#frm_search_mov')[0].checkValidity());
        }

        function fillRevisionArticulos(infoProductos) {
            $('#fragmento-informacion-articulos').empty();

            for (const producto of infoProductos) {
                const fragmentoArticulo = `
                    <div class="row mb-1">
                        <div class="col-md-12 d-flex">
                            <p class="text-bold mr-1">Producto:</p>
                            <span>${producto.codigo + '-' + producto.descripcion}</span>
                        </div>
                        <div class="col-md-3 d-flex">
                            <p class="text-bold mr-1">Costo:</p>
                            <span>$${aplicarRegexMonto(producto.costo.toString())}</span>
                        </div>
                        <div class="col-md-3 d-flex">
                            <p class="text-bold mr-1">Cantidad:</p>
                            <span>${aplicarRegexMonto(producto.cantidad.toString())}</span>
                        </div>
                        <div class="col-md-3 d-flex">
                            <p class="text-bold mr-1">Importe:</p>
                            <span>$${aplicarRegexMonto(producto.importe.toString())}</span>
                        </div>
                    </div>
                `;

                $('#fragmento-informacion-articulos').append(fragmentoArticulo);
            }
        }

        function downloadPdfWithoutUrl() {
            let link = document.createElement('a');
            link.href = urlPdf;
            link.download = filenamePdf;

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

            Swal.close();
        }

        function openConsultaMovimientos() {
            $('#contenedor_consultar_movimientos').show();
            $('#contenedor_selector_operacion').hide();
        }

        function volverPantallaConsulta() {
            $('#contenedor_consultar_movimientos').show();
            $('#contenedor_informacion_movimiento').hide();
        }

        function resetearListaArticulos(select) {
            const tipoCaptura = $('#captura').val();

            if(tipoCaptura != 'entrada') {

                if(addedRowsCount === 1) {
                    cleanFragmentoArticulos(true)
                    return
                }

                if(addedRowsCount > 1 && $(select).val() !== opcionAntesDelCambio) {
                    Swal.fire({
                        icon: 'warning',
                        title: "¿Cambiar de almacen?",
                        html: "Al cambiar de almacen se <b>restaurará</b> el area de <b>ingreso de articulos</b> y perderás tu progreso. ¿Deseas continuar?",
                        showCancelButton: true,
                        confirmButtonText: `Cambiar almacen`,
                        cancelButtonText: "Cancelar",
                        }).then((result) => {
                        if (result.isConfirmed) {
                            cleanFragmentoArticulos(true)
                        } else {
                            $(select).select2('val', opcionAntesDelCambio);
                        }
                    });
                }
            }
        }

        function desplazarPaginaInicio() {
            const elementoInicial = document.getElementById('sub-header');
            elementoInicial.scrollIntoView({ behavior: 'smooth' })
        }

        function triggerSearchEvent() {
            const inputSerie = $('#serie').val();
            const inputFolio = $('#folio').val();

            if(inputSerie !== '' && inputFolio !== '') {
                searchMovement();
            }
        }

        function cancelarMovimiento() {
            const formData = new FormData($('#frm_search_mov')[0]);

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

                        Swal.fire(cancelledMovSuccessMessage).then(() => {
                            searchMovement();
                        })

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

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

    </script>
@endpush