@extends('layouts.reporte')

@section('css_aft')
    <link rel="stylesheet" href="{{asset('css\vendor\buttons.bootstrap5.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;
            box-shadow: none !important;
        }
        .boton-blue:hover{
            background-color: #0B5F96 !important;
            border-color: #0B5F96 !important;
        }
        .boton2{
            background-color: #00a65a !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: 300px;
            margin-top: 12px;
            transform: translate(-140px, 25px);
            color: white;
            background-color: black;
            border-radius: 20px;
            padding: 10px;
            z-index: 99;
        }
        .fa-sort-up{
            display: none;
            position: absolute;
            margin-top: 12px;
            transform: translate(8px, 20px);
            color: black;
        }
    </style>
@endsection
@section('php')
    @php
        $locales = [];
        $cantidad = 100;
        while ($cantidad <= $cantidad_locales) {
            $locales[$cantidad] = $cantidad;
            $cantidad = $cantidad + 100;
        }
        if ($cantidad % 100 == 0) {
            $locales[$cantidad_locales] = $cantidad_locales;
        }
        $locales = json_encode($locales);
        $anhos = [];
        $semestres = [];
        foreach ($anos as $value) {
            if(property_exists($value, "ano")){
                $anhos[$value->ano] = $value->ano;
                $semestres[$value->ano."-1"] = $value->ano."-1";
                $semestres[$value->ano."-2"] = $value->ano."-2";
            }else{
                $anhos[$value->ANO] = $value->ANO;
                $semestres[$value->ANO."-1"] = $value->ANO."-1";
                $semestres[$value->ANO."-2"] = $value->ANO."-2";
            }
        }
        $cliente = config('app.CLIENTE');
        
        $salida = json_encode(["emision"=> "Fecha de emisión", "recibo" => "Fecha de recibo"]);
        $salida_matri = json_encode(["2"=> __('messages.ventas'), "1" => __('messages.unidades')]);
        $tipo_var = json_encode(["2"=> __('messages.dinero'), "1" => __('messages.porcentaje')]);
        $periodo = json_encode(["dia"=> __('messages.dias'), "sem" => __('messages.semanas'), "mes" => __('messages.meses')]);
        $periodo_grafcomp = json_encode([/*"dia"=> __('messages.dias'),*/ "sem" => __('messages.semanas'), "mes" => __('messages.meses'), "ytd" => __('messages.ytd'), "year" => __('messages.time-str-años'), "semestre" => __('messages.time-str-semestres')]);
        $periodo_comp = json_encode(["dia"=> __('messages.dias'),"ytd"=> __('messages.ytd'), "mec" => __('messages.mec'), "sem" => __('messages.semanas'), "mes" => __('messages.meses')]);
        $periodo_matri = json_encode(["ytd"=> __('messages.ytd'), "mec" => __('messages.mec'), "sem" => __('messages.semanas'), 'dia' => __('messages.dias')]);
        $periodo_grafmatri = json_encode(["ytd"=> __('messages.ytd'), "mec" => __('messages.mec'), 'dia' => __('messages.dias')]);
        $periodo_var = json_encode(["dia"=> __('messages.dias')]);
        $mesesComp = [];
        $semanasComp = [];
        $filtrosAvConProd = $filtrosAv;
        unset($filtrosAvConProd['producto']);
        unset($filtrosAvConProd['cadena']);
        $filtrosAvConLoc = $filtrosAv;
        unset($filtrosAvConLoc['local']);
        unset($filtrosAvConLoc['cadena']);
        $yearAct = date("Y");
        $yearAnt = date("Y") - 1;
        $tipo = json_encode(["year" => (__('messages.año'))."-".(__('messages.meses'))."-".(__('messages.dias')), 
        "local" => __('messages.var-cadena')."-Formato-".(__('messages.variable-local')),
        "marca"=>__('messages.marca')."-".(__('messages.filtro-texto-categoria'))."-".(__('messages.variable-producto'))]);
        $tipo_var = json_encode(["dinero"=>__('messages.dinero'), "porcentaje" =>__('messages.porcentaje')]);
        $lim_inf = json_encode(["-100"=>"-100%", "-50" =>"-50%", "-25"=>"-25%", "-10"=>"-10%"]);
        $lim_sup = json_encode(["100"=>"100%", "50" =>"50%", "25"=>"25%", "10"=>"10%"]);
        $tipos_graficos = json_encode([ "msline" => "Líneas", "stackedcolumn2d" => (__('messages.selector-tipo-grafico-columnas-apiladas')),"mscolumn2d" => "Columnas agrupadas", "stackedbar2d" => "Barras apiladas"]);
        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct || $_year == $yearAnt) {
                $mesesComp []= $value;
            }
        }
        foreach ($semanas as $value) {
            $_year = substr($value->periodo, 0, 4);
            if($_year == $yearAct || $_year == $yearAnt) {
                $semanasComp []= $value;
            }
        }
        if ($cliente == 'colgate') {
            $div = '<div style="padding: 5px 16px;overflow: hidden;background-color: lightblue;text-align: center;"><ul>';
            foreach ($div_reportes as $value) {
                $div.="<li>".$value->Descripcion."</li>";
            }
            $div.="</ul></div>";
        }else{
            $div='';
        }
        $variables_2 = $variables;
        if(isset($variables_2['Local']) && isset($variables_2['Local']['3-5'])){
            unset($variables_2['Local']['3-5']);
        }
        if(isset($variables_2['Producto']) && isset($variables_2['Producto']['1-15'])){
            unset($variables_2['Producto']['1-15']);
        }

        $ninguno = ['' => ['-1' => 'Sin Seleccionar']];
        $variables_2 = $ninguno + $variables_2;

        $display_grafico = '';
        $display_tabla = '';
        $favoritos=json_encode([]);
        $variables_agrupacion = json_encode(["1"=>"Cadena", "2-5"=>"Holding", "2-0"=>"Compañía"]);
        $orden_ventas = json_encode(["1"=>"Menor a Mayor", "2"=>"Mayor a Menor"]);
        $texto = nl2br("Al seleccionar un punto de la línea, representa la cantidad y porcentaje de productos que concentran las ventas de la variable del valor de salida seleccionado.");
        $texto2 = nl2br("Al seleccionar un punto de la línea, representa la cantidad y porcentaje de salas que concentran las ventas de la variable del valor de salida seleccionado.");
    @endphp
