@extends('layout.app')
@section('content')

<div class="pagetitle">
    <h1>Matriks Perbandingan</h1>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admindash') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('perbandingan') }}">Perbandingan Kriteria</a></li>
        </ol>
    </nav>
</div><!-- End Page Title -->

<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="alert alert-info mt-4 rounded-4 shadow-sm" role="alert">
    <i class="fas fa-info-circle me-2"></i>
    <strong>Catatan:</strong>
    <ul class="mb-0 mt-2">
        <li>Lemak dan natrium adalah kriteria yang paling krusial untuk penderita jantung.</li>
        <li>Energi dan karbohidrat tetap diperhatikan, namun tidak seprioritas dua kriteria pertama.</li>
    </ul>
</div>


<section class="section">
    <div class="row">
        <div class="col-lg-12">

            

            <!-- Form input -->
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-4">Input Perbandingan Kriteria</h5>
                    <form method="POST" action="{{ route('sementara') }}">
                        @csrf
                        <div class="table-responsive">
                            <table class="table table-bordered text-center">
                                <thead>
                                    <tr>
                                        <th>Kriteria</th>
                                        @foreach ($kriterias as $k)
                                            <th>{{ $k->nama }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($kriterias as $i => $k1)
                                        <tr>
                                            <th>{{ $k1->nama }}</th>
                                            @foreach ($kriterias as $j => $k2)
                                                <td>
                                                    @if ($i == $j)
                                                        <input type="text" class="form-control text-center" value="1" disabled>
                                                    @elseif ($i < $j)
                                                        <select name="nilai[{{ $k1->id }}][{{ $k2->id }}]" class="form-select">
                                                            @for ($n = 1; $n <= 9; $n++)
                                                                <option value="{{ $n }}">{{ $n }}</option>
                                                            @endfor
                                                        </select>
                                                    @else
                                                        <input type="text" class="form-control text-center" value="-" disabled>
                                                    @endif
                                                </td>
                                            @endforeach
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="text-end mt-3">
                            <button type="submit" class="btn btn-warning">Proses (Tampilkan)</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Tabel hasil sementara -->
            @if(session('matriks'))
            <div class="card mt-4">
                <div class="card-body">
                    <h5 class="card-title">Matriks Perbandingan Sementara</h5>
                    <div class="table-responsive">
                        <table class="table table-bordered text-center">
                            <thead>
                                <tr>
                                    <th>Kriteria</th>
                                    @foreach ($kriterias as $k)
                                        <th>{{ $k->nama }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($kriterias as $baris)
                                    <tr>
                                        <th>{{ $baris->nama }}</th>
                                        @foreach ($kriterias as $kolom)
                                            <td>{{ number_format(session('matriks')[$baris->id][$kolom->id], 4) }}</td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Tombol trigger modal -->
                    <div class="text-end">
                        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#konfirmasiModal">
                            Simpan & Normalisasi
                        </button>
                    </div>

                    <!-- Modal konfirmasi -->
                    <div class="modal fade" id="konfirmasiModal" tabindex="-1" aria-labelledby="konfirmasiModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <form method="POST" action="{{ route('simpan.perbandingan') }}">
                                    @csrf
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="konfirmasiModalLabel">Konfirmasi Penyimpanan</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                                    </div>
                                    <div class="modal-body">
                                        Apakah Anda yakin data perbandingan ini sudah benar dan ingin disimpan untuk proses normalisasi?
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                        <button type="submit" class="btn btn-primary">Ya, Simpan</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- End Modal -->

                </div>
            </div>
            @endif

        </div>
    </div>
</section>

@endsection