<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>PDF Download</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <!-- Scripts -->
        <script src="{{asset('js/jquery.min.js')}}"></script>
        <script type="text/javascript" src="{{asset('js/loader.js')}}"></script>

        <!-- Styles -->
        <link rel="stylesheet" href="{{asset('css/bootstrap.min.css')}}" />
        <link rel="stylesheet" href="{{asset('css/pages/frontend/pdf_download.css')}}" />

        <script type="text/javascript">
            google.charts.load("current", {packages:['corechart']});
            google.charts.setOnLoadCallback(barChart);

            var bar_chart;
            var line_chart;

            function barChart() {

                var data = google.visualization.arrayToDataTable({!!$elements!!});

                var options = {
                    title: "",
                    bar: {groupWidth: '100px'},
                    legend: 'none',
                };
                var bar_chart_div = document.getElementById('bar_chart_div');
                var chart = new google.visualization.BarChart(bar_chart_div);
                // Wait for the chart to finish drawing before calling the getImageURI() method.
                google.visualization.events.addListener(chart, 'ready', function () {
                    bar_chart = chart.getImageURI();
                    $(".chart_div").append('<input type="hidden" name="bar_chart"  value="' + bar_chart + '">');
                    // console.log(bar_chart);
                });

                chart.draw(data, options);
            }

            google.charts.load('current', {packages: ['corechart', 'line']});
            google.charts.setOnLoadCallback(lineChart);

            function lineChart() {
                  var data = new google.visualization.DataTable();
                  data.addColumn('number', 'X');
                  data.addColumn('number', 'Dogs');
                  data.addColumn('number', 'Cats');

                  data.addRows({!!$pet_popularity!!});

                var options = {
                    hAxis: {
                        title: 'Time'
                    },
                    vAxis: {
                        title: 'Popularity'
                    },
                    colors: ['#ff6384', '#36a2eb'],
                    curveType: 'function',
                    legend: { position: 'bottom' }
                };

                var line_chart_div = document.getElementById('line_chart_div');
                var chart = new google.visualization.LineChart(line_chart_div);

                google.visualization.events.addListener(chart, 'ready', function () {
                    line_chart = chart.getImageURI();
                    $(".chart_div").append('<input type="hidden" name="line_chart"  value="' + line_chart + '">');
                });

                chart.draw(data, options);
            }
        </script>
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @auth
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ route('login') }}">Login</a>

                        @if (Route::has('register'))
                            <a href="{{ route('register') }}">Register</a>
                        @endif
                    @endauth
                </div>
            @endif

            <div class="content">
                <div class="title m-b-md">
                    PDF Download
                </div>
                <div class="links">
                    <button type="submit" form="myForm">Click me to download sample pdf</button>
                </div>
                <form id='myForm' action="{{route('pdf_download.download')}}" method="POST">
                    <div class="chart_div">
                        <input type="hidden" name="_token"  value="{{csrf_token()}}">
                    </div>
                    <div id="bar_chart_div"></div>
                    <div id="line_chart_div"></div>
                </form>
            </div>
        </div>
    </body>
</html>