@endsection
@section('div_reportes')
    @php echo $div; @endphp
    <style>
        table tr td {
            border: 2px solid #D1D1D1;
            padding: 10px;
        }
        table tr:nth-child(odd) {
            background: #f4f4f4;
        }
    </style>
@endsection


@section('tabla')
    @if(isset($selectores_tabla['fillrate']))
        <x-tabla id="tabla_fillrate" style="{{$display_grafico}}" :filtrosAv="$filtrosAvConProd" :filtrosAvAlias="$filtrosAvAlias">
            <x-filtro id="f_fillrate" :lista="$clientes" style="max-width: 120px; min-width: 120px; width: 120px;">
                <x-slot name="texto">
                   Cadena
                </x-slot>
            </x-filtro>
            <x-selector-generico id="salida" idselect="salida" :salida="$salida"  class="selector-generico" style="width: 160px">
                <x-slot name="texto">
                    Tipo de Emisión
                </x-slot>
            </x-selector-generico>

            <x-selector-dias idpadre="" style="" />
                        
            <!-- <div class="col col-md-auto obj_filtro form-group font-weight-normal d-flex align-items-center">
                <label class="align-items-center d-flex" style="padding-top: 15px">
                    <input type="text" id="n_orden" style="margin-right: 5px" placeholder="N° de Orden">
                </label>
            </div> -->
            <x-boton-actualizar onclick="getFillRateDetalle();"/>
        </x-tabla>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

@endsection

    <div class="p-3 align-items-center flex-column d-none" id="f_fillrate_table">
        
    </div>
@section('js_aft')
    <script>
    
        function MessageIn(icon){
            $('.tooltiptext').fadeIn(200);
            $('.fa-sort-up').fadeIn(200);
        }
        function MessageOut(icon){
            $('.tooltiptext').fadeOut(200);
            $('.fa-sort-up').fadeOut(200);
        }        

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

            //hide button with id muestrafiltros
            $("#muestrafiltros").hide();
  
            $('#variables_comp').select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });
            
            let ahora = new Date();
            let congifDate = {
                ...("{{config('app.locale')}}" == "es") && {
                    locale: {
                        format: 'YYYY/MM/DD',
                        daysOfWeek: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
                        monthNames: ["Enero", "Febrero", "Marzo", "Abril",
                                    "Mayo", "Junio", "Julio", "Agosto",
                                    "Septiembre", "Octubre", "Noviembre", "Diciembre"],
                        applyLabel: "Aplicar",
                        cancelLabel: "Cancelar",
                        firstDay: 1
                    }
                },
                    maxDate: moment(ahora),
                    startDate: moment((new Date()).setDate(ahora.getDate()-21)),
                    endDate: ahora
            };
            ["#f_dia__ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });

            congifDate2 = congifDate;
            congifDate2.startDate = moment((new Date()).setDate(ahora.getDate()-15));
            ["#f_dia_evo_ini", "#f_dia_evo_fin"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate2);
            });
            congifDate["minDate"] = moment(new Date(ahora.getFullYear(), 0, 1));
            [ "#f_dia_grafcomp_ini", "#f_dia_grafcomp_fin"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            congifDate["minDate"] = moment((new Date()).setDate(ahora.getDate()-365));
            [ "#f_dia_grafmatri_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            
            $("#tipo_grafdri").change(function(elem){
                if(elem.target.value=="year"){
                    $("#f_tmp_grafdri2").hide();
                    $(".fltr_periodo_grafdri").hide();
                }else{
                    $("#f_tmp_grafdri2").show();
                    $("#f_tmp_grafdri").change();
                }
            });
            let fechaMin = new Date(new Date().setFullYear(new Date().getFullYear() - 1));
            congifDate["minDate"] = moment(fechaMin);
            [ "#f_dia_grafvar_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            $('select[id^="f_tmp_"]').change(function(elem){
                let aux = elem.target.id.split("_");
                let macroTmp = aux[aux.length - 1];
                let tmp = $("#f_tmp_" + macroTmp).find('option:selected').val();
                $(".fltr_periodo_" + macroTmp).css("display","none");
                $("#fltr_"+tmp+"_" + macroTmp).css("display","inline-block");
                $("#fltr_"+tmp+"_" + macroTmp + "2").css("display","inline-block");
                $("#fltr_"+tmp+"_" + macroTmp + "3").css("display","inline-block");
            });
            $(".navbar-402").css("border-style","solid");
            $(".navbar-402").css("border-left","0px");
            $(".navbar-402").css("border-color","#57775F");
            $(".navbar-402").css("background-color","#57775F");
            $('[data-toggle="infobox"]').tooltip();

            
        });

        function getFillRateDetalle(){
        
            let cadena = $("#f_fillrate").find('option:selected').val();
            let tipo = $("#salida").find('option:selected').val();
            let fecha = $('#f_dia__ini').data("daterangepicker");
            let start = fecha.startDate.format("YYYY-MM-DD");
            let end = fecha.endDate.format("YYYY-MM-DD");

            $.ajax({
                url: "/fillrate/detalle",
                type: 'GET',
                data: {
                    cadena: cadena,
                    tipo: tipo,
                    start: start,
                    end: end
                },
                success: function(data){
                    console.log(data);
                   //create a table in tabla_fillrate_cont
                     let table = '<table class="table table-bordered table-striped table-hover" id="fillrate_table">';
                        table += '<thead><tr><th>N° Orden</th><th>Cadena</th><th>Local</th><th>Fecha de Emisión</th><th>Fecha de Entrega</th><th>Lead Time</th>'
                        +'<th>Producto</th><th>Pack (U)</th><th>Ordenado (U)</th><th>Entregado (U)</th><th>FILLRATE (%)</th></tr></thead><tbody>';
                        data.data.forEach(element => {
                            table += '<tr><td>'+element.ID_ORDEN+'</td><td>'+element.CADENA+'</td><td>'+element.LOCAL+'</td><td>'+element.FECHA_ORDEN+'</td><td>'
                            +element.FECHA_RECIBIDO+'</td><td>'+element.leadtime+'</td><td>'+element.nombre+'</td><td>'+element.UNIDAD+'</td><td>'+element.ORDENADO_LOCAL+'</td><td>'
                            +element.RECIBIDO_LOCAL+'</td><td>' + ((element.RECIBIDO_LOCAL !== 0) ? (element.ORDENADO_LOCAL / element.RECIBIDO_LOCAL) * 100 : 0) + '</td></td></tr>';
                        });
                        table += '</tbody></table>';
                        $("#tabla_fillrate_cont").html(table);

                        $('#fillrate_table').DataTable({
                            "language": {
                                "url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"
                            }
                        });
                        $('#fillrate_table').DataTable().columns.adjust().draw();
                        $('#fillrate_table').parent().css("max-height", "600px");
                        $('#fillrate_table').parent().css("overflow-x", "auto");

                        


                },
                beforeSend: function(){
                    $("#tabla_fillrate_cont").html('<div class="d-flex justify-content-center"><div class="spinner-border" role="status"><span class="sr-only">Cargando...</span></div></div>');
                }
            });
        }
    </script>
@endsection