<head>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Seats','Status'],
          <?php echo $chardata ?>
        ]);

        var options = {
          title: 'Booking Status',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>

    <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
       var data = google.visualization.arrayToDataTable([
        ["Customers", "seats", { role: "style" } ],
        <?php echo $barchart; ?>
        ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Customers Records",
        width: 550,
        height:230,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>


  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
         <?php echo $donutchart;?>
        ]);

        var options = {
          title: 'Customers records who booked 25 above seats',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Timeslot", "seats", { role: "style" } ],
        <?php echo $piechart?>
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Timeslot and seats",
        width: 550,
        height: 270,
        bar: {groupWidth: "50%"},
        legend: { position: "none" },

      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);

  }
  </script>

  </head>

<?php $__env->startSection('content'); ?>
<form action="" method="POST">
<?php echo csrf_field(); ?>
<div class="from-group">
<label>Date From</label>
<input type="text" id="date_from" name="date_from" autocomplete="off" placeholder="Date From" value="<?php echo e(old('date_from')); ?>">
<label>Date To</label>
<input type="text" id="date_to" name="date_to" autocomplete="off" placeholder="Date To" value="<?php echo e(old('date_to')); ?>">
<input type="submit" value="Search" class="btn-info">
</div>
</form>

<label style="color:green;font-weight:bold; margin-left:580px; margin-top:-43px">
Total Customers: <?php echo $users; ?></label>
<label style="color:green;font-weight:bold; margin-left:750px; margin-top:-43px">
Total Bookings: <?php echo $booking; ?></label>
<label style="color:green;font-weight:bold; margin-left:900px; margin-top:-43px">
Total Seats: <?php echo $seats; ?></label>


<div class="row">
<div class="col-md-6">

 <div id="piechart_3d" class="shadow-lg p-3 bg-white rounded" >
   </div>
  </div>
</div>

   <div class="row">
    <div class="col-md-6">
      <div id="barchart_values" style="width: 400px; height: 200px; margin-left:550px; margin-top:-230px"></div>
    </div>
    </div>
    </div>


<div class="row">
  <div class="col-md-6">
    <div id="donutchart" class="shadow-lg p-3 bg-white rounded" style="width: 530px; height: 300px; margin-top: 20px"></div>

</div>
</div>

<div class="row">
<div class="col-md-6">
<div id="columnchart_values" class="shadow-lg p-3 bg-white rounded" style="width: 550px; height: 300px;
margin-left:550px; margin-top:-300px">
</div>
</div>
</div>

<?php $__env->stopSection(); ?>



<?php $__env->startSection('javascript'); ?>
<script>

$(document).ready(function(){
$('#date_from').datepicker({
 // minDate: 0,
  dateFormat: "yy-mm-dd"
// maxDate: "+1m"
 });
});

$(document).ready(function(){
$('#date_to').datepicker({
  //minDate: 0,
  dateFormat: "yy-mm-dd"
// maxDate: "+1m"
 });
});

</script>

<script src="<?php echo e(asset('js/Chart.min.js')); ?>"></script>
<script src="<?php echo e(asset('js/coreui-chartjs.bundle.js')); ?>"></script>
<script src="<?php echo e(asset('js/main.js')); ?>" defer></script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('dashboard.base', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/deve/public_html/xtreme_laravel/resources/views/dashboard/homepage.blade.php ENDPATH**/ ?>