<x-layout>
    <x-slot:title>{{ $title }}</x-slot>
    <header class="mb-6">
    <h2 class="text-2xl font-bold text-gray-900">Tabel Analisa</h2>
    <p class="text-sm text-gray-700">
        Tabel ini menunjukkan nilai bobot dari setiap subkriteria yang dipilih oleh masing-masing alternatif (lahan). Nilai ini berasal dari klasifikasi seperti Sangat Baik hingga Tidak Baik.
    </p>
    </header>
    <div class="overflow-x-auto w-full mb-6">
    <table class="w-full text-sm text-left text-[#1B5E20] border border-[#C8E6C9]">
    <thead class="text-xs text-white uppercase bg-[#388E3C]">
        <tr>
            <th class="px-6 py-3">Alternatif</th>
            @foreach ($kriterias as $krit)
                <th class="px-6 py-3">{{ $krit->nama_kriteria }}</th> <!-- Tampilkan nama kriteria -->
            @endforeach
        </tr>
    </thead>
    <tbody>
        @forelse ($analisa as $item)
            <tr class="bg-[#f9f9f9] border-b border-[#ddd] hover:bg-[#e2e2e2]">
                <td class="px-6 py-4">{{ $item['nama_lahan'] }}</td>
                @foreach ($kriterias as $krit)
                    <td class="px-6 py-4">{{ $item[$krit->nama_kriteria] }}</td> <!-- Tampilkan nilai kriteria -->
                @endforeach
            </tr>
        @empty
            <tr>
                <td colspan="{{ count($kriterias) + 1 }}" class="text-center py-4 text-gray-500">Data analisa kosong.</td>
            </tr>
        @endforelse
    </tbody>
</table>

<hr class="my-6">
<header class="mb-6 mt-10">
    <h2 class="text-2xl font-bold text-gray-900">Tabel Normalisasi</h2>
    <p class="text-sm text-gray-700">
        Tabel normalisasi digunakan untuk menyamakan skala antar kriteria, dengan cara membagi nilai setiap alternatif terhadap nilai maksimum atau minimum tergantung jenis kriterianya (benefit atau cost).
    </p>
</header>
<table class="w-full text-sm text-left text-[#1B5E20] border border-[#C8E6C9]">
    <thead class="text-xs text-white uppercase bg-[#388E3C]">
        <tr>
            <th class="px-6 py-3">Alternatif</th>
            @foreach ($kriterias as $krit)
                <th class="px-6 py-3">{{ $krit->nama_kriteria }}</th> <!-- Tampilkan nama kriteria -->
            @endforeach
        </tr>
    </thead>
    <tbody>
        @forelse ($normalisasi as $item)
            <tr class="bg-[#f9f9f9] border-b border-[#ddd] hover:bg-[#e2e2e2]">
                <td class="px-6 py-4">{{ $item['nama_lahan'] }}</td>
                @foreach ($kriterias as $krit)
                    <td class="px-6 py-4">{{ $item[$krit->nama_kriteria] }}</td> <!-- Tampilkan nilai normalisasi -->
                @endforeach
            </tr>
        @empty
            <tr>
                <td colspan="{{ count($kriterias) + 1 }}" class="text-center py-4 text-gray-500">Data normalisasi kosong.</td>
            </tr>
        @endforelse
    </tbody>
</table>

<hr class="my-6">
<header class="mb-6 mt-10">
    <h2 class="text-2xl font-bold text-gray-900">Tabel Perangkingan</h2>
    <p class="text-sm text-gray-700">
        Tabel ini menampilkan hasil akhir berupa skor dan peringkat dari setiap alternatif berdasarkan total nilai tertimbang hasil normalisasi.
    </p>
</header>

