@extends('layouts.galeria')

@section('php')
    @php
        $cliente = config('app.CLIENTE');
        $selectores_grafico = [];
        unset($etiquetas["Todos"]);
        unset($usuarios["Todos"]);
        $selector_etiquetas = json_encode($etiquetas);
        $id = 'muro';
        $selector_usuarios = json_encode($usuarios);
    @endphp
@endsection
@section('tabla')
    <div id="{{$id}}" class="w-100">  
        <div style="background-color: white;padding: 10px;" class="row">

            <x-filtro id="f_holding_muro" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro>
            @if (array_key_exists("local",$filtrosAv))
                @php
                    $local = $filtrosAv["local"];
                @endphp
                <x-filtro id="f_local_{{$id}}" :lista="$local" style="max-width: 120px; min-width: 120px; width: 120px;">
                    <x-slot name="texto">
                        {{__('messages.'.$filtrosAvAlias['local'])}}
                    </x-slot>
                </x-filtro>
            @endif
            <x-selector-generico :salida="$selector_etiquetas" id="f_etiquetas_muro2" idselect="f_etiquetas_muro" style="max-width: 120px;min-width: 120px;width: 120px;" class=""  >
                <x-slot name="texto">
                    Etiquetas
                </x-slot>
            </x-selector-generico>

            <x-selector-dias idpadre="muro" style="display:block;" />

        
            <x-boton-actualizar onclick="getMuro('{{$cliente}}', 'galeria');"/>

            <x-selector-generico selected="Todos" :salida="$selector_usuarios" id="f_usuarios_muro2" idselect="f_usuarios_muro" style="max-width: 150px;min-width: 150px;width: 150px;" class=""  >
                <x-slot name="texto">
                    Usuarios
                </x-slot>
            </x-selector-generico>
            <div class="col-md-auto ms-auto" style="align-items: center;">     
                <button class="btn boton btn-sm align-middle lh-1 actualizar" onclick="descargar()" >
                    Descargar
                </button>
            </div>

            @isset($filtrosAv)
                <button type="button" id="muestrafiltros" class="btn btn-default btn-sm" style="width: auto; height: 30px; margin-top: 10px;margin-right: 5px; font-size: 12px!important" onclick="filtrosAv(this,'{{$id}}')">
                    <i class="fas fa-filter"></i>
                    Filtros Avanzados
                    <i class="fas fa-chevron-down"></i>
                </button>
            @endisset
            
        </div>
        
        @isset($filtrosAv)
            <div class="bg-white">
                    <div style="display:none; height:400px; padding-top:30px;position:relative" id="filtros_avanzados" class="flex-row justify-content-around filtros_avanzados " parent="{{$id}}">
                        <div class="flex-column">
                            @if (array_key_exists("canal",$filtrosAv))
                                @php
                                    $canal = $filtrosAv["canal"];
                                @endphp
                                <x-filtro id="f_canal_{{$id}}" :lista="$canal" style="max-width: 120px; min-width: 120px; width: 120px; margin-top:10px">
                                    <x-slot name="texto">
                                        {{__('messages.'.$filtrosAvAlias['canal'])}}
                                    </x-slot>
                                </x-filtro>
                            @endif
                            @if (array_key_exists("cadena",$filtrosAv))
                                @php
                                    $cadena = $filtrosAv["cadena"];
                                @endphp
                                <x-filtro id="f_cadena_{{$id}}" :lista="$cadena" style="max-width: 120px; min-width: 120px; width: 120px; margin-top:10px">
                                    <x-slot name="texto">
                                        {{__('messages.'.$filtrosAvAlias['cadena'])}}
                                    </x-slot>
                                </x-filtro>
                            @endif
                        </div>

                        <div class="flex-column">
                            @if (array_key_exists("formato",$filtrosAv))
                                @php
                                    $formato = $filtrosAv["formato"];
                                @endphp
                                <x-filtro id="f_formato_{{$id}}" :lista="$formato" style="max-width: 120px; min-width: 120px; width: 120px; margin-top:10px">
                                    <x-slot name="texto">
                                        {{__('messages.'.$filtrosAvAlias['formato'])}}
                                    </x-slot>
                                </x-filtro>
                            @endif
                        </div>

                        <div style="height:80%; border-right:2px solid #CCC"></div>


                        <div class="flex-column">
                            @if (array_key_exists("region",$filtrosAv))
                                @php
                                    $region = $filtrosAv["region"];
                                @endphp
                                <x-filtro id="f_region_{{$id}}" :lista="$region" style="max-width: 120px; min-width: 120px; width: 120px; margin-top:10px">
                                    <x-slot name="texto">
                                        {{__('messages.'.$filtrosAvAlias['region'])}}
                                    </x-slot>
                                </x-filtro>
                            @endif
                            @if (array_key_exists("ciudad",$filtrosAv))
                                @php
                                    $ciudad = $filtrosAv["ciudad"];
                                @endphp
                                <x-filtro id="f_ciudad_{{$id}}" :lista="$ciudad" style="max-width: 120px; min-width: 120px; width: 120px; margin-top:10px">
                                    <x-slot name="texto">
                                        {{__('messages.'.$filtrosAvAlias['ciudad'])}}
                                    </x-slot>
                                </x-filtro>
                            @endif
                        </div>

                        <div class="flex-column">
                            @if (array_key_exists("comuna",$filtrosAv))
                                @php
                                    $comuna = $filtrosAv["comuna"];
                                @endphp
                                <x-filtro id="f_comuna_{{$id}}" :lista="$comuna" style="max-width: 120px; min-width: 120px; width: 120px; margin-top:10px">
                                    <x-slot name="texto">
                                        {{__('messages.'.$filtrosAvAlias['comuna'])}}
                                    </x-slot>
                                </x-filtro>
                            @endif
                            @if (array_key_exists("zona",$filtrosAv))
                                @php
                                    $zona = $filtrosAv["zona"];
                                @endphp
                                <x-filtro id="f_zona_{{$id}}" :lista="$zona" style="max-width: 120px; min-width: 120px; width: 120px; margin-top:10px">
                                    <x-slot name="texto">
                                        {{__('messages.'.$filtrosAvAlias['zona'])}}
                                    </x-slot>
                                </x-filtro>
                            @endif
                        </div>

                        <div style="height:80%; border-right:2px solid #CCC"></div>


                        <div class="flex-column">
                            @if (array_key_exists("supervisor",$filtrosAv))
                                @php
                                    $supervisor = $filtrosAv["supervisor"];
                                @endphp
                                <x-filtro id="f_supervisor_{{$id}}" :lista="$supervisor" style="max-width: 120px; min-width: 120px; width: 120px; margin-top:10px">
                                    <x-slot name="texto">
                                        {{__('messages.'.$filtrosAvAlias['supervisor'])}}
                                    </x-slot>
                                </x-filtro>
                            @endif
                            @if (array_key_exists("reponedor",$filtrosAv))
                                @php
                                    $reponedor = $filtrosAv["reponedor"];
                                @endphp
                                <x-filtro id="f_reponedor_{{$id}}" :lista="$reponedor" style="max-width: 120px; min-width: 120px; width: 120px; margin-top:10px">
                                    <x-slot name="texto">
                                        {{__('messages.'.$filtrosAvAlias['reponedor'])}}
                                    </x-slot>
                                </x-filtro>
                            @endif
                        </div>

                        <div class="flex-column">
                            @if (array_key_exists("vendedor",$filtrosAv))
                                @php
                                    $vendedor = $filtrosAv["vendedor"];
                                @endphp
                                <x-filtro id="f_vendedor_{{$id}}" :lista="$vendedor" style="max-width: 120px; min-width: 120px; width: 120px; margin-top:10px">
                                    <x-slot name="texto">
                                        {{__('messages.'.$filtrosAvAlias['vendedor'])}}
                                    </x-slot>
                                </x-filtro>
                            @endif
                        </div>

                        <div style="height:80%; border-right:2px solid #CCC"></div>


                        <div style="display:none; justify-content: center; position:absolute; bottom: 20px" id="aplicarfiltrosparent" parent="{{$id}}">
                                <button type="button" id="limpiarfiltros" class="btn btn-default btn-sm limpiarfiltros" style="width: auto; height: 30px; margin-top: 22px; margin-right:20px">
                                    {{__('messages.limpiar-filtros')}}
                                </button>
                                <button type="button" id="aplicarfiltros" class="btn btn-sm aplicarfiltros" style="width: auto; height: 30px; margin-top: 22px; font-size: .875rem!important">
                                    {{__('messages.aplicar')}}
                                </button>
                        </div>
                    </div>
            </div>
            @endisset

        <div class="row" style="background-color: white;padding: 10px;" id="muro_cont">
            
        </div>
    </div>

