@extends('layout.app')
@section('content')
    <div class="pagetitle">
      <h1>Dashboard</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="index.html">Home</a></li>
          <li class="breadcrumb-item active">Dashboard</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->

    <section class="section dashboard">
      <div class="row">

        <!-- Left side columns -->
        <div class="col-lg-8">
          <div class="row">

            <!-- Users Card -->
            <!-- Users Card -->
<div class="col-xxl-6 col-md-6">
  <div class="card info-card customers-card">
    <div class="card-body position-relative">
      <div class="d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">Users <span>| Total</span></h5>
        <small>
          <a href="{{ route('datauser') }}" class="text-primary d-flex align-items-center" style="text-decoration: none;">
            <span>Selengkapnya<span> <i class="bi bi-arrow-right-circle ms-1"></i>
          </a>
        </small>
      </div>

      <div class="d-flex align-items-center mt-3">
        <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
          <i class="bi bi-people"></i>
        </div>
        <div class="ps-3">
          <h6>{{ $userCount }} Users</h6>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Data Makanan Card -->
<div class="col-xxl-6 col-md-6">
  <div class="card info-card sales-card">
    <div class="card-body position-relative">
      <div class="d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">Data Makanan <span>| Total</span></h5>
        <small>
          <a href="{{ route('makanan') }}" class="text-primary d-flex align-items-center" style="text-decoration: none;">
            <span>Selengkapnya<span> <i class="bi bi-arrow-right-circle ms-1"></i>
          </a>
        </small>
      </div>

      <div class="d-flex align-items-center mt-3">
        <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
          <i class="bi bi-basket"></i>
        </div>
        <div class="ps-3">
          <h6>{{ $makananCount }} Data</h6>
        </div>
      </div>
    </div>
  </div>
</div>


<!-- End Data Makanan Card -->


<div class="card shadow-lg border-start border-4 border-primary mb-4">
  <div class="card-body">
      <h5 class="card-title text-primary fw-bold mb-0 d-flex justify-content-between align-items-center">
          📌 Aturan Penilaian <span class="text-muted">| AHP</span>
          <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAHP" aria-expanded="false" aria-controls="collapseAHP">
              Lihat Detail
          </button>
      </h5>

      <div class="collapse mt-3" id="collapseAHP">
          <p class="fs-6">Sebelum melakukan perbandingan, pahami skala penilaian berikut. Skala ini digunakan untuk menilai tingkat kepentingan antar kriteria maupun alternatif.</p>

          <div class="row row-cols-1 row-cols-md-2 g-3 mt-2">
              <div class="col">
                  <div class="d-flex align-items-start">
                      <span class="badge bg-success rounded-pill me-3">1</span>
                      <div>
                          <strong>Equal Importance</strong><br>
                          Kedua elemen sama pentingnya
                      </div>
                  </div>
              </div>

              <div class="col">
                  <div class="d-flex align-items-start">
                      <span class="badge bg-primary rounded-pill me-3">3</span>
                      <div>
                          <strong>Moderate Importance</strong><br>
                          Salah satu elemen sedikit lebih penting
                      </div>
                  </div>
              </div>

              <div class="col">
                  <div class="d-flex align-items-start">
                      <span class="badge bg-warning text-dark rounded-pill me-3">5</span>
                      <div>
                          <strong>Strong Importance</strong><br>
                          Salah satu elemen lebih penting secara kuat
                      </div>
                  </div>
              </div>

              <div class="col">
                  <div class="d-flex align-items-start">
                      <span class="badge bg-danger rounded-pill me-3">7</span>
                      <div>
                          <strong>Very Strong Importance</strong><br>
                          Salah satu elemen sangat penting
                      </div>
                  </div>
              </div>

              <div class="col">
                  <div class="d-flex align-items-start">
                      <span class="badge bg-dark rounded-pill me-3">9</span>
                      <div>
                          <strong>Extreme Importance</strong><br>
                          Salah satu elemen mutlak lebih penting
                      </div>
                  </div>
              </div>

              <div class="col">
                  <div class="d-flex align-items-start">
                      <span class="badge bg-secondary rounded-pill me-3">2, 4, 6, 8</span>
                      <div>
                          <strong>Intermediate Values</strong><br>
                          Nilai antara dua pertimbangan yang berdekatan
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

