@extends('admin.layout')

@section('title', $course->course_code . ' - Course Details - GRADELY')

@push('styles')
<style>
    .header { background: var(--white); padding: 20px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); margin-bottom: 20px; }
    .header h1 { font-size: 24px; color: #222; margin-bottom: 4px; }
    .header .course-code { color: var(--muted); font-size: 14px; }
    .section { background: var(--white); padding: 24px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); margin-bottom: 20px; }
    .section-title { font-size: 20px; font-weight: 600; color: #222; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #f0f0f0; }
    .btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 14px; font-weight: 500; transition: all 0.2s; }
    .btn-primary { background: var(--color-primary); color: var(--white); }
    .btn-primary:hover { background: #B71C1C; }
    .btn-secondary { background: var(--color-secondary); color: var(--white); }
    .btn-secondary:hover { background: #00695C; }
    .btn-danger { background: #d32f2f; color: var(--white); }
    .btn-danger:hover { background: #b71c1c; }
    .btn-sm { padding: 6px 12px; font-size: 12px; }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #e9ecef; }
    th { font-weight: 600; color: #222; background: #f8f9fa; }
    tbody tr:hover { background: #f8f9fa; }
    .form-group { margin-bottom: 16px; }
    .form-label { display: block; margin-bottom: 6px; font-weight: 500; color: #222; font-size: 14px; }
    .form-control { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; font-family: var(--font); }
    .form-control:focus { outline: none; border-color: var(--color-primary); }
    .badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
    .badge-info { background: #e3f2fd; color: #1565c0; }
    .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
    .modal-content { background: var(--white); margin: 5% auto; padding: 24px; border-radius: 8px; width: 90%; max-width: 500px; }
    .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .modal-title { font-size: 20px; font-weight: 600; color: #222; }
    .close { font-size: 28px; font-weight: bold; color: var(--muted); cursor: pointer; border: none; background: none; }
    .close:hover { color: #222; }
</style>
@endpush

@section('content')
<div class="header">
    <h1>{{ $course->course_name }}</h1>
    <div class="course-code">{{ $course->course_code }}</div>
</div>

            <!-- Lecturer Assignments Section -->
            <div class="section">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h2 class="section-title">Lecturer Assignments</h2>
                    <button class="btn btn-primary" onclick="openLecturerModal()">+ Assign Lecturer</button>
                </div>

                @if($course->courseLecturers->count() > 0)
                    <table>
                        <thead>
                            <tr>
                                <th>Lecturer</th>
                                <th>Section</th>
                                <th>Capacity</th>
                                <th>Enrolled</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($course->courseLecturers as $cl)
                                <tr>
                                    <td>{{ $cl->lecturer->name }}<br><small style="color: var(--muted);">{{ $cl->lecturer->email }}</small></td>
                                    <td>{{ $cl->section ?? 'Default' }}</td>
                                    <td>{{ $cl->capacity > 0 ? $cl->capacity : 'Unlimited' }}</td>
                                    <td>
                                        <span class="badge badge-info">{{ $cl->students->count() }} students</span>
                                    </td>
                                    <td>
                                        <form action="{{ route('admin.courses.remove.lecturer', [$course->id, $cl->id]) }}" method="POST" style="display: inline;" onsubmit="return confirm('Are you sure? This will also remove all student enrollments in this section.');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-sm">Remove</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @else
                    <p style="text-align: center; color: var(--muted); padding: 40px;">No lecturers assigned yet. Click "Assign Lecturer" to get started.</p>
                @endif
            </div>

            <!-- Student Enrollments Section -->
            <div class="section">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h2 class="section-title">Student Enrollments</h2>
                    <div style="display: flex; gap: 12px;">
                        <button class="btn btn-primary" onclick="openEnrollmentModal()">+ Enroll Students</button>
                        <button class="btn btn-secondary" onclick="openBulkEnrollmentModal()">📥 Bulk Enroll (CSV)</button>
                    </div>
                </div>

                @php
                    $allEnrollments = collect();
                    foreach($course->courseLecturers as $cl) {
                        foreach($cl->students as $enrollment) {
                            $allEnrollments->push([
                                'id' => $enrollment->id,
                                'student' => $enrollment->student,
                                'section' => $cl->section ?? 'Default',
                                'lecturer' => $cl->lecturer->name,
                            ]);
                        }
                    }
                @endphp

                @if($allEnrollments->count() > 0)
                    <table>
                        <thead>
                            <tr>
                                <th>Student</th>
                                <th>Email</th>
                                <th>Section</th>
                                <th>Lecturer</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($allEnrollments as $enrollment)
                                <tr>
                                    <td>{{ $enrollment['student']->name }}</td>
                                    <td><small style="color: var(--muted);">{{ $enrollment['student']->email }}</small></td>
                                    <td>{{ $enrollment['section'] }}</td>
                                    <td>{{ $enrollment['lecturer'] }}</td>
                                    <td>
                                        <form action="{{ route('admin.courses.remove.student', [$course->id, $enrollment['id']]) }}" method="POST" style="display: inline;" onsubmit="return confirm('Are you sure you want to remove this student from the course?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-sm">Remove</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @else
                    <p style="text-align: center; color: var(--muted); padding: 40px;">No students enrolled yet. Click "Enroll Student" to add students.</p>
                @endif
            </div>

            <!-- Assign Lecturer Modal -->
            <div id="lecturerModal" class="modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 class="modal-title">Assign Lecturer</h2>
                        <button class="close" onclick="closeLecturerModal()">&times;</button>
                    </div>
                    <form action="{{ route('admin.courses.assign.lecturer', $course->id) }}" method="POST">
                        @csrf
                        <div class="form-group">
                            <label class="form-label" for="lecturer_id">Lecturer *</label>
                            <select class="form-control" id="lecturer_id" name="lecturer_id" required>
                                <option value="">Select a lecturer</option>
                                @foreach($lecturers as $lecturer)
                                    <option value="{{ $lecturer->id }}">{{ $lecturer->name }} ({{ $lecturer->email }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="section">Section</label>
                            <input type="text" class="form-control" id="section" name="section" placeholder="e.g., A, B, Morning">
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="capacity">Capacity</label>
                            <input type="number" class="form-control" id="capacity" name="capacity" min="0" placeholder="0 for unlimited">
                        </div>
                        <div style="display: flex; gap: 12px; margin-top: 24px;">
                            <button type="submit" class="btn btn-primary">Assign</button>
                            <button type="button" class="btn btn-secondary" onclick="closeLecturerModal()">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Enroll Student Modal -->
            <div id="enrollmentModal" class="modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 class="modal-title">Enroll Students</h2>
                        <button class="close" onclick="closeEnrollmentModal()">&times;</button>
                    </div>
                    <form action="{{ route('admin.courses.enroll.student', $course->id) }}" method="POST">
                        @csrf
                        <div class="form-group">
                            <label class="form-label" for="student_ids">Select Students * (Hold Ctrl/Cmd to select multiple)</label>
                            <select class="form-control" id="student_ids" name="student_ids[]" multiple required style="height: 200px;">
                                @foreach($allStudents as $student)
                                    <option value="{{ $student->id }}">{{ $student->name }} ({{ $student->email }})</option>
                                @endforeach
                            </select>
                            <small style="color: var(--muted); margin-top: 4px; display: block;">
                                💡 Hold <strong>Ctrl</strong> (Windows) or <strong>Cmd</strong> (Mac) to select multiple students
                            </small>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="course_lecturer_id">Course Section *</label>
                            <select class="form-control" id="course_lecturer_id" name="course_lecturer_id" required>
                                <option value="">Select a section</option>
                                @foreach($course->courseLecturers as $cl)
                                    <option value="{{ $cl->id }}">
                                        {{ $cl->lecturer->name }} - {{ $cl->section ?? 'Default' }}
                                        ({{ $cl->students->count() }}/{{ $cl->capacity > 0 ? $cl->capacity : '∞' }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div style="display: flex; gap: 12px; margin-top: 24px;">
                            <button type="submit" class="btn btn-primary">Enroll Selected</button>
                            <button type="button" class="btn btn-secondary" onclick="closeEnrollmentModal()">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Bulk Enrollment Modal (CSV) -->
            <div id="bulkEnrollmentModal" class="modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 class="modal-title">Bulk Enroll Students (CSV)</h2>
                        <button class="close" onclick="closeBulkEnrollmentModal()">&times;</button>
                    </div>
                    <div style="margin-bottom: 16px;">
                        <a href="{{ route('admin.courses.download.enrollment_template', $course->id) }}" 
                           target="_blank"
                           style="padding: 8px 16px; background: var(--color-secondary); color: var(--white); text-decoration: none; border-radius: 6px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px;">
                            📥 Download Template
                        </a>
                    </div>
                    <form action="{{ route('admin.courses.bulk.enroll.student', $course->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label class="form-label" for="csv_file">Upload CSV File *</label>
                            <input type="file" class="form-control" id="csv_file" name="csv_file" accept=".csv,.txt" required>
                            <small style="color: var(--muted); margin-top: 4px; display: block;">
                                <strong>CSV Format:</strong> One student email per line, or comma-separated values.
                            </small>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="course_lecturer_id_bulk">Course Section *</label>
                            <select class="form-control" id="course_lecturer_id_bulk" name="course_lecturer_id" required>
                                <option value="">Select a section</option>
                                @foreach($course->courseLecturers as $cl)
                                    <option value="{{ $cl->id }}">
                                        {{ $cl->lecturer->name }} - {{ $cl->section ?? 'Default' }}
                                        ({{ $cl->students->count() }}/{{ $cl->capacity > 0 ? $cl->capacity : '∞' }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div style="display: flex; gap: 12px; margin-top: 24px;">
                            <button type="submit" class="btn btn-primary">Upload & Enroll</button>
                            <button type="button" class="btn btn-secondary" onclick="closeBulkEnrollmentModal()">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
@endsection

@push('scripts')
<script>
    function openLecturerModal() {
        document.getElementById('lecturerModal').style.display = 'block';
    }
    function closeLecturerModal() {
        document.getElementById('lecturerModal').style.display = 'none';
    }
    function openEnrollmentModal() {
        document.getElementById('enrollmentModal').style.display = 'block';
    }
    function closeEnrollmentModal() {
        document.getElementById('enrollmentModal').style.display = 'none';
    }
    function openBulkEnrollmentModal() {
        document.getElementById('bulkEnrollmentModal').style.display = 'block';
    }
    function closeBulkEnrollmentModal() {
        document.getElementById('bulkEnrollmentModal').style.display = 'none';
    }
    window.onclick = function(event) {
        const lecturerModal = document.getElementById('lecturerModal');
        const enrollmentModal = document.getElementById('enrollmentModal');
        const bulkEnrollmentModal = document.getElementById('bulkEnrollmentModal');
        if (event.target == lecturerModal) {
            lecturerModal.style.display = 'none';
        }
        if (event.target == enrollmentModal) {
            enrollmentModal.style.display = 'none';
        }
        if (event.target == bulkEnrollmentModal) {
            bulkEnrollmentModal.style.display = 'none';
        }
    }
</script>
@endpush