@extends('master')
@section('content')
<section class="section dashboard">
    <header>
        <h1>Welcome, {{ Auth::user()->name }}</h1>
    </header>
    <main>
        <section class="appointments">
            <h2>Your Appointments</h2>
            <div class="appointment-card">
                <h3>Appointment #1</h3>
                <p>Date: January 15, 2024</p>
                <p>Time: 10:00 AM</p>
                <p>Patient: Jane Smith</p>
            </div>
            <div class="appointment-card">
                <h3>Appointment #2</h3>
                <p>Date: January 20, 2024</p>
                <p>Time: 2:30 PM</p>
                <p>Patient: John Doe</p>
            </div>
            <!-- Add more appointment cards as needed -->
        </section>
    </main>
    <div class="row d-none">
      <div class="col-md-4 col-xs-12">
        <h3 class="fw-bold fs-5 mb-4 mt-4">Total Vehicles</h3>
        <div class="card stat-card">
          <div class="card-head">
            <p class="fs-4 fw-bold mb-0">450<span class="text-muted fs-12 ms-2 fw-500">10%</span>
              <i class="fa-solid fa-caret-up text-success fs-12"></i>
            </p>
          </div>
          <div class="card-body p-0">
            <canvas class="chart" id="card-chart1" height="70" width="100"></canvas>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-xs-12">
        <h3 class="fw-bold fs-5 mb-4 mt-4">Total Bookings</h3>
        <div class="card stat-card">
          <div class="card-head">
            <p class="fs-4 fw-bold mb-0">450<span class="text-muted fs-12 ms-2 fw-500">10%</span>
              <i class="fa-solid fa-caret-up text-success fs-12"></i>
            </p>
          </div>
          <div class="card-body p-0">
            <canvas class="chart" id="card-chart2" height="70" width="100"></canvas>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-xs-12">
        <h3 class="fw-bold fs-5 mb-4 mt-4">Total Spending</h3>
        <div class="card stat-card">
          <div class="card-head">
            <p class="fs-4 fw-bold mb-0">1500
            </p>
          </div>
          <div class="card-body p-0">
            <canvas class="chart" id="card-chart3" height="70" width="100"></canvas>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-xs-12">
        <h3 class="fw-bold fs-5 mb-4 mt-4">Bookings Last 7 Days</h3>
        <div class="card stat-card">
          <div class="card-body">
            <canvas class="chart" id="myAreaChart" height="45" width="100"></canvas>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-xs-12">
        <h3 class="fw-bold fs-5 mb-4 mt-4">Complete Bookings Last 7 Days</h3>
        <div class="card stat-card">
          <div class="card-body">
            <canvas class="chart" id="myAreaChart2" height="45" width="100"></canvas>
          </div>
        </div>
      </div>
    </div>

    <div class="row d-none">
      <div class="col-12">
        <div class="card mt-3">
          <div class="card-body px-0 py-4">
            <div class="table-responsive">
              <table id="customer_tbl" class="table customer-tbl" style="width:100%">
                <thead>
                  <tr>
                    <th><input type="checkbox" class="select-all-checkbox"></th>
                    <th>Booking ID</th>
                    <th>Vehicle Reg.</th>
                    <th>Status</th>
                    <th>Booking Date</th>
                    <th>Complete Date</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><input type="checkbox" class="select-checkbox"></td>
                    <td class="all">10001</td>
                    <td>ADZ 991</td>
                    <td class="all"><span class="badge unverified">cancelled</span></td>
                    <td>06-07-23</td>
                    <td>06-07-23</td>
                  </tr>
                  <tr>
                    <td><input type="checkbox" class="select-checkbox"></td>
                    <td class="all">10001</td>
                    <td>ADZ 991</td>
                    <td class="all"><span class="badge unverified">cancelled</span></td>
                    <td>06-07-23</td>
                    <td>06-07-23</td>
                  </tr>
                  <tr>
                    <td><input type="checkbox" class="select-checkbox"></td>
                    <td class="all" >10001</td>
                    <td>ADZ 991</td>
                    <td class="all"><span class="badge unverified">cancelled</span></td>
                    <td>06-07-23</td>
                    <td>06-07-23</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
