@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: 25px;
            transform: translate(60px, 5px);
            color: white;
            text-align: justify;
            background-color: black;
            border-radius: 20px;
            padding: 10px;
        }
        .fa-sort-up{
            display: none;
            position: absolute;
            margin-top: 25px;
            transform: translate(-8px, 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');
        //Estas listas la intención es que tengan los valores que se estimen necesarios, ojalá que puedan ser definidas en el controller
        $clientes2=[];
        for ($i=0; $i < count($clientes); $i++) { 
            $clientes2[$i]=new stdClass();
            $clientes2[$i]->valor=$clientes[$i]->valor;
            $clientes2[$i]->nombre=$clientes[$i]->valor;
        }
        $clientes2=$clientes2;
        $origen_arr = ['SELLOUT' => __('messages.sell-out'), 'SELLIN' => __('messages.sell-in')];
        if(in_array($cliente, ['mdlzchile', 'clorox'])){
            $origen_arr['ECOMMERCE'] = __('messages.e-commerce');
        }
        $origen = [];
        foreach($origen_arr as $key => $value){
            $origen_aux = new stdClass();
            $origen_aux->valor = $key;
            $origen_aux->nombre = $value;
            $origen []= $origen_aux;
        }
        $vista = json_encode(['1' => __('messages.forecast')]);
        $logs_tipos = json_encode(['0' => __('messages.masivo'), '1' => __('messages.no-masivo')]);
        $catalogado = json_encode(['2' => 'Sin Seleccionar', '1' => __('messages.catalogado'), '0' => __('messages.no-catalogado')]);
    @endphp
    <div class="row bg-white align-items-center" style="border-radius: 0px 0px 5px 5px !important; margin-left: 10px">
        <!--
        <div class="col col-md-auto">
            <x-filtro id="f_holding" :lista="$clientes2"  class="selector-generico" style="width: 130px;">
                <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;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-vista')}}
                </x-slot>
            </x-selector-generico>
        </div>
        <div class="col col-md-auto">
            <x-selector-generico id="f_catalogado2" idselect="f_catalogado" :salida="$catalogado"  class="selector-generico" 
            style="width: 120px;">
                <x-slot name="texto">
                    {{__('messages.catalogado')}}
                </x-slot>
            </x-selector-generico>
        </div>
        <div class="col col-md-auto">
            <x-filtro id="f_origen2" idselect="f_origen" :lista="$origen"  class="selector-generico" style="width: 120px;">
                <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="uploadMasivaForecast" 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>

        <div style="width: 25px; height: 25px" class="d-flex flex-row-reverse">
            <i class="fas fa-info-circle" style="margin-right: 0px;font-size: 25px" onmouseover="MessageIn(this)" onmouseout="MessageOut(this)"></i>
            <i class="fas fa-sort-up"></i>
            <span class="tooltiptext">El formato del archivo sigue la estructura del descargable llamado "Plantilla Forecast" presente en la sección de Descargas en la barra lateral izquierda.</span>
        </div>

        <!-- 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-lg 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">
                        </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" 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-lg">
                <div id="logsmodal_cont" class="modal-content" style="min-width:100%">
                    <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">
                            <x-selector-generico id="f_log_vista2" idselect="f_log_vista" :salida="$logs_tipos" style="max-width: 120px;min-width: 120px;width: 120px;" 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">
            
        </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>
        function MessageIn(icon){
            $('.tooltiptext').fadeIn(200);
            $('.fa-sort-up').fadeIn(200);
        }
        function MessageOut(icon){
            $('.tooltiptext').fadeOut(200);
            $('.fa-sort-up').fadeOut(200);
        }
        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";
                }
            });
            $('#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");
            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 (fila[i].getAttribute('name') == "cluster" || fila[i].getAttribute('name')=="zona_nielsen" || fila[i].getAttribute('name')=="kam"
                    || fila[i].getAttribute('name')=="supervisor" || fila[i].getAttribute('name')=="vendedor"|| fila[i].getAttribute('name')=="reponedor"
                    || fila[i].getAttribute('name')=="zona" || fila[i].getAttribute('name')=="nombre_corto" || fila[i].getAttribute('name')=="categoria"
                    || fila[i].getAttribute('name')=="familia" || fila[i].getAttribute('name')=="subcategoria" || fila[i].getAttribute('name')=="marca"
                    || fila[i].getAttribute('name')=="status" || fila[i].getAttribute('name')=="sku_prov" || fila[i].getAttribute('name')=="nombre"
                    || fila[i].getAttribute('name')=="cod_prov"){
                        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 (fila[i].getAttribute('name') == "cluster" || fila[i].getAttribute('name')=="zona_nielsen" || fila[i].getAttribute('name')=="kam"
                    || fila[i].getAttribute('name')=="supervisor" || fila[i].getAttribute('name')=="vendedor"|| fila[i].getAttribute('name')=="reponedor"
                    || fila[i].getAttribute('name')=="zona" || fila[i].getAttribute('name')=="nombre_corto" || fila[i].getAttribute('name')=="categoria"
                    || fila[i].getAttribute('name')=="familia" || fila[i].getAttribute('name')=="subcategoria" || fila[i].getAttribute('name')=="marca"
                    || fila[i].getAttribute('name')=="status" || fila[i].getAttribute('name')=="sku_prov" || fila[i].getAttribute('name')=="nombre" || fila[i].getAttribute('name')=="cod_prov"){
                        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();
    </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