@extends('layouts.backend')

@php

    $marcas = [];
    foreach($marca as $val){
        if($val->valor != ''){
            $marcas[$val->valor] = $val->valor;
        }
    }
    $marcas = json_encode($marcas);  

    $data_clientes = [];
    foreach($clientes as $val){
        if($val->valor != ''){
            $data_clientes[$val->valor] = $val->valor;
        }
    }
    $data_clientes = json_encode($data_clientes);

    $yearAct = date("Y");
    $yearAnt = date("Y") - 1;

    $semanasComp = [];
    foreach ($semanas as $value) {
        $_year = substr($value->periodo, 0, 4);
        if($_year >= $yearAnt) {
            $semanasComp []= $value;
        }
    }

@endphp
@section('css_after')
<style>
    /* Estilos para el contenedor de opciones seleccionadas */
    .select2-container .select2-selection--multiple {
        min-height: 100px;
        max-height: 500px;
        overflow-y: auto;
    }

    /* Ajustar el dropdown para que sea más alto */
    .select2-container--open .select2-dropdown {
        max-height: 400px;
        overflow-y: auto;
    }

    /* Asegurar que el contenedor de select2 tome el ancho completo del padre */
    .select2 {
        width: 100% !important;
    }

    /* Estilo para las opciones seleccionadas */
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #007bff;
        border: 1px solid #006fe6;
        color: white;
        margin: 2px;
        padding: 2px 6px;
    }

    #chart-container, #chart-container2, #chart-container3 {
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 1rem;
    }

    /* Estilos para los contenedores de indicadores */
    .indicators {
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 1rem;
    }

    /* Si necesitas hacer los gráficos responsive */
    #chart-container svg, #chart-container2 svg, #chart-container3 svg,
    #chart-container canvas, #chart-container2 canvas, #chart-container3 canvas {
        width: 100%;
        height: 100%;
    }
    .content-box {
        max-width: 1920px !important;
        margin-left: auto;
        margin-right: auto;
    }

    </style>
@endsection

