@extends('Layouts.app')

@section('content')
<main class="flex-1 p-6 space-y-6">

    {{-- Alert Error --}}
    @if($errors->any())
        <div class="mb-4 p-3 rounded bg-red-100 text-red-800">
            <ul>
                @foreach($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="bg-white p-6 rounded-xl shadow">
        <h2 class="text-2xl font-semibold text-gray-800 mb-4">
            {{ isset($course) ? 'Edit Course' : 'Tambah Course' }}
        </h2>

        <form action="{{ isset($course) ? route('akademik.update', $course->id) : route('akademik.simpan') }}"
              method="POST" class="space-y-4">
            @csrf
            @if(isset($course))
                @method('PUT')
            @endif

            {{-- Dosen --}}
            <div>
                <label class="block text-sm font-medium text-gray-700">Nama Dosen</label>
                <select name="lecturer_name" class="w-full border rounded-lg p-2 select2" required>
                    <option value="">-- Pilih Dosen --</option>
                    @foreach($dosens as $dosen)
                        <option value="{{ $dosen->nama }}" {{ old('lecturer_name', $course->lecturer_name ?? '') == $dosen->nama ? 'selected' : '' }}>
                            {{ $dosen->nama }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Jurusan --}}
            <div>
                <label class="block text-sm font-medium text-gray-700">Jurusan</label>
                <select name="id_jurusan" id="jurusan" class="w-full border rounded-lg p-2 select2" required>
                    <option value="">-- Pilih Jurusan --</option>
                    @foreach($jurusans as $jurusan)
                        <option value="{{ $jurusan->id }}"
                            {{ old('id_jurusan', $course->id_jurusan ?? '') == $jurusan->id ? 'selected' : '' }}>
                            {{ $jurusan->nama }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Mata Kuliah --}}
            <div>
                <label class="block text-sm font-medium text-gray-700">Mata Kuliah</label>
                <select name="title" id="matakuliah" class="w-full border rounded-lg p-2 select2" required>
                    <option value="">-- Pilih Mata Kuliah --</option>
                </select>
            </div>

            
<div class="mt-4">
    <label class="block text-sm font-medium">Tahun Ajaran</label>
    <select name="th_ajaran" id="th_ajaran" class="w-full border rounded px-3 py-2" required>
        <option value="">-- Pilih Tahun Ajaran --</option>
        @php
            $startYear = 2018; 
            $endYear = date('Y') + 2;
            
            // Get the value from old input or the database
            $selectedThAjaran = old('th_ajaran', ($course->semester ?? '') . ' ' . ($course->academic_year ?? ''));
        @endphp

        @for($tahun = $startYear; $tahun <= $endYear; $tahun++)
            <optgroup label="Tahun {{ $tahun }}">
                <option value="{{ "Ganjil $tahun/" . ($tahun+1) }}"
                    {{ $selectedThAjaran == "Ganjil $tahun/" . ($tahun+1) ? 'selected' : '' }}>
                    Ganjil {{ $tahun }}/{{ $tahun+1 }}
                </option>

                <option value="{{ "Genap $tahun/" . ($tahun+1) }}"
                    {{ $selectedThAjaran == "Genap $tahun/" . ($tahun+1) ? 'selected' : '' }}>
                    Genap {{ $tahun }}/{{ $tahun+1 }}
                </option>
            </optgroup>
        @endfor
    </select>
