@extends('layouts.teacher')

@section('title', 'Detail Mata Pelajaran')
@section('header_title', 'Detail Pembelajaran')

@section('content')

<div class="max-w-6xl mx-auto pb-10">

    {{-- HEADER --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-8">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <a href="{{ route('guru.materi.index') }}"
                   class="inline-flex items-center text-gray-600 hover:text-indigo-600 transition text-sm font-medium mb-2 group">
                    <i class="ph ph-arrow-left mr-2 group-hover:translate-x-[-2px] transition-transform"></i> 
                    Kembali ke Daftar Kursus
                </a>
                
                <div class="flex items-center gap-3">
                    <h1 class="text-2xl font-bold text-gray-800">
                        {{ $activeMsc['module']['title'] }}
                    </h1>
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-indigo-100 text-indigo-700">
                        {{ $activeMsc['module']['department']['name'] ?? '-' }}
                    </span>
                </div>
                
                <p class="text-sm text-gray-500 mt-1">
                    Kelas: {{ $activeMsc['student_class']['name'] ?? '-' }}
                </p>
            </div>

            {{-- STATS CARD --}}
            <div class="flex gap-4">
                <div class="text-center bg-gradient-to-br from-indigo-50 to-blue-50 p-4 rounded-xl min-w-[100px] border border-indigo-100">
                    <div class="text-2xl font-bold text-indigo-700">{{ count($sections) }}</div>
                    <div class="text-xs font-semibold text-indigo-600 uppercase tracking-wide mt-1">Bab</div>
                </div>
                
                <div class="text-center bg-gradient-to-br from-emerald-50 to-green-50 p-4 rounded-xl min-w-[100px] border border-emerald-100">
                    <div class="text-2xl font-bold text-emerald-700">{{ $totalStudents }}</div>
                    <div class="text-xs font-semibold text-emerald-600 uppercase tracking-wide mt-1">Siswa</div>
                </div>
            </div>
        </div>
    </div>

    {{-- ALERT --}}
    @if (session('success'))
        <div class="mb-6 p-4 rounded-xl bg-gradient-to-r from-emerald-50 to-green-50 border border-emerald-200 text-emerald-700 flex items-center gap-3 animate-fade-in">
            <div class="bg-emerald-100 text-emerald-600 rounded-lg p-2">
                <i class="ph ph-check-circle text-lg"></i>
            </div>
            <div class="font-medium">{{ session('success') }}</div>
        </div>
    @endif

    @if (session('error'))
        <div class="mb-6 p-4 rounded-xl bg-gradient-to-r from-red-50 to-rose-50 border border-red-200 text-red-700 flex items-center gap-3 animate-fade-in">
            <div class="bg-red-100 text-red-600 rounded-lg p-2">
                <i class="ph ph-x-circle text-lg"></i>
            </div>
            <div class="font-medium">{{ session('error') }}</div>
        </div>
    @endif

    {{-- ACTION BAR --}}
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
            <i class="ph ph-stack text-indigo-600"></i>
            Daftar Bab & Materi
        </h2>
        <button onclick="openSectionModal()"
                class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-gradient-to-r from-indigo-600 to-blue-600 text-white font-medium hover:from-indigo-700 hover:to-blue-700 transition-all shadow-lg shadow-indigo-100 hover:shadow-indigo-200">
            <i class="ph ph-plus"></i> Buat Bab Baru
        </button>
    </div>

    {{-- LIST BAB --}}
    <div class="space-y-6">
        @foreach($sections as $section)
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow duration-300">
            
            {{-- BAB HEADER --}}
            <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100/30 border-b border-gray-200 flex justify-between items-center">
                <div class="flex items-center gap-3">
                    <div class="bg-gradient-to-r from-indigo-500 to-blue-500 text-white p-2.5 rounded-xl">
                        <i class="ph ph-bookmark-simple text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-800 text-lg">{{ $section['title'] }}</h3>
                        <p class="text-xs text-gray-500">
                            {{ count($section['lessons']) }} materi
                        </p>
                    </div>
                </div>

                <div class="flex items-center gap-1">
                    {{-- EDIT BAB --}}
                    <button onclick="openEditSectionModal({{ $section['id'] }}, '{{ $section['title'] }}')"
                            class="p-2 rounded-lg text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 transition"
                            title="Edit Bab">
                        <i class="ph ph-pencil-simple text-lg"></i>
                    </button>

                    {{-- HAPUS BAB --}}
                    <form action="{{ route('guru.sections.destroy', $section['id']) }}"
                          method="POST"
                          onsubmit="return confirm('Hapus bab dan seluruh materi di dalamnya?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                                class="p-2 rounded-lg text-gray-500 hover:text-red-600 hover:bg-red-50 transition"
                                title="Hapus Bab">
                            <i class="ph ph-trash text-lg"></i>
                        </button>
                    </form>

                    {{-- TAMBAH MATERI --}}
                    <a href="{{ route('guru.materi.create', [
                        'msc_id' => $activeMsc['id'],
                        'section_id' => $section['id']
                    ]) }}"
                       class="ml-2 inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-gradient-to-r from-indigo-50 to-blue-50 text-indigo-600 hover:from-indigo-100 hover:to-blue-100 border border-indigo-100 font-medium text-sm transition">
                        <i class="ph ph-plus-circle text-sm"></i> Tambah Materi
                    </a>
                </div>
            </div>

            {{-- LIST MATERI --}}
            <div class="p-2">
                @forelse($section['lessons'] as $lesson)
                <div class="flex items-center justify-between p-4 hover:bg-gray-50/50 transition group border-b border-gray-100 last:border-0">
                    
                    {{-- KONTEN MATERI --}}
                    <div class="flex items-center gap-4">
                        <div class="relative">
                            <div class="w-12 h-12 rounded-xl flex items-center justify-center
                                {{ $lesson['content_type'] === 'pdf'
                                    ? 'bg-gradient-to-br from-red-50 to-rose-50 text-red-600 border border-red-100'
                                    : 'bg-gradient-to-br from-blue-50 to-sky-50 text-blue-600 border border-blue-100' }}">
                                <i class="ph {{ $lesson['content_type'] === 'pdf'
                                    ? 'ph-file-pdf'
                                    : 'ph-play-circle' }} text-2xl"></i>
                            </div>
                            <div class="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-white border border-gray-200 flex items-center justify-center">
                                <i class="ph {{ $lesson['content_type'] === 'pdf'
                                    ? 'ph-file-text text-[10px] text-red-500'
                                    : 'ph-video text-[10px] text-blue-500' }}"></i>
                            </div>
                        </div>

                        <div class="flex-1 min-w-0">
                            <h4 class="font-bold text-gray-800 text-sm truncate">
                                {{ $lesson['title'] }}
                            </h4>
                            
                            @if(!empty($lesson['content']))
                            <p class="text-xs text-gray-500 mt-1 line-clamp-1">
                                {{ $lesson['content'] }}
                            </p>
                            @endif
                            
                            <div class="flex items-center gap-3 mt-1.5">
                                <span class="text-xs text-gray-400">
                                    <i class="ph ph-calendar-blank mr-1"></i>
                                    {{ \Carbon\Carbon::parse($lesson['created_at'])->format('d M Y') }}
                                </span>
                                @if($lesson['duration'])
                                <span class="text-xs text-gray-400">
                                    <i class="ph ph-clock mr-1"></i>
                                    {{ $lesson['duration'] }} menit
                                </span>
                                @endif
                            </div>
                        </div>
                    </div>

                    {{-- ACTION BUTTONS --}}
                    <div class="flex items-center gap-1">
                        {{-- MONITORING --}}
                        <a href="{{ route('guru.monitoring.lesson', $lesson['id']) }}"
                           class="p-2.5 rounded-lg text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 transition group"
                           title="Monitoring Siswa">
                            <i class="ph ph-chart-line-up text-xl"></i>
                        </a>

                        {{-- BUKA MATERI --}}
                        <a href="{{ $lesson['content_url'] ?? '#' }}"
                           target="_blank"
                           class="p-2.5 rounded-lg text-gray-500 hover:text-emerald-600 hover:bg-emerald-50 transition group"
                           title="Buka Materi">
                            <i class="ph ph-arrow-square-out text-xl"></i>
                        </a>

                        {{-- EDIT MATERI --}}
                        <a href="{{ route('guru.materi.edit', $lesson['id']) }}"
                           class="p-2.5 rounded-lg text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 transition group"
                           title="Edit Materi">
                            <i class="ph ph-pencil-simple text-xl"></i>
                        </a>

                        {{-- HAPUS MATERI --}}
                        <form action="{{ route('guru.materi.destroy', $lesson['id']) }}"
                              method="POST"
                              onsubmit="return confirm('Hapus materi ini?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit"
                                    class="p-2.5 rounded-lg text-gray-500 hover:text-red-600 hover:bg-red-50 transition group"
                                    title="Hapus Materi">
                                <i class="ph ph-trash text-xl"></i>
                            </button>
                        </form>
                    </div>
                </div>
                @empty
                <div class="text-center py-8">
                    <div class="text-gray-300 mb-2">
                        <i class="ph ph-book-open text-4xl"></i>
                    </div>
                    <p class="text-sm text-gray-400 font-medium">Belum ada materi di bab ini</p>
                    <p class="text-xs text-gray-300 mt-1">Klik "Tambah Materi" untuk menambahkan konten pembelajaran</p>
                </div>
                @endforelse
            </div>

        </div>
        @endforeach
    </div>

