@extends('layouts.reporte')
    <!-- END Hero -->
@section('php')
    @php
        $cliente = config('app.CLIENTE');
        $display_grafico = '';
        $true = true;
    @endphp
@endsection

@if(count($selectores_grafico)>0)
    @section('grafico')
        
        
        @if(isset($selectores_grafico['valoruf']))
            <x-grafico id="valoruf" style="{{$display_grafico}}" :favoritosDisabled="$true"></x-grafico>
            @php $display_grafico = 'display: none;'; @endphp
        @endif

        @if(isset($selectores_grafico['valipc']))
            <x-grafico id="valipc" style="{{$display_grafico}}" :favoritosDisabled="$true"></x-grafico>
            @php $display_grafico = 'display: none;'; @endphp
        @endif

        @if(isset($selectores_grafico['ipcdiv']))
            <x-grafico id="ipcdiv" style="{{$display_grafico}}" :favoritosDisabled="$true"></x-grafico>
            @php $display_grafico = 'display: none;'; @endphp
        @endif

        @if(isset($selectores_grafico['intcolo']))
            <x-grafico id="intcolo" style="{{$display_grafico}}" :favoritosDisabled="$true"></x-grafico>
            @php $display_grafico = 'display: none;'; @endphp
        @endif
        
    @endsection
@endif

@if(count($selectores_tabla)>0)
    @section('tabla')
    @endsection
@endif