</div>
            {{-- Kode MK --}}
            <div>
                <label class="block text-sm font-medium text-gray-700">Kode Mata Kuliah</label>
                <input type="text" id="kode_mk" name="code"
                       value="{{ old('code', $course->code ?? '') }}"
                       class="w-full border rounded-lg p-2 bg-gray-100 cursor-not-allowed" readonly required>
            </div>

            <hr class="my-6 border-gray-200">

            {{-- Bobot Nilai Dinamis --}}
            <div class="mt-8">
                <h3 class="text-xl font-semibold text-gray-800 mb-2">Bobot Nilai (Opsional)</h3>

                <div id="bobot-container" class="space-y-4">
                    @if(isset($course) && $course->bobot->isNotEmpty())
                        @foreach($course->bobot as $bobot)
                            <div class="flex items-center space-x-2 bobot-input-group">
                                <select name="nama_bobot[]" class="flex-grow border rounded-lg p-2" required>
                                    <option value="absensi" {{ $bobot->nama_bobot == 'absensi' ? 'selected' : '' }}>Absensi</option>
                                    <option value="tugas" {{ $bobot->nama_bobot == 'tugas' ? 'selected' : '' }}>Tugas</option>
                                    <option value="uts" {{ $bobot->nama_bobot == 'uts' ? 'selected' : '' }}>UTS</option>
                                    <option value="uas" {{ $bobot->nama_bobot == 'uas' ? 'selected' : '' }}>UAS</option>
                                    <option value="keaktifan" {{ $bobot->nama_bobot == 'keaktifan' ? 'selected' : '' }}>Keaktifan</option>
                                </select>
                                <input type="number" name="nilai_bobot[]" value="{{ $bobot->nilai_bobot }}" placeholder="Nilai (%)" class="w-24 border rounded-lg p-2 text-right" required>
                                <button type="button" class="remove-bobot text-red-500 hover:text-red-700">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 012 0v6a1 1 0 11-2 0V8z" clip-rule="evenodd" />
                                    </svg>
                                </button>
                            </div>
                        @endforeach
                    @endif
                </div>

                <div class="flex items-center justify-between mt-4">
                    <button type="button" id="add-bobot" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700">
                        Tambah Bobot
                    </button>
                    <p id="total-bobot" class="text-sm font-semibold text-gray-700">Total: 0%</p>
                </div>
            </div>

            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                {{ isset($course) ? 'Update' : 'Simpan' }}
            </button>
        </form>
    </div>
</main>
@endsection

