@extends('layouts.backend')

@section('css_after')
    <link rel="stylesheet" href="{{asset('css\vendor\buttons.bootstrap5.css') }}">
    <style>
        .panel-heading{
            padding: 10px 15px;
            background-color: #f5f5f5;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border-bottom: 1px solid #ddd;
        }
        h5{
            font-size: 14px !important;
            font-weight: 500 !important;
        }
        h6{
            font-size: 12px !important;
            font-weight: 500 !important;
        }
        .panel{
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .panel-default{
            border-color: #ddd;
        }
        .panel-body{
            padding: 15px;
        }
        #mapa {
            height: 100%;
        }
    </style>
@endsection
@section('content')
@php
    $salida = json_encode(['2' => 'Sell Out ($)', '50' => 'Stocks (U)']);
    $sellout = json_encode(['variacion' => 'Variacion', 'ventas' => 'Sell Out ($)']);
    $cliente = config('app.CLIENTE');
    $display_tabla='';
    $sellout2 = json_encode(['quiebre' => 'Quiebre', 'fantasmas' => 'Inv. Fantasma']);
    if($cliente == 'bless'){
        $warning = '* Las Ventas mostradas en los cuadros del mapa corresponden a la venta de los ultimos dias \n * La Variacion corresponde a la diferencia de las ventas de los ultimos dias vs los dias anteriores. \n * El Stock mostrado corresponde al ultimo disponible.';
    }else{
        $warning = '* Las Ventas mostradas en los cuadros del mapa corresponden a la venta de los ultimos 30 dias \n * La Variacion corresponde a la diferencia de las ventas de los ultimos 30 dias vs los 30 dias anteriores. \n * El Stock mostrado corresponde al ultimo disponible.';
    }
@endphp
<x-tabla id="mapLocales" style="{{$display_tabla}}; margin-top:30px;" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
    <x-selector-generico id="f_mapLocales" idselect="f_mapLocales_select" :salida="$salida" class="selector-generico" style="width:120px;" selected="2">
        <x-slot name="texto">
            {{__('messages.selector-generico-texto-valor')}}
        </x-slot>
    </x-selector-generico>

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

    <x-infobox tamano="25px" texto="" modal="map_alertas_modal"/>
    <div class="modal fade bd-example-modal-lg" id="map_alertas_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="">Mapa de Locales</h5>     
            </div>
                <!-- Center a image from ../public/images/ventas_grafico_comparativo.png -->
                <div class="text-center">
                    <img src="{{asset('images/mapa_locales_info.png')}}" class="img-fluid" alt="Responsive image">
                </div>
                <!-- add div for text -->
                <p><b>Consultas sobre el reporte:</b> Para utilizar el reporte; definir los parámetros en los selectores y presionar "Actualizar".</p>
                <ul>
                    <li><b>Selector Variable:</b> Definir Variable a representar en el mapa.</li>
                </ul>
                <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                <p>La selección de variable <b>Sell Out ($)</b> es para la venta de los últimos 30 días. La variación es entre la venta de los últimos 30 días con respecto a la venta de los 30 días siguientes (del 31 al 60).</p>
                <p>La selección de variable <b>Stocks (U)</b> es para el último inventario notificado, con límite de 30 días.</p>
            </div>
        </div>
    </div>
</x-tabla>

