@extends('layouts.app')
@section('title','Tambah Jadwal')
@section('topbar-title','Tambah Jadwal')

@section('content')
<div class="page-header d-flex align-items-center justify-content-between">
    <div class="page-title">Tambah Jadwal Kuliah</div>
    <a href="{{ route('admin.jadwal.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left me-1"></i>Kembali
    </a>
</div>

<div class="row justify-content-center">
<div class="col-lg-7">
<div class="content-card">
    <div class="content-card-body">
        @if($errors->any())
        <div class="alert alert-danger py-3 mb-3" style="background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px;">
            <div class="fw-bold mb-2" style="color: #b91c1c;">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>Gagal Menambahkan Jadwal
            </div>
            @foreach($errors->all() as $error)
            <div style="font-size: 0.85rem; color: #b91c1c; margin-bottom: 4px;">
                {{ $error }}
            </div>
            @endforeach
        </div>
        @endif

        {{-- Info matkul terpilih --}}
        <div id="matkulInfo" class="alert py-2 mb-3" style="display:none;font-size:.8rem;background:rgba(20,184,166,.08);border:1px solid rgba(20,184,166,.2);color:#0d9488;border-radius:10px;"></div>

        <form method="POST" action="{{ route('admin.jadwal.store') }}">
            @csrf
            <div class="row g-3">
                <div class="col-12">
                    <label class="form-label fw-semibold">Mata Kuliah <span class="text-danger">*</span></label>
                    <select name="matkul_id" class="form-select" id="matkulSelect" required>
                        <option value="">-- Pilih Mata Kuliah --</option>
                        @foreach($matkulList as $mk)
                        <option value="{{ $mk->id }}"
                                data-periode="{{ $mk->periodeLabel() }}"
                                data-semester="{{ $mk->semester ?? '-' }}"
                                data-dosen="{{ $mk->dosen->nama ?? '-' }}"
                                {{ old('matkul_id')==$mk->id ? 'selected' : '' }}>
                            [{{ $mk->kode }}] {{ $mk->nama }} — {{ $mk->dosen->nama ?? '' }}
                        </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Hari <span class="text-danger">*</span></label>
                    <select name="hari" class="form-select" required>
                        <option value="">-- Pilih Hari --</option>
                        @foreach($hariList as $h)
                        <option value="{{ $h }}" {{ old('hari')==$h ? 'selected' : '' }}>{{ $h }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Jam Mulai <span class="text-danger">*</span></label>
                    <input type="time" name="jam_mulai" class="form-control" value="{{ old('jam_mulai') }}" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Jam Selesai <span class="text-danger">*</span></label>
                    <input type="time" name="jam_selesai" class="form-control" value="{{ old('jam_selesai') }}" required>
                </div>
                <div class="col-12">
                    <label class="form-label fw-semibold">Ruangan <span class="text-danger">*</span></label>
                    <input type="text" name="ruangan" class="form-control" value="{{ old('ruangan') }}"
                           placeholder="R.301 / Lab.2" maxlength="20" required>
                </div>
            </div>
            <div class="d-flex gap-2 mt-4">
                <button type="submit" class="btn-arn"><i class="bi bi-check-lg me-1"></i>Simpan</button>
                <a href="{{ route('admin.jadwal.index') }}" class="btn btn-outline-secondary">Batal</a>
            </div>
        </form>
    </div>
</div>
</div>
</div>
@endsection

@section('scripts')
<script>
document.getElementById('matkulSelect').addEventListener('change', function() {
    const opt  = this.options[this.selectedIndex];
    const info = document.getElementById('matkulInfo');
    if (!this.value) { info.style.display = 'none'; return; }
    info.innerHTML = `<i class="bi bi-info-circle-fill me-2"></i>
        <strong>Dosen:</strong> ${opt.dataset.dosen} &nbsp;|&nbsp;
        <strong>Semester:</strong> ${opt.dataset.semester} &nbsp;|&nbsp;
        <strong>Periode:</strong> ${opt.dataset.periode}`;
    info.style.display = 'block';
});

if (document.getElementById('matkulSelect').value) {
    document.getElementById('matkulSelect').dispatchEvent(new Event('change'));
}
</script>
@endsection