@extends('layouts.tabla')

@section('css_after')
<link rel="stylesheet" href="{{asset('css\vendor\dataTables.bootstrap5.css') }}">
<link rel="stylesheet" href="{{asset('css\vendor\buttons.bootstrap5.css') }}">

<link rel="stylesheet" href="{{asset('css/fixedColumns.bootstrap5.min.css')}}">
<link rel="stylesheet" href="{{asset('css/fixedHeader.bootstrap5.min.css')}}">
    <style>
        body[data-leftbar-compact-mode="condensed"]:not(.authentication-bg){
            min-height: 0 !important;
        }
        .boton-blue{
            background-color: #2874A6 !important;
            border-color: #2874A6 !important;
            color: #fff !important;
            height: 30px !important;
            font-size: 12px !important;
        }
        .boton-blue:hover{
            background-color: #0B5F96 !important;
            border-color: #0B5F96 !important;
        }
        .boton2 {
            background-color: #00a65a !important;
            border-color: #008d4c !important;
            color: #fff !important;
            height: 30px !important;
            font-size: 12px !important;
        }
        .boton2:hover{
            background-color: #008d4c !important;
        }
        .max-width{
            max-width: 200px;
        }
        .w-90{
            width: 90% !important;
        } 
        .col.col-md-2{
            padding: 0px 35px 5px 0px;
        }
        .tooltiptext{
            display: none;
            position: absolute;
            width: 140px;
            margin-top: 12px;
            transform: translate(45px, 5px);
            color: white;
            background-color: black;
            border-radius: 20px;
            padding: 10px;
        }
        .fa-sort-up{
            display: none;
            position: absolute;
            margin-top: 12px;
            transform: translate(-23px, 0px);
            color: black;
        }
        .content-page{
            padding-left: 0px!important;
        }
        .container-fluid{
            padding-left: 0px!important;
        }
        .dataTables_scroll {
            clear: both;
        }

        .dataTables_scrollBody {
            *margin-top: -1px;
            -webkit-overflow-scrolling: touch;
        }

        .select2-container--open{
            z-index:10000
        }
    </style>