<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 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" style="padding: 5px;">
    <div class="col-lg-8" style="overflow: hidden;padding: 0px 15px">
        <div id="mapa" style="background-color: rgb(255, 255, 255); height: 900px; overflow: hidden;">
        </div>
    </div>
    <div class="col-lg-4 d-flex flex-column" style="height:900px;background-color:#FFF;">
        <div class="row">
            <div class="col-lg-12">
                <div style=" height:55px; padding-top: 10px;">
                    <div class="col-md-auto d-flex" style="margin-top:10px">
                        <x-selector-generico id="f_sellout2" idselect="f_sellout" :salida="$sellout" class="selector-generico" style="width: 120px;" selected="ventas"/>
                        <button class="btn boton btn-sm align-middle lh-1" id="btn-cambiarOrden" onclick="cambiarOrden(this,'{{$cliente}}', true)" style="margin-left: 5px">
                            Ordenar
                            <i class="fas fa-chevron-up"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="height: inherit">
            <div class="col-lg-12" style="overflow: auto; height: 845px;">
                <div id="local_mapa" class="d-flex flex-wrap">
                    <div class="row row-eq-height" style="margin-top:1px" id="local_mapa_row">
                        {{-- <div class="col-lg-4" style="padding-right:5px;padding-left:5px;margin-bottom:1px;">
                            <div panel_id="2508"  class="panel panel-default" style="margin-bottom:10px">
                                <div class="panel-heading" style="height:90px">
                                    <h5>4. SANTA ISABEL</h5>
                                    <h6 title="AV.VALPARAISO 740  VIÑA DEL MAR" style="display: -webkit-box;
                                                -webkit-line-clamp: 2;
                                                -webkit-box-orient: vertical;
                                                    overflow: hidden;
                                                    text-overflow: ellipsis;
                                                    font-size: 12px;">
                                            AV.VALPARAISO 740  VIÑA DEL MAR
                                        </h6>
                                </div>
                                <div class="panel-body">
                                                <p style="color:#FF0000;font-size:12px;margin: 0 0 0 0">
                                            Ventas: $2.008
                                        </p>
                                        <p style="color:#FF0000;font-size:12px;margin: 0 0 0 0">
                                        Variación: -6.22%
                                        </p>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@php $display_tabla = 'display: none;'; @endphp
@endsection
@section('js_after')
    <!-- END Hero -->
    <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?v=20250302")}}"></script>
    <script src="{{asset("js/jquery.animate-shadow.js")}}"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key={{config("app.GCP_MAPS_API_KEY")}}&callback=initMap&v=weekly"
      async
    ></script>
    <script>
        let cliente2 = '{{$cliente}}';
        let ids = ['mapLocales'];
        var markers = {};
        markers['sellout'] = {};
        markers['stock'] = {};
        var circles = {};
        circles['sellout'] = {};
        circles['stock'] = {};
        var dataSellout, dataStock;
        let isSellout = true;

        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
        /*******CARGA PAGINA*************/
        $(document).ready(() => {
            filtrosPromise.then(function(resp){
                ponerFiltrosAv(resp);
            });
            $('#f_mapLocales_select').on('change',function(){
                let select = document.getElementById("f_sellout"); //Seleccionamos el select
                if($('#f_mapLocales_select').val() == '50'){
                    let aux =JSON.parse('@php echo $sellout2 @endphp');
                    $('#f_sellout').children().remove();
                    for (item in aux) {
                        let option = document.createElement("option"); //Creamos la opcion
                        option.innerHTML = aux[item]; //Metemos el texto en la opción
                        option.value = item;
                        select.appendChild(option); //Metemos la opción en el select
                    }
                }else{
                    let aux =JSON.parse('@php echo $sellout @endphp');
                    $('#f_sellout').children().remove();
                    for (item in aux) {
                        //console.log(item);
                        let option = document.createElement("option"); //Creamos la opcion
                        option.innerHTML = aux[item]; //Metemos el texto en la opción
                        option.value = item;
                        select.appendChild(option); //Metemos la opción en el select
                    }
                }
                //console.log( $('#f_mapLocales_select').val());
            });

        });
    
        $('#f_ctg').on('select2:select',function (e) {
            if(e.params.data['id'] == 50){
                $('#orden_sellout2').hide();
                if($('#orden_stock2').hasClass('d-none')){
                    $('#orden_stock2').removeClass('d-none');
                }else{
                    $('#orden_stock2').show();
                }
                mostrarMarcador(false);
            }else{
                $('#orden_sellout2').show();
                $('#orden_stock2').hide();
                mostrarMarcador(true);
            }
            if(e.params.data['id'] == "2" && dataSellout){
                reOrden(dataSellout, true);
            }else if(e.params.data['id'] == "50" && dataStock){
                reOrden(dataStock, false);
            }else{
                //getMapAlertas(cliente);
            }
        });

       
        function openModal(modal){
            $("#"+modal).modal("show");
        }

        /*FIN BOTON SEGUNDO SLECT*/

    </script>
    <script src="{{ asset('js\jszip.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>
@endsection