@endsection
@section('js_aft')
    <script>
        const d = new Date();
        d.getTime();
        var zip;
        function descargar() {
            zip.generateAsync({type:"blob"})
            .then(function(content) {
                // see FileSaver.js
                var tmp = 'dia';
                tmp = getDate(tmp, "#f_dia_muro_ini");
                saveAs(content, tmp[0]+" "+tmp[1]+".zip");
            });
        }
        var ids = ['muro'];
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
        $(document).ready(() => {

            filtrosPromise.then(function(resp){
                ponerFiltrosAv(resp);
            });

            let filtros = ['holding','categorias', 'kam', 'canal', 'cadena', 'formato', 'local', 'region', 'supervisor',
            'ciudad', 'comuna', 'zona', 'reponedor', 'vendedor', 'marca', 'subcategoria', 'familia', 'estado', 'producto', 'etiquetas', 'usuarios'];
            
            for(let filtro of filtros) {
               
                $(`#f_${filtro}_muro`).select2MultiCheckboxes({
                    closeOnSelect:false,
                    multiple: true,
                    placeholder: `{{__('messages.seleccionar')}} ${filtro.replace(/^\w/, c => c.toUpperCase())}`,
                    width: "120",
                    templateSelection: function(selected, total) {
                        return selected.length + " de " + total + " total";
                    }
                });
                $(`#f_${filtro}_muro`).find('option').prop("selected", false);
                $(`#f_${filtro}_muro`).trigger('change');
                
            }

            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()-15)),
                    endDate: ahora
            };
            ["#f_dia_muro_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            
            
        });
    </script>
@endsection