<?php
// FECHA Y HORA
$dateStart = $_GET['dateStart'];
$dateEnd = $_GET['dateEnd'];
$timeStart = $_GET['timeStart'];
$timeEnd = $_GET['timeEnd'];
$serviceName = $_GET['service'];

include_once('../head.php');
require_once('../models/queryReports.php');
?>
<br>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->

<body>
    <div class="row">
        <div class="col-6 col-md-1"></div>
        <!--<div class="col-6 col-md-10">-->
            <div class="col-sm-10">

            <h5 class=" text-center"> Chart: Agents Performance <br>
            Service: <?php echo $serviceName ?> <br>
            From: <strong> <?php echo $dateStart ?></strong> to <strong><?php echo $dateEnd ?></strong>
            </h5> <br>
            <div class="text-center">
                <a href="../index.php?dateStart=<?php echo urlencode($dateStart); ?>&dateEnd=<?php echo urlencode($dateEnd); ?>&timeStart=<?php echo urlencode($timeStart); ?>&timeEnd=<?php echo urlencode($timeEnd); ?>&service=<?php echo urlencode($serviceName); ?>" class="btn btn-info" id="submit">
                    <i class="fa fa-chevron-left"></i> Back
                </a>
            </div>
            <br>
            <div>
                <div class="btn-group" role="group" aria-label="">
                    <button id="btnBar" type="button" class="btn btn-dark" style="width: 80px;">Bar</button>
                    <button id="btnStack" type="button" class="btn btn-success" style="width: 80px;">Stacked</button>
                    <button id="btnLine" type="button" class="btn btn-info" style="width: 80px;">Line</button>
                    <button id="btnBubble" type="button" class="btn btn-danger" style="width: 80px;">Bubble</button>
                    <button id="btnPie" type="button" class="btn btn-secondary" style="width: 80px;">Pie</button>
                </div>
            </div>
            <br>
            <!-- En este container se muestran los gráficos -->
            <div id="contenedor" style="min-width: 320px; height: 400px; margin: 0 auto"></div>

            <!-- Modal para Gráficas -->
            <div id="modal-1" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title"></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <!-- En este container se muestran los gráficos -->
                            <div id="contenedor-modal" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

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

            <?php
            include_once('foot.php');
            ?>

            <script>
                $(document).ready(function() {
                    $("#btnBar").click();
                });
                $("#btnBar").click(function() {
                    bar();
                });
                $("#btnStack").click(function() {
                    stack();
                });
                $("#btnLine").click(function() {
                    line();
                });
                $("#btnBubble").click(function() {
                    bubble();
                });
                $("#btnPie").click(function() {
                    /*  $(".modal-header").css("background-color", "#004466");
                     $(".modal-header").css("color", "white");
                     $(".modal-title").text("Pie Chart");
                     $("#modal-1").modal("show"); */
                    pie();
                });

                function bar() {
                    Highcharts.chart('contenedor', {
                        chart: {
                            type: 'column',
                            options3d: {
                                enabled: true,
                                alpha: 5,
                                beta: 15,
                                depth: 50,
                                viewDistance: 25
                            }
                        },
                        title: {
                            text: 'Agents Performance'
                        },
                        subtitle: {
                            text: '<?php echo $dateStart ?> to <?php echo $dateEnd ?>'
                        },
                        credits: {
                            enabled: false
                        },
                        yAxis: {
                            title: {
                                text: 'Calls'
                            },
                        },
                        plotOptions: {
                            column: {
                                dataLabels: {
                                    enabled: true
                                }
                            }
                        },
                        xAxis: {
                            categories: [
                                <?php

                                $result = $mysqli->query($queryAgentsPerformanceChart);
                                while ($row = mysqli_fetch_array($result)) {
                                    $agent = $row["Agent"];
                                ?> '<?php echo $agent ?>',
                                <?php
                                }
                                ?>
                            ]
                        },
                        series: [{
                                name: 'Answered',
                                // colorByPoint: true,
                                data: [<?php
                                        $result = $mysqli->query($queryAgentsPerformanceChart);
                                        while ($row = mysqli_fetch_array($result)) {
                                            $answered = $row["Answered"];
                                        ?>
                                        <?php echo $answered ?>, <?php } ?>
                                ]
                            },
                            {
                                name: 'Abandoned',
                                // colorByPoint: true,
                                data: [<?php
                                        $result = $mysqli->query($queryAgentsPerformanceChart);
                                        while ($row = mysqli_fetch_array($result)) {
                                            $abandon = $row["Abandon"];
                                        ?>
                                        <?php echo $abandon ?>, <?php } ?>
                                ]
                            },
                            {
                                name: 'Total Calls',
                                // colorByPoint: true,
                                data: [<?php
                                        $result = $mysqli->query($queryAgentsPerformanceChart);
                                        while ($row = mysqli_fetch_array($result)) {
                                            $answered = $row["Answered"];
                                            $abandon = $row["Abandon"];
                                            $totalCalls = $answered + $abandon;
                                        ?>
                                        <?php echo $totalCalls ?>, <?php } ?>
                                ]
                            },
                        ],
                    });
                }

                function stack() {
                    Highcharts.chart('contenedor', {
                        chart: {
                            type: 'column',
                            options3d: {
                                enabled: true,
                                alpha: 5,
                                beta: -15,
                                viewDistance: 25,
                                depth: 50
                            }
                        },
                        title: {
                            text: 'Agents Performance'
                        },
                        subtitle: {
                            text: '<?php echo $dateStart ?> to <?php echo $dateEnd ?>'
                        },
                        credits: {
                            enabled: false
                        },
                        yAxis: {
                            title: {
                                text: 'Calls',
                                skew3d: true
                            },
                        },
                        xAxis: {
                            categories: [
                                <?php
                                $result = $mysqli->query($queryAgentsPerformanceChart);
                                while ($row = mysqli_fetch_array($result)) {
                                    $agent = $row["Agent"];
                                ?> '<?php echo $agent ?>',
                                <?php
                                }
                                ?>
                            ],
                            labels: {
                                skew3d: true,
                                style: {
                                    fontSize: '16px'
                                }
                            }
                        },
                        plotOptions: {
                            column: {
                                stacking: 'normal',
                                depth: 40,
                                dataLabels: {
                                    enabled: true
                                }
                            }
                        },

                        series: [{
                                name: 'Answered',
                                // colorByPoint: true,
                                data: [<?php
                                        $result = $mysqli->query($queryAgentsPerformanceChart);
                                        while ($row = mysqli_fetch_array($result)) {
                                            $answered = $row["Answered"];
                                        ?>
                                        <?php echo $answered ?>, <?php } ?>
                                ]
                            },
                            {
                                name: 'Abandoned',
                                // colorByPoint: true,
                                data: [<?php
                                        $result = $mysqli->query($queryAgentsPerformanceChart);
                                        while ($row = mysqli_fetch_array($result)) {
                                            $abandon = $row["Abandon"];
                                        ?>
                                        <?php echo $abandon ?>, <?php } ?>
                                ]
                            },
                            {
                                name: 'Total Calls',
                                // colorByPoint: true,
                                data: [<?php
                                        $result = $mysqli->query($queryAgentsPerformanceChart);
                                        while ($row = mysqli_fetch_array($result)) {
                                            $answered = $row["Answered"];
                                            $abandon = $row["Abandon"];
                                            $totalCalls = $answered + $abandon;
                                        ?>
                                        <?php echo $totalCalls ?>, <?php } ?>
                                ]
                            },

                        ],
                    });
                }

                function line() {
                    Highcharts.chart('contenedor', {
                        chart: {
                            type: 'line'
                        },
                        title: {
                            text: 'Agents Performance'
                        },
                        subtitle: {
                            text: '<?php echo $dateStart ?> to <?php echo $dateEnd ?>'
                        },
                        credits: {
                            enabled: false
                        },
                        yAxis: {
                            title: {
                                text: 'Calls'
                            },
                        },
                        xAxis: {
                            categories: [
                                <?php
                                $result = $mysqli->query($queryAgentsPerformanceChart);
                                while ($row = mysqli_fetch_array($result)) {
                                    $agent = $row["Agent"];
                                ?> '<?php echo $agent ?>',
                                <?php
                                }
                                ?>
                            ]
                        },
                        series: [{
                                name: 'Answered',
                                // colorByPoint: true,
                                data: [<?php
                                        $result = $mysqli->query($queryAgentsPerformanceChart);
                                        while ($row = mysqli_fetch_array($result)) {
                                            $answered = $row["Answered"];
                                        ?>
                                        <?php echo $answered ?>, <?php } ?>
                                ]
                            },
                            {
                                name: 'Abandoned',
                                // colorByPoint: true,
                                data: [<?php
                                        $result = $mysqli->query($queryAgentsPerformanceChart);
                                        while ($row = mysqli_fetch_array($result)) {
                                            $abandon = $row["Abandon"];
                                        ?>
                                        <?php echo $abandon ?>, <?php } ?>
                                ]
                            },
                            {
                                name: 'Total Calls',
                                // colorByPoint: true,
                                data: [<?php
                                        $result = $mysqli->query($queryAgentsPerformanceChart);
                                        while ($row = mysqli_fetch_array($result)) {
                                            $answered = $row["Answered"];
                                            $abandon = $row["Abandon"];
                                            $totalCalls = $answered + $abandon;
                                        ?>
                                        <?php echo $totalCalls ?>, <?php } ?>
                                ]
                            },
                        ],
                    });
                }

                function bubble() {
                    Highcharts.chart('contenedor', {
                        chart: {
                            type: 'bubble',
                            plotBorderWidth: 1,
                            zoomType: 'xy'
                        },
                        title: {
                            text: 'Agents Performance'
                        },
                        subtitle: {
                            text: '<?php echo $dateStart ?> to <?php echo $dateEnd ?>'
                        },
                        credits: {
                            enabled: false
                        },
                        yAxis: {
                            title: {
                                text: 'Calls'
                            },
                        },
                        xAxis: {
                            categories: [
                                <?php
                                $result = $mysqli->query($queryAgentsPerformanceChart);
                                while ($row = mysqli_fetch_array($result)) {
                                    $agent = $row["Agent"];
                                ?> '<?php echo $agent ?>',
                                <?php
                                }
                                ?>
                            ]
                        },
                        series: [{
                                name: 'Answered',
                                // colorByPoint: true,
                                data: [<?php
                                        $result = $mysqli->query($queryAgentsPerformanceChart);
                                        while ($row = mysqli_fetch_array($result)) {
                                            $answered = $row["Answered"];
                                        ?>
                                        <?php echo $answered ?>, <?php } ?>
                                ],
                                marker: {
                                    fillColor: {
                                        radialGradient: {
                                            cx: 0.4,
                                            cy: 0.3,
                                            r: 0.7
                                        },
                                        stops: [
                                            [0, 'rgba(255,255,255,0.5)'],
                                            [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
                                        ]
                                    }
                                }
                            },
                            {
                                name: 'Abandoned',
                                // colorByPoint: true,
                                data: [<?php
                                        $result = $mysqli->query($queryAgentsPerformanceChart);
                                        while ($row = mysqli_fetch_array($result)) {
                                            $abandon = $row["Abandon"];
                                        ?>
                                        <?php echo $abandon ?>, <?php } ?>
                                ],
                                marker: {
                                    fillColor: {
                                        radialGradient: {
                                            cx: 0.4,
                                            cy: 0.3,
                                            r: 0.7
                                        },
                                        stops: [
                                            [0, 'rgba(255,255,255,0.5)'],
                                            [1, Highcharts.color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
                                        ]
                                    }
                                }
                            },
                            {
                                name: 'Total Calls',
                                // colorByPoint: true,
                                data: [<?php
                                        $result = $mysqli->query($queryAgentsPerformanceChart);
                                        while ($row = mysqli_fetch_array($result)) {
                                            $answered = $row["Answered"];
                                            $abandon = $row["Abandon"];
                                            $totalCalls = $answered + $abandon;
                                        ?>
                                        <?php echo $totalCalls ?>, <?php } ?>
                                ],
                                marker: {
                                    fillColor: {
                                        radialGradient: {
                                            cx: 0.4,
                                            cy: 0.3,
                                            r: 0.7
                                        },
                                        stops: [
                                            [0, 'rgba(255,255,255,0.5)'],
                                            [1, Highcharts.color(Highcharts.getOptions().colors[2]).setOpacity(0.5).get('rgba')]
                                        ]
                                    }
                                }
                            },
                        ],
                    });
                }

                function pie() {
                    Highcharts.chart('contenedor', {
                        chart: {
                            type: 'pie',
                            options3d: {
                                enabled: true,
                                alpha: 45,
                                beta: 0
                            },
                            plotBackground: '#f8f9fa',
                            plotBorderwidth: 1,
                            plotShadow: false
                        },
                        title: {
                            text: 'Total Calls'
                        },
                        subtitle: {
                            text: '<?php echo $dateStart ?> to <?php echo $dateEnd ?>'
                        },
                        credits: {
                            enabled: false
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                depth: 35,
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.name}</b>: {point.y}'
                                }
                            }
                        },
                        series: [{
                            name: 'Calls',
                            colorByPoint: true,
                            data: [
                                <?php
                                $result = $mysqli->query($queryAgentsPerformanceChart);
                                while ($row = mysqli_fetch_array($result)) {
                                    $agent = $row["Agent"];
                                    $answered = $row["Answered"];
                                    $abandon = $row["Abandon"];
                                    $totalCalls = $answered + $abandon;
                                ?>['<?php echo $agent ?>', <?php echo $totalCalls ?>],
                                <?php } ?>
                            ]
                        }],
                    });
                }
            </script>
        </div>
    </div>



    <!-- highcharts -->
    <script src="highcharts/code/highcharts.js"></script>
    <script src="highcharts/code/modules/exporting.js"></script>
    <script src="highcharts/code/modules/export-data.js"></script>
    <script src="highcharts/code/highcharts-3d.js"></script>
    <script src="highcharts/code/modules/accessibility.js"></script>
    <script src="highcharts/code/highcharts-more.js"></script>

    <script src="highcharts/code/modules/drilldown.js"></script>

</body>

</html>