@extends('layouts.dashboard')

@section('title', 'Manage Program Courses')

@section('page-content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Manage Courses for {{ $program->name }}</h1>
            <p class="text-gray-600 mt-1">{{ $program->code }} - {{ $program->department->name }}</p>
        </div>
        <a href="{{ route('programs.index') }}" class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">
            Back to Programs
        </a>
    </div>

    @if(session('success'))
    <div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg">
        {{ session('success') }}
    </div>
    @endif

    @if(session('error'))
    <div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg">
        {{ session('error') }}
    </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Add Course Form -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 sticky top-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Add Course to Program</h2>
                
                @if($availableCourses->isEmpty())
                    <div class="text-center py-8">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        <p class="mt-2 text-sm text-gray-500">All courses have been assigned</p>
                        <p class="text-xs text-gray-400 mt-1">Create new courses to add more</p>
                    </div>
                @else
                    <form action="{{ route('programs.courses.attach', $program) }}" method="POST" class="space-y-4">
                        @csrf
                        
                        <div>
                            <label for="course_id" class="block text-sm font-medium text-gray-700 mb-2">Course</label>
                            <select name="course_id" id="course_id" required
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('course_id') border-red-500 @enderror">
                                <option value="">Select Course</option>
                                @foreach($availableCourses as $course)
                                    <option value="{{ $course->id }}">
                                        [{{ $course->code }}] {{ $course->name }} ({{ $course->credit_hours }} credits)
                                    </option>
                                @endforeach
                            </select>
                            @error('course_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="semester_number" class="block text-sm font-medium text-gray-700 mb-2">Semester</label>
                            <select name="semester_number" id="semester_number" required
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('semester_number') border-red-500 @enderror">
                                <option value="">Select Semester</option>
                                @for($i = 1; $i <= $program->duration_years * 2; $i++)
                                    <option value="{{ $i }}">Semester {{ $i }}</option>
                                @endfor
                            </select>
                            @error('semester_number')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="requirement_type" class="block text-sm font-medium text-gray-700 mb-2">Requirement Type</label>
                            <select name="requirement_type" id="requirement_type" required
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('requirement_type') border-red-500 @enderror">
                                <option value="">Select Type</option>
                                <option value="core">Core (Required)</option>
                                <option value="elective">Elective (Optional)</option>
                                <option value="general">General Education</option>
                            </select>
                            @error('requirement_type')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <button type="submit" class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium">
                            Add Course to Program
                        </button>
                    </form>
                @endif
            </div>
        </div>

        <!-- Assigned Courses List -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900">Assigned Courses ({{ $program->courses->count() }})</h2>
                </div>

                @if($program->courses->isEmpty())
                    <div class="text-center py-16">
                        <svg class="mx-auto h-16 w-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                        </svg>
                        <p class="mt-4 text-lg font-medium text-gray-900">No courses assigned yet</p>
                        <p class="text-sm text-gray-500 mt-2">Add courses from the form on the left</p>
                    </div>
                @else
                    <div class="divide-y divide-gray-200">
                        @php
                            $groupedCourses = $program->courses->groupBy('pivot.semester_number')->sortKeys();
                        @endphp
                        
                        @foreach($groupedCourses as $semester => $courses)
                            <div class="p-6">
                                <h3 class="text-md font-semibold text-gray-800 mb-4 flex items-center">
                                    <span class="flex items-center justify-center w-8 h-8 bg-blue-100 text-blue-700 rounded-full mr-3 text-sm">
                                        {{ $semester }}
                                    </span>
                                    Semester {{ $semester }}
                                    <span class="ml-2 text-sm text-gray-500 font-normal">({{ $courses->count() }} courses)</span>
                                </h3>

                                <div class="space-y-3">
                                    @foreach($courses as $course)
                                        <div class="border border-gray-200 rounded-lg p-4 hover:border-blue-300 transition-colors"
                                             x-data="{ editing: false }">
                                            <div class="flex items-start justify-between">
                                                <div class="flex-1">
                                                    <div class="flex items-center space-x-2">
                                                        <span class="font-mono text-sm font-bold text-blue-600">{{ $course->code }}</span>
                                                        @if($course->pivot->requirement_type === 'core')
                                                            <span class="px-2 py-0.5 bg-red-100 text-red-700 text-xs rounded-full">Required</span>
                                                        @elseif($course->pivot->requirement_type === 'elective')
                                                            <span class="px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded-full">Elective</span>
                                                        @else
                                                            <span class="px-2 py-0.5 bg-gray-100 text-gray-700 text-xs rounded-full">General Ed</span>
                                                        @endif
                                                        @if($course->pivot->is_active)
                                                            <span class="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded-full">Active</span>
                                                        @else
                                                            <span class="px-2 py-0.5 bg-gray-100 text-gray-700 text-xs rounded-full">Inactive</span>
                                                        @endif
                                                    </div>
                                                    <h4 class="font-medium text-gray-900 mt-1">{{ $course->name }}</h4>
                                                    <div class="flex items-center space-x-4 mt-2 text-xs text-gray-500">
                                                        <span>{{ $course->credit_hours }} Credits</span>
                                                        <span>{{ $course->course_type }}</span>
                                                    </div>
                                                </div>
                                                <div class="flex items-center space-x-2">
                                                    <button @click="editing = !editing" type="button"
                                                            class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                                                        <span x-show="!editing">Edit</span>
                                                        <span x-show="editing">Cancel</span>
                                                    </button>
                                                    <form method="POST" action="{{ route('programs.courses.detach', [$program, $course]) }}"
                                                          onsubmit="return confirm('Remove this course from the program?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="text-red-600 hover:text-red-800 text-sm font-medium">
                                                            Remove
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>

                                            <!-- Edit Form -->
                                            <div x-show="editing" x-collapse class="mt-4 border-t border-gray-200 pt-4">
                                                <form method="POST" action="{{ route('programs.courses.update', [$program, $course]) }}" class="grid grid-cols-3 gap-4">
                                                    @csrf
                                                    @method('PUT')
                                                    
                                                    <div>
                                                        <label class="block text-xs font-medium text-gray-700 mb-1">Semester</label>
                                                        <select name="semester_number" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                                                            @for($i = 1; $i <= $program->duration_years * 2; $i++)
                                                                <option value="{{ $i }}" {{ $course->pivot->semester_number == $i ? 'selected' : '' }}>
                                                                    Semester {{ $i }}
                                                                </option>
                                                            @endfor
                                                        </select>
                                                    </div>

                                                    <div>
                                                        <label class="block text-xs font-medium text-gray-700 mb-1">Type</label>
                                                        <select name="requirement_type" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                                                            <option value="core" {{ $course->pivot->requirement_type === 'core' ? 'selected' : '' }}>Core</option>
                                                            <option value="elective" {{ $course->pivot->requirement_type === 'elective' ? 'selected' : '' }}>Elective</option>
                                                            <option value="general" {{ $course->pivot->requirement_type === 'general' ? 'selected' : '' }}>General</option>
                                                        </select>
                                                    </div>

                                                    <div class="flex items-end">
                                                        <button type="submit" class="w-full px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700">
                                                            Update
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection