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


@push('plugin-styles')
{!! Html::style('assets/css/loader.css') !!}
{!! Html::style('assets/css/apps/tickets.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;
            padding-top: 0px !important;
            z-index: 1000;
            position: relative;
        }

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

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

        .ui-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;
        }

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

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

        input[type="date"].form-control {
            padding: 7px 16px !important;
        }

        .nav-item:hover {
            background-color: #E8C552 !important;
        }

        .nav-item .active:hover {
            background-color: #0b305d !important;
            color: white !important;
        }

        .nav-item .active {
            background-color: #0b305d !important;
            color: white !important;
        }

        .nav-link.disabled {
            pointer-events: none;
            color: #6c757d;
            cursor: not-allowed;
        }

        .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;
            }
        }

        .bs-popover {
            padding: 0 10px !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;
        }

        .image-loading {
            margin-left: .2rem !important;
            max-width: 2rem;
            max-height: 2rem;
            width: auto;
            height: auto;
        }
    </style>
@endpush

@section('content')

    <div class="sub-header-container">
        <header class="header navbar navbar-expand-sm">
            <ul class="navbar-nav flex-row">
                <li>
                    <div class="page-header">
                        <nav class="breadcrumb-one" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0);"> {{__('Catalogos')}}</a></li>
                                <li class="breadcrumb-item active" aria-current="page"><span> {{__('CATALOGO DE ALMACENES')}}</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="Consultar, crear y modificar almacenes." onclick="openAlmacenes()">
                <i class="las la-store-alt icon-large"></i>
                <span class="ml-2">Almacenes</span>
            </button>
            <button type="button" id="btnOpenConsulta" class="btn btn-outlined-secondary btn-submit btn-lg d-inline-flex align-items-center mb-3 mr-5" title="Consultar, crear y modificar almacenes para traspasos." onclick="openAlmacenesTraspaso()">
                <i class="las la-truck-moving icon-large"></i>
                <span class="ml-2">Traspasos almacenes</span>
            </button>
            <button type="button" id="btnOpenConsulta" class="btn btn-secondary btn-submit btn-lg d-inline-flex align-items-center mb-3" title="Consultar, crear y modificar bodegas." onclick="openBodegas()">
                <i class="las la-warehouse icon-large"></i>
                <span class="ml-2">Bodegas</span>
            </button>
        </div>
    </div>

    <div class="layout-px-spacing" style="display: none !important" id="fragmento_bodegas">
        <div class="container-fluid p-0">
            <div class="results-table">
                <form action="#" method="post" id="frm_bodega">
                    <div class="row">
                        <div class="col text-left">
                            <label class="font-weight-bold">Sucursal: <span class="text-danger">*</span></label>
                            <select id="sucursalBodega" name="sucursal" class="form-control form-control-sm form-select2-normal" onchange="validateBtnAddBodega()">
                                <option value="" selected disabled>Selecciona una opción...</option>
                                @foreach ($sucursales as $sucursal)
                                    <option value="{{ $sucursal->id }}">{{ $sucursal->sucursal . '-' . $sucursal->descripcion }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col text-left">
                            <label class="font-weight-bold">Almacen: <span class="text-danger">*</span></label>
                            <select id="almacenBodega" name="almacen" class="form-control form-control-sm form-select2-normal" onchange="validateBtnAddBodega()">
                                <option value="" selected disabled>Selecciona una opción...</option>
                                @foreach ($almacenes as $almacen)
                                    <option value="{{ $almacen->id }}">{{ $almacen->almacen . '-' . $almacen->descripcion }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col text-left">
                            <button id="btnAddBodega" class="btn btn-primary mt-3 btn-submit bs-tooltip" title="Añadir bodega" type="button" onclick="addBodega()" disabled>
                                <i class="la la-plus icon-large"></i>
                            </button>
                        </div>
                        <div class="col text-right">
                            <a class="btn btn-outline-primary btn-submit mt-4" title="Volver" href="#" onclick="volverAlSelector('fragmento_bodegas')">
                                <i class="las la-undo mr-2"></i> Volver
                            </a>
                        </div>
                    </div>
                </form>

                <hr>

                <table id="bodegas_table" class="table table-responsive-sm table-sm">
                    <thead>
                        <tr>
                            @foreach ($camposTablaBodegas as $campo)
                                <th style="text-align: center">{{ $campo }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody id="table_body">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="layout-px-spacing" style="display: none !important" id="fragmento_almacenes_traspasos">
        <div class="container-fluid p-0">
            <div class="results-table">
                <div class="row">
                    <div class="col text-right">
                        <a class="btn btn-outline-primary btn-submit mt-4" title="Volver" href="#" onclick="volverAlSelector('fragmento_almacenes_traspasos')">
                            <i class="las la-undo mr-2"></i> Volver
                        </a>

                        <a class="btn btn-primary btn-submit mt-4" title="Agregar nuevo almacen traspaso" href="#" onclick="newAlmacenTraspasos()">
                            <i class="las la-plus mr-2"></i> Nuevo almacen traspaso
                        </a>
                    </div>
                </div>

                <hr>

                <table id="almacenes_traspasos_table" class="table table-responsive-sm table-sm">
                    <thead>
                        <tr>
                            @foreach ($camposTablaAlmacenesTraspasos as $campo)
                                <th style="text-align: center">{{ $campo }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody id="table_body">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="layout-px-spacing" style="display: none !important" id="fragmento_almacenes">
        <div class="container-fluid p-0">
            <div class="results-table" id="table-almacenes">
                <div class="row">
                    <div class="col-lg-6">
                        <label class="font-weight-bold">Buscar almacen por descripción: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-sm bs-popover" id="desc_almacen" data-container="body" data-trigger="hover" data-content="Teclea la descripción del almacen a buscar.">
                    </div>
                    <div class="col-lg-6 text-right">
                        <a class="btn btn-outline-primary btn-submit mt-4" title="Agregar nuevo almacen" href="#" onclick="volverAlSelector('fragmento_almacenes')">
                            <i class="las la-undo mr-2"></i> Volver
                        </a>

                        <a class="btn btn-primary btn-submit mt-4" title="Agregar nuevo almacen" href="#" onclick="newAlmacen()">
                            <i class="las la-plus mr-2"></i> Nuevo almacen
                        </a>
                    </div>
                </div>

                <hr>

                <table id="almacenes_table" class="table table-responsive-sm table-sm">
                    <thead>
                        <tr>
                            @foreach ($camposTablaAlmacenes as $campo)
                                <th style="text-align: center">{{ $campo }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody id="table_body">
                    </tbody>
                </table>
            </div>

            <div id="view-almacen" class="card" style="display: none">
                <div class="card-body">
                    <div class="tab-content">
                        <form action="#" method="post" id="frm_almacen">
                            <input type="hidden" class="form-control form-control-sm" id="id_almacen" name="idAlmacen" required>
                            <h6 class="font-weight-bold">INFORMACIÓN GENERAL</h6>

                            <div class="row">
                                <div class="col-md-4">
                                    <label class="font-weight-bold">Almacen: <span class="text-danger">*</span></label>
                                    <input type="text" name="almacen" id="almacen" class="form-control form-control-sm mr-2" onkeydown="validateNumber(event)" oninput="validateFormContent()" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="font-weight-bold">Tipo: <span class="text-danger">*</span></label>
                                    <select name="tipo" id="tipo" class="form-control form-control-sm" onchange="validateFormContent()" required>
                                        <option value="" selected disabled>Selecciona una opción...</option>
                                        @foreach ($tipos as $tipo)
                                            <option value="{{ $loop->iteration }}">{{ $tipo }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="font-weight-bold">Estatus: <span class="text-danger">*</span></label>
                                    <select name="estatus" id="estatus" class="form-control form-control-sm" onchange="validateFormContent()" required>
                                        <option value="" selected disabled>Selecciona una opción...</option>
                                        @foreach ($estatus_opciones as $estatus)
                                            <option value="{{ $loop->iteration }}">{{ $estatus }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <label class="font-weight-bold">Descripcion: <span class="text-danger">*</span></label>
                                    <textarea class="form-control form-control-sm mr-2" name="descripcion" id="descripcion" cols="30" rows="1" oninput="validateFormContent()" required></textarea>
                                </div>
                                <div class="col-md-6">
                                    <label class="font-weight-bold">Descripcion corta: </label>
                                    <input type="text" id="descripcion_corta" name="descripcion_corta" class="form-control form-control-sm mr-2">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <label class="font-weight-bold">Rotacion: </label>
                                    <input type="text" name="rotacion" id="rotacion" class="form-control form-control-sm mr-2" onkeydown="validateNumber(event)">
                                </div>
                                <div class="col-md-4">
                                    <label class="font-weight-bold">Almacen fiscal: </label>
                                    <select name="almacen_fiscal" id="almacen_fiscal" class="form-control form-control-sm">
                                        <option value="" selected>Sin especificar...</option>
                                        @foreach ($almacenes_fiscales_opciones as $opcion)
                                            <option value="{{ $loop->iteration }}">{{ $opcion }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="font-weight-bold">WMS: </label>
                                    <input type="text" name="wms" id="wms" class="form-control form-control-sm mr-2" onkeypress="validateWMS(this, event)">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <label class="font-weight-bold">Creado por: </label>
                                    <input type="text" id="created_by" class="form-control form-control-sm mr-2" readonly>
                                </div>
                                <div class="col-md-4">
                                    <label class="font-weight-bold">Fecha de creación: </label>
                                    <input type="date" id="created_at" class="form-control form-control-sm mr-2" readonly>
                                </div>
                                <div class="col-md-4">
                                    <label class="font-weight-bold">Fecha de modificación: </label>
                                    <input type="date" id="updated_at" class="form-control form-control-sm mr-2" readonly>
                                </div>
                            </div>

                            <hr>

                            <h6 class="font-weight-bold">DOMICILIO</h6>

                            <div class="row">
                                <div class="col-md-3">
                                    <label class="font-weight-bold">Código Postal: </label>
                                    <div class="d-flex justify-content-center">
                                        <input type="text" class="form-control form-control-sm bs-popover" id="cp" data-container="body" data-trigger="hover" data-content="Teclea el código postal a buscar.">
                                        <img class="image-loading" src="{{ asset('assets/img/loading.gif')  }}" alt="Loading..." style="display: none">
                                    </div>
                                </div>

                                <div class="col-md-9">
                                    <label class="font-weight-bold">Colonia: <span class="text-danger">*</span></label>
                                    <input id="nombre_colonia" class="form-control form-control-sm" readonly>
                                    <input type="hidden" class="form-control form-control-sm" id="id_colonia" name="id_colonia">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <label class="font-weight-bold">Calle: <span class="text-danger">*</span></label>
                                    <textarea name="calle" id="calle" class="form-control form-control-sm" cols="30" rows="1" oninput="validateFormContent()" required></textarea>
                                </div>

                                <div class="col-md-3">
                                    <label class="font-weight-bold">Número exterior: <span class="text-danger">*</span></label>
                                    <input name="numero_exterior" id="numero_exterior" class="form-control form-control-sm" oninput="validateFormContent()" required>
                                </div>

                                <div class="col-md-3">
                                    <label class="font-weight-bold">Número interior: </label>
                                    <input name="numero_interior" id="numero_interior" class="form-control form-control-sm" oninput="validateFormContent()">
                                </div>
                            </div>

                            <hr>

                            <h6 class="font-weight-bold">SUCURSALES</h6>

                            <div class="row mb-2 d-flex justify-content-center">
                                <div class="col-md-6">
                                    <label class="font-weight-bold">Sucursal:</label>
                                    <select id="sucursal" class="form-control form-control-sm" onchange="validateSucursal()">
                                        <option value="" selected>Selecciona sucursal...</option>
                                        @foreach ($sucursales as $sucursal)
                                            <option value="{{ $sucursal->id }}" data-domicilio="{{ $sucursal->calle . ' ' . $sucursal->numero_exterior . ' ' . $sucursal->numero_interior }}">
                                                {{ $sucursal->sucursal . '-' . $sucursal->descripcion }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <button id="btnAddSucursal" class="btn btn-primary mt-3 btn-submit bs-tooltip" title="Añadir sucursal" type="button" onclick="addSucursal()" disabled>
                                        <i class="la la-plus icon-large"></i>
                                    </button>
                                </div>
                            </div>
                        </form>

                        <table id="sucursales_table" class="table table-responsive-sm table-sm">
                            <thead>
                                <tr>
                                    @foreach ($camposTablaSucursales as $campo)
                                        <th style="text-align: center">{{ $campo }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody id="table_body">
                            </tbody>
                        </table>

                        <hr>

                        <div class="justify-content-end">
                            <div class="col text-right">
                                <button id="btnSave" type="button" class="btn btn-primary btn-submit btn-lg d-inline-flex align-items-center mb-3" disabled>
                                    <i class="las la-save icon-large"></i>
                                    <span class="ml-2">Guardar informacion</span>
                                </button>

                                <button id="btnBack" type="button" class="btn btn-outlined-primary btn-submit btn-lg d-inline-flex align-items-center mb-3">
                                    <i class="las la-undo icon-large"></i>
                                    <span class="ml-2">Volver</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade draggable" id="modal-almacenes-traspasos" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sxl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Almacenes traspaso</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>

                <div class="modal-body">
                    <form action="#" method="POST" id="frm_almacen_traspaso">
                        <input type="hidden" name="id_traspaso">
                        <input type="hidden" id="temp_almacen">
                        <div class="row">
                            <div class="col">
                                <label class="font-weight-bold">Sucursal: <span class="text-danger">*</span></label>
                                <select name="sucursal" id="sucursalTraspasos" class="form-control form-control-sm form-select2" onchange="validateFormContentTraspaso()" required>
                                    <option value="" selected disabled>Selecciona una opción...</option>
                                    @foreach ($sucursales as $sucursal)
                                        <option value="{{ $sucursal->id }}">{{ $sucursal->sucursal . '-' . $sucursal->descripcion }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col">
                                <label class="font-weight-bold">Sucursal traspaso: <span class="text-danger">*</span></label>
                                <select name="sucursalTraspaso" id="sucursalTraspasoTraspasos" class="form-control form-control-sm form-select2" onchange="validateFormContentTraspaso()" required>
                                    @foreach ($sucursales as $index => $sucursal)
                                        <option @if ($index === 0) selected @endif value="{{ $sucursal->id }}">{{ $sucursal->sucursal . '-' . $sucursal->descripcion }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <label class="font-weight-bold">Distancia (Kilometros): <span class="text-danger">*</span></label>
                                <input type="text" name="distancia" id="distanciaTraspasos" class="form-control form-control-sm mr-2" onkeydown="validateNumberWithDot(event)" oninput="validateFormContentTraspaso()" required>
                            </div>
                            <div class="col">
                                <label class="font-weight-bold">Almacen: <span class="text-danger">*</span></label>
                                <select name="almacen" id="almacenesTraspasos" class="form-control form-control-sm form-select2" onchange="validateFormContentTraspaso()" required>
                                </select>
                            </div>
                        </div>

                        <hr>

                        <div class="justify-content-end">
                            <div class="col text-right">
                                <button id="btnSaveTraspasos" type="button" class="btn btn-primary btn-submit btn-lg d-inline-flex align-items-center mb-3" onclick="guardarInfoTraspasos()" disabled>
                                    <i class="las la-save icon-large"></i>
                                    <span class="ml-2">Guardar información</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('plugin-scripts')
    {!! Html::script('plugins/table/datatable/datatables.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/dataTables.buttons.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/jszip.min.js') !!}
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}
    {!! Html::script('assets/js/basicui/inputmask.js') !!}
@endpush

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

        let sucursalesSeleccionadas = [];
        let sucursalesEliminadas = [];

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

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

        const storeSuccessMessageOptions = {
            icon: 'success',
            title: '¡Hecho!',
            text: 'Información guardada correctamente...'
        }

        const sucursalAlreadyAddedMessage = {
            icon: 'warning',
            title: '¡Ya asignada!',
            text: 'La sucursal ya ha sido asignada al almacen'
        }

        const requiredInputsMessageOptions = {
            icon: 'warning',
            title: '¡Campos no validos!',
        }

        $(document).ready(() => {

            $('.bs-tooltip').tooltip();

            $(".form-select2").select2({
                theme: "bootstrap",
                dropdownParent: $('#modal-almacenes-traspasos')
            });

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

            $('#modal-almacenes-traspasos').on('hidden.bs.modal', function () {

                $('#frm_almacen_traspaso input').val('');
            });

            $('#desc_almacen').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{url('catalogos/almacenes/buscar-por-descripcion')}}",
                        dataType: 'json',
                        data: {
                            descripcion: request.term
                        },
                        success: function(data) {
                            response(data)
                        }
                    })
                },
                select: function(event, ui) {
                    editAlmacen(ui.item.id);
                },
                selectFirst: true,
                minLength: 3
            });

            $('#cp').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{url('catalogos/almacenes/buscar-colonia')}}",
                        dataType: 'json',
                        data: {
                            cp: request.term
                        },
                        success: function(data) {
                            response(data)
                        }
                    })
                },
                select: function(event, ui) {
                    event.preventDefault();
                    setColoniaInfo(ui.item);
                    validateFormContent();
                },
                selectFirst: true,
                minLength: 3
            });


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

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

            $('#sucursalTraspasoTraspasos').on('change', (event) => {
                fillSelectAlmacenes(event.target.value)
            })

            $('#btnSave').on('click', () => {
                const formData = new FormData($('#frm_almacen')[0]);

                sucursalesSeleccionadas.forEach(function(sucursal) {
                    formData.append('sucursales[]', sucursal);
                });

                sucursalesEliminadas.forEach(function(sucursal) {
                    formData.append('sucursalesEliminadas[]', sucursal);
                });

                $.ajax({
                    url: "{{ url('catalogos/almacenes/guardar') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")
                            Swal.fire(storeSuccessMessageOptions);
                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")

                            if(error.status == 422) {
                                requiredInputsMessageOptions.text = error.responseJSON.message;
                                return Swal.fire(requiredInputsMessageOptions);
                            }
                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                })
            });

            $('#btnBack').on('click', () => {

                $('#table-almacenes').show();
                $('#view-almacen').hide();

                resetAlmacenForm();
                fillTablaAlmacenes();
            })

            $('#sucursales_table').on('click', '.btn-delete-sucursal', function() {
                let index = sucursalesSeleccionadas.indexOf(Number(this.getAttribute('data-sucursal')));

                if (index !== -1) {
                    sucursalesSeleccionadas.splice(index, 1);
                }

                let tabla = $('#sucursales_table').DataTable();

                const fila = $(this).closest('tr');
                tabla.row(fila).remove().draw();
            });
        })

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

        function openAlmacenes() {
            $('#contenedor_selector_operacion').hide();
            $('#fragmento_almacenes').show();
            $('#almacenes_table').DataTable();

            fillTablaAlmacenes();
        }

        function openAlmacenesTraspaso() {
            $('#contenedor_selector_operacion').hide();
            $('#fragmento_almacenes_traspasos').show();

            $('#almacenes_traspasos_table').DataTable();

            fillTablaAlmacenesTraspasos();
        }

        function fillSelectAlmacenes(idSucursal) {
            $('#almacenesTraspasos').empty();

            $('#almacenesTraspasos').append($('<option>', {
                value: '',
                text: 'Seleccionar una opción...'
            }))

            console.log(idSucursal);
            $.ajax({
                url: "{{ url('catalogos/almacenes/obtener-almacenes-selector') }}",
                dataType: 'json',
                data: {
                    sucursal: idSucursal
                },
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                    }, 500);

                    if(res.length > 0) {
                        res.forEach(almacen => {
                            $('#almacenesTraspasos').append($('<option>', {
                                value: almacen.id,
                                text: almacen.almacen + '-' + almacen.descripcion,
                            }))
                        });

                        const almacenSeleccionado = $('#temp_almacen').val() ?? '';

                        $('#almacenesTraspasos').val(almacenSeleccionado).trigger('change');
                    }
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        Swal.fire(ajaxErrorMessage);
                    }, 500);
                }
            })
        }

        function fillTablaAlmacenesTraspasos() {
            $.ajax({
                url: "{{ url('catalogos/almacenes/obtener-almacenes-traspasos') }}",
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {

                        $("#loadingModal").modal("hide")
                        const almacenesTraspasos = res.almacenesTraspasos;
                        const columnKeys = Object.keys(res.columnas);
                        const columns = columnKeys.map(function (key) {
                            return res.columnas.length == key + 1 ? {
                                data: res.columnas[key],
                                render: $.fn.dataTable.render.text()
                            } : {
                                data: res.columnas[key],
                            }
                        });

                        $('#almacenes_traspasos_table').dataTable().fnDestroy();
                        $('#almacenes_traspasos_table').dataTable({
                            lengthMenu: [10, 20, 50, 100, 200, 500],
                            processing: true,
                            autoWidth: true,
                            scrollX: true,
                            data: almacenesTraspasos,
                            columns: columns,
                            order: [
                                [0, "asc"]
                            ],
                        });

                        $('#almacenes_traspasos_table').DataTable().columns.adjust();

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

        function fillFormAlmacenTraspaso(almacenTraspaso) {
            $('#sucursalTraspasos').val(almacenTraspaso.id_sucursal).trigger('change')
            $('#id_traspaso').val(almacenTraspaso.id)
            $('#sucursalTraspasoTraspasos').val(almacenTraspaso.id_sucursal_traspaso).trigger('change')
            $('#distanciaTraspasos').val(almacenTraspaso.distancia_km)
            $('#temp_almacen').val(almacenTraspaso.id_almacen_traspaso)
        }

        function fillForm(almacen, almacenSucursales, id) {
            $('#table-almacenes').hide();
            $('#view-almacen').show();
            $('#almacen').attr('readonly', true);
            $('#id_almacen').val(id);
            $('#almacen').val(almacen.almacen);
            $('#almacen_search').val(almacen.almacen);

            $('#tipo').val(almacen.tipo);
            $('#descripcion').val(almacen.descripcion);
            $('#descripcion_corta').val(almacen.descripcion_corta);
            $('#estatus').val(almacen.estatus);
            $('#rotacion').val(almacen.rotacion);
            $('#almacen_fiscal').val(almacen.almacen_fiscal);
            $('#wms').val(almacen.wms);
            $('#created_by').val(almacen.created_by);

            $('#id_colonia').val(almacen.id_colonia);
            $('#nombre_colonia').val(almacen.nombre_colonia);
            $('#cp').val(almacen.codigo_postal);
            $('#calle').val(almacen.calle);
            $('#numero_exterior').val(almacen.numero_exterior);
            $('#numero_interior').val(almacen.numero_interior);

            const fechaCreacion = new Date(almacen.created_at).toISOString().slice(0, 10);
            $('#created_at').val(fechaCreacion);

            if(almacen.updated_at !== null) {
                const fechaModificacion = new Date(almacen.updated_at).toISOString().slice(0, 10);
                $('#updated_at').val(fechaModificacion);
            }

            let tabla = $('#sucursales_table').DataTable();

            if(almacenSucursales) {
                almacenSucursales.forEach(sucursal => {
                    sucursalesSeleccionadas.push(sucursal.id);

                    tabla.row.add([
                        sucursal.sucursal,
                        sucursal.domicilio,
                        `<div class="d-flex justify-content-center">
                            <button type="button" data-sucursal="${sucursal.id}" class="btn btn-danger btn-submit btn-delete-sucursal d-inline-flex align-items-center" title="Quitar sucursal." onclick="deleteSucursalAdded(this.getAttribute('data-sucursal'))">
                                <i class="las la-trash icon-large"></i>
                            </button>
                        </div>`
                    ]).draw()

                });
            }

            validateFormContent()
        }

        function resetAlmacenForm() {
            $('#frm_almacen input').val('');
            $('#wms').val('0');
            $('#frm_almacen textarea').val('');
            $('#frm_almacen select').val('');
            $('#desc_almacen').val('');

            let tabla = $('#sucursales_table').DataTable();
            tabla.clear().draw();
            sucursalesSeleccionadas = [];
            sucursalesEliminadas = [];
            validateSucursal()
        }

        function newAlmacen() {
            $('#table-almacenes').hide();
            $('#view-almacen').show();
            $('#almacen').attr('readonly', false);
            resetAlmacenForm();
        }

        function fillTablaAlmacenes() {
            $.ajax({
                url: "{{ url('catalogos/almacenes/obtener-almacenes') }}",
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {

                        $("#loadingModal").modal("hide")
                        const almacenes = res.almacenes;
                        const columnKeys = Object.keys(res.columnas);
                        const columns = columnKeys.map(function (key) {
                            return res.columnas.length == key + 1 ? {
                                data: res.columnas[key],
                                render: $.fn.dataTable.render.text()
                            } : {
                                data: res.columnas[key],
                            }
                        });

                        $('#almacenes_table').dataTable().fnDestroy();
                        $('#almacenes_table').dataTable({
                            lengthMenu: [10, 20, 50, 100, 200, 500],
                            processing: true,
                            autoWidth: true,
                            scrollX: true,
                            data: almacenes,
                            columns: columns,
                            order: [
                                [0, "asc"]
                            ],
                        });

                        $('#almacenes_table').DataTable().columns.adjust();

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

        function editAlmacen(id) {
            let tabla = $('#sucursales_table').DataTable();

            tabla.clear().draw();

            sucursalesSeleccionadas = [];
            sucursalesEliminadas = [];

            $.ajax({
                url: "{{ url('catalogos/almacenes/buscar-por-id') }}",
                data: {
                    id: id
                },
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {

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

                        const almacen = res.almacen;
                        const almacenSucursales = res.almacenSucursales;

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

        function validateWMS(input, event) {
            event.preventDefault();
            input.value = event.key.replace(/[^0-1]/g, '').toUpperCase();
        }

        function validateFormContent() {
            const form = $('#frm_almacen')[0];
            const colonia = $('#id_colonia').val();

            $('#btnSave').attr('disabled', !(form.checkValidity() && colonia !== ''));
        }

        function setColoniaInfo(coloniaInfo) {
            $('#cp').val(coloniaInfo.cp);
            $('#id_colonia').val(coloniaInfo.id);
            $('#nombre_colonia').val(coloniaInfo.label);
        }

        function editAlmacenTraspaso(id) {
            $.ajax({
                url: "{{ url('catalogos/almacenes/obtener-almacen-traspaso-por-id') }}",
                data: {
                    id: id
                },
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        $('#modal-almacenes-traspasos').modal('show');
                    }, 500);

                    const almacenTraspaso = res.almacenTraspaso;

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

        function validateFormContentTraspaso() {
            const form = $('#frm_almacen_traspaso')[0];

            $('#btnSaveTraspasos').attr('disabled',!form.checkValidity())
        }

        function newAlmacenTraspasos() {
            $('#modal-almacenes-traspasos').modal('show');
        }

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

            $.ajax({
                url: "{{ url('catalogos/almacenes/guardar-almacen-traspaso') }}",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        Swal.fire(storeSuccessMessageOptions);
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")

                        if(error.status == 422) {
                            requiredInputsMessageOptions.text = error.responseJSON.message;
                            return Swal.fire(requiredInputsMessageOptions);
                        }
                        Swal.fire(ajaxErrorMessage);
                    }, 500);
                }
            })
        }

        function deshabilitarAlmacenTraspaso(id, btn) {

            const formData = new FormData();
            formData.append('id', id);

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

                        if($(btn).hasClass('btn-danger')) {
                            $(btn).removeClass('btn-danger').addClass('btn-success');
                            $(btn).find('i').removeClass('la-minus-circle').addClass('la-check-circle');
                            $(btn).attr('title', 'Habilitar almacen traspaso')
                        } else {
                            $(btn).removeClass('btn-success').addClass('btn-danger');
                            $(btn).find('i').removeClass('la-check-circle').addClass('la-minus-circle');
                            $(btn).attr('title', 'Deshabilitar almacen traspaso')
                        }
                        Swal.fire(storeSuccessMessageOptions);
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        Swal.fire(ajaxErrorMessage);
                    }, 500);
                }
            })
        }

        function validateSucursal() {
            const sucursal = $('#sucursal').val();
            $('#btnAddSucursal').attr('disabled', sucursal == '');
        }

        function addSucursal() {
            const sucursal = Number($('#sucursal').val());
            if(sucursal != '') {
                if(!sucursalesSeleccionadas.includes(sucursal)) {
                    sucursalesSeleccionadas.push(sucursal);
                    const indexDeleted = sucursalesEliminadas.indexOf(sucursal);

                    if (indexDeleted !== -1) {
                        sucursalesEliminadas.splice(indexDeleted, 1);
                    }

                    addSucursalTabla(sucursal);
                    return false;
                }

                Swal.fire(sucursalAlreadyAddedMessage);
            }
        }

        function addSucursalTabla(sucursal) {
            const sucursalSeleccionada = $('#sucursal option[value="' + sucursal + '"]');
            const descripcion = sucursalSeleccionada[0].label;
            const domicilio = sucursalSeleccionada[0].getAttribute('data-domicilio');

            let tabla = $('#sucursales_table').DataTable();

            tabla.row.add([
                descripcion,
                domicilio,
                `<div class="d-flex justify-content-center">
                    <button type="button" data-sucursal="${sucursal}" class="btn btn-danger btn-submit btn-delete-sucursal d-inline-flex align-items-center" title="Quitar sucursal." onclick="deleteSucursalAdded(this.getAttribute('data-sucursal'))">
                        <i class="las la-trash icon-large"></i>
                    </button>
                </div>`
            ]).draw()
        }

        function deleteSucursalAdded(sucursal) {
            sucursal = Number(sucursal);
            sucursalesEliminadas.push(sucursal);

            const indexAdded = sucursalesSeleccionadas.indexOf(sucursal);

            if (indexAdded !== -1) {
                sucursalesSeleccionadas.splice(indexAdded, 1);
            }
        }

        function openBodegas() {
            $('#contenedor_selector_operacion').hide();
            $('#fragmento_bodegas').show();

            $('#bodegas_table').DataTable();
            fillTablaBodegas();
        }

        function fillTablaBodegas() {
            $.ajax({
                url: "{{ url('catalogos/almacenes/obtener-bodegas') }}",
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {

                        $("#loadingModal").modal("hide")
                        const bodegas = res.bodegas;
                        const columnKeys = Object.keys(res.columnas);
                        const columns = columnKeys.map(function (key) {
                            return res.columnas.length == key + 1 ? {
                                data: res.columnas[key],
                                render: $.fn.dataTable.render.text()
                            } : {
                                data: res.columnas[key],
                            }
                        });

                        $('#bodegas_table').dataTable().fnDestroy();
                        $('#bodegas_table').dataTable({
                            lengthMenu: [10, 20, 50, 100, 200, 500],
                            processing: true,
                            autoWidth: true,
                            scrollX: true,
                            data: bodegas,
                            columns: columns,
                            order: [
                                [0, "asc"]
                            ],
                        });

                        $('#bodegas_table').DataTable().columns.adjust();

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

        function validateBtnAddBodega() {
            const sucursal = $('#sucursalBodega').val() ?? '';
            const almacen = $('#almacenBodega').val() ?? '';

            // Deshabilitar el botón solo si ambas son vacías
            $('#btnAddBodega').attr('disabled', sucursal === '' || almacen === '');
        }

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

            $.ajax({
                url: "{{ url('catalogos/almacenes/guardar-bodega') }}",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        Swal.fire(storeSuccessMessageOptions);
                        const tabla = $('#bodegas_table').DataTable();


                        tabla.row.add({
                            'Sucursal': res.sucursal,
                            'Domicilio Sucursal': res.domicilioSucursal,
                            'Almacen': res.almacen,
                            'Domicilio Almacen': res.domicilioAlmacen,
                            'Eliminar': res.opcion,
                        }).draw()
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")

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

        function eliminarBodega(id, btn) {
            const formData = new FormData();

            formData.append('id', id);

            $.ajax({
                url: "{{ url('catalogos/almacenes/eliminar-bodega') }}",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: () => {
                    $("#loadingModal").modal("show")
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        Swal.fire(storeSuccessMessageOptions);
                        const tabla = $('#bodegas_table').DataTable();

                        const fila = $(btn).closest('tr');
                        tabla.row(fila).remove().draw();
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")

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