@extends('admin.layout.app')
@section('title', 'Student Onboarding Wizard')

@section('body')
<div class="card shadow-sm border-0 rounded-4">
    <div class="card-header bg-white border-0 py-3">
        <h4 class="fw-bold mb-0">Student Onboarding Wizard</h4>
        <p class="text-muted mb-0">Register a student, assign to faculty/program/semester, and auto‑enrol in all courses – one step!</p>
    </div>
    <div class="card-body p-4">
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger">{{ $errors->first() }}</div>
        @endif

        <form method="POST" action="{{ route('admin.onboarding.store') }}">
            @csrf

            <h6 class="fw-semibold mb-3"><i class="fas fa-user me-2 text-primary"></i> Personal Information</h6>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Full Name *</label>
                    <input type="text" name="name" class="form-control" value="{{ old('name') }}" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Email *</label>
                    <input type="email" name="email" class="form-control" value="{{ old('email') }}" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Phone</label>
                    <input type="text" name="phone" class="form-control" value="{{ old('phone') }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Password *</label>
                    <input type="password" name="password" class="form-control" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Confirm Password *</label>
                    <input type="password" name="password_confirmation" class="form-control" required>
                </div>
            </div>

            <hr class="my-4">

            <h6 class="fw-semibold mb-3"><i class="fas fa-graduation-cap me-2 text-success"></i> Academic Placement (Program & Semester)</h6>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Faculty</label>
                    <select name="faculty_id" id="facultySelect" class="form-select" required>
                        <option value="">Select Faculty</option>
                        @foreach($faculties as $fac)
                            <option value="{{ $fac->id }}" {{ old('faculty_id') == $fac->id ? 'selected' : '' }}>{{ $fac->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Department</label>
                    <select name="department_id" id="departmentSelect" class="form-select" required disabled>
                        <option value="">Select Department</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Program</label>
                    <select name="program_id" id="programSelect" class="form-select" required disabled>
                        <option value="">Select Program</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Semester</label>
                    <select name="semester_id" id="semesterSelect" class="form-select" required disabled>
                        <option value="">Select Semester</option>
                    </select>
                </div>
            </div>

            <div class="mt-4 d-flex justify-content-end">
                <button type="submit" class="btn btn-primary rounded-pill px-5">
                    <i class="fas fa-save me-2"></i> Register Student & Enrol
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    // Dynamic dropdowns – same as in placement module, but simplified
    const facultySelect = document.getElementById('facultySelect');
    const departmentSelect = document.getElementById('departmentSelect');
    const programSelect = document.getElementById('programSelect');
    const semesterSelect = document.getElementById('semesterSelect');

    facultySelect.addEventListener('change', function() {
        const facultyId = this.value;
        if (!facultyId) {
            departmentSelect.disabled = true; departmentSelect.innerHTML = '<option value="">Select Department</option>';
            programSelect.disabled = true; semesterSelect.disabled = true;
            return;
        }
        fetch(`/admin/placement/departments/${facultyId}`)
            .then(res => res.json())
            .then(data => {
                departmentSelect.disabled = false;
                departmentSelect.innerHTML = '<option value="">Select Department</option>';
                data.forEach(dept => departmentSelect.innerHTML += `<option value="${dept.id}">${dept.name}</option>`);
                programSelect.disabled = true; semesterSelect.disabled = true;
            });
    });

    departmentSelect.addEventListener('change', function() {
        const deptId = this.value;
        if (!deptId) { programSelect.disabled = true; semesterSelect.disabled = true; return; }
        fetch(`/admin/placement/programs/${deptId}`)
            .then(res => res.json())
            .then(data => {
                programSelect.disabled = false;
                programSelect.innerHTML = '<option value="">Select Program</option>';
                data.forEach(prog => programSelect.innerHTML += `<option value="${prog.id}">${prog.name}</option>`);
                semesterSelect.disabled = true;
            });
    });

    programSelect.addEventListener('change', function() {
        const progId = this.value;
        if (!progId) { semesterSelect.disabled = true; return; }
        fetch(`/admin/placement/semesters/${progId}`)
            .then(res => res.json())
            .then(data => {
                semesterSelect.disabled = false;
                semesterSelect.innerHTML = '<option value="">Select Semester</option>';
                data.forEach(sem => semesterSelect.innerHTML += `<option value="${sem.id}">${sem.name}</option>`);
            });
    });
</script>
@endsection