@if(isset($MyPermissionPage["Reports"]))
    @if($MyPermissionPage["Reports"]->preview == 1)

        @extends("layouts.app")
@section("title")
    Reports

@endsection
@section("content")
<div class="row">
        <div class="col-md-12">

            <center><h3>Publications Top Keywords 
                <a id="exportCSV" class="btn btn-primary" href="javascript:;">Export csv</a>
                <a id="exportBar" class="btn btn-primary" href="javascript:;">Export BarChart as Pdf</a></h3></center>
        </div>

    <div class="col-md-4">
    <div  id="table_sort_div_1" ></div>
</div>
    <div class="col-md-8">

    <div  id="chart_sort_div_1" ></div>
    </div>

        <div class="col-md-12">

            <center><h3>Publications Types 
                <a id="exportCSV2" class="btn btn-primary" href="javascript:;">Export csv</a>
            <a id="exportBar2" class="btn btn-primary" href="javascript:;">Export BarChart as Pdf</a></h3></center>
        </div>
    <div class="col-md-12">
    <div  id="table_sort_div_2" ></div>
</div>
    <div class="col-md-12">

    <div  id="chart_sort_div_2" ></div>
    </div>
    
            <div class="col-md-12">

            <center><h3>Publications Countries <a id="exportCSV3" class="btn btn-primary" href="javascript:;">Export csv</a>
                <a id="exportBar3" class="btn btn-primary" href="javascript:;">Export BarChart as Pdf</a></h3></center>
        </div>

    <div class="col-md-12">
    <div  id="table_sort_div_3" ></div>
</div>
    <div class="col-md-12">

    <div  id="chart_sort_div_3" ></div>
    </div>
    
        <div class="col-md-12">

            <center><h3>Top Publications Connectors <a id="exportCSV4" class="btn btn-primary" href="javascript:;">Export csv</a>
                <a id="exportBar4" class="btn btn-primary" href="javascript:;">Export BarChart as Pdf</a></h3></center>
        </div>
    <div class="col-md-12">
    <div  id="table_sort_div_4" ></div>
        </div>
    <div class="col-md-12">

    <div  id="chart_sort_div_4" ></div>
    </div>
    <div class="col-md-12">
    <h3>Google Analytics Stats (last 7 days)</h3>
    </div>
<table class="table">
    <tr>
        <th>page Title</th>
        <th>visitors</th>
        <th>page Views</th>
    </tr>
@foreach($data['analyticsData'] as $analytics)
    <tr>
        <td>{{$analytics['pageTitle']}}</td>
        <td>{{$analytics['visitors']}}</td>
        <td>{{$analytics['pageViews']}}</td>
    </tr>
@endforeach
</table>
<table class="table">
    <tr>
        <th>browser</th>
        <th>sessions</th>
    </tr>
@foreach($data['browsers'] as $browser)
    <tr>
        <td>{{$browser['browser']}}</td>
        <td>{{$browser['sessions']}}</td>
    </tr>
@endforeach
</table>
<table class="table">
    <tr>
        <th>Referrers</th>
        <th>no of views</th>
    </tr>

@foreach($data['referrers'] as $referrer)
    <tr>
        <td>{{$referrer['url']}}</td>
        <td>{{$referrer['pageViews']}}</td>
    </tr>
@endforeach
</table>

    @endsection

