


<section id="content" style="margin-top:0px;">
    <div style="text-align:center;margin-top:5%">
        <h1>Tablero Historico de campañas</h1>
    </div>
    <div class="row" style="text-align:center;margin-top:5%">
        <div class="col s4">
            <label for="archived">
                <input type="checkbox" id="archived" class="input-field">
                <span>Informaci&oacute; archivada</span>
            </label>
        </div>
        <div class=" col s4">
            <select id="campSel">
                <span id="campaList"></span>
            </select>
            <label>Selecciona campaña</label>
        </div>
    </div>
    <div class="row">
        <div id="containerChart"></div>
        <div class="barrita" style="position: absolute;left: 0;right: 0; margin-top:15px;">
            <center><img src="<?=IMG_ADMIN;?>spinner.gif"></center>
        </div>
    </div>

</section>

<!-- ================================================
    Scripts
    ================================================ -->
<!-- jQuery Library -->
<script type="text/javascript" src="<?=VENDORS_ADMIN;?>jquery-3.2.1.min.js"></script>
<!--materialize js-->
<script type="text/javascript" src="<?=JS_ADMIN;?>materialize.min.js"></script>
<!--scrollbar-->
<script type="text/javascript" src="<?=VENDORS_ADMIN;?>perfect-scrollbar/perfect-scrollbar.min.js"></script>
<!-- chartjs -->
<!--<script type="text/javascript" src="<?=VENDORS_ADMIN;?>chartjs/chart.min.js"></script>-->
<script src="<?=JS_ADMIN;?>Chart.min.js"></script>
<!-- sparkline -->
<script type="text/javascript" src="<?=VENDORS_ADMIN;?>sparkline/jquery.sparkline.min.js"></script>
<!--jvectormap-->
<script type="text/javascript" src="<?=VENDORS_ADMIN;?>jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script type="text/javascript" src="<?=VENDORS_ADMIN;?>jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script type="text/javascript" src="<?=VENDORS_ADMIN;?>jvectormap/vectormap-script.js"></script>
<!--google map-->
<script type="text/javascript" src="<?=JS_ADMIN;?>scripts/google-map-script.js"></script>
<!--plugins.js - Some Specific JS codes for Plugin Settings-->
<script type="text/javascript" src="<?=JS_ADMIN;?>plugins.js"></script>
<!--card-advanced.js - Page specific JS-->
<script type="text/javascript" src="<?=JS_ADMIN;?>scripts/dashboard-analytics.js"></script>
<!--custom-script.js - Add your own theme custom JS-->
<script type="text/javascript" src="<?=JS_ADMIN;?>custom-script.js"></script>
<script src="<?=JS_ADMIN;?>vue.js"></script>

<script src="<?=LIB_JS;?>highcharts/stock/highstock.js"></script>
<script src="<?=LIB_JS;?>highcharts/stock/modules/data.js"></script>
<script src="<?=LIB_JS;?>highcharts/stock/modules/exporting.js"></script>

<script>

var selMat;

    $.ajax({
        url: "dashboardHistorico/dameCampas",
        type: "POST",
        data: {
				campana: 0,
                lista: 0,
                archived:document.getElementById("archived").checked?"1":"0"
			},
        async: true,
        cache: false,
        dataType: "text",
        success: function (resp) {

            var data = JSON.parse(resp);
            //var ter = "";

            $.each(data.datos, function( index, value ) {

                //ter += "<option value='"+value.id+"'>"+value.nombre+"</option>";
                $('#campSel').append("<option value='"+value.id+"'>"+value.nombre+"</option>");

            });



            //console.log(ter);

            //$('#campaList').html(ter);

            $('select').formSelect();

            $(".barrita").hide();
        },
        error: function (data) {
            console.log(data);
        }
    });

    $( "#campSel" ).change(function() {

        $(".barrita").show();

        $("#containerChart").hide();

        consultaCampa($("#campSel").val());

        //$(".barrita").hide();



    });

    function consultaCampa(idCampa){

        //alert("Consultando: "+idCampa);

        $.ajax({
            url: "dashboardHistorico/infoCampaHist",
            type: "POST",
            data: {
                    campana: idCampa,
                    lista: 0
                },
            async: true,
            cache: false,
            dataType: "text",
            success: function (resp) {

                console.log("Wolf:");

                var data = JSON.parse(resp);

                console.log(data);

                var dataE = [];

                var seriesW = [];

                $.each(data.estatus, function( index, value ) {

                    dataE = [];

                    $.each(value.calls, function( index, value2 ) {

                        //console.log("Wolf 2000:");

                        //console.log(value);

                        //console.log("Wolf termina");

                        time = (new Date(value2.fecha)).getTime();
                        dato = parseInt(value2.cuenta);

                        //console.log("fecha: "+value.fecha+" cuent: "+value.cuenta);

                        dataE.push([
                            time,
                            dato
                        ]);

                    });

                    seriesW.push({'name' : value.estatus, 'data': dataE});

                });

                console.log("Wolf 2:");

                console.log(seriesW);

                //Armado de la grafica

                // Create a timer
                var start = +new Date();

                $("#containerChart").show();

                // Create the chart
                Highcharts.stockChart('containerChart', {
                    chart: {
                        events: {
                            load: function () {
                                if (!window.TestController) {
                                    this.setTitle(null, {
                                        text: ' '
                                    });
                                }
                            }
                        },
                        zoomType: 'x'
                    },

                    yAxis: {

                        labels: {
                            enabled: true
                        }
                    },

                    rangeSelector: {

                        enabled: false
                    },

                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'top',
                        enabled: true
                    },

                    yAxis: {
                        title: {
                            text: 'Llamadas'
                        }
                    },

                    title: {
                        text: 'Lista historica de campaña '+$('select[id="campSel"] option:selected').text()
                    },

                    series: seriesW

                });

                $(".barrita").hide();


            },
            error: function (data) {
                console.log(data);
            }
        });

        //alert("Acabo de consultar")
    }

</script>