<?php
ob_start();
ini_set('serialize_precision', '-1');
include 'init.php';
// إنشاء مثيل للـ Router
/* $router = new Router();

// توجيه الطلبات باستخدام الـ Router
$router->route($_SERVER['REQUEST_URI']); */

/* require_once 'app/Router.php';
require_once 'app/controllers/BookingController.php';
require_once 'app/models/BookingModel.php';

$router = new Router();
$router->route(); */

?>
<!--Load the AJAX API-->
<!-- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> -->
<script type="text/javascript">

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

      // Draw the pie chart for Sarah's pizza when Charts is loaded.
      google.charts.setOnLoadCallback(drawSarahChart);

      // Draw the pie chart for the Anthony's pizza when Charts is loaded.
      google.charts.setOnLoadCallback(drawAnthonyChart);

      // Callback that draws the pie chart for Sarah's pizza.
      function drawSarahChart() {

        // Create the data table for Sarah's pizza.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
        ['Albatros Palace', 4],
          ['Almasa', 2]
          
        ]);

        // Set options for Sarah's pie chart.
        var options = {title:'مخطط معاملات الفنادق',
                       width:400,
                       height:300};

        // Instantiate and draw the chart for Sarah's pizza.
        var chart = new google.visualization.PieChart(document.getElementById('Sarah_chart_div'));
        chart.draw(data, options);
      }

      // Callback that draws the pie chart for Anthony's pizza.
      function drawAnthonyChart() {

        // Create the data table for Anthony's pizza.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
            ['المرتبات', 3],
          ['الايجار', 1],
          ['نور ومياه', 1],
          ['ادوات كتابية', 1],
          ['أخرى', 2]
        ]);

        // Set options for Anthony's pie chart.
        var options = {title:'مخطط المصاريف لشهر ديسمبرس',
                       width:400,
                       height:300};

        // Instantiate and draw the chart for Anthony's pizza.
        var chart = new google.visualization.PieChart(document.getElementById('Anthony_chart_div'));
        chart.draw(data, options);
      }
    </script>
    <script type="text/javascript">
      // Load Charts and the corechart and barchart packages.
      google.charts.load('current', {'packages':['corechart']});

      // Draw the pie chart and bar chart when Charts is loaded.
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['السياحة الداخلية', 175000],
          ['النقل السياحى', 50000],
          ['الحج والعمرة', 40000]
        ]);

        var piechart_options = {title:'مخطط ايرادات شهر ديسمبر',
                       width:400,
                       height:300};
        var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
        piechart.draw(data, piechart_options);

        var barchart_options = {title:'مخطط ايرادات شهر ديسمبر',
                       width:400,
                       height:300,
                       legend: 'none'};
        var barchart = new google.visualization.BarChart(document.getElementById('barchart_div'));
        barchart.draw(data, barchart_options);
      }
    </script>
<h1 class="input-group-text text-center">لوحة التحكم
    <?php /* echo _("Control Panel") */ ?>
</h1>
<hr>
<!-- style="
    background-image: url(img/Image.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: .4;
" -->
<div class="container text-center">
    <div class="row content">
        <div class="col-sm-12">

            <div class="row">
            <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
                <div class="col-sm-3 bg-primary rounded">
                    <div class="well">
                        <h4>عدد الرحلات خلال الشهر</h4>
                        <p>20 رحلة</p>
                    </div>
                </div>
                <div class="col-sm-3 bg-success rounded">
                    <div class="well">
                        <h4>الإيرادات خلال الشهر</h4>
                        <p>265000$</p>
                    </div>
                </div>
                <div class="col-sm-3 bg-info rounded">
                    <div class="well">
                        <h4>عدد العملاء</h4>
                        <p>
                            50 عميل
                        </p>
                    </div>
                </div>
                <div class="col-sm-3 bg-warning rounded">
                    <div class="well">
                        <h4>المصاريف خلال الشهر</h4>
                        <p>
                            45000$
                        </p>
                    </div>
                </div>
                <table class="columns">
                    <tr>
                        <td><div id="Sarah_chart_div" style="border: 1px solid #ccc"></div></td>
                        <td><div id="Anthony_chart_div" style="border: 1px solid #ccc"></div></td>
                    </tr>
                </table>
            </div>
            <br>
            <table class="columns">
      <tr>
        <td><div id="piechart_div" style="border: 1px solid #ccc"></div></td>
        <td><div id="barchart_div" style="border: 1px solid #ccc"></div></td>
      </tr>
    </table>
        </div>
    </div>
    <!-- <img class="imghome" src="img/Image.png" width="100%" /> -->

</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js" integrity="sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp" crossorigin="anonymous"></script>
<script src="inc/layout/js/dashboard.js"></script></body>
<?php
include $tpl . 'footer.php';
?>