@extends('dash')
@section('content')
<br />
<b>Notice</b>:  Undefined variable: pettycash_data in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>9</b><br />
<br />
<b>Notice</b>:  Undefined variable: pettycash_data in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>10</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>10</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>16</b><br />
<br />
<b>Notice</b>:  Undefined variable: casuals_data in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>25</b><br />
<br />
<b>Notice</b>:  Undefined variable: casuals_data in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>26</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>26</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>32</b><br />
<br />
<b>Notice</b>:  Undefined variable: inspection_data in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>42</b><br />
<br />
<b>Notice</b>:  Undefined variable: inspection_data in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>43</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>43</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>49</b><br />
<br />
<b>Notice</b>:  Undefined variable: fueling_data in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>59</b><br />
<br />
<b>Notice</b>:  Undefined variable: fueling_data in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>60</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>60</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>66</b><br />
<br />
<b>Notice</b>:  Undefined variable: support_data in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>76</b><br />
<br />
<b>Notice</b>:  Undefined variable: support_data in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>77</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>77</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>83</b><br />
 
<style>

 
</style>


<br>
<h1 id="outer"><br />
<b>Notice</b>:  Undefined variable: month in <b>/var/www/html/Qudrive/resources/views/monthly_overview_user.blade.php</b> on line <b>107</b><br />
 Expenditure Per Driver</h1>

<form action="/monthly_overview_user_data" method='POST'>
	@csrf
  &nbsp;&nbsp;&nbsp;<label for="month"> Month:</label>
  <select id="month" name="month">
    <option selected value='1'>January</option>
    <option value='2'>February</option>
    <option value='3'>March</option>
    <option value='4'>April</option>
    <option value='5'>May</option>
    <option value='6'>June</option>
    <option value='7'>July</option>
    <option value='8'>August</option>
    <option value='9'>September</option>
    <option value='10'>October</option>
    <option value='11'>November</option>
    <option value='12'>December</option>
  </select>
  <input  class="btn btn-primary" type="submit">
</form>

<div >


<div class="row">
                            <div class="col-lg-5" id="columnid">
                                <div class="au-card recent-report">
                                    <div class="au-card-inner">
                                        <div class="recent-report__chart">
                                        <h5>Casuals</h5>
                                        <canvas id="casuals"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-lg-5" id="columnid">
                                <div class="au-card recent-report">
                                    <div class="au-card-inner">
                                        <div class="recent-report__chart">
                                        <h5>Petty Cash</h5>
                                        <canvas id="myChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
</div>
<div class="row">
                            <div class="col-lg-5" id="columnid">
                                <div class="au-card recent-report" >
                                    <div class="au-card-inner">
                                        <div class="recent-report__chart">
                                        <h5>Fueling</h5>
                                          <canvas id="fueling"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5" id="columnid">
                                <div class="au-card recent-report">
                                    <div class="au-card-inner">
                                        <div class="recent-report__chart">
                                        <h5>Inspection</h5>
                                        <canvas id="inspection"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5" id="columnid">
                                <div class="au-card recent-report">
                                    <div class="au-card-inner">
                                        <div class="recent-report__chart">
                                        <h4>Service</h4>
                                            <canvas id="support"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const label = [];
  const data = [];
  const label_casual = [];
  const data_casual = [];
  const label_inspection = [];
  const data_inspection = [];
  const label_fueling = [];
  const data_fueling = [];
  const label_support = [];
  const data_support = [];

  const ctx = document.getElementById('myChart');
  const casuals = document.getElementById('casuals');
  const inspection = document.getElementById('inspection');
  const fueling = document.getElementById('fueling');
  const support = document.getElementById('support');

  new Chart(ctx, {
    type: 'bar',
    tension: 0.1,
    data: {
      labels:label,
      datasets: [{
        label: '2025 Petty Cash',
        backgroundColor:[ 
      'rgb(255, 99, 132)',
      'rgb(54, 152, 235)',
      'rgb(255, 205, 85)',
      'rgb(154, 152, 235)',
      'rgb(255, 105, 85)',
      'rgb(255, 99, 132)',
      'rgb(54, 152, 235)',
      'rgb(255, 205, 85)',
      'rgb(154, 152, 235)',
      'rgb(255, 105, 85)'
      ],
        data:data,
      
      }]
    },
    options: {
        responsive:true,
        interaction: {
      mode: 'index',
      intersect: false,
    },
    
    
    }
  });


  new Chart(casuals, {
    type: 'bar',
    tension: 0.1,
    data: {
      labels:label_casual,
      datasets: [{
        label: '2025 Casuals',
        backgroundColor:[ 
      'rgb(255, 99, 132)',
      'rgb(54, 152, 235)',
      'rgb(255, 205, 85)',
      'rgb(154, 152, 235)',
      'rgb(255, 105, 85)',
      'rgb(255, 99, 132)',
      'rgb(54, 152, 235)',
      'rgb(255, 205, 85)',
      'rgb(154, 152, 235)',
      'rgb(255, 105, 85)'
      ],
        data:data_casual,
      
      }]
    },
    options: {
        responsive:true,
        interaction: {
      mode: 'index',
      intersect: false,
    },
    
    
    }
  });


  new Chart(inspection, {
    type: 'bar',
    tension: 0.1,
    data: {
      labels:label_inspection,
      datasets: [{
        label: '2025 Inspection',
        backgroundColor:[ 
      'rgb(255, 99, 132)',
      'rgb(54, 152, 235)',
      'rgb(255, 205, 85)',
      'rgb(154, 152, 235)',
      'rgb(255, 105, 85)',
      'rgb(255, 99, 132)',
      'rgb(54, 152, 235)',
      'rgb(255, 205, 85)',
      'rgb(154, 152, 235)',
      'rgb(255, 105, 85)'
      ],
        data:data_inspection,
      
      }]
    },
    options: {
        responsive:true,
        interaction: {
      mode: 'index',
      intersect: false,
    },
    
    
    }
  });

  new Chart(fueling, {
    type: 'bar',
    tension: 0.1,
    data: {
      labels:label_fueling,
      datasets: [{
        label: '2025 Fueling',
        backgroundColor:[ 
      'rgb(255, 99, 132)',
      'rgb(54, 152, 235)',
      'rgb(255, 205, 85)',
      'rgb(154, 152, 235)',
      'rgb(255, 105, 85)',
      'rgb(255, 99, 132)',
      'rgb(54, 152, 235)',
      'rgb(255, 205, 85)',
      'rgb(154, 152, 235)',
      'rgb(255, 105, 85)'
      ],
        data:data_fueling,
      
      }]
    },
    options: {
        responsive:true,
        interaction: {
      mode: 'index',
      intersect: false,
    },
    
    
    }
  });


  new Chart(support, {
    type: 'bar',
    tension: 0.1,
    data: {
      labels:label_support,
      datasets: [{
        label: '2025 SERVICE',
        backgroundColor:[ 
      'rgb(255, 99, 132)',
      'rgb(54, 152, 235)',
      'rgb(255, 205, 85)',
      'rgb(154, 152, 235)',
      'rgb(255, 105, 85)',
      'rgb(255, 99, 132)',
      'rgb(54, 152, 235)',
      'rgb(255, 205, 85)',
      'rgb(154, 152, 235)',
      'rgb(255, 105, 85)'
      ],
        data:data_support,
      
      }]
    },
    options: {
        responsive:true,
        interaction: {
      mode: 'index',
      intersect: false,
    },
    
    
    }
  });

</script>
@endsection