@section('content')
<div class="container-fluid full-height">
    <div class="row no-gutters full-height">


        <div class="content-box text-white p-3" style="background-color: #f1f1f1;">
            <!-- Filtros superiores -->
            <div class="d-flex flex-row gap-3 mb-3">
                <!-- Clientes -->
                <x-selector-generico id="select_clientes" idselect="selected_clientes" 
                    :salida="$data_clientes" class="selector-generico" style="width: 150px;">
                    <x-slot name="texto">
                        Clientes
                    </x-slot>
                </x-selector-generico>

                <!-- Marcas -->
                <x-selector-generico id="select_marcas" idselect="selected_marcas" 
                    :salida="$marcas" class="selector-generico" style="width: 150px;">
                    <x-slot name="texto">
                        Marcas
                    </x-slot>
                </x-selector-generico>

                <!-- Periodo -->
                <x-selector-semanas id="sem_graf" idselect="f_sem_graf_ini" 
                    :semanas="$semanasComp" class="fltr_periodo_graftree">
                    <x-slot name="texto">
                        Semana
                    </x-slot>
                </x-selector-semanas>

                <x-boton-actualizar onclick="getGraficos();"/>
            </div>

            <!-- Contenedor flexible para productos y gráfico -->
            <div class="d-flex">
                <!-- Selector de productos (columna izquierda) -->
                <div class="form-group me-3" style="width: 250px; min-width: 250px;">
                    <label for="product">Seleccionar Producto</label>
                    <select class="form-control select2 lazyload" id="product" 
                            name="product[]" multiple 
                            style="width: 100%; max-height: 500px; overflow-y: auto;">
                        <option value="">Seleccione un producto</option>
                    </select>
                </div>

                <!-- Contenedor principal de gráficos e indicadores -->
                <div class="flex-grow-1">
                <div class="loading position-absolute top-50 start-50 translate-middle">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>

                    <div class="d-flex mb-4 mainContent d-none">
                        <div id="chart-container" style="flex: 1; min-height: 250px;"></div>
                        <div class="indicators ms-3" style="width: auto;">
                            <div class="d-flex justify-content-between gap-2">
                                <!-- Indicador Ventas -->
                                <div class="border rounded-3 shadow-sm p-3 flex-grow-1 text-center">
                                    <div class="text-secondary small text-uppercase fw-bold mb-2">
                                        Ventas en la semana
                                    </div>
                                    <div class="fs-2 fw-bold text-primary" id="ventasWeek"></div>
                                    <div class="text-muted small">(u)</div>
                                </div>
                                <!-- Indicador DOH -->
                                <div class="border rounded-3 shadow-sm p-3 flex-grow-1 text-center">
                                    <div class="text-secondary small text-uppercase fw-bold mb-2">
                                        DOH
                                    </div>
                                    <div class="fs-2 fw-bold text-primary" id="doh"></div>
                                    <div class="text-muted small">(u)</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Segundo gráfico con indicadores -->
                    <div class="d-flex mb-4 mainContent d-none">
                        <div id="chart-container2" style="flex: 1; min-height: 250px;"></div>
                        <div class="indicators ms-3" style="width: auto;">
                            <div class="d-flex justify-content-between gap-2">
                                <!-- Indicador Ventas -->
                                <div class="border rounded-3 shadow-sm p-3 flex-grow-1 text-center">
                                    <div class="text-secondary small text-uppercase fw-bold mb-2">
                                        Stock
                                    </div>
                                    <div class="fs-2 fw-bold text-primary" id="stock"></div>
                                    <div class="text-muted small">(u)</div>
                                </div>
                                <!-- Indicador DOH -->
                                <div class="border rounded-3 shadow-sm p-3 flex-grow-1 text-center">
                                    <div class="text-secondary small text-uppercase fw-bold mb-2">
                                        Stock Promedio
                                    </div>
                                    <div class="fs-2 fw-bold text-primary" id="stockpromedio"></div>
                                    <div class="text-muted small">(u)</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tercer gráfico con indicadores -->
                    <div class="d-flex mb-4 mainContent d-none">
                        <div id="chart-container3" style="flex: 1; min-height: 250px;"></div>
                        <div class="indicators ms-3" style="width: auto;">
                            <div class="d-flex justify-content-between gap-2">
                                <!-- Indicador Ventas -->
                                <div class="border rounded-3 shadow-sm p-3 flex-grow-1 text-center">
                                    <div class="text-secondary small text-uppercase fw-bold mb-2">
                                        Salas <= 3 (u)
                                    </div>
                                    <div class="fs-2 fw-bold text-primary" id="lowstock"></div>
                                    <div class="text-muted small">locales</div>
                                </div>
                                <!-- Indicador DOH -->
                                <div class="border rounded-3 shadow-sm p-3 flex-grow-1 text-center">
                                    <div class="text-secondary small text-uppercase fw-bold mb-2">
                                        Salas <= 4 (u)
                                    </div>
                                    <div class="fs-2 fw-bold text-primary" id="lowstock2"></div>
                                    <div class="text-muted small">locales</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>
        </div>
    </div>
