@extends('pmb.layout')

@section('title', 'Pilih Program Studi')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-8 col-lg-7">
        <div class="pmb-card">
            <div class="pmb-card-header">
                <h5><i class="fas fa-graduation-cap me-2"></i>Pilih Program Studi</h5>
            </div>
            <div class="pmb-card-body">
                <form method="POST" action="{{ route('pmb.step.update', 'pilih_prodi') }}">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-12">
                            <label class="form-label-modern">Fakultas <span class="text-danger">*</span></label>
                            <select name="fakultas_id" id="fakultas_id" class="form-control-modern" required onchange="filterProdi()">
                                <option value="">Pilih Fakultas</option>
                                @foreach($fakultas as $f)
                                    <option value="{{ $f->id }}" {{ old('fakultas_id', $pendaftaran->fakultas_id) == $f->id ? 'selected' : '' }}>
                                        {{ $f->nama_fakultas }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label-modern">Program Studi <span class="text-danger">*</span></label>
                            <select name="prodi_id" id="prodi_id" class="form-control-modern" required>
                                <option value="">Pilih Program Studi</option>
                                @foreach($prodi as $p)
                                    <option value="{{ $p->id }}" data-fakultas="{{ $p->fakultas_id }}" 
                                            {{ old('prodi_id', $pendaftaran->prodi_id) == $p->id ? 'selected' : '' }}>
                                        {{ $p->nama_prodi }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label-modern">Jenjang <span class="text-danger">*</span></label>
                            <select name="jenjang" class="form-control-modern" required>
                                <option value="">Pilih</option>
                                <option value="D3" {{ old('jenjang', $pendaftaran->jenjang) === 'D3' ? 'selected' : '' }}>D3</option>
                                <option value="S1" {{ old('jenjang', $pendaftaran->jenjang) === 'S1' ? 'selected' : '' }}>S1</option>
                                <option value="S2" {{ old('jenjang', $pendaftaran->jenjang) === 'S2' ? 'selected' : '' }}>S2</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label-modern">Kelas <span class="text-danger">*</span></label>
                            <select name="kelas" class="form-control-modern" required>
                                <option value="reguler" {{ old('kelas', $pendaftaran->kelas) === 'reguler' ? 'selected' : '' }}>Reguler</option>
                                <option value="non_reguler" {{ old('kelas', $pendaftaran->kelas) === 'non_reguler' ? 'selected' : '' }}>Non Reguler</option>
                            </select>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between mt-4">
                        <a href="{{ route('pmb.step', 'data_sekolah') }}" class="btn btn-undarma-outline">
                            <i class="fas fa-arrow-left me-2"></i>Kembali
                        </a>
                        <button type="submit" class="btn btn-undarma-gold">
                            <i class="fas fa-save me-2"></i>Simpan & Lanjutkan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function filterProdi() {
    const fakultasId = document.getElementById('fakultas_id').value;
    const prodiSelect = document.getElementById('prodi_id');
    const options = prodiSelect.querySelectorAll('option');
    
    options.forEach(opt => {
        if (opt.value === '') {
            opt.style.display = '';
            return;
        }
        if (!fakultasId || opt.dataset.fakultas === fakultasId) {
            opt.style.display = '';
        } else {
            opt.style.display = 'none';
        }
    });
    
    prodiSelect.value = '';
}

// Run on page load
filterProdi();
</script>
@endpush