@section('js_aft')
    <script>
        $(document).ready(function(){
            GraficoUF(1);
            
            function GraficoUF(sig){
                var dataStore = new FusionCharts.DataStore();
                var datos;
                schema = [{
                        "name": "Tiempo",
                        "type": "date",
                        "format": "%Y/%-m/%-d"
                    }, {
                        "name": "UF",
                        "type": "number"
                    }]
                $.ajax({
                    type: "POST",
                    url: "/macro_uf_data",
                    dataType: "json",
                    crossDomain: false,
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data2){
                    //var datos = JSON.parse(data2);
                    var datos = dataUF.concat(data2);
                        new FusionCharts({
                        type: 'timeseries',
                        renderAt: 'valoruf',
                        width: "100%",
                        height: "80%",
                        dataSource: {
                            "extensions": {
                            "customRangeSelector": {
                            style: {
                                        "title-text": {
                                        fill: "#808080"
                                        },
                                        "title-icon": {
                                        fill: "#808080"
                                        },
                                        "title-text:hover": {
                                        background: "#000000",
                                        fill: "#434456"
                                        },
                                        "title-icon:hover": {
                                        fill: "#434456"
                                        },
                                        "button-apply": {
                                        "background-color": "#E7E7E7",
                                        "border-color": "#000000",
                                        "font-size": "8",
                                        width: "50",
                                        height: "18"
                                        },
                                        "button-cancel": {
                                        "background-color": "#EBEBEB",
                                        "border-color": "#000000",
                                        "font-size": "8",
                                        width: "50",
                                        height: "18"
                                        },
                                        container: {
                                        "background-color": "#E6E6E6"
                                        },
                                        "cal-header": {
                                        "background-color": "#ECECEC",
                                        color: "#434456"
                                        },
                                        "cal-body": {
                                        color: "#000000",
                                        "background-color": "#000000"
                                        },
                                        "cal-body:hover": {
                                        color: "#000000"
                                        },
                                        "cal-days:hover": {
                                        fill: "#FF0000"
                                        },
                                        "cal-activedate:hover": {
                                        "background-color": "#2874A6",
                                        fill: "#FFFFFF"
                                        },
                                        "cal-activedate": {
                                        "background-color": "#E6E4E4"
                                        },
                                        "cal-selecteddate": {
                                        "background-color": "#2874A6"
                                        }
                                    }
                            }
                            },
                                "chart": {
                                paletteColors: "0066cc,ff0000,99cc00,0099cc,ff9900,009933,0066ff,ff9999,00cc99,99ccff,ffcc99,66ff33,33cccc,cc0000,006600,0066cc,ffcc99,66ff66,0000cc,990000",
                                "animation": "0",
                                "multicanvas": 0,
                                BaseFont: "sans-serif",
                                baseFontSize: "11",
                                legendItemFont: "sans-serif",
                                legendItemFontColor: "#a9a9a9",
                                },
                                "caption": {
                                "text": "Valor del UF"
                                },
                                "yAxis": [{
                                "plot": "UF",
                                "title": "CLP",
                                "plotType": "line",
                                "format": {
                                    "suffix": "CLP",
                                    "label": "Valor del UF",
                                    defaultFormat: 0
                                }
                                }],
                                "xaxis":{
                                initialinterval:{
                                    from: "2025/01/01",
                                    to: "2025/12/01"
                                }
                                },
                                data: dataStore.createDataTable(datos, schema)
                            }
                        }).render();
                        //cargandoDatos2(1,"chart_uf");
                        if(sig == 1){
                        GraficoIPC(1);
                        }
                        },beforeSend:function(){
                            if(sig == 2 || sig == 1){
                                //cargandoDatos2(0,"chart_uf");
                                $("#valoruf").html('<div class="loading-spinner"></div>');
                            }
                        }
                });

            }

            function GraficoIPC(sig){
                if(sig == 2 || sig == 1){
                    //cargandoDatos2(0,"chart_ipc");
                    $("#chart_valipc").html('<div class="loading-spinner"></div>');
                }
                var dataStore = new FusionCharts.DataStore();
                var schema = [{
                        "name": "Indicador",
                        "type": "string"
                    },{
                            "name": "Fecha",
                            "type": "date",
                            "format": "%b/%Y"
                        },
                        {
                        "name": "Porcentaje",
                        "type": "number"
                    }
                ]
                new FusionCharts({
                    type: 'timeseries',
                    renderAt: 'valipc',
                    width: "100%",
                    height: "80%",
                    dataSource: {
                    "extensions": {
                    "customRangeSelector": {
                        style: {
                                "title-text": {
                                    fill: "#808080"
                                },
                                "title-icon": {
                                    fill: "#808080"
                                },
                                "title-text:hover": {
                                    background: "#000000",
                                    fill: "#434456"
                                },
                                "title-icon:hover": {
                                    fill: "#434456"
                                },
                                "button-apply": {
                                    "background-color": "#E7E7E7",
                                    "border-color": "#000000",
                                    "font-size": "8",
                                    width: "50",
                                    height: "18"
                                },
                                "button-cancel": {
                                    "background-color": "#EBEBEB",
                                    "border-color": "#000000",
                                    "font-size": "8",
                                    width: "50",
                                    height: "18"
                                },
                                container: {
                                    "background-color": "#E6E6E6"
                                },
                                "cal-header": {
                                    "background-color": "#ECECEC",
                                    color: "#434456"
                                },
                                "cal-body": {
                                    color: "#000000",
                                    "background-color": "#000000"
                                },
                                "cal-body:hover": {
                                    color: "#000000"
                                },
                                "cal-days:hover": {
                                    fill: "#FF0000"
                                },
                                "cal-activedate:hover": {
                                    "background-color": "#2874A6",
                                    fill: "#FFFFFF"
                                },
                                "cal-activedate": {
                                    "background-color": "#E6E4E4"
                                },
                                "cal-selecteddate": {
                                    "background-color": "#2874A6"
                                }
                                }
                        }
                    },
                        "chart": {
                            paletteColors: "0066cc,ff0000,99cc00,0099cc,ff9900,009933,0066ff,ff9999,00cc99,99ccff,ffcc99,66ff33,33cccc,cc0000,006600,0066cc,ffcc99,66ff66,0000cc,990000",
                            "animation": "0",
                            "multicanvas": 0,
                            BaseFont: "sans-serif",
                            baseFontSize: "11",
                            legendItemFont: "sans-serif",
                            legendItemFontColor: "#a9a9a9",
                            exportEnabled: "1",
                            exportMode: "auto",
                            exportFormats:"SVG=Exportar en SVG (recomendado)|PNG=Exportar a PNG|JPG=Exportar en JPG|PDF=Exportar a PDF|CSV=Exportar en CSV|XLSX=Exportar a XLSX",
                            exportFileName: "IPC 14-03-25"
                        },
                        "caption": {
                            "text": "\u00cdndice de precios al consumidor"
                        },
                        "subcaption": {
                            "text": "(variaci\u00f3n anual porcentaje)"
                        },
                        "yAxis": [{
                            plot: [{
                            value: "Porcentaje",
                            connectNullData: true,
                            type: 'line'
                            }],
                            title: "Porcentaje"
                        }],
                        "xaxis":{
                            initialinterval:{
                            from: "Jan/2024",
                            to: "Dec/2025"
                            }
                        },
                        data: dataStore.createDataTable(dataIPC, schema),
                        "series":"Indicador"
                        }
                }).render();
                //cargandoDatos2(1,"chart_ipc");
                if(sig == 1){
                    GraficoIPCdiv(1);
                }
            }

            function GraficoIPCdiv(sig){
                if(sig == 2 || sig == 1){
                    //cargandoDatos2(0,"chart_ipcdiv");
                    $("#chart_ipcdiv").html('<div class="loading-spinner"></div>');
                }
                var dataStore = new FusionCharts.DataStore();
                var schema = [
                    {
                        "name": "Fecha",
                        "type": "date",
                        "format": "%b/%Y"
                    },
                    {
                        "name": "ALIMENTOS Y BEBIDAS NO ALCOH\u00D3LICAS",
                        "type": "number"
                    },
                    {
                        "name": "BEBIDAS ALCOH\u00D3LICAS Y TABACO",
                        "type": "number"
                    },
                    {
                        "name": "VESTUARIO Y CALZADO",
                        "type": "number"
                    },
                    {
                        "name": "VIVIENDA Y SERVICIOS B\u00C1SICOS",
                        "type": "number"
                    },
                    {
                        "name": "EQUIPAMIENTO Y MANTENCI\u00D3N DEL HOGAR",
                        "type": "number"
                    }
                ]
                new FusionCharts({
                    type: 'timeseries',
                    renderAt: 'ipcdiv',
                    width: "100%",
                    height: "80%",
                    dataSource: {
                    "extensions": {
                    "customRangeSelector": {
                        style: {
                                "title-text": {
                                    fill: "#808080"
                                },
                                "title-icon": {
                                    fill: "#808080"
                                },
                                "title-text:hover": {
                                    background: "#000000",
                                    fill: "#434456"
                                },
                                "title-icon:hover": {
                                    fill: "#434456"
                                },
                                "button-apply": {
                                    "background-color": "#E7E7E7",
                                    "border-color": "#000000",
                                    "font-size": "8",
                                    width: "50",
                                    height: "18"
                                },
                                "button-cancel": {
                                    "background-color": "#EBEBEB",
                                    "border-color": "#000000",
                                    "font-size": "8",
                                    width: "50",
                                    height: "18"
                                },
                                container: {
                                    "background-color": "#E6E6E6"
                                },
                                "cal-header": {
                                    "background-color": "#ECECEC",
                                    color: "#434456"
                                },
                                "cal-body": {
                                    color: "#000000",
                                    "background-color": "#000000"
                                },
                                "cal-body:hover": {
                                    color: "#000000"
                                },
                                "cal-days:hover": {
                                    fill: "#FF0000"
                                },
                                "cal-activedate:hover": {
                                    "background-color": "#2874A6",
                                    fill: "#FFFFFF"
                                },
                                "cal-activedate": {
                                    "background-color": "#E6E4E4"
                                },
                                "cal-selecteddate": {
                                    "background-color": "#2874A6"
                                }
                                }
                        }
                    },
                        "chart": {
                            paletteColors: "0066cc,ff0000,99cc00,0099cc,ff9900,009933,0066ff,ff9999,00cc99,99ccff,ffcc99,66ff33,33cccc,cc0000,006600,0066cc,ffcc99,66ff66,0000cc,990000",
                            "animation": "0",
                            "multicanvas": 0,
                            BaseFont: "sans-serif",
                            baseFontSize: "11",
                            legendItemFont: "sans-serif",
                            legendItemFontColor: "#a9a9a9",
                            exportEnabled: "1",
                            exportMode: "auto",
                            exportFormats:"SVG=Exportar en SVG (recomendado)|PNG=Exportar a PNG|JPG=Exportar en JPG|PDF=Exportar a PDF|CSV=Exportar en CSV|XLSX=Exportar a XLSX",
                            exportFileName: "IPCporDivision 14-03-25"
                        },
                        "caption": {
                            "text": "\u00cdndice de precios al consumidor por Divisi\u00f3n"
                        },
                        "subcaption": {
                            "text": "(\u00cdndices de divisiones, base promedio 2023=100)"
                        },
                        "yAxis": [{
                            plot: [
                            {
                            value: "ALIMENTOS Y BEBIDAS NO ALCOH\u00D3LICAS",
                            connectNullData: true,
                            type: 'line'
                            },
                            {
                            value: "BEBIDAS ALCOH\u00D3LICAS Y TABACO",
                            connectNullData: true,
                            type: 'line'
                            },
                            {
                            value: "VESTUARIO Y CALZADO",
                            connectNullData: true,
                            type: 'line'
                            },{
                            value: "VIVIENDA Y SERVICIOS B\u00C1SICOS",
                            connectNullData: true,
                            type: 'line'
                            },
                            {
                            value: "EQUIPAMIENTO Y MANTENCI\u00D3N DEL HOGAR",
                            connectNullData: true,
                            type: 'line'
                            }
                        ],
                            title: ""
                        }],
                        "xaxis":{
                            initialinterval:{
                            from: "Jan/2024",
                            to: "Dec/2025"
                            }
                        },
                        data: dataStore.createDataTable(dataIPCdivision, schema)
                        }
                }).render();
                //cargandoDatos2(1,"chart_ipcdiv");
                if(sig == 1){
                    GraficoTasaInt(1);
                }
            }

            function GraficoTasaInt(sig){
                if(sig == 2 || sig == 1){
                    //cargandoDatos2(0,"chart_tasaint");
                    $("#chart_tasaint").html('<div class="loading-spinner"></div>');
                }
                var schema = [
                {
                            "name": "Fecha",
                            "type": "date",
                            "format": "%b/%Y"
                },
                {
                        "name": "Vivienda",
                        "type": "number"
                },
                {
                        "name": "Comerciales",
                        "type": "number"
                },
                {
                        "name": "Comercio Exterior",
                        "type": "number"
                },
                {
                        "name": "Consumo",
                        "type": "number"
                }
                ]
                const dataStore = new FusionCharts.DataStore();
                const dataSource = {
                    "extensions": {
                            "customRangeSelector": {
                            style: {
                                    "title-text": {
                                        fill: "#808080"
                                    },
                                    "title-icon": {
                                        fill: "#808080"
                                    },
                                    "title-text:hover": {
                                        background: "#000000",
                                        fill: "#434456"
                                    },
                                    "title-icon:hover": {
                                        fill: "#434456"
                                    },
                                    "button-apply": {
                                        "background-color": "#E7E7E7",
                                        "border-color": "#000000",
                                        "font-size": "8",
                                        width: "50",
                                        height: "18"
                                    },
                                    "button-cancel": {
                                        "background-color": "#EBEBEB",
                                        "border-color": "#000000",
                                        "font-size": "8",
                                        width: "50",
                                        height: "18"
                                    },
                                    container: {
                                        "background-color": "#E6E6E6"
                                    },
                                    "cal-header": {
                                        "background-color": "#ECECEC",
                                        color: "#434456"
                                    },
                                    "cal-body": {
                                        color: "#000000",
                                        "background-color": "#000000"
                                    },
                                    "cal-body:hover": {
                                        color: "#000000"
                                    },
                                    "cal-days:hover": {
                                        fill: "#FF0000"
                                    },
                                    "cal-activedate:hover": {
                                        "background-color": "#2874A6",
                                        fill: "#FFFFFF"
                                    },
                                    "cal-activedate": {
                                        "background-color": "#E6E4E4"
                                    },
                                    "cal-selecteddate": {
                                        "background-color": "#2874A6"
                                    }
                                    }
                            }
                            },
                    chart: {
                        paletteColors: "0066cc,ff0000,99cc00,0099cc,ff9900,009933,0066ff,ff9999,00cc99,99ccff,ffcc99,66ff33,33cccc,cc0000,006600,0066cc,ffcc99,66ff66,0000cc,990000",
                        "animation": "0",
                        "multicanvas": 0,
                        BaseFont: "sans-serif",
                        baseFontSize: "11",
                        legendItemFont: "sans-serif",
                        legendItemFontColor: "#a9a9a9",
                    },
                    caption: {
                        text: "Tasa de inter\u00E9s de colocaciones"
                    },
                    subcaption: {
                        text: "(porcentajes)"
                    },
                    yaxis: [

                        {
                        plot: [
                            {
                            value: "Vivienda",
                            type: "line"
                            },
                            {
                            value: "Comerciales",
                            type: "line"
                            },
                            {
                            value: "Comercio Exterior",
                            type: "line"
                            },
                            {
                            value: "Consumo",
                            type: "line"
                            }
                        ],
                        title:"Porcentaje",
                        "format": {
                            defaultFormat: 0
                            //formatNumberScale:0
                        }
                        }
                    ],
                    "xaxis":{
                        initialinterval:{
                        from: "Jan/2024",
                        to: "Dec/2025"
                        }
                    }
                    };
                    //console.log(dataBal);
                    dataSource.data = dataStore.createDataTable(dataTasaInt,schema);
                    new FusionCharts({
                    type: "timeseries",
                    renderAt: "intcolo",
                    width: "100%",
                    height: "80%",
                    dataSource: dataSource
                    }).render();
                cargandoDatos2(1,"intcolo");
                // if(sig == 1){
                //   GraficoIndices(1);
                // }
            }

        });
    </script>
    <script src="{{asset('js\vendor\dataTables.natural.js')}}"></script>
    <script src="{{asset('js\economics\dataUF.js')}}"></script>
    <script src="{{asset('js\economics\dataIPC.js')}}"></script>
    <script src="{{asset('js\economics\dataIPCdivision.js')}}"></script>
    <script src="{{asset('js\economics\dataTasaInt.js')}}"></script>
@endsection