<div class="card shadow-lg border-start border-4 border-primary mb-4">
  <div class="card-body">
      <h5 class="card-title text-primary fw-bold mb-0 d-flex justify-content-between align-items-center">
          📋 Langkah-langkah Mengisi Data <span class="text-muted">| Aplikasi</span>
          <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSteps" aria-expanded="false" aria-controls="collapseSteps">
              Lihat Detail
          </button>
      </h5>

      <div class="collapse mt-3" id="collapseSteps">
          <p class="fs-6">Berikut adalah langkah-langkah yang harus diikuti untuk mengisi data dalam aplikasi ini. Pastikan Anda mengikuti setiap langkah untuk mendapatkan hasil yang tepat.</p>

          <div class="row row-cols-1 row-cols-md-2 g-3 mt-2">
              <div class="col">
                  <div class="d-flex align-items-start">
                      <span class="badge bg-success rounded-pill me-3">1</span>
                      <div>
                          <strong>Masukkan Data Makanan</strong><br>
                          Pilih kategori makanan dan masukkan informasi seperti lemak, natrium, energi, dan karbohidrat.
                      </div>
                  </div>
              </div>

              <div class="col">
                  <div class="d-flex align-items-start">
                      <span class="badge bg-primary rounded-pill me-3">2</span>
                      <div>
                          <strong>Input Kriteria</strong><br>
                          Tentukan kriteria yang relevan untuk perbandingan antar makanan, seperti kandungan gizi dan kecocokan dengan kebutuhan diet.
                      </div>
                  </div>
              </div>

              <div class="col">
                  <div class="d-flex align-items-start">
                      <span class="badge bg-warning text-dark rounded-pill me-3">3</span>
                      <div>
                          <strong>Perbandingan Berpasangan</strong><br>
                          Bandingkan alternatif makanan menggunakan skala penilaian untuk menentukan prioritas berdasarkan kriteria.
                      </div>
                  </div>
              </div>

              <div class="col">
                  <div class="d-flex align-items-start">
                      <span class="badge bg-danger rounded-pill me-3">4</span>
                      <div>
                          <strong>Normalisasi Data</strong><br>
                          Lakukan normalisasi terhadap data yang telah dimasukkan untuk memastikan konsistensi perbandingan antar makanan.
                      </div>
                  </div>
              </div>

              <div class="col">
                  <div class="d-flex align-items-start">
                      <span class="badge bg-dark rounded-pill me-3">5</span>
                      <div>
                          <strong>Simpan dan Hasilkan Rekomendasi</strong><br>
                          Setelah data selesai diinput dan dinormalisasi, simpan perubahan dan hasilkan rekomendasi menu makanan berdasarkan analisis AHP.
                      </div>
                  </div>
              </div>

              <div class="col">
                  <div class="d-flex align-items-start">
                      <span class="badge bg-secondary rounded-pill me-3">6</span>
                      <div>
                          <strong>Evaluasi dan Sesuaikan</strong><br>
                          Evaluasi rekomendasi yang diberikan dan sesuaikan jika diperlukan berdasarkan kebutuhan diet atau preferensi pengguna.
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>


            <!-- Recent Sales -->
            <div class="col-12">
              <div class="card recent-sales overflow-auto">

                <div class="filter">
                  <a class="icon" href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></a>
                  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                    <li class="dropdown-header text-start">
                      <h6>Filter</h6>
                    </li>

                    <li><a class="dropdown-item" href="#">Today</a></li>
                    <li><a class="dropdown-item" href="#">This Month</a></li>
                    <li><a class="dropdown-item" href="#">This Year</a></li>
                  </ul>
                </div>

                <div class="card-body">
                  <h5 class="card-title">Recent Sales <span>| Today</span></h5>

                  <table class="table table-borderless datatable">
                    <thead>
                      <tr>
                        <th scope="col">#</th>
                        <th scope="col">Customer</th>
                        <th scope="col">Product</th>
                        <th scope="col">Price</th>
                        <th scope="col">Status</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row"><a href="#">#2457</a></th>
                        <td>Brandon Jacob</td>
                        <td><a href="#" class="text-primary">At praesentium minu</a></td>
                        <td>$64</td>
                        <td><span class="badge bg-success">Approved</span></td>
                      </tr>
                      <tr>
                        <th scope="row"><a href="#">#2147</a></th>
                        <td>Bridie Kessler</td>
                        <td><a href="#" class="text-primary">Blanditiis dolor omnis similique</a></td>
                        <td>$47</td>
                        <td><span class="badge bg-warning">Pending</span></td>
                      </tr>
                      <tr>
                        <th scope="row"><a href="#">#2049</a></th>
                        <td>Ashleigh Langosh</td>
                        <td><a href="#" class="text-primary">At recusandae consectetur</a></td>
                        <td>$147</td>
                        <td><span class="badge bg-success">Approved</span></td>
                      </tr>
                      <tr>
                        <th scope="row"><a href="#">#2644</a></th>
                        <td>Angus Grady</td>
                        <td><a href="#" class="text-primar">Ut voluptatem id earum et</a></td>
                        <td>$67</td>
                        <td><span class="badge bg-danger">Rejected</span></td>
                      </tr>
                      <tr>
                        <th scope="row"><a href="#">#2644</a></th>
                        <td>Raheem Lehner</td>
                        <td><a href="#" class="text-primary">Sunt similique distinctio</a></td>
                        <td>$165</td>
                        <td><span class="badge bg-success">Approved</span></td>
                      </tr>
                    </tbody>
                  </table>

                </div>

              </div>
            </div><!-- End Recent Sales -->
          </div>
        </div><!-- End Left side columns -->

        <!-- Right side columns -->
        <div class="col-lg-4">

          <!-- Recent Activity -->
          

        

          
          <!-- Website Traffic -->
          <div class="card">
            <div class="card-body pb-0">
              <h5 class="card-title">Rekomendasi Tertinggi</h5>
              <div id="trafficChart" style="min-height: 400px;" class="echart"></div>
          
              <script>
                document.addEventListener("DOMContentLoaded", () => {
                  const chart = echarts.init(document.querySelector("#trafficChart"));
                  const chartData = @json($chartData);
          
                  chart.setOption({
                    tooltip: {
                      trigger: 'item'
                    },
                    legend: {
                      top: '5%',
                      left: 'center'
                    },
                    series: [{
                      name: 'Rekomendasi Makanan',
                      type: 'pie',
                      radius: ['40%', '70%'],
                      avoidLabelOverlap: false,
                      label: {
                        show: false,
                        position: 'center'
                      },
                      emphasis: {
                        label: {
                          show: true,
                          fontSize: '18',
                          fontWeight: 'bold'
                        }
                      },
                      labelLine: {
                        show: false
                      },
                      data: chartData
                    }]
                  });
                });
              </script>
            </div>
          </div>
          
          
        



        </div><!-- End Right side columns -->

      </div>
    </section>
    

@endsection