@endsection
@section('tabla')
    <!-- Hero -->
    @php
        $cliente=config('app.CLIENTE');
        $vista = json_encode(['1' => __('messages.filtro-texto-producto'), '2' => __('messages.variable-locales')]);
        if($cliente == "spes" || $cliente == "merello" ){
            $vista = json_encode(['1' => __('messages.filtro-texto-producto'), '2' => __('messages.variable-locales'), '3' => __('messages.filtro-texto-rutas')]);
        }else if($cliente == 'canontex'){
            $vista = json_encode(['1' => __('messages.filtro-texto-producto'), '2' => __('messages.variable-locales'), 'sku_prov' => 'Resumen SKU Prov']);
        }
        $logs_tipos = json_encode(['0' => __('messages.masivo'), '2' => __('messages.masivo').' (Detalle)', '1' => __('messages.no-masivo')]);
        $catalogado = json_encode(['2' => 'Sin Seleccionar', '1' => __('messages.catalogado'), '0' => __('messages.no-catalogado')]);
        $true = true;
    @endphp
    <div class="row bg-white" style="border-radius: 0px 0px 5px 5px !important; margin-left: 10px;height: 900px !important;">
        <div class="col col-md-auto">
            <x-filtro id="f_holding" :lista="$arr_clientes"  class="selector-generico" style="width: 120px !important;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro>
        </div>
        <div class="col col-md-auto">
            <x-selector-generico id="f_vista2" idselect="f_vista" :salida="$vista"  class="selector-generico" 
            style="width: 120px !important;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-vista')}}
                </x-slot>
            </x-selector-generico>
        </div>
        <div class="col col-md-auto d-none">
            <x-selector-generico id="f_catalogado2" idselect="f_catalogado" :salida="$catalogado"  class="selector-generico" 
            style="width: 120px !important;">
                <x-slot name="texto">
                    {{__('messages.catalogado')}}
                </x-slot>
            </x-selector-generico>
        </div>
        <div class="col col-md-auto">
            <x-filtro id="f_origen" :lista="$arr_origen"  class="selector-generico" style="width: 120px !important;">
                <x-slot name="texto">
                    {{__('messages.origen')}}
                </x-slot>
            </x-filtro>
        </div>
        <x-boton-actualizar onclick="getMaestra('{{$cliente}}', 'ventas')"/>

        <div class="col col-md-6">
            <form id="uploadMasiva" class="form-inline" method="post" action="" enctype="multipart/form-data">
                <input type="file" id="subirArchivo" class="form-control" name="maestras_file" style="max-width:350px; float:left; margin-top:18px; margin-right: 15px;" accept=".xlsx" />
                <button type="submit" class="btn boton2 align-middle lh-1 col-md-auto actualizacionExcel2" style="margin-top: 20px; margin-right: 15px;" disabled  data-bs-toggle="modal" data-bs-target="#maestrasMasivas">
                    Actualización Masiva
                </button>
            </form>
        </div>

        <x-infobox tamano="25px" texto="" modal="maestra_modal"/>
        <div class="modal fade bd-example-modal-xl" id="maestra_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Actualización de Maestras</h5>
                    </div>
                    <div class="modal-body">
                        <ul class="nav nav-tabs nav-bordered mb-3">
                            <li class="nav-item">
                                <a id="info-no-masivo-tab" href="#info-no-masivo" data-bs-toggle="tab" aria-expanded="false" class="nav-link active">
                                    <i class="mdi mdi-home-variant d-md-none d-block"></i>
                                    <span class="d-none d-md-block">No Masivo</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a id="info-masivo-tab" href="#info-masivo" data-bs-toggle="tab" aria-expanded="true" class="nav-link">
                                    <i class="mdi mdi-account-circle d-md-none d-block"></i>
                                    <span class="d-none d-md-block">Masivo</span>
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content">
                            <div class="tab-pane active" id="info-no-masivo">
                                Para editar un producto específico, haga clic en el ícono ubicado al principio del registro.
                                <br>
                                <div class="text-center">
                                    <img src="{{asset('images/maestras_nomasiva_editar_icono.png')}}" class="img-fluid" alt="Responsive image">
                                </div><br>
                                Se habilitarán los campos editables, permitiéndole realizar las modificaciones necesarias.
                                <br>
                                <div class="text-center">
                                    <img src="{{asset('images/maestras_nomasiva_editar_celdas.png')}}" class="img-fluid" alt="Responsive image">
                                </div><br>
                                Una vez que haya terminado de ajustar la información, recuerde hacer clic en el botón de guardado para conservar los cambios realizados.
                                <br>
                                <div class="text-center">
                                    <img src="{{asset('images/maestras_nomasiva_guardar_icono.png')}}" class="img-fluid" alt="Responsive image">
                                </div>
                                <br>
                            </div>
                            <div class="tab-pane show" id="info-masivo">
                                <h4><b>Descarga de la Maestra Completa:</b></h4>
                                Primero, debe descargar el archivo completo de la maestra. Para ello, haga clic en el botón "Excel" ubicado en la esquina superior derecha de la tabla, tal como se indica en la figura adjunta.
                                <br>
                                <div class="text-center">
                                    <img src="{{asset('images/maestras_masiva_descargar_icono.png')}}" class="img-fluid" alt="Responsive image">
                                </div>
                                <br>

                                <h4><b>Mantenimiento de Restricciones:</b></h4>
                                Es fundamental que mantenga ciertas restricciones en el archivo, como el nombre de las cabeceras y los campos "Holding", "SKU B2B" y "Origen". Estos campos son utilizados para identificar el producto o local al que se aplican los cambios.
                                <br>

                                <h4><b>Subida de Registros Modificados:</b></h4>
                                Se recomienda subir únicamente los registros que hayan sido modificados para optimizar el proceso.

                                <h4><b>Comparación y Verificación:</b></h4>
                                Una vez que haya subido el archivo con los cambios, se realizará una comparación con la maestra almacenada en nuestro sistema para identificar todas las modificaciones realizadas. Esto le permitirá verificar si hay algún error o inconsistencia.
                                <br>
                                <div class="text-center">
                                    <img src="{{asset('images/maestras_masiva_confirmar.png')}}" class="img-fluid" alt="Responsive image">
                                </div>
                                <br>

                                <h4><b>Publicación de Cambios:</b></h4>
                                Tras verificar que todos los cambios son correctos, haga clic en el botón "Guardar" para aplicar las modificaciones.
                                <br>
                                <div class="text-center">
                                    <img src="{{asset('images/maestras_masiva_guardar_icono.png')}}" class="img-fluid" alt="Responsive image">
                                </div>
                                <br>

                                <h4><b>Respaldo y Soporte:</b></h4>
                                No se preocupe; realizamos un respaldo de la maestra antes de efectuar cambios masivos. En caso de cualquier inconveniente, comuníquese de inmediato con nuestro equipo a través del correo electrónico success@bambub2b.com
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if($cliente == 'mdlzcostarica')
            <x-infobox2 tamano="25px" texto="AMPM no reporta código local, se asigna uno interno de Bambu"/>
        @endif

        <!-- Modal Carga -->
        <div class="modal fade" id="maestrasMasivas" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" style="background-color:transparent" data-bs-backdrop="static">
            <div class="modal-dialog modal-xl modal-dialog-scrollable">
                <div id="maestrasMasivas_cont" class="modal-content" style="min-width:100%">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalLabel">Maestras Masivas</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <x-tabla id="masi" :favoritosDisabled="$true">
                        </x-tabla>
                    </div>
                    <div class="modal-footer">
                        <div class="valid-feedback" id="alertMasivasOk">Maestra Actualizada</div>
                        <div class="invalid-feedback" id="alertMasivasFail">Falló la Actualización</div>
                        <button type="button" onClick="getMaestra('{{$cliente}}', 'ventas')" class="btn btn-secondary" data-bs-dismiss="modal">{{__('messages.cerrar')}}</button>
                        <button type="button" id="saveMaestra" class="btn btn-success d-none" onClick="saveMaestraMasiva('{{$cliente}}')">{{__('messages.guardar')}}</button>
                    </div>
                </div>
            </div>
        </div>

        <div style="margin-top: 20px;" class="ms-auto col-md-auto obj_filtro form-group">
            <button type="button" class="align-middle lh-1 col-md-auto ms-auto btn btn-primary" data-bs-toggle="modal" data-bs-target="#logs">
                <i class="fas fa-clipboard-list"></i></i> Logs
            </button>
        </div>

        <!-- Modal Logs -->
        <div class="modal fade" id="logs" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" style="background-color:transparent">
            <div class="modal-dialog modal-xl" style="height: 90% !important;">
                <div id="logsmodal_cont" class="modal-content" style="min-width:100%; height: 90% !important;">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalLabel">Logs Cambios</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <x-tabla id="logs" :favoritosDisabled="$true">
                            <x-selector-generico id="f_log_vista2" idselect="f_log_vista" :salida="$logs_tipos" style="max-width: 120px !important;min-width: 120px !important;width: 120px !important;" class="">
                                <x-slot name="texto">
                                    {{__('messages.filtro-texto-vista')}}
                                </x-slot>
                            </x-selector-generico>
                            <x-boton-actualizar onclick="getLogsMae('{{$cliente}}')"/>
                        </x-tabla>
                    </div>
                </div>
            </div>
        </div>

        <x-tabla id="mae" :favoritosDisabled="$true">
            
        </x-tabla>
    </div>
    <!-- END Hero -->
