@extends('admin.layout.app')
@section('title', __('admin.academic_placement'))

@section('body')
<div class="card shadow-sm border-0 rounded-4">
    <div class="card-header bg-white border-bottom py-3">
        <h4 class="mb-0">{{ __('admin.academic_placement') }}</h4>
        <p class="text-muted small mb-0">{{ __('admin.manage_student_placements') }}</p>
    </div>
    <div class="card-body p-4">
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        <form method="GET" class="row g-3 mb-4">
            <div class="col-md-3">
                <label class="form-label">{{ __('admin.student') }}</label>
                <select name="student_id" class="form-select">
                    <option value="">{{ __('admin.all_students') }}</option>
                    @foreach(\App\Models\User::role('student')->orderBy('name')->get() as $stu)
                        <option value="{{ $stu->id }}" {{ request('student_id') == $stu->id ? 'selected' : '' }}>{{ $stu->name }} ({{ $stu->email }})</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">{{ __('admin.program') }}</label>
                <select name="program_id" class="form-select">
                    <option value="">{{ __('admin.all_programs') }}</option>
                    @foreach(\App\Models\Program::orderBy('name')->get() as $prog)
                        <option value="{{ $prog->id }}" {{ request('program_id') == $prog->id ? 'selected' : '' }}>{{ $prog->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">{{ __('admin.semester') }}</label>
                <select name="semester_id" class="form-select">
                    <option value="">{{ __('admin.all_semesters') }}</option>
                    @foreach(\App\Models\Semester::orderBy('number')->get() as $sem)
                        <option value="{{ $sem->id }}" {{ request('semester_id') == $sem->id ? 'selected' : '' }}>{{ $sem->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <button class="btn btn-primary w-100">{{ __('admin.filter') }}</button>
                <a href="{{ route('admin.placement.index') }}" class="btn btn-secondary w-100 ms-2">{{ __('admin.reset') }}</a>
            </div>
        </form>

        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th>{{ __('admin.student_name') }}</th>
                        <th>{{ __('admin.current_program') }}</th>
                        <th>{{ __('admin.current_semester') }}</th>
                        <th>{{ __('admin.courses_enrolled') }}</th>
                        <th>{{ __('admin.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($students as $student)
                        @php
                            $profile = $student->studentRecord;
                            $program = $profile?->program;
                            $semester = $profile?->currentSemester;
                            $courseCount = $student->courseEnrollments->count();
                        @endphp
                        <tr>
                            <td>
                                <strong>{{ $student->name }}</strong><br>
                                <small class="text-muted">{{ $student->email }}</small>
                            </td>
                            <td>{{ $program?->name ?? '—' }}<br><small class="text-muted">{{ $program?->department->name ?? '' }}</small></td>
                            <td>{{ $semester?->name ?? '—' }}</td>
                            <td>{{ $courseCount }}</td>
                            <td>
                                <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#placementModal"
                                        data-student-id="{{ $student->id }}"
                                        data-student-name="{{ $student->name }}"
                                        data-program-id="{{ $program?->id }}"
                                        data-semester-id="{{ $semester?->id }}"
                                        data-faculty-id="{{ $program?->department->faculty_id ?? '' }}">
                                    {{ __('admin.edit_placement') }}
                                </button>
                                @if($semester && $semester->next_semester_id)
                                    <form action="{{ route('admin.placement.promote', $student->id) }}" method="POST" class="d-inline">
                                        @csrf
                                        <button class="btn btn-sm btn-warning" onclick="return confirm('{{ __('admin.promote_confirm') }}')">
                                            {{ __('admin.promote') }}
                                        </button>
                                    </form>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="text-center text-muted">{{ __('admin.no_students_found') }}</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        {{ $students->links() }}
    </div>
</div>

<!-- Modal for Placement -->
<div class="modal fade" id="placementModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="placementForm" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('admin.edit_placement_for') }} <span id="studentName"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="student_id" id="studentId">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">{{ __('admin.faculty') }}</label>
                            <select name="faculty_id" id="facultySelect" class="form-select">
                                <option value="">{{ __('admin.select_faculty') }}</option>
                                @foreach($faculties as $fac)
                                    <option value="{{ $fac->id }}">{{ $fac->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ __('admin.department') }}</label>
                            <select name="department_id" id="departmentSelect" class="form-select" disabled>
                                <option value="">{{ __('admin.select_department') }}</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ __('admin.program') }}</label>
                            <select name="program_id" id="programSelect" class="form-select" disabled>
                                <option value="">{{ __('admin.select_program') }}</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ __('admin.semester') }}</label>
                            <select name="semester_id" id="semesterSelect" class="form-select" disabled>
                                <option value="">{{ __('admin.select_semester') }}</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <div class="form-check">
                                <input type="checkbox" name="sync_courses" value="1" class="form-check-input" id="syncCourses" checked>
                                <label class="form-check-label" for="syncCourses">
                                    {{ __('admin.auto_enroll_in_courses') }}
                                </label>
                                <div class="text-muted small">{{ __('admin.this_will_enroll_the_student_in_all_courses_of_the_selected_semester') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('admin.cancel') }}</button>
                    <button type="submit" class="btn btn-primary">{{ __('admin.save_placement') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Populate modal when opened
        const placementModal = document.getElementById('placementModal');
        placementModal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const studentId = button.getAttribute('data-student-id');
            const studentName = button.getAttribute('data-student-name');
            const programId = button.getAttribute('data-program-id');
            const semesterId = button.getAttribute('data-semester-id');
            const facultyId = button.getAttribute('data-faculty-id');

            document.getElementById('studentId').value = studentId;
            document.getElementById('studentName').innerText = studentName;
            const form = document.getElementById('placementForm');
            form.action = `/admin/placement/${studentId}`;

            // Set faculty and trigger change if needed
            const facultySelect = document.getElementById('facultySelect');
            if (facultyId) {
                facultySelect.value = facultyId;
                facultySelect.dispatchEvent(new Event('change'));
            } else {
                facultySelect.value = '';
                document.getElementById('departmentSelect').disabled = true;
                document.getElementById('programSelect').disabled = true;
                document.getElementById('semesterSelect').disabled = true;
            }

            // Pre-fill program and semester if present (they will be loaded after faculty->department->program chain)
            // We'll set a timeout to fill after async loads. Simpler: after chains load, set values via AJAX? Not necessary, user can select.
            // Instead, if programId is given, we can pre-select it when programSelect is loaded (we'll add a function later).
        });

        // Dynamic dropdowns
        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="">{{ __("admin.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="">{{ __("admin.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="">{{ __("admin.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="">{{ __("admin.select_semester") }}</option>';
                    data.forEach(sem => {
                        semesterSelect.innerHTML += `<option value="${sem.id}">${sem.name}</option>`;
                    });
                });
        });
    });
</script>
@endsection