</section>

  @endsection

  @push('scripts')
  <script>
    $(document).ready(function () {
      $('.select-all-checkbox').change(function () {
        $('.select-checkbox').prop('checked', $(this).prop('checked'));
      });

      $('.select-checkbox').change(function () {
        $('.select-checkbox').not(this).prop('checked', false);
        $('.select-all-checkbox').prop('checked', false);
      });

     $('#customer_tbl').DataTable({
        responsive: true,
      });
    });
  </script>
  <script>
    const cardChart1 = new Chart(document.getElementById('card-chart1'), {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
          label: '',
          backgroundColor: '#f0f7f3',
          borderColor: '#198754',
          data: [50, 61, 40, 55, 34, 68, 50],
          fill: true
        }]
      },
      options: {
        plugins: {
          legend: {
            display: false
          }
        },
        maintainAspectRatio: false,
        scales: {
          x: {
            display: false
          },
          y: {
            display: false
          }
        },
        elements: {
          line: {
            borderWidth: 2,
            tension: 0.4
          },
          point: {
            radius: 0,
            hitRadius: 10,
            hoverRadius: 4
          }
        }
      }
    });
    const cardChart2 = new Chart(document.getElementById('card-chart2'), {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
          label: '',
          backgroundColor: '#fff4eb',
          borderColor: '#FF9F32',
          data: [60, 61, 40, 55, 34, 68, 40],
          fill: true
        }]
      },
      options: {
        plugins: {
          legend: {
            display: false
          }
        },
        maintainAspectRatio: false,
        scales: {
          x: {
            display: false
          },
          y: {
            display: false
          }
        },
        elements: {
          line: {
            borderWidth: 2,
            tension: 0.4
          },
          point: {
            radius: 0,
            hitRadius: 10,
            hoverRadius: 4
          }
        }
      }
    });
    const cardChart3 = new Chart(document.getElementById('card-chart3'), {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
          label: '',
          backgroundColor: '#f4eeff',
          borderColor: '#D443A2',
          data: [60, 61, 40, 55, 34, 68, 40],
          fill: true
        }]
      },
      options: {
        plugins: {
          legend: {
            display: false
          }
        },
        maintainAspectRatio: false,
        scales: {
          x: {
            display: false
          },
          y: {
            display: false
          }
        },
        elements: {
          line: {
            borderWidth: 2,
            tension: 0.4
          },
          point: {
            radius: 0,
            hitRadius: 10,
            hoverRadius: 4
          }
        }
      }
    });

    var cardChart4 = document.getElementById('myAreaChart').getContext('2d');
    var data = {
      labels: ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      datasets: [{
        label: 'Customer Dataset',
        backgroundColor: '#fdf2de', // Area fill color
        borderColor: '#F1A726', // Border color
        borderWidth: 1, // Border width
        data: [165, 59, 180, 241, 50, 200, 200], // Actual data points
        fill: true,
      }]
    };

    // Create the Area Chart
    var myAreaChart = new Chart(cardChart4, {
      type: 'line',
      data: data,
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        },
        plugins: {
          legend: {
            display: false
          }
        },
      }
    });
    var cardChart5 = document.getElementById('myAreaChart2').getContext('2d');
    var data = {
      labels: ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      datasets: [{
        label: 'Customer Dataset',
        backgroundColor: '#fdf2de', // Area fill color
        borderColor: '#F1A726', // Border color
        borderWidth: 1, // Border width
        data: [165, 59, 180, 241, 50, 200, 200], // Actual data points
        fill: true,
      }]
    };

    // Create the Area Chart
    var myAreaChart2 = new Chart(cardChart5, {
      type: 'line',
      data: data,
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        },
        plugins: {
          legend: {
            display: false
          }
        },
      }
    });
  </script>
  @endpush