@endsection
@section('js_after')
    <script src="{{asset('config/datatables.locale.spanish.js')}}"></script>
    <script src="{{asset('config/modal.languege.js')}}"></script>
    <script src="{{asset("js/custom/utilidades.js")}}"></script>
    <script src="{{asset("js/custom/reporteriaGetter.js")}}"></script>
    <script src="{{ asset('js\app.js') }}"></script>
    {{-- @php
        echo "<script>console.log('".$clientes."');</script>";
    @endphp --}}

    <script>
        var vista = "1";
        var id;
        var cod;
        var sku;
        var sku_b2b;
        $(document).ready(() => {
            $('#f_holding').select2MultiCheckboxes({
                closeOnSelect:false,
                multiple: true,
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });
            if(cliente != 'maisa'){
                $('#f_holding').find('option').prop("selected", false);
                $('#f_holding').trigger('change');
            }
            $('#f_vista').select2();
            $('#f_origen').select2MultiCheckboxes({
                closeOnSelect:false,
                multiple: true,
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });
            $('#f_origen').find('option').prop("selected", false);
            $('#f_origen').trigger('change');
            
        });
        function modificar(elemento){
            let atributo = elemento.parentNode.parentNode.getAttribute("name");
            var campos_editables = [
                'cluster', 'zona_nielsen', 'kam', 'supervisor', 'vendedor', 'reponedor', 'zona', 'cod_prov',
                'nombre_corto', 'categoria', 'familia', 'subcategoria', 'marca', 'status', 'sku_prov', 'nombre',
                'categoria_1', 'categoria_2', 'categoria_3', 'categoria_4', 'ean', 'dun', 'sap', 'agrupacion', 'presentacion',
                'local', 'cadena', 'formato_local', 'tipo_reposicion'
            ];

            if(elemento.classList.contains("fa-edit")){
                elemento.classList.remove("fa-edit");
                elemento.classList.add("fa-save");
                let filas = document.getElementById("mae_tabla").getElementsByTagName("tr");
                var fila;
                for(var i = 0; i< filas.length;i++){
                    if (filas[i].getAttribute('name') == atributo){
                        fila = filas[i].getElementsByTagName("td");
                    }
                }
                for(var i = 0; i< fila.length;i++){
                    if (campos_editables.includes(fila[i].getAttribute('name'))){
                        if(fila[i].getElementsByTagName("input").length==0){
                            var texto = fila[i].textContent;
                            var input = document.createElement("input");
                            input.value = texto;
                            fila[i].innerHTML = '';
                            fila[i].appendChild(input);
                        }
                    }
                }
            }else{
                elemento.classList.remove("fa-save");
                elemento.classList.add("fa-edit");
                let filas = document.getElementById("mae_tabla").getElementsByTagName("tr");
                var fila;
                for(var i = 0; i< filas.length;i++){
                    if (filas[i].getAttribute('name') == atributo){
                        fila = filas[i].getElementsByTagName("td");
                    }
                }
                var actualizar = {};
                for(var i = 0; i< fila.length;i++){
                    if (campos_editables.includes(fila[i].getAttribute('name'))){
                        if(fila[i].getElementsByTagName("input").length!=0){
                            var texto = fila[i].getElementsByTagName("input")[0].value;
                            actualizar[fila[i].getAttribute('name')] = texto;
                            fila[i].innerHTML = texto;
                        }
                    }
                }
                saveMaestra(actualizar, atributo, vista);
            }
            
            $(window).trigger('resize');
            // console.log(fila);
        }
        $(".select_archivo").click(function () {
            $("#subirArchivo").click();
        });
        $("#subirArchivo").change(function () {
            if (document.getElementById('subirArchivo').files.length > 0) {
                //document.getElementById("nombreArchivo").innerHTML = document.getElementById('subirArchivo').files[0].name;
                $(".actualizacionExcel2").removeAttr("disabled");
            }
        });
        var maestraResize = false;
        var cambiosMasivos;
        const yourDate = new Date();

        function openModal(modal){
            $("#"+modal).modal("show");
        }
    </script>
    <script src="{{asset('js\vendor\bootstrap-datepicker.min.js')}}"></script>
    <script src="{{ asset('js/vendor/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js\vendor\dataTables.bootstrap5.js') }}"></script>
    <script src="{{ asset('js\vendor\dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.print.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js\jszip.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.flash.min.js') }}"></script>
    <script src="{{asset('fusioncharts\v3.15.1\js\fusioncharts.js')}}"></script>
    <script src="{{asset('fusioncharts\v3.15.1\js\themes\fusioncharts.theme.fusion.js')}}"></script>
    <script src="{{asset('js/dataTables.fixedColumns.min.js')}}"></script>
    <script src="{{asset('js/dataTables.fixedHeader.min.js')}}"></script>
@endsection