@extends('layouts.backend')

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

        label{
            font-weight: 400!important;
        }
    </style>
@endsection
@section('content')
    <!-- Hero -->
    @php

        use Illuminate\Support\Facades\DB;
        use App\Bd\Bd;
        $cadenas = DB::table('data_locales')->select('cadena')->groupBy('cadena')->get()->all();
        $arr = [];
        for($i=0;$i<sizeof($cadenas);$i++){
            $arr[$cadenas[$i]->cadena] = $cadenas[$i]->cadena;
        }


        $arr_marcas = [];
        $marca = DB::table('data_productos_competencia')->select('marca')->groupBy('marca')->get()->all();
        for($i=0;$i<sizeof($marca);$i++){
            $arr_marcas[$marca[$i]->marca] = $marca[$i]->marca;
        }
        








        $cliente=config('app.CLIENTE');
        $yearAct = date("Y");
        $salida = json_encode(["2"=> __('messages.ventas'), "1" => __('messages.unidades'), "3" => __('messages.costo')]);

        foreach ($semanas as $value) {
            $_year = substr($value->periodo, 0, 4);
            if($_year == $yearAct) {
                $semanasPreciosCompetidores []= $value;
            }
        }
        $warning="";
        if ($div_reportes != null) {
            $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='';
        }
    @endphp
    <div class="bg-body-light">
        <div class="content content-full">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                <h3 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2 text-center" style="font-weight: 400!important;">{{$titulo}}</h3>
                <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                    
                </nav>
            </div>
        </div>
    </div>
    

    <div class="row bg-white" style="border-radius: 0px 0px 5px 5px !important; margin-left: 10px">
        {{-- <div style="padding: 5px 16px;overflow: hidden;background-color: lightblue;text-align: center;">La data de este reporte se actualiza los días viernes con la foto del inventario disponible.</div> --}}
        <x-tabla id="PreciosCompetidores" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="cadena_competidores" idselect="f_cadena_competidores" :salida="json_encode($arr)"  class="selector-generico" style="width: 135px">
                <x-slot name="texto">
                    Cadenas
                </x-slot>
            </x-selector-generico>   
            <x-selector-generico id="marcas_competidores" idselect="f_marcas_competidores" :salida="json_encode($arr_marcas)"  class="selector-generico" style="width: 135px">
                <x-slot name="texto">
                    Marcas
                </x-slot>
            </x-selector-generico>           
            {{-- <x-selector-semanas id="fltr_sem_PreciosCompetidores" idselect="f_sem_PreciosCompetidores_ini" :semanas="$semanasPreciosCompetidores"  class="fltr_periodo_PreciosCompetidores">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas> --}}
                
            <x-selector-semanas id="fltr_sem_PreciosCompetidores2" idselect="f_sem_PreciosCompetidores_fin" :semanas="$semanasPreciosCompetidores" class="fltr_periodo_PreciosCompetidores">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
                
            <x-infobox tamano="25px" texto="Reporte para visualizar la variacion de precios de la competencia. Puede seleccionar Cadenas y Marcas para una información mas precisa. Puede aplicar filtros avanzados para obtener datos detallados."/>
                
            <x-boton-actualizar onclick="getPreciosCompetidoresVariacion('{{$cliente}}', 'PreciosCompetidoresVariacion')"/>
        </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>
        let ids = ['PreciosCompetidores'];
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
        $(document).ready(() => {
            ids.forEach(function(item){
                if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
            });

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

            let filtros = ['clientes', 'categorias', 'kam', 'canal', 'cadena', 'formato', 'local', 'region', 'supervisor',
            'ciudad', 'comuna', 'zona', 'reponedor', 'vendedor', 'marca', 'subcategoria', 'familia', 'estado', 'producto'];
            
            for(let filtro of filtros) {
                for(let id of ids) {
                    multiSelect(filtro, id, "{{__('messages.seleccionar')}}");
                }
            }

            $('#variables_PreciosCompetidores').select2MultiCheckboxes({
                        closeOnSelect:false,
                        multiple: true,
                        placeholder: "{{__('messages.elegir-variables')}}",
                        width: "auto",
                        templateSelection: function(selected, total) {
                            return selected.length + " de " + total + " total";
                        }
            });
            //$('#variables_PreciosCompetidores').find('option').prop("selected", true);
            //$('#variables_PreciosCompetidores').trigger('change');

            //setTimeout(function () {$('#PreciosCompetidores .boton')[0].click();}, 1001);

        });

        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