</div>
@section('script')

    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        var chart1
        var chartTable1
        var chartBar1
        var chart2
        var chartTable2
        var chartBar2
        var chart3
        var chartTable3
        var chartBar3
        var chart4
        var chartTable4
        var chartBar4
        var view

        // Load the Visualization API and the corechart package.
        google.charts.load('current', {'packages':['corechart']});
        google.charts.load('current', {'packages':['table']});

        // Set a callback to run when the Google Visualization API is loaded.

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {

            // Create the data table.
            chart1 = new google.visualization.DataTable();
            chart1.addColumn('string', 'Publications Keywords');
            chart1.addColumn('number', 'Articles');

            chart1.addRows([@foreach($data['Keyword'] as $keyword){!! "['".str_replace("'", "%27", $keyword->keyword_en)."' ,$keyword->articles_count] ,"!!}@endforeach]);

               view = new google.visualization.DataView(chart1);
              view.setColumns([0, 1]);
               chartTable1 = new google.visualization.Table(document.getElementById('table_sort_div_1'));
              chartTable1.draw(view, {allowHtml: true,width: '100%', height: '100%'});

               chartBar1 = new google.visualization.BarChart(document.getElementById('chart_sort_div_1'));
              chartBar1.draw(view, {allowHtml: true,width: '100%', height: '500'});

              google.visualization.events.addListener(chartTable1, 'sort',
                  function(event) {
                    chart1.sort([{column: event.column, desc: !event.ascending}]);
                    chartBar1.draw(view);
                  });
        }
    </script>

    <!--Load the AJAX API-->
    <script type="text/javascript">


        // Set a callback to run when the Google Visualization API is loaded.

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart2() {

            // Create the data table.
            chart2 = new google.visualization.DataTable();
            chart2.addColumn('string', 'Publications Types');
            chart2.addColumn('number', 'Articles');

            chart2.addRows([@foreach($data['PublicationType'] as $key =>$PublicationType)@if(!$PublicationType)@php continue; @endphp@endif{!! "['".str_replace("'", "%27", $key)."' ,$PublicationType] ,"!!}@endforeach]);
            chart2.addRow(["Others",0]);


              var view = new google.visualization.DataView(chart2);
              view.setColumns([0, 1]);
               chartTable2 = new google.visualization.Table(document.getElementById('table_sort_div_2'));
              chartTable2.draw(view, {allowHtml: true,width: '100%', height: '100%'});

               chartBar2 = new google.visualization.BarChart(document.getElementById('chart_sort_div_2'));
              chartBar2.draw(view, {allowHtml: true,width: '100%', height: '700'});

              google.visualization.events.addListener(chartTable2, 'sort',
                  function(event) {
                    chart2.sort([{column: event.column, desc: !event.ascending}]);
                    chartBar2.draw(view);
                  });
        }
    </script>
    <!--Load the AJAX API-->
    <script type="text/javascript">


        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart3() {

            // Create the data table.
            chart3 = new google.visualization.DataTable();
            chart3.addColumn('string', 'Publications countries');
            chart3.addColumn('number', 'Articles');
            chart3.addRows([@foreach($data['Country'] as $key => $Country){!! "['".str_replace("'", "%27", $key)."' ,$Country] ,"!!}@endforeach]);


              var view = new google.visualization.DataView(chart3);
              view.setColumns([0, 1]);
               chartTable3 = new google.visualization.Table(document.getElementById('table_sort_div_3'));
              chartTable3.draw(view, {allowHtml: true,width: '100%', height: '100%'});

               chartBar3 = new google.visualization.BarChart(document.getElementById('chart_sort_div_3'));
              chartBar3.draw(view, {allowHtml: true,width: '100%', height: '500'});

              google.visualization.events.addListener(chartTable3, 'sort',
                  function(event) {
                    chart3.sort([{column: event.column, desc: !event.ascending}]);
                    chartBar3.draw(view);
                  });
        }
    </script>

    <!--Load the AJAX API-->
    <script type="text/javascript">


        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart4() {

            // Create the data table.
            chart4 = new google.visualization.DataTable();
            chart4.addColumn('string', 'Publications Sources');
            chart4.addColumn('number', 'Articles');
            chart4.addRows([@foreach($data['Source'] as $key => $Source){!! "['".str_replace("'", "%27", $Source->name)."' ,$Source->allowed_articles_count] ,"!!}@endforeach]);

        
              var view = new google.visualization.DataView(chart4);
              view.setColumns([0, 1]);
               chartTable4 = new google.visualization.Table(document.getElementById('table_sort_div_4'));
              chartTable4.draw(view, {allowHtml: true,width: '100%', height: '100%'});

               chartBar4 = new google.visualization.BarChart(document.getElementById('chart_sort_div_4'));
              chartBar4.draw(view, {allowHtml: true,width: '100%', height: '500'});

              google.visualization.events.addListener(chartTable4, 'sort',
                  function(event) {
                    chart4.sort([{column: event.column, desc: !event.ascending}]);
                    chartBar4.draw(view);
                  });
        }
        function drawChart5() {

            // Create the data table.
            chart4 = new google.visualization.DataTable();
            chart4.addColumn('string', 'Publications Sources');
            chart4.addColumn('number', 'Articles');
            chart4.addRows([@foreach($data['Source'] as $key => $Source){!! "['".str_replace("'", "%27", $Source->name)."' ,$Source->allowed_articles_count] ,"!!}@endforeach]);


              var view = new google.visualization.DataView(chart4);
              view.setColumns([0, 1]);
               chartTable4 = new google.visualization.Table(document.getElementById('table_sort_div_4'));
              chartTable4.draw(view, {allowHtml: true,width: '100%', height: '100%'});

               chartBar4 = new google.visualization.BarChart(document.getElementById('chart_sort_div_4'));
              chartBar4.draw(view, {allowHtml: true,width: '100%', height: '500'});

              google.visualization.events.addListener(chartTable4, 'sort',
                  function(event) {
                    chart4.sort([{column: event.column, desc: !event.ascending}]);
                    chartBar4.draw(view);
                  });
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
             google.charts.setOnLoadCallback(drawChart);
             google.charts.setOnLoadCallback(drawChart2);
             google.charts.setOnLoadCallback(drawChart3);
             google.charts.setOnLoadCallback(drawChart4);

            $("#exportCSV").on("click",function(){
                    export_CSV("exportCSV", chart1 ,"Publications-Top-Keywords");

            }) 
            $("#exportCSV2").on("click",function(){
                    export_CSV("exportCSV2", chart2 ,"Publications-Types");

            }) 
            $("#exportCSV3").on("click",function(){
                    export_CSV("exportCSV3", chart3 ,"Publications-Countries");

            }) 
            $("#exportCSV4").on("click",function(){
                    export_CSV("exportCSV4", chart4 ,"Publications-Connectors");

            }) 
            $("#exportBar").on("click",function(){
                    export_pdf(chartBar1,"Publications-Top-Keywords")
            }) 
            $("#exportBar2").on("click",function(){
                    export_pdf(chartBar2,"Publications-Types")
            }) 
            $("#exportBar3").on("click",function(){
                    export_pdf(chartBar3,"Publications-Countries")
            }) 
            $("#exportBar4").on("click",function(){
                    export_pdf(chartBar4,"Publications-Connectors")
            }) 
        })
    </script>
    <script type="text/javascript">
    function export_CSV(elementID, data,name) {

        var csvColumns;
        var csvContent;

        // build column headings
        csvColumns = '';
        for (var i = 0; i < data.getNumberOfColumns(); i++) {
            csvColumns += data.getColumnLabel(i);
            if (i < data.getNumberOfColumns() - 1) {
                csvColumns += ',';
            }
        }
        csvColumns += '\n';

        // get data rows
        csvContent = csvColumns + google.visualization.dataTableToCsv(data);
        var link = document.createElement("a");
        link.setAttribute("href", 'data:text/csv;charset=utf-8,' + encodeURI(csvContent));
        link.setAttribute("download", name+".csv");

        document.body.appendChild(link); // Required for FF
        link.click();
    }
    function export_pdf(chartObject,name){
        var doc = new jsPDF('l', 'pt', "a4");

        doc.addImage(chartObject.getImageURI(), 0, 0);
        doc.save(name+'.pdf');

    }

    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

@endsection
@endif
@endif