@extends('dash')

@section('content')

<br />
<b>Notice</b>:  Undefined variable: fueling_data in <b>/var/www/html/Qudrive/resources/views/vehicle_expenditure.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/vehicle_expenditure.blade.php</b> on line <b>10</b><br />
<br />
<b>Notice</b>:  Undefined variable: pettycash_data in <b>/var/www/html/Qudrive/resources/views/vehicle_expenditure.blade.php</b> on line <b>29</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/var/www/html/Qudrive/resources/views/vehicle_expenditure.blade.php</b> on line <b>29</b><br />
<br />
<b>Notice</b>:  Undefined variable: inspection_data in <b>/var/www/html/Qudrive/resources/views/vehicle_expenditure.blade.php</b> on line <b>48</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/var/www/html/Qudrive/resources/views/vehicle_expenditure.blade.php</b> on line <b>48</b><br />
<br />
<b>Notice</b>:  Undefined variable: support_data in <b>/var/www/html/Qudrive/resources/views/vehicle_expenditure.blade.php</b> on line <b>67</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/var/www/html/Qudrive/resources/views/vehicle_expenditure.blade.php</b> on line <b>67</b><br />
<br />
<b>Notice</b>:  Undefined variable: casuals_data in <b>/var/www/html/Qudrive/resources/views/vehicle_expenditure.blade.php</b> on line <b>86</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/var/www/html/Qudrive/resources/views/vehicle_expenditure.blade.php</b> on line <b>86</b><br />

<br>
<h3 id="outer"><br />
<b>Notice</b>:  Undefined variable: vehicle_plate in <b>/var/www/html/Qudrive/resources/views/vehicle_expenditure.blade.php</b> on line <b>102</b><br />
</h3>

<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="pettycash"></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>Support</h4>
                                            <canvas id="support"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
</div>

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

<script>
   

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


  new Chart(fueling, {
    type: 'bar',
    tension: 0.1,
    data: {
      labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
      datasets: [{
        label: '2025',
        backgroundColor:[ 
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)',
      'rgb(154, 162, 235)',
      'rgb(255, 105, 86)',
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)',
      'rgb(154, 162, 235)',
      'rgb(255, 105, 86)'
      ],
        data:[,,,,,,,,,,,],
      
      }]
    },
    options: {
        responsive:true,
        interaction: {
      mode: 'index',
      intersect: false,
    },
    
    
    }
  });

  new Chart(pettycash, {
    type: 'bar',
    tension: 0.1,
    data: {
      labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
      datasets: [{
        label: '2025',
        backgroundColor:[ 
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)',
      'rgb(154, 162, 235)',
      'rgb(255, 105, 86)',
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)',
      'rgb(154, 162, 235)',
      'rgb(255, 105, 86)'
      ],
        data:[,,,,,,,,,,,],
      
      }]
    },
    options: {
        responsive:true,
        interaction: {
      mode: 'index',
      intersect: false,
    },
    
    
    }
  });

  new Chart(casuals, {
    type: 'bar',
    tension: 0.1,
    data: {
      labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
      datasets: [{
        label: '2025',
        backgroundColor:[ 
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)',
      'rgb(154, 162, 235)',
      'rgb(255, 105, 86)',
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)',
      'rgb(154, 162, 235)',
      'rgb(255, 105, 86)'
      ],
        data:[,,,,,,,,,,,],
      
      }]
    },
    options: {
        responsive:true,
        interaction: {
      mode: 'index',
      intersect: false,
    },
    
    
    }
  });

  new Chart(inspection, {
    type: 'bar',
    tension: 0.1,
    data: {
      labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
      datasets: [{
        label: '2025',
        backgroundColor:[ 
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)',
      'rgb(154, 162, 235)',
      'rgb(255, 105, 86)',
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)',
      'rgb(154, 162, 235)',
      'rgb(255, 105, 86)'
      ],
        data:[,,,,,,,,,,,],
      
      }]
    },
    options: {
        responsive:true,
        interaction: {
      mode: 'index',
      intersect: false,
    },
    
    
    }
  });

  new Chart(support, {
    type: 'bar',
    tension: 0.1,
    data: {
      labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
      datasets: [{
        label: '2025',
        backgroundColor:[ 
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)',
      'rgb(154, 162, 235)',
      'rgb(255, 105, 86)',
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)',
      'rgb(154, 162, 235)',
      'rgb(255, 105, 86)'
      ],
        data:[,,,,,,,,,,,],
      
      }]
    },
    options: {
        responsive:true,
        interaction: {
      mode: 'index',
      intersect: false,
    },
    
    
    }
  });


</script>

@endsection