@extends('layouts.app')

@section('content')
<h2 class="text-xl font-bold mb-4">Proses Kartu Rencana Studi (KRS)</h2>

<form action="{{ route('krs.store') }}" method="POST" class="bg-white p-6 rounded shadow space-y-4" x-data="{ selected: [] }">
    @csrf

    <div class="bg-blue-100 p-4 rounded space-y-1">
        <p><span class="font-semibold">Nama:</span> {{ $mahasiswa->nama }}</p>
        <p><span class="font-semibold">NIM:</span> {{ $mahasiswa->nim }}</p>
        <p><span class="font-semibold">Prodi:</span> {{ $mahasiswa->prodi->nama_prodi ?? '-' }}</p>
        <p><span class="font-semibold">Semester:</span> {{ $mahasiswa->semester }}</p>
        <p><span class="font-semibold">Kelas:</span> {{ $mahasiswa->kelas }}</p>
    </div>

    <div>
        <label for="tahun" class="font-semibold block mb-1">Pilih Tahun Akademik:</label>
        <select name="tahun" id="tahun" class="w-full border p-2 rounded">
            <option value="">-- Pilih Tahun --</option>
            <option value="2024/2025">2024/2025</option>
            <option value="2025/2026">2025/2026</option>
        </select>
    </div>

    <div>
        <label class="font-semibold block mb-1">Pilih Mata Kuliah:</label>
        <div class="space-y-2 max-h-64 overflow-y-auto border p-2 rounded">
            @forelse($matakuliahs as $mk)
            <div class="flex items-center space-x-2">
                <input type="checkbox" name="matakuliah[]" value="{{ $mk->id_matkul }}"
                    x-model="selected" class="accent-green-600"
                    data-kode-mk="{{ $mk->kode_mk }}"
                    data-nama-mk="{{ $mk->nama_matkul }}"
                    data-sks="{{ $mk->sks }}"
                    data-jadwal="{{ $mk->jadwal }}"
                    data-kelas="{{ $mahasiswa->kelas }}">

                <input type="hidden" name="kode_matkul[{{ $mk->id_matkul }}]" value="{{ $mk->kode_mk }}">
                <input type="hidden" name="nama_matkul[{{ $mk->id_matkul }}]" value="{{ $mk->nama_matkul }}">
                <input type="hidden" name="sks[{{ $mk->id_matkul }}]" value="{{ $mk->sks }}">
                <input type="hidden" name="jadwal[{{ $mk->id_matkul }}]" value="{{ $mk->jadwal }}">
                <input type="hidden" name="kelas[{{ $mk->id_matkul }}]" value="{{ $mahasiswa->kelas }}">
                <span>{{ $mk->nama_matkul }}</span>
            </div>
            @empty
            <p class="text-red-600">Tidak ada matakuliah tersedia.</p>
            @endforelse
        </div>
    </div>

    <!-- Live Preview -->
    <template x-if="selected.length > 0">
        <div class="bg-gray-100 p-4 rounded shadow">
            <h3 class="font-semibold mb-2">Mata Kuliah yang Dipilih:</h3>
            <table class="w-full border text-sm">
                <thead class="bg-green-700 text-white">
                    <tr>
                        <th class="border p-2">No</th>
                        <th class="border p-2">Kode MK</th>
                        <th class="border p-2">Nama Matakuliah</th>
                        <th class="border p-2">SKS</th>
                        <th class="border p-2">Kelas</th>
                        <th class="border p-2">Jadwal</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="(value, index) in selected" :key="value">
                        <tr>
                            <td class="border p-2 text-center" x-text="index + 1"></td>
                            <td class="border p-2 text-center" x-text="document.querySelector('input[value=\'' + value + '\']').dataset.kodeMk"></td>
                            <td class="border p-2" x-text="document.querySelector('input[value=\'' + value + '\']').dataset.namaMk"></td>
                            <td class="border p-2 text-center" x-text="document.querySelector('input[value=\'' + value + '\']').dataset.sks"></td>
                            <td class="border p-2 text-center" x-text="document.querySelector('input[value=\'' + value + '\']').dataset.kelas"></td>
                            <td class="border p-2 text-center" x-text="document.querySelector('input[value=\'' + value + '\']').dataset.jadwal"></td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </template>

    <button type="submit" class="bg-blue-700 text-white px-4 py-2 rounded hover:bg-blue-800 mt-4">Simpan KRS</button>
</form>

<!-- AlpineJS -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
@endsection