@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>
    .select2-container .select2-selection--multiple {
        min-height: 38px;
        max-height: 120px;
        overflow-y: auto;
    }

    .select2-container--open .select2-dropdown {
        max-height: 400px;
        overflow-y: auto;
    }

    .select2 {
        width: 100% !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #007bff;
        border: 1px solid #006fe6;
        color: white;
        margin: 2px;
    }

    .page-wrapper {
        height: 100vh;
        overflow-y: auto;
        background-color: #f1f1f1;
        padding: 1rem;
        padding: 1rem 1rem 50px 1rem;
    }

    #chart-container, #chart-container2, #chart-container3 {
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 1rem;
        min-height: 250px;
        width: 100%;
    }

    .indicators-container {
        padding-left: 15px;
        display: flex;
        align-items: center;
    }

    .chart-row {
        display: flex;
        flex-direction: row;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .chart-box {
        flex: 0 0 70%;
        max-width: 70%;
    }

    .indicators-box {
        flex: 0 0 30%;
        max-width: 30%;
        padding-left: 15px;
        display: flex;
        align-items: center;
    }

    .obj_filtro{
        height: auto !important;
    }

    .bg-white{
        background-color: #FFF;
    }

    @media (max-width: 768px) {
        .chart-box,
        .indicators-box {
            flex: 0 0 100%;
            max-width: 100%;
            padding-left: 0;
            margin-top: 1rem;
        }

        .chart-row {
            flex-direction: column;
        }

        .sidebar-productos {
            width: 100% !important;
            min-width: unset !important;
            margin-bottom: 1rem;
        }

        .main-layout {
            flex-direction: column !important;
        }
    }
</style>
@endsection

@section('content')
<div class="page-wrapper">

    {{-- Filtros superiores --}}
    <div class="d-flex flex-wrap gap-3 mb-3 align-items-end">
        <x-selector-generico id="select_clientes" idselect="selected_clientes"
            :salida="$data_clientes" class="selector-generico" style="width: 150px;">
            <x-slot name="texto">Cliente</x-slot>
        </x-selector-generico>

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

        <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();"/>

        <x-infobox tamano="25px" texto="" modal="visor_ventas_stock_modal"/>
        <div class="modal fade bd-example-modal-lg" id="visor_ventas_stock_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 border-bottom pb-3">
                        <h5 class="modal-title fw-bold" id="visor_ventas_stock_modal_title">
                            <i class="fa fa-chart-line me-2 text-primary"></i> Visor Ventas · Stock
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                    </div>

                    <div class="modal-body px-4 py-3">

                        {{-- Descripción general --}}
                        <p class="text-muted mb-4">
                            Este visor permite analizar la evolución de ventas y stock por producto, 
                            filtrando por cliente, marca y semana. Los gráficos y widgets se actualizan 
                            al presionar <strong>Actualizar</strong>.
                        </p>

                        {{-- Sección: Filtros --}}
                        <div class="mb-4">
                            <h6 class="fw-bold text-uppercase text-secondary mb-3" style="font-size: 0.75rem; letter-spacing: 0.08em;">
                                <i class="fa fa-sliders-h me-1"></i> Filtros
                            </h6>
                            <div class="d-flex flex-column gap-2">
                                <div class="d-flex align-items-start gap-2">
                                    <span class="badge bg-primary mt-1" style="min-width: 110px;">Cliente</span>
                                    <span class="text-muted small">Filtra por holding. Afecta todos los indicadores y gráficos.</span>
                                </div>
                                <div class="d-flex align-items-start gap-2">
                                    <span class="badge bg-primary mt-1" style="min-width: 110px;">Marca</span>
                                    <span class="text-muted small">Filtra por marca dentro del cliente seleccionado.</span>
                                </div>
                                <div class="d-flex align-items-start gap-2">
                                    <span class="badge bg-primary mt-1" style="min-width: 110px;">Semana</span>
                                    <span class="text-muted small">Por defecto muestra la última semana cerrada. Afecta los widgets de Ventas y DOH.</span>
                                </div>
                                <div class="d-flex align-items-start gap-2">
                                    <span class="badge bg-primary mt-1" style="min-width: 110px;">Producto</span>
                                    <span class="text-muted small">Buscador de productos según el cliente y marca seleccionados. Permite selección múltiple.</span>
                                </div>
                            </div>
                        </div>

                        <hr class="my-3">

                        {{-- Sección: Indicadores --}}
                        <div class="mb-4">
                            <h6 class="fw-bold text-uppercase text-secondary mb-3" style="font-size: 0.75rem; letter-spacing: 0.08em;">
                                <i class="fa fa-tachometer-alt me-1"></i> Indicadores
                            </h6>
                            <div class="d-flex flex-column gap-2">
                                <div class="d-flex align-items-start gap-2">
                                    <span class="badge bg-success mt-1" style="min-width: 170px;">Ventas Semana</span>
                                    <span class="text-muted small">Unidades vendidas durante la semana seleccionada, para el cliente, marca y productos activos.</span>
                                </div>
                                <div class="d-flex align-items-start gap-2">
                                    <span class="badge bg-success mt-1" style="min-width: 170px;">DOH Sem</span>
                                    <span class="text-muted small">Days on Hand: <em>Valorado del último Inventario × 28 / Ventas últimos 28 días</em>. Indica cuántos días de cobertura hay con el stock actual.</span>
                                </div>
                                <div class="d-flex align-items-start gap-2">
                                    <span class="badge bg-success mt-1" style="min-width: 170px;">Stock</span>
                                    <span class="text-muted small">Stock total consolidado del último inventario para los filtros aplicados.</span>
                                </div>
                                <div class="d-flex align-items-start gap-2">
                                    <span class="badge bg-success mt-1" style="min-width: 170px;">Stock Promedio Sala</span>
                                    <span class="text-muted small">Promedio de unidades por sala según el último inventario disponible.</span>
                                </div>
                                <div class="d-flex align-items-start gap-2">
                                    <span class="badge bg-warning text-dark mt-1" style="min-width: 170px;">Salas ≤ 3 u</span>
                                    <span class="text-muted small">Cantidad de salas con 3 unidades o menos en stock. Indicador de riesgo de quiebre.</span>
                                </div>
                                <div class="d-flex align-items-start gap-2">
                                    <span class="badge bg-warning text-dark mt-1" style="min-width: 170px;">Salas ≤ 4 u</span>
                                    <span class="text-muted small">Cantidad de salas con 4 unidades o menos en stock.</span>
                                </div>
                            </div>
                        </div>

                        <hr class="my-3">

                        {{-- Sección: Gráficos --}}
                        <div>
                            <h6 class="fw-bold text-uppercase text-secondary mb-3" style="font-size: 0.75rem; letter-spacing: 0.08em;">
                                <i class="fa fa-chart-area me-1"></i> Gráficos
                            </h6>
                            <p class="text-muted small mb-0">
                                Los tres gráficos muestran la evolución semanal del año en curso para los filtros aplicados: 
                                <strong>Ventas</strong>, <strong>Stock</strong> y <strong>Salas con bajo stock</strong>.
                            </p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Layout principal: área de gráficos a ancho completo --}}
    <div class="position-relative">

        <div class="form-group mb-3" style="width: 230px;">
            <label for="product" style="color: #000;">Seleccionar Producto</label>
            <select class="form-control select2 lazyload" id="product"
                    name="product[]" multiple style="width: 100%;">
                <option value="">Seleccione un producto</option>
            </select>
        </div>

        {{-- Spinner de carga --}}
        <div class="loading d-flex justify-content-center align-items-center py-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Cargando...</span>
            </div>
        </div>

        {{-- Gráfico 1: Ventas --}}
        <div class="chart-row mainContent d-none">
            <div id="chart-container" class="chart-box"></div>
            <div class="indicators-box">
                <div class="d-flex flex-column gap-2 w-100">
                    <div class="border rounded-3 shadow-sm p-3 text-center bg-white">
                        <div class="text-secondary small text-uppercase fw-bold mb-2">
                            Ventas semana <span id="semana-seleccionada"></span>
                        </div>
                        <div class="fs-2 fw-bold text-primary" id="ventasWeek"></div>
                        <div class="text-muted small">(u)</div>
                    </div>
                    <div class="border rounded-3 shadow-sm p-3 text-center bg-white">
                        <div class="text-secondary small text-uppercase fw-bold mb-2">DOH sem</div>
                        <div class="fs-2 fw-bold text-primary" id="doh"></div>
                        <div class="text-muted small">(u)</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Gráfico 2: Stock --}}
        <div class="chart-row mainContent d-none">
            <div id="chart-container2" class="chart-box"></div>
            <div class="indicators-box">
                <div class="d-flex flex-column gap-2 w-100">
                    <div class="border rounded-3 shadow-sm p-3 text-center bg-white">
                        <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>
                    <div class="border rounded-3 shadow-sm p-3 text-center bg-white">
                        <div class="text-secondary small text-uppercase fw-bold mb-2">Stock Promedio Sala</div>
                        <div class="fs-2 fw-bold text-primary" id="stockpromedio"></div>
                        <div class="text-muted small">(u)</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Gráfico 3: Low Stock --}}
        <div class="chart-row mainContent d-none">
            <div id="chart-container3" class="chart-box"></div>
            <div class="indicators-box">
                <div class="d-flex flex-column gap-2 w-100">
                    <div class="border rounded-3 shadow-sm p-3 text-center bg-white">
                        <div class="text-secondary small text-uppercase fw-bold mb-2">Salas &lt;= 3 (u)</div>
                        <div class="fs-2 fw-bold text-primary" id="lowstock"></div>
                        <div class="text-muted small">Locales</div>
                    </div>
                    <div class="border rounded-3 shadow-sm p-3 text-center bg-white">
                        <div class="text-secondary small text-uppercase fw-bold mb-2">Salas &lt;= 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>

@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">
    const year = new Date().getFullYear();

    $(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');

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

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

        // Actualizar el texto de la semana seleccionada
        actualizarTextoSemana();

        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);
    }

    // Función para actualizar el texto de la semana seleccionada
    function actualizarTextoSemana() {
        const semanaSeleccionada = document.getElementById('f_sem_graf_ini').value;
        // Extraer solo la parte de la semana (WW) del formato YYYYWW
        const numeroSemana = semanaSeleccionada.substring(4);
        
        document.getElementById('semana-seleccionada').textContent = numeroSemana;
        // document.getElementById('semana-actual').textContent = numeroSemana;
    }

    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 "+year,
                        "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 "+year,
                        "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>