@extends('layouts.grafico2')
    <!-- 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['ipec']))
            <x-grafico id="ipec" style="{{$display_grafico}}" :favoritosDisabled="$true"></x-grafico>
            <x-grafico id="imce" style="{{$display_grafico}}" :favoritosDisabled="$true"></x-grafico>
        @endif
    @endsection
@endif

@section('js_aft')
    <script>
        $(document).ready(function(){
            GraficoIpec(1);

            function GraficoIpec(sig){
                if(sig == 2 || sig == 1){
                    //cargandoDatos2(0,"chart_ipec");
                    $("#chart_ipec").html('<div class="loading-spinner"></div>');
                }
                var schema = [
                {
                            "name": "Fecha",
                            "type": "date",
                            "format": "%b/%Y"
                },
                {
                        "name": "Situaci\u00F3n econ\u00F3mica personal actual",
                        "type": "number"
                },
                {
                        "name": "Situaci\u00F3n econ\u00F3mica del pa\u00EDs actual",
                        "type": "number"
                },
                {
                        "name": "Situaci\u00F3n econ\u00F3mica del pa\u00EDs a 12 meses",
                        "type": "number"
                },
                {
                        "name": "Situaci\u00F3n econ\u00F3mica del pa\u00EDs a 5 a\u00F1os",
                        "type": "number"
                },
                {
                        "name": "Expectativa de consumo de articulos para el hogar",
                        "type": "number"
                },
                {
                        "name": "IPEC",
                        "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: "\u00CDndice de percepci\u00F3n de la econom\u00EDa (IPEC)"
                    },
                    yaxis: [

                        {
                        plot: [
                            {
                            value: "Situaci\u00F3n econ\u00F3mica personal actual",
                            type: "line"
                            },
                            {
                            value: "Situaci\u00F3n econ\u00F3mica del pa\u00EDs actual",
                            type: "line"
                            },
                            {
                            value: "Situaci\u00F3n econ\u00F3mica del pa\u00EDs a 12 meses",
                            type: "line"
                            },
                            {
                            value: "Situaci\u00F3n econ\u00F3mica del pa\u00EDs a 5 a\u00F1os",
                            type: "line"
                            },
                            {
                            value: "Expectativa de consumo de articulos para el hogar",
                            type: "line"
                            },
                            {
                            value: "IPEC",
                            type: "line"
                            }
                        ],
                        title:"",
                        "format": {
                            defaultFormat: 0
                            //formatNumberScale:0
                        }
                        }
                    ],
                    "xaxis":{
                        initialinterval:{
                        from: "Jan/2023",
                        to: "Dec/2025"
                        }
                    },
                    legend: {
                        enabled: "1",
                        item: [
                        {
                            value: "Situaci\u00F3n econ\u00F3mica personal actual",
                            type: "line",
                            initiallyhidden: 1
                        },
                        {
                            value: "Situaci\u00F3n econ\u00F3mica del pa\u00EDs actual",
                            type: "line",
                            initiallyhidden: 1
                        },
                        {
                            value: "Situaci\u00F3n econ\u00F3mica del pa\u00EDs a 12 meses",
                            type: "line"
                        },
                        {
                            value: "Situaci\u00F3n econ\u00F3mica del pa\u00EDs a 5 a\u00F1os",
                            type: "line",
                            initiallyhidden: 1
                        },
                        {
                            value: "Expectativa de consumo de articulos para el hogar",
                            type: "line",
                            initiallyhidden: 1
                        },
                        {
                            value: "IPEC",
                            type: "line"
                        }
                        ]
                    }
                    };
                    //console.log(dataBal);
                    dataSource.data = dataStore.createDataTable(dataIPEC,schema);
                    new FusionCharts({
                    type: "timeseries",
                    renderAt: "ipec",
                    width: "100%",
                    height: "50%",
                    dataSource: dataSource
                    }).render();
                //cargandoDatos2(1,"chart_ipec");
                if(sig == 1){
                    GraficoImce(1);
                }
            }

            function GraficoImce(sig){
                if(sig == 2 || sig == 1){
                    //cargandoDatos2(0,"chart_imce");
                    $("#chart_imce").html('<div class="loading-spinner"></div>');
                }
                var schema = [
                {
                            "name": "Fecha",
                            "type": "date",
                            "format": "%b/%Y"
                },
                {
                        "name": "Comercio",
                        "type": "number"
                },
                {
                        "name": "Construcci\u00F3n",
                        "type": "number"
                },
                {
                        "name": "Industria",
                        "type": "number"
                },
                {
                        "name": "Miner\u00EDa",
                        "type": "number"
                },
                {
                        "name": "IMCE Total",
                        "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: "\u00CDndice de confianza empresarial (IMCE)"
                    },
                    yaxis: [

                        {
                        plot: [
                            {
                                value: "Comercio",
                                type: "line"
                            },
                            {
                                value: "Construcci\u00F3n",
                                type: "line"
                            },
                            {
                                value: "Industria",
                                type: "line"
                            },
                            {
                                value: "Miner\u00EDa",
                                type: "line"
                            },
                            {
                                value: "IMCE Total",
                                type: "line"
                            }
                        ],
                        title:"",
                        "format": {
                            defaultFormat: 0
                            //formatNumberScale:0
                        }
                        }
                    ],
                    "xaxis":{
                        initialinterval:{
                        from: "Jan/2023",
                        to: "Dec/2025"
                        }
                    },
                    legend: {
                        enabled: "1",
                        item: [
                        {
                                value: "Comercio",
                                type: "line"
                        },
                        {
                                value: "Construcci\u00F3n",
                                type: "line",
                                initiallyhidden:1
                        },
                        {
                                value: "Industria",
                                type: "line",
                                initiallyhidden:1
                        },
                        {
                                value: "Miner\u00EDa",
                                type: "line",
                                initiallyhidden:1
                        },
                        {
                                value: "IMCE Total",
                                type: "line"
                        }
                        ]
                    }
                    };
                    //console.log(dataBal);
                    dataSource.data = dataStore.createDataTable(dataIMCE,schema);
                    new FusionCharts({
                    type: "timeseries",
                    renderAt: "imce",
                    width: "100%",
                    height: "50%",
                    dataSource: dataSource
                    }).render();
                //cargandoDatos2(1,"chart_imce");
                if(sig == 1){
                    //GraficoImacec(1);
                }
            }
        });
    </script>

    <script src="{{asset('js\vendor\dataTables.natural.js')}}"></script>
    <script src="{{asset('js\economics\dataIPEC.js')}}"></script>
    <script src="{{asset('js\economics\dataIMCE.js')}}"></script>
@endsection