<table class="w-full text-sm text-left text-[#1B5E20] border border-[#C8E6C9]">
    <thead class="text-xs text-white uppercase bg-[#388E3C]">
        <tr>
            <th class="px-6 py-3">Ranking</th>
            <th class="px-6 py-3">Alternatif</th>
            <th class="px-6 py-3">Skor</th>
            <th class="px-6 py-3">Aksi</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($ranking as $index => $item)
            @php
                $emoji = match($item['ranking']) {
                    1 => '🥇',
                    2 => '🥈',
                    3 => '🥉',
                    default => '',
                };
                $modalId = 'modal-' . $index;
            @endphp
            <tr class="bg-[#f9f9f9] border-b border-[#ddd] hover:bg-[#e2e2e2]">
                <td class="px-6 py-4">{{ $item['ranking'] }} {{ $emoji }}</td>
                <td class="px-6 py-4">{{ $item['nama_lahan'] }}</td>
                <td class="px-6 py-4">{{ $item['nilai_akhir'] }}</td>
                <td class="px-6 py-4">
                    <button data-modal-target="detailModal-{{ $item['nama_lahan'] }}" data-modal-toggle="detailModal-{{ $item['nama_lahan'] }}" class="text-white bg-green-700 hover:bg-green-800 font-medium rounded-lg text-sm px-4 py-2 text-center">
                        Lihat Detail
                    </button>
                </td>
            </tr>

            <!-- Modal Detail -->
            <div id="detailModal-{{ $item['nama_lahan'] }}" tabindex="-1" aria-hidden="true" class="hidden fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto inset-0 h-[calc(100%-1rem)] max-h-full justify-center items-center">
                <div class="relative w-full max-w-2xl max-h-full">
                    <div class="relative bg-[#388E3C] rounded-lg shadow">
                        <!-- Header -->
                        <div class="flex items-center justify-between p-4 border-b border-gray-600 rounded-t">
                            <h3 class="text-xl font-semibold text-white">
                                Detail Rekomendasi: {{ $item['nama_lahan'] }}
                            </h3>
                            <button type="button" class="text-gray-400 bg-transparent hover:text-white" data-modal-hide="detailModal-{{ $item['nama_lahan'] }}">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                                </svg>
                            </button>
                        </div>

                        <!-- Isi Modal -->
                        <div class="p-6 space-y-4 bg-white text-gray-800 rounded-b">
                            @if(isset($item['rekomendasi']) && count($item['rekomendasi']) > 0)
                                <ul class="list-disc pl-5 space-y-2">
                                    @foreach($item['rekomendasi'] as $rekomendasi)
                                        <li>{{ $rekomendasi }}</li>
                                    @endforeach
                                </ul>
                            @else
                                <p>Tidak ada rekomendasi khusus untuk alternatif ini.</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

        @endforeach
    </tbody>
</table>


<div class="mt-6 text-right flex justify-end gap-4">
    <!-- Tombol Simpan ke Riwayat -->
    <form action="{{ route('perhitungan.simpanHistoris') }}" method="POST" class="inline-block">
        @csrf
        @foreach ($ranking as $index => $hasil)
            <input type="hidden" name="hasil[{{ $index }}][nama_lahan]" value="{{ $hasil['nama_lahan'] }}">
            <input type="hidden" name="hasil[{{ $index }}][nilai_akhir]" value="{{ $hasil['nilai_akhir'] }}">
        @endforeach

        <button type="submit" 
            class="px-4 py-2 bg-[#388E3C] text-white rounded hover:bg-green-900 transition">
            Simpan ke Riwayat
        </button>
    </form>

    <!-- Tombol Hapus Semua Data -->
    <button 
        type="button" 
        class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-800 transition"
        data-modal-target="hapusModalSemua" data-modal-toggle="hapusModalSemua">
        Hapus Semua Data
    </button>
</div>

<!-- Modal Konfirmasi Hapus Semua -->
<div id="hapusModalSemua" tabindex="-1" aria-hidden="true"
    class="hidden fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full">
    <div class="relative w-full max-w-md h-full md:h-auto">
        <div class="relative bg-[#388E3C] rounded-lg shadow">
            <div class="p-6 text-center">
                <svg class="mx-auto mb-4 w-12 h-12 text-gray-300"
                    fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M6 18L18 6M6 6l12 12"></path>
                </svg>
                <h3 class="mb-5 text-lg font-normal text-white">
                    Yakin ingin menghapus semua data alternatif dan penilaian?
                </h3>
                <form action="{{ route('alternatif.destroyAll') }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                        class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300
                            font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
                        Ya, Hapus Semua
                    </button>
                    <button type="button"
                        class="text-black bg-white hover:bg-gray-300 focus:ring-4 focus:outline-none focus:ring-gray-200
                            rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900"
                        data-modal-hide="hapusModalSemua">
                        Batal
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>




</div>



</x-layout>