</div>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.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 type="text/javascript">
    
    $(document).ready(function() {
        $('.lazyload').select2({
            placeholder: 'Buscar productos...',
            minimumInputLength: 3,
            multiple: true,  
            closeOnSelect: false,
            selectOnClose: false,  
            ajax: {
                url: '{{ route("products.search") }}',
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term,
                        cliente: document.getElementById('selected_clientes').value,
                        marca: document.getElementById('selected_marcas').value,
                    };
                },
                processResults: function(data) {
                    return {
                        results: data
                    };
                },
                cache: true
            }
        });

        //Selecciona la semana anterior
        var d = moment().subtract(1, 'weeks').format('YYYYWW');
        $('#f_sem_graf_ini').val(d).trigger('change');

        $('#selected_clientes').val('CENCOSUD').trigger('change');
    });
    
    

    const getGraficos = async () => {
        $('.actualizar').attr('disabled', true);
        $('.loading').removeClass('d-none');
        $('.mainContent').addClass('d-none');


        await getDoh();
        await getStock();
        await getVentasWeek();
        await getLowStock();
        await getVentasGraph();
        await getStockGraph();
        await getLowStockGraph();

        $('.loading').addClass('d-none');
        $('.mainContent').removeClass('d-none');
        $('.actualizar').attr('disabled', false);
    }

    async function getVentasGraph() {
        
        const cliente = document.getElementById('selected_clientes').value;
        const marca =  document.getElementById('selected_marcas').value;
        const productos = $('#product').val();
 
        FusionCharts.items["chart-container"] && FusionCharts.items["chart-container"].dispose();

        try{
            const response = await fetch('{{ route("visorventastock.ventasgraph") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({cliente, marca, productos}),
            });

            const datos = await response.json();

            datos.forEach((item) => {
                item.label = item.label.toString().substring(4);
            });
           

            const chart = new FusionCharts({
                type: 'line',
                renderAt: 'chart-container',
                width: '100%',
                height: '200',
                dataFormat: 'json',
                dataSource: {
                    "chart": {
                        "theme": "fusion",
                        "caption": "Ventas por semana",
                        "xAxisName": "semana",
                        "yAxisName": "Suma de ventas (u)",
                        "lineThickness": "2",
                        "drawAnchors": "0",
                        "plotToolText": "Sem $label: $dataValue (u)"
                    },
                    "data": datos
                }

            });

            chart.render();

        } catch (error) {
            console.error(error);
        }

    }

    async function getStockGraph(){
        const cliente = document.getElementById('selected_clientes').value;
        const marca =  document.getElementById('selected_marcas').value;
        const productos = $('#product').val();

        FusionCharts.items["chart-container2"] && FusionCharts.items["chart-container2"].dispose();

        try{
            const response = await fetch('{{ route("visorventastock.stockgraph") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({cliente, marca, productos}),
            });

            const datos = await response.json();
            datos.forEach((item) => {
                item.label = item.label.toString().substring(4);
            });

            const chart = new FusionCharts({
                type: 'line',
                renderAt: 'chart-container2',
                width: '100%',
                height: '200',
                dataFormat: 'json',
                dataSource: {
                    "chart": {
                        "theme": "fusion",
                        "caption": "Stock por semana",
                        "xAxisName": "semana",
                        "yAxisName": "Suma de stock",
                        "lineThickness": "2",
                        "drawAnchors": "0",
                        "plotToolText": "Sem $label: $dataValue (u)"
                    },
                    "data": datos
                }

            });

            chart.render();

        } catch (error) {
            console.error(error);
        }
    }

    async function getVentasWeek(){
        const cliente = document.getElementById('selected_clientes').value;
        const marca =  document.getElementById('selected_marcas').value;
        const semana = document.getElementById('f_sem_graf_ini').value;
        const productos = $('#product').val();

        try{
            const response = await fetch('{{ route("visorventastock.ventasweek") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({cliente, marca, semana, productos}),
            });

            const datos = await response.json();
            document.getElementById('ventasWeek').innerHTML = datos[0].ventas;

        } catch (error) {
            console.error(error);
        }
    }

    async function getDoh(){
        const cliente = document.getElementById('selected_clientes').value;
        const marca =  document.getElementById('selected_marcas').value;
        const productos = $('#product').val();

        try{
            const response = await fetch('{{ route("visorventastock.doh") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({cliente, marca, productos}),
            });

            const datos = await response.json();
            document.getElementById('doh').innerHTML = datos;

        } catch (error) {
            console.error(error);
        }
    }

    async function getStock(){
        const cliente = document.getElementById('selected_clientes').value;
        const marca =  document.getElementById('selected_marcas').value;
        const productos = $('#product').val();

        try{
            const response = await fetch('{{ route("visorventastock.stock") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({cliente, marca, productos}),
            });

            const datos = await response.json();
            document.getElementById('stock').innerHTML = datos.stock;
            document.getElementById('stockpromedio').innerHTML = datos.promedio;

        } catch (error) {
            console.error(error);
        }
    }

    async function getLowStockGraph(){
        const cliente = document.getElementById('selected_clientes').value;
        const marca =  document.getElementById('selected_marcas').value;
        const productos = $('#product').val();

        FusionCharts.items["chart-container3"] && FusionCharts.items["chart-container3"].dispose();

        try{
            const response = await fetch('{{ route("visorventastock.lowstockgraph") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({cliente, marca, productos}),
            });

            const datos = await response.json();
     
            const chart = new FusionCharts({
                type: 'msline',
                renderAt: 'chart-container3',
                width: '100%',
                height: '250',
                dataFormat: 'json',
                dataSource: datos
            });

            chart.render();

        } catch (error) {
            console.error(error);
        }
    }

    async function getLowStock(){
        const cliente = document.getElementById('selected_clientes').value;
        const marca =  document.getElementById('selected_marcas').value;
        const productos = $('#product').val();

        try{
            const response = await fetch('{{ route("visorventastock.lowstock") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({cliente, marca, productos}),
            });

            const datos = await response.json();
            document.getElementById('lowstock').innerHTML = datos.lowStock;
            document.getElementById('lowstock2').innerHTML = datos.lowStock2;

        } catch (error) {
            console.error(error);
        }
    }

</script>