{{-- jQuery + Select2 --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function () {
    $('.select2').select2();

    // Fungsi untuk memperbarui nilai kode mata kuliah
    function updateCode() {
        var kodeMk = $('#matakuliah').find(':selected').data('kode');
        var thAjaran = $('#th_ajaran').val();

        // Hanya proses jika kedua nilai ada
        if (kodeMk && thAjaran) {
            var thAjaranParts = thAjaran.split(' ');
            var semester = thAjaranParts[0]; // 'Ganjil' atau 'Genap'
            var academicYear = thAjaranParts[1]; // '2025/2026'

            // Ambil dua digit terakhir dari tahun akademik
            var startYear = academicYear.substring(2, 4);
            var endYear = academicYear.substring(6, 8);
            
            // Tentukan inisial semester
            var semesterInitial = semester === 'Ganjil' ? 'G' : (semester === 'Genap' ? 'E' : 'P');

            // Gabungkan menjadi kode unik baru
            var uniqueCode = `${kodeMk}-${semesterInitial}${startYear}${endYear}`;
            $('#kode_mk').val(uniqueCode);
        } else {
            $('#kode_mk').val('');
        }
    }

    // JavaScript untuk Mata Kuliah & Kode MK
    $('#jurusan').on('change', function () {
        var jurusanId = $(this).val();
        if (jurusanId) {
            $.ajax({
                url: '/akademik/get-matakuliah/' + jurusanId,
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    $('#matakuliah').empty().append('<option value="">-- Pilih Mata Kuliah --</option>');
                    $.each(data, function (key, mk) {
                        // Tambahkan atribut data-kode ke setiap opsi
                        let selected = "{{ old('title', $course->title ?? '') }}" == mk.judul_mk ? 'selected' : '';
                        $('#matakuliah').append('<option value="' + mk.judul_mk + '" data-kode="' + mk.kode_mk + '" ' + selected + '>' + mk.judul_mk + '</option>');
                    });
                    
                    // Setelah mata kuliah diisi, panggil updateCode untuk mengisi kode MK
                    updateCode();
                }
            });
        } else {
            $('#matakuliah').empty().append('<option value="">-- Pilih Mata Kuliah --</option>');
            $('#kode_mk').val('');
        }
    });

    // Panggil fungsi updateCode saat ada perubahan di Mata Kuliah atau Tahun Ajaran
    $('#matakuliah, #th_ajaran').on('change', function() {
        updateCode();
    });

    // Pemicu awal jika sudah ada nilai dari data lama atau edit
    if ($('#jurusan').val()) {
        $('#jurusan').trigger('change');
    }
    
    // Pemicu untuk kasus edit, di mana kode MK perlu diisi saat load
    // Karena kode MK saat edit sudah unik, kita tidak bisa langsung mengisinya
    // dengan data('kode') saja. Kita perlu memecah kode yang sudah ada.
    @if(isset($course))
        // Dapatkan bagian dasar kode dari uniqueCode
        var existingCode = "{{ $course->code }}";
        var baseCode = existingCode.split('-')[0];
        
        // Atur data-kode untuk opsi yang dipilih
        $('#matakuliah').find('option[value="{{ $course->title }}"]').data('kode', baseCode);

        // Panggil updateCode untuk mengisi kode MK
        updateCode();
    @endif


    // JavaScript untuk Bobot Dinamis (Logika sama seperti sebelumnya)
    const bobotContainer = $('#bobot-container');
    const totalBobotText = $('#total-bobot');
    
    function updateBobotTotal() {
        let total = 0;
        if (bobotContainer.children('.bobot-input-group').length > 0) {
            $('input[name="nilai_bobot[]"]').each(function() {
                total += parseInt($(this).val()) || 0;
            });
        }
        totalBobotText.text(`Total: ${total}%`);
        if (total === 100) {
            totalBobotText.removeClass('text-red-700').addClass('text-green-700');
        } else {
            totalBobotText.removeClass('text-green-700').addClass('text-red-700');
        }
    }
    
    // Fungsi untuk membuat HTML baris bobot baru
    function createBobotRowHtml(namaBobot = '', nilaiBobot = '') {
        const bobotOptions = [
            { value: '', text: '-- Pilih Nama Bobot --' },
            { value: 'absensi', text: 'Absensi' },
            { value: 'tugas', text: 'Tugas' },
            { value: 'uts', text: 'UTS' },
            { value: 'uas', text: 'UAS' },
            { value: 'keaktifan', text: 'Keaktifan' }
        ];
        let optionsHtml = '';
        bobotOptions.forEach(option => {
            const selected = (option.value === namaBobot) ? 'selected' : '';
            optionsHtml += `<option value="${option.value}" ${selected}>${option.text}</option>`;
        });
        return `
            <div class="flex items-center space-x-2 bobot-input-group">
                <select name="nama_bobot[]" class="flex-grow border rounded-lg p-2">
                    ${optionsHtml}
                </select>
                <input type="number" name="nilai_bobot[]" placeholder="Nilai (%)" value="${nilaiBobot}" class="w-24 border rounded-lg p-2 text-right">
                <button type="button" class="remove-bobot text-red-500 hover:text-red-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 012 0v6a1 1 0 11-2 0V8z" clip-rule="evenodd" />
                    </svg>
                </button>
            </div>
        `;
    }
    
    $('#add-bobot').click(function () {
        bobotContainer.append(createBobotRowHtml());
        updateBobotTotal();
    });
    
    $(document).on('click', '.remove-bobot', function () {
        $(this).closest('.bobot-input-group').remove();
        updateBobotTotal();
    });
    
    $(document).on('input', 'input[name="nilai_bobot[]"]', function () {
        updateBobotTotal();
    });
    
    @php
        $oldNamaBobot = old('nama_bobot', []);
        $oldNilaiBobot = old('nilai_bobot', []);
    @endphp
    
    @if (!empty($oldNamaBobot))
        @for ($i = 0; $i < count($oldNamaBobot); $i++)
            bobotContainer.append(createBobotRowHtml('{{ $oldNamaBobot[$i] }}', '{{ $oldNilaiBobot[$i] }}'));
        @endfor
    @else
        @if(isset($course) && $course->bobot->isNotEmpty())
        @else
            bobotContainer.append(createBobotRowHtml());
        @endif
    @endif
    
    updateBobotTotal();
});
</script>