@extends('layouts.teacher')
@section('title', $course->title)
@section('header', $course->title)

@section('content')
<div class="flex gap-6 min-h-screen bg-gray-50">
    {{-- Sidebar: Struktur Kursus --}}
    <div class="w-64 flex-shrink-0 bg-white rounded-xl border border-gray-100 shadow-sm p-5 h-fit sticky top-6">
        <h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
            <i class="fa fa-bars text-blue-600"></i>Struktur Kursus
        </h3>

        @if($course->sections->isEmpty())
            <div class="text-sm text-gray-400 text-center py-8">
                <p>Belum ada topik.</p>
                <p class="text-xs mt-2">Tambahkan topik di panel kanan →</p>
            </div>
        @else
            <div class="space-y-2">
                @foreach($course->sections as $section)
                <div class="border border-gray-100 rounded-lg overflow-hidden">
                    {{-- Section Header --}}
                    <div class="bg-gradient-to-r from-blue-50 to-blue-100 px-3 py-2 cursor-pointer hover:from-blue-100 hover:to-blue-200 transition"
                         onclick="toggleSection({{ $section->id }})">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-2 flex-1">
                                <i class="fa fa-chevron-down text-blue-600 text-xs section-toggle" id="toggle-{{ $section->id }}"></i>
                                <span class="font-medium text-sm text-gray-800 truncate">{{ $section->title }}</span>
                            </div>
                            <span class="text-xs bg-blue-600 text-white px-2 py-1 rounded">
                                {{ $section->materials()->count() + $section->assignments()->count() }}
                            </span>
                        </div>
                    </div>

                    {{-- Section Contents --}}
                    <div class="section-content hidden bg-white border-t border-gray-100" id="content-{{ $section->id }}">
                        {{-- Materi dalam Section --}}
                        @forelse($section->materials as $material)
                        <div class="flex items-center gap-2 px-3 py-2 text-xs text-gray-700 hover:bg-gray-50 border-b border-gray-50 last:border-b-0">
                            <i class="fa fa-book text-blue-400 flex-shrink-0"></i>
                            <span class="truncate">{{ $material->title }}</span>
                            <span class="text-gray-400 text-xs ml-auto flex-shrink-0">({{ $material->type }})</span>
                        </div>
                        @empty
                        @endforelse

                        {{-- Tugas dalam Section --}}
                        @forelse($section->assignments as $assignment)
                        <div class="flex items-center gap-2 px-3 py-2 text-xs text-gray-700 hover:bg-gray-50 border-b border-gray-50 last:border-b-0">
                            <i class="fa fa-tasks text-green-400 flex-shrink-0"></i>
                            <span class="truncate">{{ $assignment->title }}</span>
                            <span class="text-gray-400 text-xs ml-auto flex-shrink-0">({{ $assignment->submissions->count() }})</span>
                        </div>
                        @empty
                        @endforelse

                        {{-- Empty state --}}
                        @if($section->materials->isEmpty() && $section->assignments->isEmpty())
                        <div class="px-3 py-3 text-xs text-gray-400 text-center">
                            Tidak ada materi atau tugas
                        </div>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- Main Content Area --}}
    <div class="flex-1 space-y-6">
        {{-- Header Info --}}
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
            <div class="flex justify-between items-start">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900 mb-2">{{ $course->title }}</h1>
                    <p class="text-sm text-gray-600">{{ $course->description ?? 'Tidak ada deskripsi.' }}</p>
                </div>
                <a href="{{ route('teacher.courses.edit', $course) }}"
                   class="text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg transition flex-shrink-0">
                    Edit Kursus
                </a>
            </div>
            <div class="mt-4 flex gap-6 text-sm flex-wrap">
                <span class="text-gray-600"><strong>{{ $course->category->name }}</strong> • Kategori</span>
                <span class="text-gray-600"><strong>{{ $course->is_published ? '✓ Publik' : 'Draft' }}</strong> • Status</span>
                <span class="text-gray-600"><strong>{{ $course->enrollments->count() }}</strong> • Siswa Terdaftar</span>
                <span class="text-gray-600"><strong>{{ $course->sections->count() }}</strong> • Topik</span>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {{-- Kolom Kiri: Tambah Section, Materi, Tugas --}}
            <div class="lg:col-span-2 space-y-6">

                {{-- Tambah Section/Topik --}}
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
                    <h3 class="font-semibold text-gray-700 mb-4 flex items-center gap-2">
                        <i class="fa fa-folder-plus text-purple-600"></i> Tambah Topik
                    </h3>
                    <form method="POST" action="{{ route('teacher.courses.sections.store', $course) }}" class="space-y-3">
                        @csrf
                        <input type="text" name="title" placeholder="Nama topik (cth: Topik 1, Topik 2)" required
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-300">
                        <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm w-full">
                            + Tambah Topik
                        </button>
                    </form>
                </div>

                {{-- Tambah Materi --}}
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
                    <h3 class="font-semibold text-gray-700 mb-4 flex items-center gap-2">
                        <i class="fa fa-book text-blue-600"></i> Tambah Materi Pembelajaran
                    </h3>
                    <form method="POST" action="{{ route('teacher.courses.materials.store', $course) }}"
                          enctype="multipart/form-data" class="space-y-3">
                        @csrf
                        <input type="text" name="title" placeholder="Judul materi" required
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-300">
                        
                        <select name="section_id" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
                            <option value="">-- Pilih Topik (Opsional) --</option>
                            @foreach($course->sections as $section)
                                <option value="{{ $section->id }}">{{ $section->title }}</option>
                            @endforeach
                        </select>

                        <div class="grid grid-cols-2 gap-3">
                            <select name="type" id="mat-type" onchange="toggleContent(this.value)"
                                    class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
                                <option value="video">Video (YouTube URL)</option>
                                <option value="pdf">PDF (Upload)</option>
                                <option value="word">Word (Upload)</option>
                                <option value="excel">Excel (Upload)</option>
                                <option value="link">Link Eksternal</option>
                                <option value="text">Teks</option>
                            </select>
                            <input type="number" name="order" placeholder="Urutan" min="1"
                                   class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
                        </div>
                        <input type="text" name="content" id="mat-content"
                               placeholder="URL / konten materi"
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-300">
                        <input type="file" name="file" id="mat-file" accept=".pdf,.doc,.docx,.xls,.xlsx" class="hidden w-full text-sm">
                        <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm w-full">
                            + Tambah Materi
                        </button>
                    </form>

                    {{-- Daftar Materi --}}
                    @if($course->materials->isNotEmpty())
                    <div class="mt-5 divide-y divide-gray-100">
                        @foreach($course->materials as $mat)
                        <div class="flex items-center justify-between py-3">
                            <div class="flex items-center gap-3 flex-1 min-w-0">
                                <span class="w-6 h-6 rounded-full bg-blue-50 text-blue-600 text-xs flex items-center justify-center font-medium flex-shrink-0">
                                    {{ $mat->order }}
                                </span>
                                <div class="min-w-0">
                                    <p class="text-sm font-medium text-gray-700 truncate">{{ $mat->title }}</p>
                                    <p class="text-xs text-gray-400 mt-0.5">
                                        @if($mat->section)
                                            <span class="inline-block bg-purple-50 text-purple-700 px-2 py-0.5 rounded text-xs">{{ $mat->section->title }}</span>
                                        @else
                                            <span class="text-gray-300">Tanpa topik</span>
                                        @endif
                                        • {{ ucfirst($mat->type) }}
                                    </p>
                                </div>
                            </div>
                            <form method="POST" action="{{ route('teacher.courses.materials.destroy', [$course, $mat]) }}"
                                  onsubmit="return confirm('Hapus materi ini?')" class="flex-shrink-0 ml-2">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-xs text-red-500 hover:text-red-700">Hapus</button>
                            </form>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>

                {{-- Tambah Tugas --}}
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
                    <h3 class="font-semibold text-gray-700 mb-4 flex items-center gap-2">
                        <i class="fa fa-tasks text-green-600"></i> Tambah Tugas
                    </h3>
                    <form method="POST" action="{{ route('teacher.courses.assignments.store', $course) }}" class="space-y-3">
                        @csrf
                        <input type="text" name="title" placeholder="Judul tugas" required
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-300">
                        
                        <select name="section_id" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
                            <option value="">-- Pilih Topik (Opsional) --</option>
                            @foreach($course->sections as $section)
                                <option value="{{ $section->id }}">{{ $section->title }}</option>
                            @endforeach
                        </select>

                        <textarea name="description" rows="3" placeholder="Deskripsi tugas" required
                                  class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-300"></textarea>
                        
                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="text-xs text-gray-500 mb-1 block">Batas Waktu</label>
                                <input type="datetime-local" name="due_date" required
                                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
                            </div>
                            <div>
                                <label class="text-xs text-gray-500 mb-1 block">Nilai Maksimal</label>
                                <input type="number" name="max_score" value="100" min="1" max="100"
                                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
                            </div>
                        </div>

                        <div>
                            <label class="text-xs text-gray-500 mb-1 block">File Soal (Opsional)</label>
                            <input type="file" name="file_soal" accept=".pdf,.doc,.docx,.xls,.xlsx,.pptx"
                                   class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
                        </div>

                        <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm w-full">
                            + Tambah Tugas
                        </button>
                    </form>

                    {{-- Daftar Tugas --}}
                    @if($course->assignments->isNotEmpty())
                    <div class="mt-5 divide-y divide-gray-100">
                        @foreach($course->assignments as $asgn)
                        <div class="flex items-center justify-between py-3">
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-700">{{ $asgn->title }}</p>
                                <p class="text-xs text-gray-400 mt-1">
                                    @if($asgn->section)
                                        <span class="inline-block bg-purple-50 text-purple-700 px-2 py-0.5 rounded text-xs">{{ $asgn->section->title }}</span>
                                    @else
                                        <span class="text-gray-300">Tanpa topik</span>
                                    @endif
                                    • Deadline: {{ $asgn->due_date->format('d M Y H:i') }}
                                    @if($asgn->isOverdue())
                                        <span class="text-red-500 ml-1">• Lewat</span>
                                    @endif
                                </p>
                            </div>
                            <a href="{{ route('teacher.courses.assignments.submissions', [$course, $asgn]) }}"
                               class="text-xs text-blue-600 hover:underline flex-shrink-0 ml-2">
                                {{ $asgn->submissions->count() }} submission
                            </a>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>

            {{-- Kolom Kanan: Info & Quiz & Siswa --}}
            <div class="space-y-5">
                {{-- Info Kursus --}}
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
                    <h3 class="font-semibold text-gray-700 mb-3">Info Kursus</h3>
                    <dl class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <dt class="text-gray-500">Kategori</dt>
                            <dd class="text-gray-700 font-medium">{{ $course->category->name }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-gray-500">Status</dt>
                            <dd class="{{ $course->is_published ? 'text-green-600' : 'text-gray-400' }} font-medium">
                                {{ $course->is_published ? '✓ Publik' : 'Draft' }}
                            </dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-gray-500">Siswa Terdaftar</dt>
                            <dd class="text-gray-700 font-medium">{{ $course->enrollments->count() }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-gray-500">Min. Progress</dt>
                            <dd class="text-gray-700 font-medium">{{ $course->progress_min }}%</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-gray-500">Topik</dt>
                            <dd class="text-gray-700 font-medium">{{ $course->sections->count() }}</dd>
                        </div>
                    </dl>
                </div>

                {{-- Quiz Pilihan Ganda --}}
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
                    <h3 class="font-semibold text-gray-700 mb-3">Quiz Pilihan Ganda</h3>
                    <p class="text-xs text-gray-500 mb-3">Pisahkan soal pilihan ganda dari tugas.</p>
                    <a href="{{ route('teacher.courses.quizzes.create', $course) }}"
                       class="block w-full text-center bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm mb-3">
                        + Buat Quiz Baru
                    </a>
                    @if($course->quizzes->isNotEmpty())
                        <div class="space-y-2">
                            @foreach($course->quizzes->take(5) as $quiz)
                            <a href="{{ route('teacher.courses.quizzes.show', [$course, $quiz]) }}"
                               class="block border border-gray-100 rounded-lg p-2 hover:bg-gray-50 text-xs text-gray-700">
                                <div class="font-medium">{{ $quiz->title }}</div>
                                <div class="text-gray-400">{{ $quiz->questions->count() }} soal</div>
                            </a>
                            @endforeach
                        </div>
                        <a href="{{ route('teacher.courses.quizzes.index', $course) }}" class="text-xs text-blue-600 hover:underline mt-2 block">
                            Lihat Semua Quiz →
                        </a>
                    @else
                        <p class="text-xs text-gray-400 text-center py-3">Belum ada quiz.</p>
                    @endif
                </div>

                {{-- Daftar Siswa --}}
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
                    <div class="flex justify-between items-center mb-3">
                        <h3 class="font-semibold text-gray-700">Siswa Terdaftar</h3>
                        @if($course->enrollments->count() > 0)
                        <a href="{{ route('teacher.courses.grades', $course) }}" class="text-xs text-blue-600 hover:underline">Nilai →</a>
                        @endif
                    </div>
                    <div class="space-y-2">
                        @forelse($course->enrollments->take(8) as $enroll)
                        <div class="flex items-center justify-between text-sm">
                            <div class="flex items-center gap-2 flex-1 min-w-0">
                                <div class="w-7 h-7 rounded-full bg-blue-100 flex items-center justify-center text-xs font-semibold text-blue-600 flex-shrink-0">
                                    {{ strtoupper(substr($enroll->student->name, 0, 1)) }}
                                </div>
                                <p class="text-gray-700 truncate">{{ $enroll->student->name }}</p>
                            </div>
                            <span class="text-xs text-gray-400 flex-shrink-0 ml-2">{{ $enroll->progress }}%</span>
                        </div>
                        @empty
                        <p class="text-sm text-gray-400 text-center py-3">Belum ada siswa terdaftar.</p>
                        @endforelse
                    </div>
                    @if($course->enrollments->count() > 8)
                    <p class="text-xs text-gray-400 mt-3 text-center">+{{ $course->enrollments->count() - 8 }} siswa lainnya</p>
                    @endif
                </div>

                {{-- Tambah Siswa --}}
                @if($availableStudents->isNotEmpty())
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
                    <h3 class="font-semibold text-gray-700 mb-3">Tambah Siswa ke Kursus</h3>
                    <form method="POST" action="{{ route('teacher.courses.enrollments.store', $course) }}" class="space-y-2">
                        @csrf
                        <select name="student_id" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-300">
                            <option value="">-- Pilih Siswa --</option>
                            @foreach($availableStudents as $student)
                                <option value="{{ $student->id }}">{{ $student->name }}</option>
                            @endforeach
                        </select>
                        <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm w-full">
                            + Tambah Siswa
                        </button>
                    </form>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function toggleSection(sectionId) {
    const content = document.getElementById('content-' + sectionId);
    const toggle = document.getElementById('toggle-' + sectionId);
    content.classList.toggle('hidden');
    toggle.classList.toggle('fa-chevron-down');
    toggle.classList.toggle('fa-chevron-right');
}

function toggleContent(type) {
    const content = document.getElementById('mat-content');
    const file = document.getElementById('mat-file');
    const fileTypes = ['pdf', 'word', 'excel'];
    
    if (fileTypes.includes(type)) {
        content.classList.add('hidden');
        file.classList.remove('hidden');
        file.required = true;
        content.required = false;
        
        const accepts = {
            pdf: '.pdf',
            word: '.doc,.docx',
            excel: '.xls,.xlsx',
        };
        file.accept = accepts[type] || '';
    } else {
        content.classList.remove('hidden');
        file.classList.add('hidden');
        file.required = false;
        content.required = true;
        const placeholders = {
            video: 'URL YouTube (cth: https://youtube.com/watch?v=...)',
            link:  'URL Eksternal',
            text:  'Tulis konten materi di sini...',
        };
        content.placeholder = placeholders[type] || 'Konten';
    }
}

// Buka semua sections saat halaman dimuat
document.addEventListener('DOMContentLoaded', function() {
    const toggles = document.querySelectorAll('.section-toggle');
    toggles.forEach(toggle => {
        const sectionId = toggle.id.replace('toggle-', '');
        const content = document.getElementById('content-' + sectionId);
        if (content) {
            content.classList.remove('hidden');
        }
    });
});
</script>
@endpush
@endsection