<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<?php 
$json_object = ($dishbargraph);

 ?>
<script type="text/javascript">
    var mydata=(<?php   echo ($json_object); ?>);
    console.log(mydata);
window.onload = function() {

    var chart1 = new CanvasJS.Chart("chartContainer", {
        theme: "light1", // "light2", "dark1", "dark2"
        animationEnabled: true, // change to true   
        exportEnabled: true,
        title: {
            text: "Dish Rating"
        },

        data: [{
            // Change type to "bar", "area", "spline", "pie",etc.
            type: "column",
            indexLabelFontSize: 17,
            dataPoints:mydata
            
        }]
    });

    var chart2 = new CanvasJS.Chart("myPieChart", {
        theme: "light2", // "light2", "dark1", "dark2"
        animationEnabled: true, // change to true   
        exportEnabled: true,
        title: {
            text: "Males & Females"
        },

        data: [{
            // Change type to "bar", "area", "spline", "pie",etc.
            type: "pie",
            indexLabelFontSize: 17,
            dataPoints: [{
                    label: "Males",
                    color: '#8E5A6A',
                    y: <?php echo $male; ?>
                },
                {
                    label: "Females",
                    color: '#CC8A9F',
                    y: <?php echo $female; ?>
                }
            ]
        }]
    });
    chart1.render();
    chart2.render();


}
</script>

<?php
function floorDec($val, $precision = 2)
{
    if ($precision < 0) {
        $precision = 0;
    }
    $numPointPosition = intval(strpos($val, '.'));
    if ($numPointPosition === 0) { //$val is an integer
        return $val;
    }
    return floatval(substr($val, 0, $numPointPosition + $precision + 1));
}
?>
<!-- Begin Page Content -->
<div class="container-fluid">

    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
        <!-- <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a> -->
    </div>

    <!-- Content Row -->
    <div class="row">

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4 ">
            <div class="card border-left-users shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color:#20435A;">
                                No Of People Rated</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800"><?php 
                            
                            $x=0; 
                            if(isset($resturentinfo['rating'])){
                            $rating=$resturentinfo['rating']; 
                                echo count($rating);
                            }else{
                            echo $x;
                        }
                            
                            
                            ?></div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-3x" style="color:#20435A;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-podcasts shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color:#638DA6;">
                            Meals</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800"><?php  echo $meal;?></div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-podcast fa-3x" style="color:#638DA6;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

     
        <!-- Pending Requests Card Example -->
        <div class="col-xl-3 col-md-6 mb-4 ">
            <div class="card border-left-females shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color:#CC8A9F;">
                                Over All Rating</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800"><?php  
                            //echo $meal;
                            $x=0; 
                            if(isset($resturentinfo['rating'])){
                            foreach($resturentinfo['rating'] as $rating){
                              $x=$x+$rating; 
                            }
                                
                            echo ($x/count($resturentinfo['rating']));
                            }else{
                            echo $x;
                        }
                            
                            ?></div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-user-circle fa-3x" style="color:#CC8A9F;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- Content Row -->

    <div class="row">

        <!-- Area Chart -->
        <div class="col-xl-12 col-lg-12">
       <h4>
       Customer Reviews and Ratings
        </h4>
        <div class="card shadow mb-4">
                <div class="card-body">
                    <div class="chart-area">

                        <canvas id="line_chart" style="width: 100%; height: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
         
    </div>
    <div class="row">

<!-- Area Chart -->
<div class="col-xl-12 col-lg-12">
    <h4>Popular Menu Items</h4>

            <div class="card shadow mb-4">
                <div class="card-body">
                    <div class="chart-pie pt-4 pb-2">
                          <div id="chartContainer" style="width: 100%; height: 100%;"></div>
                        <script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
                    </div>
                </div>
            </div>

</div>



<!-- Area Chart -->
<div class="col-xl-12 col-lg-12">
<h4>
Reservation Statistics
</h4>
<div class="card shadow mb-4">
        <div class="card-body">
            <div class="chart-area">

                <canvas id="line_chart2" style="width: 100%; height: 100%;"></canvas>
            </div>
        </div>
    </div>
</div>


<div class="col-xl-12 col-lg-12">
    <h4> Customer Loyalty </h4>

            <div class="card shadow mb-4">
                <div class="card-body">
                    <div class="chart-pie pt-4 pb-2">

                          <canvas id="histogramChart" width="1800" height="400" style="width: 100%; height: 100%;"></canvas>


                    </div>
                </div>
            </div>

