<x-layout>
    <x-slot:title>{{ $title }}</x-slot>
    <div class="p-4">

        <div id="errorMessage" class="hidden flex items-center p-4 mb-4 text-sm text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800" role="alert">
            <svg class="shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
            </svg>
            <span class="sr-only">Info</span>
            <div>
                <span class="font-medium">Peringatan!</span> Semua kolom penilaian harus diisi terlebih dahulu.
            </div>
        </div>

    <form form id="penilaianForm" action="{{ route('penilaian.store') }}" method="POST">
        @csrf
        <div class="overflow-x-auto w-full">
            <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">No</th>
                        <th class="px-6 py-3">Nama Alternatif</th>
                        @foreach ($kriterias as $kriteria)
                            <th class="px-6 py-3">{{ $kriteria->nama_kriteria }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @forelse ($alternatifs as $index => $alternatif)
                        <tr class="bg-[#f9f9f9] border-b border-[#ddd] hover:bg-[#e2e2e2]">
                            <td class="px-6 py-4">{{ $index + 1 }}</td>
                            <td class="px-6 py-4">{{ $alternatif->nama_lahan }}</td>
                            @foreach ($kriterias as $kriteria)
                                <td class="px-6 py-4">
                                    <select name="penilaian[{{ $alternatif->id }}][{{ $kriteria->id }}]" class="w-full px-2 py-1 border rounded">
                                        <option value="">-- Pilih --</option>
                                        @foreach ($subKriterias->where('kriteria_id', $kriteria->id) as $sub)
                                            <option value="{{ $sub->id }}">{{ $sub->nama_sub_kriteria }}</option>
                                        @endforeach
                                    </select>
                                </td>
                            @endforeach
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ 2 + $kriterias->count() }}" class="text-center py-4 text-gray-500">Tidak ada data alternatif.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-6 text-right">
            <button type="submit" class="px-4 py-2 bg-[#388E3C] text-white rounded hover:bg-green-900">
                Simpan Penilaian
            </button>
        </div>
    </form>
</div>

<script>
    document.getElementById('penilaianForm').addEventListener('submit', function (e) {
        const selects = this.querySelectorAll('select[name^="penilaian"]');
        let isValid = true;

        selects.forEach(select => {
            if (select.value === '') {
                isValid = false;
                select.classList.add('border-red-500');
            } else {
                select.classList.remove('border-red-500');
            }
        });

        const errorDiv = document.getElementById('errorMessage');

        if (!isValid) {
            e.preventDefault();
            errorDiv.classList.remove('hidden');
            window.scrollTo({ top: 0, behavior: 'smooth' });
        } else {
            errorDiv.classList.add('hidden');
        }
    });
</script>



@if(session('success'))
                <div id="success-alert" class="flex items-center p-4 mb-4 text-sm text-green-800 border border-green-300 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800 mt-4" role="alert">
                    <svg class="shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
                    </svg>
                    <span class="sr-only">Info</span>
                    <div>
                        <span class="font-medium">{{ session('success') }}</span> 
                    </div>
                </div>

                <script>
                    setTimeout(function() {
                        // Fade out the success alert after 3 seconds
                        document.getElementById('success-alert').style.transition = 'opacity 1s';
                        document.getElementById('success-alert').style.opacity = '0';
                        
                        // After fade out, remove the alert from the DOM
                        setTimeout(function() {
                            document.getElementById('success-alert').remove();
                        }, 1000); // Wait for fade-out transition
                    }, 2000); // 3 seconds delay before fading out
                </script>
            @endif



</x-layout>
