@extends('layouts.grafico')
    <!-- END Hero -->
@section('php')
    @php
        $cliente = config('app.CLIENTE');
        $warning="El dólar observado corresponde a un promedio ponderado por montos transados de las operaciones spot (contado) de compra y venta entre el peso chileno y el dólar de los Estados Unidos de América, efectuadas en el Mercado Cambiario Formal (MCF) durante el día hábil bancario inmediatamente anterior.\n Fuente: Banco Central";
    @endphp
@endsection

@section('grafico')
    <x-infobox tamano="25px" style="padding:10px;" :texto="$warning"/>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div id="chart_dolar"></div>
        </div>
    </div>
@endsection

@section('js_aft')
    <script>
        function bttn_modal(id_) {
            var modal = document.getElementById(id_);
            modal.style.display = "block";
        }
        $(document).ready(function() {
            fc = 0;
            vista3_pro = 1;
            var arr_indices = new Array();

            GraficoDolarEuro(1);

            function GraficoDolarEuro(sig){
                var dataStore = new FusionCharts.DataStore();
                var datos;
                var schema = [{
                        "name": "Tiempo",
                        "type": "date",
                        "format": "%Y/%-m/%-d"
                    },{
                        "name": "Moneda",
                        "type": "string"
                    },{
                        "name": "Valor",
                        "type": "number"
                    }
                ]
                var valores = dataDolar2.concat(dataEuro);
                $.ajax({
                    type: "POST",
                    url: "/macro_dolareuro_data",
                    dataType: "json",
                    crossDomain: false,
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data2){
                        var datos = valores.concat(data2);
                        //console.log(data2[0][0]);
                        new FusionCharts({
                        type: 'timeseries',
                        renderAt: 'chart_dolar',
                        width: "100%",
                        height: "100%",
                        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 Dólar Observado - Euro"
                                },
                                "subCaption":{
                                    "text": 'Actualizado el: ' + data2[0][0]
                                },
                                series:"Moneda",
                                    "yAxis": [{
                                    plot: [{
                                        value: 'Valor',
                                        type: 'line',
                                        connectNullData: true,
                                        style: {
                                            "plot.null": {
                                                "stroke-dasharray": "none",
                                                //stroke: "#FF0000"
                                            }
                                        },
                                    }],
                                    "title": "CLP",
                                    "plotType": "line",
                                    "format": {
                                        "suffix": "CLP",
                                        defaultFormat: 0
                                    }
                                }],
                                "xAxis": {
                                    initialinterval: {
                                        from: '{{date("Y\/m\/d",strtotime("-90 days"))}}',
                                        to: '{{date("Y\/m\/d")}}',
                                    },
                                },
                                data: dataStore.createDataTable(datos, schema)
                        }
                        }).render();
                        //cargandoDatos2(1,"chart_dolar");
                        // if(sig == 1){
                        //   GraficoUF(1);
                        // }
                    },beforeSend:function(){
                            if(sig == 2 || sig == 1){
                                //cargandoDatos2(0,"chart_dolar");
                                $("#chart_dolar").html('<div class="loading-spinner"></div>');
                            }
                        }
                    });
            }

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