</div>

<div class="col-xl-12 col-lg-12">
    <h4>Customer Demographics Gender Percentages</h4>

            <div class="card shadow mb-4">
                <div class="card-body">
                    <div class="chart-pie pt-4 pb-2">
                          <div id="myPieChart" style="width: 100%; height: 100%;"></div>
                 
                    </div>
                </div>
            </div>

</div>

<div class="col-xl-12 col-lg-12">
    <h4> Customer Demographics Age groups </h4>
    <?php
   
     ?>

            <div class="card shadow mb-4">
                <div class="card-body table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Ages</th>
                                <th>Parcentage</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th>Under 18</th>
                            <td><?php echo $agesgroup['Under 18'];?></td>
                         </tr>
                         <tr>
                            <th>18-24</th>
                            <td><?php echo $agesgroup['18-24'];?></td>
                         </tr>
                         <tr>
                            <th>25-34</th>
                            <td><?php echo $agesgroup['25-34'];?></td>
                         </tr>
                         <tr>
                            <th>35-44</th>
                            <td><?php echo $agesgroup['35-44'];?></td>
                         </tr>
                         <tr>
                            <th>45-54</th>
                            <td><?php echo $agesgroup['45-54'];?></td>
                         </tr>
                         <tr>
                            <th>55 and above</th>
                            <td><?php echo $agesgroup['55 and above'];?></td>
                         </tr>
                        </tbody>   

                    </table>   
                </div>
            </div>

</div>
<div class="col-xl-12 col-lg-12">
    <h4> Customer Demographics Age groups With Dishes </h4>
    <?php
   
     ?>

            <div class="card shadow mb-4">
                <div class="card-body table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Dish</th>
                                <th>Under 18</th>
                                <th>18-24</th>
                                <th>25-34</th>
                                <th>35-44</th>
                                <th>45-54</th>
                                <th>55 and above</th>
                            </tr>
                        </thead>
                        <tbody>
                        <?php foreach($ageGroupMealCounts as $mealid=>$agecount) {?>
                        <tr>
                            <th><?php echo getpropertyvalue("Dishes",$mealid,"name") ;?></th>
                            <td><?php echo $agecount['0-17']; ?></td>
                            <td><?php echo $agecount['18-24']; ?></td>
                            <td><?php echo $agecount['25-34']; ?></td>
                            <td><?php echo $agecount['35-44']; ?></td>
                            <td><?php echo $agecount['45-54']; ?></td>
                            <td><?php echo $agecount['55+']; ?></td>
                           
                         </tr>
                         <?php } ?>
                          </tbody>   

                    </table>   
                </div>
            </div>

</div>
                    
<div class="col-xl-12 col-lg-12">
    <h4>Customer Demographics Geographical Distribution</h4>
    <?php
   
     ?>

            <div class="card shadow mb-4">
                <div class="card-body table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Country</th>
                                <th>No Of Visit</th>
                            </tr>
                        </thead>
                        <tbody>
                       <?php

                       foreach($country as $k=>$c){ ?>
                        <tr>
                            <th><?php echo $k; ?></th>
                            <td><?php echo $c; ?></td>
                         </tr>
                         <?php } ?>
                         
                        </tbody>   

                       </table>   
                </div>
            </div>

</div>
<div class="col-xl-12 col-lg-12">
<h4>
Marketing Effectiveness
</h4>
<div class="card shadow mb-4">
        <div class="card-body">
            <div class="chart-area">

                <canvas id="line_chart3" style="width: 100%; height: 100%;"></canvas>
            </div>
        </div>
    </div>
</div>
 


</div>
<!-- /.container-fluid -->


<script>
        // Pass PHP data to JavaScript
        var histogramData = <?php echo  ($histogramedata); ?>;
        console.log("balti",histogramData);
        var label=histogramData.map(item=>{
            return item.label;
        })
        console.log(label);
        // var labels = histogramData.map(item => item.label);
        // console.log(label);
        var data = histogramData.map(item => item.visit);
        console.log(data);
        // Create a histogram using Chart.js
        var ctx = document.getElementById('histogramChart').getContext('2d');
        var histogramChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: label, // Labels for each bar
                datasets: [{
                    label: 'Number of Visits',
                    data: data,
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Users'
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'Frequency'
                        }
                    }
                }
            }
        });
    </script>