@extends('admin.layouts.app')

@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>
            <button id="btnTambah" class="bg-teal-500 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="bi bi-plus-lg mr-2"></i> Add
            </button>
        </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">Jurusan</th>
                    <th class="p-3 text-left">CF Value</th>
                    <th class="p-3 text-left">Action</th>
                </tr>
            </thead>
            <tbody id="tableBody">
                @foreach ($items as $i => $item)
                    <tr class="border-b hover:bg-gray-50">
                        <td class="p-3">{{ $i + $items->firstItem() }}</td>
                        <td class="p-3">{{ $item->mapel->nama }}</td>
                        <td class="p-3">{{ $item->jurusan->nama }}</td>
                        <td class="p-3">{{ $item->cf_value }}</td>
                        <td class="p-3 flex space-x-2">
                            <button onclick='openEditModal(@json($item))'
                                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>
                            <form action="{{ route('admin.basis-ahp.destroy', $item->id) }}" method="POST"
                                onsubmit="return confirm('Yakin ingin menghapus?')">
                                @csrf @method('DELETE')
                                <button type="submit"
                                    class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded-lg flex items-center">
                                    <i class="bi bi-trash-fill mr-1"></i> Delete
                                </button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <!-- Pagination -->
        <div class="mt-4">{{ $items->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 rounded-2xl shadow-2xl w-full max-w-md p-6">
            <h2 id="modalTitle" class="text-xl font-semibold mb-4">Tambah Basis AHP</h2>
            <form id="formModal" action="{{ route('admin.basis-ahp.store') }}" 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>
                    <select id="mapelField" name="mapel_id" class="mt-1 block w-full border rounded px-3 py-2">
                        @foreach ($mapels as $m)
                            <option value="{{ $m->id }}">{{ $m->nama }}</option>
                        @endforeach
                    </select>
                    @error('mapel_id')
                        <p class="text-red-600 text-sm">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium">Jurusan</label>
                    <select id="jurusanField" name="jurusan_id" class="mt-1 block w-full border rounded px-3 py-2">
                        @foreach ($jurusans as $j)
                            <option value="{{ $j->id }}">{{ $j->nama }}</option>
                        @endforeach
                    </select>
                    @error('jurusan_id')
                        <p class="text-red-600 text-sm">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium">CF Value</label>
                    <input id="cfField" type="number" step="any" name="cf_value"
                        class="mt-1 block w-full border rounded px-3 py-2" required>
                    @error('cf_value')
                        <p class="text-red-600 text-sm">{{ $message }}</p>
                    @enderror
                </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 formModal = document.getElementById('formModal');
        const methodInput = document.getElementById('methodInput');
        const mapelField = document.getElementById('mapelField');
        const jurusanField = document.getElementById('jurusanField');
        const cfField = document.getElementById('cfField');
        const submitText = document.getElementById('submitText');
        const submitIcon = document.getElementById('submitIcon');

        btnTambah.addEventListener('click', () => {
            modalTitle.textContent = 'Tambah Basis AHP';
            formModal.action = '{{ route('admin.basis-ahp.store') }}';
            methodInput.value = 'POST';
            mapelField.selectedIndex = 0;
            jurusanField.selectedIndex = 0;
            cfField.value = '';
            submitText.textContent = 'Simpan';
            submitIcon.className = 'bi bi-check-lg mr-1';
            modal.classList.remove('hidden');
        });

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

        function openEditModal(item) {
            modalTitle.textContent = 'Edit Basis AHP';
            formModal.action = `/admin/basis-ahp/${item.id}`;
            methodInput.value = 'PUT';
            mapelField.value = item.mapel_id;
            jurusanField.value = item.jurusan_id;
            cfField.value = item.cf_value;
            submitText.textContent = 'Update';
            submitIcon.className = 'bi bi-pencil-fill mr-1';
            modal.classList.remove('hidden');
        }

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