<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="{{ asset('/asset/css/dashboardDoc.css') }}" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link href="{{ asset('/asset/main.css') }}" rel="stylesheet" />
    <link href="{{ asset('/assets/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <title>Doctor Dashboard</title>
  </head>
  <body>
  @include('doctor-sidebar')
  <div class="container-flex" >
    <div class="content">
    <main class="doctor-dashboard">
    <h1 class="dashboard-title">Doctor Dashboard</h1>
    <section class="dashboard-content">
        <div class="content-row">
        <div class="content-column">
            <div class="patient-stats" >
            <div class="chart-container">
                  <canvas id="patientChart"></canvas>
                </div>
            <div class="patient-stats-row">
              <div class="patient-stat" style="background-color:#8DB3FF">
                <div class="patient-stat-value">{{ $normalWeightCount }}</div>
                <div class="patient-stat-label">Normal</div>
            </div>
            <div class="patient-stat" style="background-color:#F45D78" >
                <div class="patient-stat-value">{{ $overweightCount }}</div>
                <div class="patient-stat-label">Overweight</div>
            </div>
            <div class="patient-stat" style="background-color:#5DF4C7">
                <div class="patient-stat-value">{{ $unknownCount }}</div>
                <div class="patient-stat-label">Unknown</div>
            </div>
            </div>
            </div>
        </div>
        <div class="content-column-wide">
            <div class="appointment-summary">
            <div class="appointment-summary-header">
                    <div class="row">
                    <h2 class="appointment-summary-title">Patients Summary</h2>
                    </div>
                </div>
            <div class="appointment-summary-row">
                <div class="appointment-summary-column">
                <div class="gender-stats">
                    <div class="gender-icon-container">
                        <div class="male-icon">
                        <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/3fdf4134042a773bd7e5dc3089ac98934868c84a3f4c23fcc70dfc3110a076a1?apiKey=e644a539de5445e499b1d21950fa439b&" alt="Male icon" class="gender-icon" />
                        </div>
                        <div class="female-icon">
                        <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/2d565bbdb293dab51447f444ac9d0e036ecac199920286ad2afcd2f297588c3b?apiKey=e644a539de5445e499b1d21950fa439b&" alt="Female icon" class="gender-icon" />
                        </div>
                    </div>
                    <div class="gender-stats-labels">
                      <div class="gender-label">Male</div>
                      <div class="gender-value">{{ $malePatients }}</div>
                      <div class="gender-label">Female</div>
                      <div class="gender-value">{{ $femalePatients }}</div>
                    </div>
                    </div>
                </div>
                <div class="appointment-summary-column-narrow">
                <div class="appointment-stats">
                    <div class="appointment-icon-container">
                        <div class="male-icon">
                        <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/3fdf4134042a773bd7e5dc3089ac98934868c84a3f4c23fcc70dfc3110a076a1?apiKey=e644a539de5445e499b1d21950fa439b&" alt="Male icon" class="gender-icon" />
                        </div>
                        <div class="female-icon">
                        <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/2d565bbdb293dab51447f444ac9d0e036ecac199920286ad2afcd2f297588c3b?apiKey=e644a539de5445e499b1d21950fa439b&" alt="Female icon" class="gender-icon" />
                        </div>
                    </div>
                    <div class="gender-stats-labels">
                      <div class="gender-label">Total appointment</div>
                      <div class="gender-value">{{ $totalAppointments }}</div>
                      <div class="gender-label">Pending appointment</div>
                      <div class="gender-value">{{ $pendingAppointments }}</div>
                  </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
        </div>
    </section>
    <section class="appointments-container">
      <header class="appointments-header">
          <h2 class="appointments-title">Appointments</h2>
          <a href="#" class="view-more-link">
              <span class="view-more-text">View More</span>
              <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/1101b12b8f7a35f0cd2181e27b04fddc83baf3cd8095916bb541c62ba1875e0e?apiKey=e644a539de5445e499b1d21950fa439b&" alt="" class="arrow-icon" />
          </a>
      </header>
  
      <div class="appointments-table-header">
          <div class="header-name">Name</div>
          <div class="header-location">Location</div>
          <div class="header-date">Date</div>
          <div class="header-time">Time</div>
          <div class="header-status">Status</div>
      </div>
  
      @foreach ($latestAppointments as $appointment)
      <div class="appointment-row">
        <div class="patient-info">
            <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/a035700e6dde8893391104b4951e482b92fd90bf27ee7430998441c8f71bd031?apiKey=e644a539de5445e499b1d21950fa439b&" alt="{{ $appointment->patient->name }} avatar" class="patient-avatar" />
            <div class="patient-name">{{ $appointment->patient->name }}</div>
        </div>
        <div class="appointment-location">{{ $appointment->location }}</div>
        <div class="appointment-date">{{ $appointment->consultation_date }}</div>
        <div class="appointment-time">{{ $appointment->consultation_time }}</div>
        <div class="appointment-status">
            @if ($appointment->consultation_status === 'cancelled' || $appointment->consultation_status === 'declined')
                <span class="text-danger">{{ ucfirst($appointment->consultation_status) }}</span>
            @elseif ($appointment->consultation_status === 'pending')
                <span class="text-warning">{{ ucfirst($appointment->consultation_status) }}</span>
            @elseif ($appointment->consultation_status === 'approved')
                <span>{{ ucfirst($appointment->consultation_status) }}</span>
            @else
                <span>{{ ucfirst($appointment->consultation_status) }}</span>
            @endif
        </div>
    </div>
      @endforeach
  </section>
    </main>
    </div>
  </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script>
      const ctx = document.getElementById('patientChart').getContext('2d');
      const patientChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
        datasets: [{
              data: [{{ $normalWeightCount }}, {{ $overweightCount }}, {{ $unknownCount }}],
              backgroundColor: [
                  'rgba(141, 179, 255, 0.2)',
                  'rgba(244, 93, 120, 0.2)',
                  'rgba(93, 244, 199, 0.2)'
              ],
              borderColor: [
                  'rgba(141, 179, 255, 1)',
                  'rgba(244, 93, 120, 1)',
                  'rgba(93, 244, 199, 1)'
              ],
              borderWidth: 1
          }]
      },
        options: {
          responsive: true,
          plugins: {
            title: {
              display: true,
              text: 'Patient Weight Categories'
            }
          }
        },
      });
    </script>
  </body>
</html>