</div>

{{-- MODAL TAMBAH/EDIT BAB --}}
<div id="sectionModal" class="fixed inset-0 bg-black/40 hidden items-center justify-center z-50 p-4">
    <div class="bg-white w-full max-w-md rounded-2xl shadow-xl overflow-hidden animate-scale-in">
        <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b">
            <h3 class="text-lg font-bold text-gray-800" id="modalTitle">Tambah Bab Baru</h3>
        </div>
        
        <form id="sectionForm"
              method="POST"
              onsubmit="handleSubmitSection(this)"
              class="p-6">
            @csrf
            <input type="hidden" name="_method" id="sectionMethod" value="POST">

            <div class="mb-5">
                <label class="block text-sm font-bold text-gray-700 mb-2 flex items-center gap-2">
                    <i class="ph ph-textbox text-gray-400"></i>
                    Judul Bab
                </label>
                <input type="text" name="title" required
                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition text-sm"
                       placeholder="Contoh: Bab 1 - Pengenalan Dasar">
            </div>

            <div class="flex justify-end gap-2 pt-4 border-t border-gray-100">
                <button type="button" onclick="closeSectionModal()" 
                        class="px-5 py-2.5 rounded-xl text-gray-600 hover:bg-gray-100 font-medium transition">
                    Batal
                </button>
                <button type="submit" id="btnSubmitSection"
                        class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-indigo-600 to-blue-600 text-white hover:from-indigo-700 hover:to-blue-700 font-medium shadow-lg shadow-indigo-100 transition flex items-center gap-2">
                    <i class="ph ph-check"></i>
                    <span id="submitText">Simpan Bab</span>
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function handleSubmitSection(form) {
    const btn = form.querySelector('#btnSubmitSection');
    if (btn.disabled) return false;
    btn.disabled = true;
    btn.innerHTML = '<i class="ph ph-spinner ph-spin"></i> Menyimpan...';
    return true;
}

