@extends('admin.layouts.app')
@section('meta')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('content')
    <main class="flex-1 p-6 bg-white rounded-lg shadow">
        <!-- Header & Add button -->
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-2xl font-bold">Data Basis AHP</h2>
        </div>

        @if (session('success'))
            <div class="mb-4 p-3 bg-green-100 text-green-800 rounded">{{ session('success') }}</div>
        @endif

        <!-- Filter/Search bar (optional) -->
        <div class="flex justify-end mb-4">
            <div class="relative">
                <input id="searchInput" type="text" placeholder="Search..."
                    class="pl-8 pr-4 py-2 border rounded-lg bg-gray-100 w-64">
                <i class="bi bi-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
        </div>

        <!-- Table -->
        <table class="w-full border-collapse">
            <thead class="bg-gray-50">
                <tr class="border-b">
                    <th class="p-3 text-left">No</th>
                    <th class="p-3 text-left">Mapel</th>
                    <th class="p-3 text-left">Nilai CF Terisi</th>
                    <th class="p-3 text-left">Action</th>
                </tr>
            </thead>
            <tbody id="tableBody">
                @foreach($mapels as $mapel)
                    <tr class="border-b hover:bg-gray-50">
                        <td class="p-3">{{ $loop->iteration }}</td>
                        <td class="p-3">{{ $mapel->nama }}</td>
                        @php
                            $totalJurusan = $jurusans->count();
                            $terisi = $items->where('mapel_id', $mapel->id)->count();
                            $persentase = $totalJurusan > 0 ? ($terisi / $totalJurusan) * 100 : 0;
                        @endphp
                        <td class="p-3">
                            {{ number_format($persentase, 0) }}%
                        </td>
                        <td class="p-3 flex space-x-2">
                            <button onclick='openEditModal({{ json_encode($mapel) }}, @json($items))'
                                class="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded-lg flex items-center">
                                <i class="bi bi-pencil-square mr-1"></i> Edit
                            </button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <!-- Pagination -->
        <div class="mt-4">{{ $mapels->links() }}</div>
    </main>

    <!-- Modal Add/Edit -->
    <div id="modalTambah" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white shadow-2xl w-full max-w-md p-6 max-h-[80vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-4">
                <h2 id="modalTitle" class="text-xl font-semibold">Tambah Basis AHP</h2>
                <button type="button" id="btnCloseModal" class="text-gray-500 hover:text-red-500 text-xl font-bold">&times;</button>
            </div>
            <form id="formModal" method="POST" class="space-y-4">
                @csrf
                <input type="hidden" id="methodInput" name="_method" value="POST">

                <div>
                    <label class="block text-sm font-medium">Mapel</label>
                    <input id="mapelField" type="text" name="mapel_nama" readonly
                        class="mt-1 block w-full border rounded px-3 py-2 bg-gray-100 text-gray-700">
                </div>

                <div id="cfContainer" class="space-y-4 mt-4">
                    <!-- JS akan generate input jurusan + cf_value di sini -->
                </div>

                <div class="flex justify-end space-x-3 pt-4">
                    <button type="button" id="btnBatal"
                        class="px-4 py-2 rounded-lg font-medium hover:underline">Batal</button>
                    <button type="submit" id="submitBtn"
                        class="bg-blue hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center">
                        <i id="submitIcon" class="bi bi-check-lg mr-1"></i>
                        <span id="submitText">Simpan</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        const btnTambah = document.getElementById('btnTambah');
        const modal = document.getElementById('modalTambah');
        const btnBatal = document.getElementById('btnBatal');
        const modalTitle = document.getElementById('modalTitle');
        const jurusans = @json($jurusans);

        btnBatal.addEventListener('click', () => modal.classList.add('hidden'));

        document.getElementById('btnCloseModal').addEventListener('click', function () {
            document.getElementById('modalTambah').classList.add('hidden');
        });

        function openEditModal(mapel, allItems) {
            // Set mapel field
            document.getElementById('mapelField').value = mapel.nama;

            // Reset isian jurusan
            const container = document.getElementById('cfContainer');
            container.innerHTML = '';

            // Ambil item BasisAhp yang cocok dengan mapel ini
            const relatedItems = allItems.filter(item => item.mapel_id === mapel.id);

            jurusans.forEach(jurusan => {
                const existing = relatedItems.find(x => x.jurusan_id === jurusan.id);
                const cfValue = existing ? existing.cf_value : '';

                const field = `
                    <div class="grid grid-cols-12 gap-4 items-end mb-4">
                        <!-- Label Jurusan -->
                        <div class="col-span-5">
                            <label class="block text-sm font-medium">Jurusan</label>
                            <input type="text" readonly value="${jurusan.nama}" class="mt-1 block w-full border rounded px-3 py-2 bg-gray-100">
                            <input type="hidden" name="cf_values[${jurusan.id}]" value="${cfValue}" id="cfValue-${jurusan.id}">
                        </div>

                        <!-- Label CF Value -->
                        <div class="col-span-5">
                            <label class="block text-sm font-medium">CF Value</label>
                            <input type="number" step="any" name="cf_values[${jurusan.id}]" value="${cfValue}"
                            class="mt-1 block w-full border rounded px-3 py-2 ${cfValue === '' ? 'border-red-500' : ''}"" required>
                        </div>

                        <!-- Tombol Delete -->
                        <div class="col-span-2 flex items-end">
                            <a href="/admin/basis-ahp/delete/${mapel.id}/${jurusan.id}"
                                onclick="return confirm('Yakin ingin menghapus data ini?')"
                                class="text-red-500 hover:text-red-700">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                `;
                container.innerHTML += field;
            });

            // Show modal
            document.getElementById('modalTambah').classList.remove('hidden');

            // Ganti form action dan method jika perlu (edit vs create)
            document.getElementById('formModal').action = '/admin/basis-ahp/' + mapel.id;
            document.getElementById('methodInput').value = 'PUT';
            document.getElementById('modalTitle').textContent = 'Edit Basis AHP';
        }

        @if ($errors->any())
            modal.classList.remove('hidden');
        @endif
    </script>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Live search filter
            const searchInput = document.getElementById('searchInput');
            const rows = document.querySelectorAll('table tbody tr');
            searchInput.addEventListener('input', () => {
                const term = searchInput.value.toLowerCase().trim();
                rows.forEach(row => row.style.display = row.innerText.toLowerCase().includes(term) ? '' :
                    'none');
            });
        });
    </script>
@endpush