@extends('layouts.app')

@section('title', 'Tambah Paket MK - SIAKAD')
@section('page-title', 'Tambah Paket Mata Kuliah')

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <div>
                    <h5 class="mb-0"><i class="bi bi-plus-circle me-2"></i>Form Paket Mata Kuliah</h5>
                    <small class="text-muted">Buat paket mata kuliah untuk semester tertentu</small>
                </div>
                <a href="{{ route('admin.paket-mk.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-arrow-left me-1"></i>Kembali
                </a>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.paket-mk.store') }}" method="POST" id="paketForm">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Nama Paket <span class="text-danger">*</span></label>
                                <input type="text" name="nama" class="form-control @error('nama') is-invalid @enderror"
                                    value="{{ old('nama') }}" placeholder="Contoh: Paket Semester 1" required>
                                @error('nama')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Program Studi <span class="text-danger">*</span></label>
                                <select name="prodi_id" id="prodiSelect" class="form-select @error('prodi_id') is-invalid @enderror" required>
                                    <option value="">-- Pilih Prodi --</option>
                                    @foreach($prodis as $prodi)
                                        <option value="{{ $prodi->id }}" {{ old('prodi_id') == $prodi->id ? 'selected' : '' }}>
                                            {{ $prodi->nama }} ({{ $prodi->jenjang }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('prodi_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Semester <span class="text-danger">*</span></label>
                                <select name="semester" id="semesterSelect" class="form-select @error('semester') is-invalid @enderror" required>
                                    <option value="">-- Pilih Semester --</option>
                                    @for($i = 1; $i <= 14; $i++)
                                        <option value="{{ $i }}" {{ old('semester') == $i ? 'selected' : '' }}>Semester {{ $i }}</option>
                                    @endfor
                                </select>
                                @error('semester')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Jenis <span class="text-danger">*</span></label>
                                <select name="tipe" class="form-select @error('tipe') is-invalid @enderror" required>
                                    <option value="wajib" {{ old('tipe') == 'wajib' ? 'selected' : '' }}>Wajib</option>
                                    <option value="pilihan" {{ old('tipe') == 'pilihan' ? 'selected' : '' }}>Pilihan</option>
                                </select>
                                @error('tipe')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">&nbsp;</label>
                                <div class="form-check">
                                    <input type="checkbox" name="is_active" id="is_active" class="form-check-input" checked>
                                    <label class="form-check-label" for="is_active">Aktif</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">
                    <h6><i class="bi bi-list-ul me-2"></i>Pilih Mata Kuliah</h6>

                    <div class="alert alert-info mb-3">
                        <i class="bi bi-info-circle me-2"></i>
                        Pilih program studi dan semester terlebih dahulu untuk menampilkan mata kuliah yang tersedia.
                    </div>

                    <div id="mkListContainer" class="d-none">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <span class="badge bg-primary" id="selectedCount">0</span>
                                <span class="text-muted">MK dipilih</span>
                                <span class="badge bg-success ms-2" id="totalSks">0</span>
                                <span class="text-muted ms-1">SKS</span>
                            </div>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-outline-secondary" onclick="pilihSemuaMk()">
                                    <i class="bi bi-check-all me-1"></i>Pilih Semua
                                </button>
                                <button type="button" class="btn btn-outline-secondary" onclick="resetMk()">
                                    <i class="bi bi-x-lg me-1"></i>Reset
                                </button>
                            </div>
                        </div>

                        <div class="table-responsive" style="max-height: 350px; overflow-y: auto;">
                            <table class="table table-sm table-hover">
                                <thead class="sticky-top bg-light">
                                    <tr>
                                        <th style="width: 50px;">
                                            <input type="checkbox" id="checkAllMk" class="form-check-input">
                                        </th>
                                        <th>Kode</th>
                                        <th>Mata Kuliah</th>
                                        <th>SKS</th>
                                        <th>Dosen</th>
                                    </tr>
                                </thead>
                                <tbody id="mkTableBody">
                                    <!-- Populated by JS -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div id="mkPlaceholder" class="text-center py-5 text-muted">
                        <i class="bi bi-arrow-up fs-1 d-block mb-2"></i>
                        <span>Pilih Prodi dan Semester terlebih dahulu</span>
                    </div>

                    <input type="hidden" name="matakuliah_ids" id="matakuliahIds">

                    <div class="d-flex gap-2 mt-4">
                        <button type="submit" class="btn btn-success">
                            <i class="bi bi-check-lg me-2"></i>Simpan Paket
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Petunjuk</h5>
            </div>
            <div class="card-body">
                <ol class="mb-0">
                    <li class="mb-2">Pilih <strong>Program Studi</strong> dan <strong>Semester</strong></li>
                    <li class="mb-2">Sistem akan menampilkan mata kuliah yang sesuai</li>
                    <li class="mb-2">Pilih mata kuliah yang akan dimasukkan ke paket</li>
                    <li class="mb-2">Paket bisa <strong>Wajib</strong> (harus diambil) atau <strong>Pilihan</strong></li>
                    <li>Klik <strong>Simpan Paket</strong> untuk menyimpan</li>
                </ol>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const allMatakuliah = @json($matakuliahs);
let selectedMk = new Set();

document.getElementById('prodiSelect').addEventListener('change', loadMk);
document.getElementById('semesterSelect').addEventListener('change', loadMk);

function loadMk() {
    const prodiId = document.getElementById('prodiSelect').value;
    const semester = document.getElementById('semesterSelect').value;
    const container = document.getElementById('mkListContainer');
    const placeholder = document.getElementById('mkPlaceholder');

    if (!prodiId || !semester) {
        container.classList.add('d-none');
        placeholder.classList.remove('d-none');
        return;
    }

    placeholder.classList.add('d-none');
    container.classList.remove('d-none');

    const filteredMk = allMatakuliah.filter(mk =>
        mk.prodi_id == prodiId && mk.semester == semester
    );

    const tbody = document.getElementById('mkTableBody');
    if (filteredMk.length === 0) {
        tbody.innerHTML = '<tr><td colspan="5" class="text-center py-4 text-muted">Tidak ada mata kuliah untuk semester ini</td></tr>';
        return;
    }

    tbody.innerHTML = filteredMk.map(mk => `
        <tr>
            <td>
                <input type="checkbox" class="form-check-input mk-checkbox"
                    value="${mk.id}" data-sks="${mk.sks}"
                    ${selectedMk.has(mk.id) ? 'checked' : ''}>
            </td>
            <td><span class="badge bg-secondary">${mk.kode}</span></td>
            <td><strong>${mk.nama}</strong></td>
            <td><span class="badge bg-warning text-dark">${mk.sks}</span></td>
            <td class="text-muted">${mk.dosen?.nama || '-'}</td>
        </tr>
    `).join('');

    initCheckboxEvents();
}

function initCheckboxEvents() {
    document.getElementById('checkAllMk').addEventListener('change', function() {
        document.querySelectorAll('.mk-checkbox:not(:disabled)').forEach(cb => cb.checked = this.checked);
        updateSelected();
    });

    document.querySelectorAll('.mk-checkbox').forEach(cb => {
        cb.addEventListener('change', function() {
            updateSelected();
            if (!this.checked) {
                document.getElementById('checkAllMk').checked = false;
            }
        });
    });
}

function updateSelected() {
    const checkboxes = document.querySelectorAll('.mk-checkbox:checked');
    selectedMk = new Set(Array.from(checkboxes).map(cb => parseInt(cb.value)));

    document.getElementById('selectedCount').textContent = selectedMk.size;

    let totalSks = 0;
    checkboxes.forEach(cb => {
        totalSks += parseInt(cb.dataset.sks) || 0;
    });
    document.getElementById('totalSks').textContent = totalSks;
}

function pilihSemuaMk() {
    document.querySelectorAll('.mk-checkbox:not(:disabled)').forEach(cb => cb.checked = true);
    updateSelected();
}

function resetMk() {
    document.querySelectorAll('.mk-checkbox').forEach(cb => cb.checked = false);
    updateSelected();
}

document.getElementById('paketForm').addEventListener('submit', function(e) {
    const selected = Array.from(selectedMk);
    if (selected.length === 0) {
        e.preventDefault();
        alert('Pilih minimal satu mata kuliah!');
        return false;
    }
    document.getElementById('matakuliahIds').value = JSON.stringify(selected);
});
</script>
@endpush