function openSectionModal() {
    const form = document.getElementById('sectionForm');
    const modalTitle = document.getElementById('modalTitle');
    const submitText = document.getElementById('submitText');

    form.action = "{{ route('guru.sections.store', $activeMsc['id']) }}";
    document.getElementById('sectionMethod').value = 'POST';
    form.querySelector('input[name=title]').value = '';
    
    modalTitle.textContent = 'Tambah Bab Baru';
    submitText.textContent = 'Simpan Bab';

    const sectionModal = document.getElementById('sectionModal');
    sectionModal.classList.remove('hidden');
    sectionModal.classList.add('flex');
}

function closeSectionModal() {
    const sectionModal = document.getElementById('sectionModal');
    sectionModal.classList.add('hidden');
    sectionModal.classList.remove('flex');
}

function openEditSectionModal(id, title) {
    const form = document.getElementById('sectionForm');
    const titleInput = form.querySelector('input[name=title]');
    const methodInput = document.getElementById('sectionMethod');
    const modalTitle = document.getElementById('modalTitle');
    const submitText = document.getElementById('submitText');

    titleInput.value = title;
    form.action = `/teacher/sections/${id}`;
    methodInput.value = 'PATCH';
    
    modalTitle.textContent = 'Edit Bab';
    submitText.textContent = 'Perbarui Bab';

    const sectionModal = document.getElementById('sectionModal');
    sectionModal.classList.remove('hidden');
    sectionModal.classList.add('flex');
}
</script>

<style>
.animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

.animate-scale-in {
    animation: scaleIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.group:hover .group-hover\:translate-x-\[-2px\] {
    transform: translateX(-2px);
}
</style>

@endsection