@extends('admin.layouts.mainlayout')

@section('content')
    <div class="container">
        <h1>Course Details: {{ $course->title }}</h1>
        <p><strong>Code:</strong> {{ $course->code }}</p>
        <p><strong>Description:</strong> {{ $course->credit_hours }}</p>

        <h3>Assigned Instructors:</h3>
        @if ($course->instructors->isEmpty())
            <p>No instructors assigned yet.</p>
        @else
            <ul>
                @foreach ($course->instructors as $instructor)
                    <li>{{ $instructor->fame }} {{ $instructor->sname }} ({{ $instructor->email }})</li>
                @endforeach
            </ul>
        @endif

        <a href="{{ route('courses.edit', $course->id) }}" class="btn btn-warning">Edit Course</a>
        <a href="{{ route('courses.index') }}" class="btn btn-secondary">Back to Courses</a>

        <hr>
        {{-- Form to assign/unassign instructors --}}
        <h3>Manage Instructors</h3>
        <form action="{{ route('courses.assignInstructors', $course->id) }}" method="POST">
            @csrf
            <div class="form-group">
                <label for="instructor_ids">Select Instructors:</label>
                <select name="instructor_ids[]" id="instructor_ids" class="form-control" multiple>
                    @foreach ($allInstructors as $instructor)
                        <option value="{{ $instructor->id }}"
                            {{ $course->instructors->contains($instructor->id) ? 'selected' : '' }}>
                            {{ $instructor->name }}
                        </option>
                    @endforeach
                </select>
                <small class="form-text text-muted">Hold Ctrl/Cmd to select multiple instructors.</small>
            </div>
            <button type="submit" class="btn btn-primary mt-3">Update Instructors</button>
        </form>
    </div>
@endsection