@extends("layouts.app")
@section("title")
    @php
        $tablename="EmailReport" ;
        $email_id=$_GET['email_id'];

    @endphp
Email Report

@endsection
@section("content")
{{-- ---------------------------------------------------- table 1 html -------------------------------------------------- --}}
<style type="text/css">
    .select2-container {
        width: 100% !important;
        padding: 0;
    }
    .select2-dropdown {  
  z-index: 10060 !important;/*1051;*/
}
div#m_table__1_filter {
    display: none;
}

</style>
@php $tableNo=1;

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

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

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

<div  class="kt-portlet kt-portlet--mobile">
        <div class="kt-portlet__head">
            <div class="kt-portlet__head-caption">
                <div class="kt-portlet__head-title">

                </div>
            </div>
            <div class="kt-portlet__head-tools">
                <ul class="kt-portlet__nav">

                    <li class="kt-portlet__nav-item"></li>
                </ul>
            </div>
        </div>

        <div class="kt-portlet__body">
            <!--begin: Datatable -->
            <table class="cell-border table-striped" id="m_table__{{$tableNo}}">
            </table>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>


@endsection
@section("script")


    <script type="text/javascript" src="{{url("js/main.js")}}"></script>
    <script view="{{$_GET['view']}}" type="text/javascript" email_id="{{$email_id}}" src="{{url("js/backend/".$tablename.".js")}}" ></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        var chart1
        var chartBar1
                var view

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

        // 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 = google.visualization.arrayToDataTable([
                ['emails', 'opens', 'clicks'],
                @foreach($data['SentEmails'] as $email){!! "['".str_replace("'", "%27", $email->recipient)."' ,$email->opens,$email->clicks] ,"!!}@endforeach
            ]);

            view = new google.visualization.DataView(chart1);
            view.setColumns([0, 1,2]);

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

        }
        $(document).ready(function() {
            google.charts.setOnLoadCallback(drawChart);
            $("#exportBar").on("click",function(){
                export_pdf(chartBar1,"Publications-Top-Keywords")
            })
        });
        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>

    </script>

@endsection