@extends('layouts.teacher')

@section('title', 'Upload Materi')
@section('header_title', 'Upload Materi Baru')

@section('content')

{{-- Ubah max-w-4xl menjadi max-w-6xl agar muat untuk layout sidebar --}}
<div class="max-w-6xl mx-auto pb-10">

@if($msc && isset($msc->id))
<a href="{{ route('guru.mapel.detail', $msc->id) }}" class="inline-flex items-center text-gray-500 hover:text-indigo-600 mb-6 transition">
    <i class="ph ph-arrow-left mr-2"></i> Kembali ke Kelas
</a>
@elseif($module && isset($module->id))
<a href="{{ route('guru.mapel.detail', $module->id) }}" class="inline-flex items-center text-gray-500 hover:text-indigo-600 mb-6 transition">
    <i class="ph ph-arrow-left mr-2"></i> Kembali ke Kelas
</a>
@endif

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        
        <div class="px-8 py-6 border-b border-gray-50 bg-gray-50/50">
            <h2 class="text-lg font-bold text-gray-800">Detail Materi</h2>
            <p class="text-sm text-gray-500">Isi hierarki kelas dan link materi pembelajaran</p>
        </div>

        <form action="{{ isset($lesson) ? route('guru.materi.update', $lessonId) : route('guru.materi.store') }}" method="POST" class="p-8">
            @csrf
            @if(isset($lesson))
                @method('PATCH')
            @endif
            
            {{-- GRID LAYOUT: Kiri (Input) - Kanan (Tips) --}}
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">

                {{-- KOLOM KIRI: Form Input (Mengambil 2/3 layar) --}}
                <div class="lg:col-span-2 space-y-6">

                    <div class="bg-indigo-50/50 p-6 rounded-xl border border-indigo-100">
                        <h3 class="text-sm font-bold text-indigo-900 mb-4 flex items-center">
                            <i class="ph ph-tree-structure mr-2"></i> Target Pembelajaran
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-xs font-bold mb-2">Kursus / Modul</label>
                                <select name="module_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none bg-white" {{ $module ? 'disabled' : '' }}>
                                    @foreach($modules as $m)
                                        <option value="{{ $m['module']['id'] }}"
                                            {{ optional($module)->id === $m['module']['id'] ? 'selected' : '' }}>
                                            {{ $m['module']['title'] }}
                                        </option>
                                    @endforeach
                                </select>

                                @if($module)
                                    <input type="hidden" name="module_id" value="{{ $module->id }}">
                                @endif
                            </div>
                            <div>
                                <label class="block text-xs font-bold mb-2">Bab / Section</label>
                                <select name="section_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none bg-white" required>
                                    <option value="">Pilih Bab</option>
                                    @foreach($sections as $section)
                                        <option value="{{ $section['id'] }}"
                                            {{ ($activeSectionId ?? null) == $section['id'] ? 'selected' : '' }}>
                                            {{ $section['title'] }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Judul Materi</label>
                        <input type="text" name="title"
                            value="{{ old('title', $lesson->title ?? '') }}"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
                            required placeholder="Contoh: Pengenalan Dasar Algoritma">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-3">Tipe & Sumber Materi</label>
                        
                        <div class="flex space-x-6 mb-4 border-b border-gray-200">
                            <label class="cursor-pointer pb-2 {{ (old('type', $lesson->content_type ?? 'pdf') == 'pdf') ? 'border-b-2 border-indigo-600 text-indigo-600' : 'border-b-2 border-transparent text-gray-500 hover:text-gray-800' }} font-medium transition" id="tab-pdf">
                                <input type="radio" name="type" value="pdf" 
                                    {{ (old('type', $lesson->content_type ?? 'pdf') == 'pdf') ? 'checked' : '' }}
                                    class="hidden" onclick="switchType('pdf')">
                                <i class="ph ph-file-pdf mr-1"></i> Dokumen (PDF/Drive)
                            </label>
                            <label class="cursor-pointer pb-2 {{ (old('type', $lesson->content_type ?? '') == 'video') ? 'border-b-2 border-indigo-600 text-indigo-600' : 'border-b-2 border-transparent text-gray-500 hover:text-gray-800' }} font-medium transition" id="tab-video">
                                <input type="radio" name="type" value="video"
                                    {{ (old('type', $lesson->content_type ?? '') == 'video') ? 'checked' : '' }}
                                    class="hidden" onclick="switchType('video')">
                                <i class="ph ph-youtube-logo mr-1"></i> Video Pembelajaran
                            </label>
                        </div>

                        <div id="input-pdf" class="{{ (old('type', $lesson->content_type ?? 'pdf') == 'pdf') ? '' : 'hidden' }} animate-fade-in">
                            <div class="flex items-center space-x-2 bg-gray-50 border border-gray-300 rounded-lg px-3 py-2.5 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:border-indigo-500 bg-white">
                                <i class="ph ph-google-drive-logo text-xl text-gray-500"></i>
                                <input type="url" name="link_url_pdf" 
                                    value="{{ old('link_url_pdf', ($lesson->content_type ?? '') == 'pdf' ? ($lesson->content_url ?? '') : '') }}"
                                    class="w-full bg-transparent outline-none text-sm text-gray-700 placeholder-gray-400" 
                                    placeholder="Paste link Google Drive PDF di sini...">
                            </div>
                        </div>

                        <div id="input-video" class="{{ (old('type', $lesson->content_type ?? '') == 'video') ? '' : 'hidden' }} animate-fade-in">
                            <div class="flex items-center space-x-2 bg-gray-50 border border-gray-300 rounded-lg px-3 py-2.5 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:border-indigo-500 bg-white">
                                <i class="ph ph-link text-xl text-gray-500"></i>
                                <input type="url" name="link_url_video"
                                    value="{{ old('link_url_video', ($lesson->content_type ?? '') == 'video' ? ($lesson->content_url ?? '') : '') }}"
                                    class="w-full bg-transparent outline-none text-sm text-gray-700 placeholder-gray-400" 
                                    placeholder="Paste link YouTube atau Video Drive di sini...">
                            </div>
                        </div>
                        
                        {{-- Field untuk content_url (untuk update) --}}
                        @if(isset($lesson))
                            <input type="hidden" name="content_url" id="content_url_input" value="{{ $lesson->content_url ?? '' }}">
                        @endif
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Catatan</label>
                        <textarea name="description" rows="3" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none placeholder-gray-400" 
                            required 
                            placeholder="Berikan instruksi atau ringkasan materi untuk siswa...">{{ old('description', $lesson->content ?? '') }}</textarea>
                    </div>

                    {{-- PENGATURAN AKSES --}}
                    <div class="bg-gray-50 border border-gray-200 rounded-xl p-6">
                        <h3 class="text-sm font-bold text-gray-800 mb-4 flex items-center">
                            <i class="ph ph-clock mr-2"></i> Pengaturan Akses Materi
                        </h3>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            {{-- DURASI --}}
                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-2">
                                    Durasi Materi (Menit)
                                </label>
                                <input
                                    type="number"
                                    name="duration"
                                    min="1"
                                    value="{{ old('duration', $lesson->duration ?? '') }}"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none bg-white"
                                    placeholder="Contoh: 15">
                                <p class="text-xs text-gray-400 mt-1">
                                    Kosongkan jika tidak ada batasan.
                                </p>
                            </div>

                            {{-- AVAILABLE AT --}}
                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-2">
                                    Tanggal Mulai Bisa Diakses
                                </label>
                                <div class="flex gap-2">
                                    <input
                                        type="datetime-local"
                                        name="available_at"
                                        id="available_at_input"
                                        value="{{ old('available_at', $lesson->available_at ?? '') }}"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none bg-white">
                                    <button type="button" onclick="setToday()" class="px-3 py-2 text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg border border-gray-300 font-medium whitespace-nowrap">
                                        Today
                                    </button>
                                </div>
                                <p class="text-xs text-gray-400 mt-1">
                                    @if(isset($lesson))
                                        Ubah untuk mengatur ulang tanggal akses.
                                    @else
                                        Default: Langsung bisa diakses.
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>

                </div>

                {{-- KOLOM KANAN: Tips Penggunaan (Sidebar) --}}
                <div class="lg:col-span-1">
                    <div class="bg-blue-50 rounded-xl p-5 border border-blue-100 sticky top-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-100 text-blue-600 rounded-lg p-2 mr-3">
                                <i class="ph ph-lightbulb text-xl"></i>
                            </div>
                            <h4 class="font-bold text-gray-800 text-sm">Tips Pengisian</h4>
                        </div>

                        <ul class="space-y-4">
                            <li class="flex items-start text-xs text-gray-600 leading-relaxed">
                                <i class="ph ph-check-circle text-blue-500 mr-2 mt-0.5 text-sm"></i>
                                <div>
                                    <span class="font-bold text-gray-800 block mb-1">Akses Google Drive</span>
                                    Pastikan link dokumen atau video dari Google Drive sudah diatur ke mode <span class="bg-white px-1 py-0.5 rounded border border-gray-200 font-medium text-gray-700">Anyone with the link</span> agar siswa tidak perlu meminta izin akses.
                                </div>
                            </li>
                            
                            <li class="flex items-start text-xs text-gray-600 leading-relaxed">
                                <i class="ph ph-check-circle text-blue-500 mr-2 mt-0.5 text-sm"></i>
                                <div>
                                    <span class="font-bold text-gray-800 block mb-1">Format Video</span>
                                    Disarankan menggunakan link <span class="font-medium text-indigo-600">YouTube</span> agar lebih ringan saat diputar oleh siswa melalui HP.
                                </div>
                            </li>

                            @if(!isset($lesson))
                            <li class="flex items-start text-xs text-gray-600 leading-relaxed">
                                <i class="ph ph-check-circle text-blue-500 mr-2 mt-0.5 text-sm"></i>
                                <div>
                                    <span class="font-bold text-gray-800 block mb-1">Durasi Materi (Menit)</span>
                                    Gunakan fitur <span class="font-medium">Tanggal Mulai</span> jika Anda ingin mengupload materi sekarang, namun baru akan muncul di dashboard siswa pada hari pelajaran berlangsung.
                                </div>
                            </li>

                            <li class="flex items-start text-xs text-gray-600 leading-relaxed">
                                <i class="ph ph-check-circle text-blue-500 mr-2 mt-0.5 text-sm"></i>
                                <div>
                                    <span class="font-bold text-gray-800 block mb-1">Pengaturan Waktu</span>
                                    Gunakan fitur <span class="font-medium">Durasi</span> jika Anda ingin memberikan durasi waktu agar siswa tidak langsung meng-skip ke materi selanjutnya, memungkinkan siswa bisa lebih fokus ke materi bukan ke cepat siapnya materi dibuka.
                                </div>
                            </li>
                            @endif

                            @if(isset($lesson))
                            <li class="flex items-start text-xs text-gray-600 leading-relaxed">
                                <i class="ph ph-check-circle text-blue-500 mr-2 mt-0.5 text-sm"></i>
                                <div>
                                    <span class="font-bold text-gray-800 block mb-1">Perubahan Materi</span>
                                    Perubahan yang Anda lakukan akan langsung terlihat oleh siswa. Pastikan link materi masih aktif dan dapat diakses.
                                </div>
                            </li>
                            <li class="flex items-start text-xs text-gray-600 leading-relaxed">
                                <i class="ph ph-check-circle text-blue-500 mr-2 mt-0.5 text-sm"></i>
                                <div>
                                    <span class="font-bold text-gray-800 block mb-1">Tanggal Mulai</span>
                                    Anda dapat mengubah tanggal akses materi jika ingin menunda atau mempercepat ketersediaan materi. Klik "Today" untuk set ke hari ini.
                                </div>
                            </li>
                            @endif
                        </ul>

                        <div class="mt-6 pt-4 border-t border-blue-100">
                            <p class="text-[10px] text-blue-600 italic">
                                *Butuh bantuan teknis? Hubungi tim IT sekolah.
                            </p>
                        </div>
                    </div>
                </div>

            </div>
            {{-- END GRID --}}

            <div class="mt-8 pt-6 border-t border-gray-100 flex justify-end space-x-3">
                @if($module)
                    <a href="{{ route('guru.mapel.detail', $module->id) }}" 
                       class="px-6 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 font-medium transition">
                        Batal
                    </a>
                @else
                    <button type="button" class="px-6 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 font-medium transition">Batal</button>
                @endif
                <button type="submit" class="px-6 py-2.5 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 font-medium shadow-lg shadow-indigo-200 transition">
                    <i class="ph ph-paper-plane-right mr-2"></i> 
                    {{ isset($lesson) ? 'Perbarui Materi' : 'Publikasikan' }}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function switchType(type) {
        const inputPdf = document.getElementById('input-pdf');
        const inputVideo = document.getElementById('input-video');
        const tabPdf = document.getElementById('tab-pdf');
        const tabVideo = document.getElementById('tab-video');
        
        const fieldPdf = inputPdf.querySelector('input[name="link_url_pdf"]');
        const fieldVideo = inputVideo.querySelector('input[name="link_url_video"]');
        const contentUrlInput = document.getElementById('content_url_input');

        if (type === 'pdf') {
            inputPdf.classList.remove('hidden');
            inputVideo.classList.add('hidden');
            
            tabPdf.classList.add('border-indigo-600', 'text-indigo-600');
            tabPdf.classList.remove('border-transparent', 'text-gray-500');
            tabVideo.classList.remove('border-indigo-600', 'text-indigo-600');
            tabVideo.classList.add('border-transparent', 'text-gray-500');

            // Update content_url untuk edit mode
            if (contentUrlInput && fieldPdf.value) {
                contentUrlInput.value = fieldPdf.value;
            }

        } else {
            inputPdf.classList.add('hidden');
            inputVideo.classList.remove('hidden');

            tabVideo.classList.add('border-indigo-600', 'text-indigo-600');
            tabVideo.classList.remove('border-transparent', 'text-gray-500');
            tabPdf.classList.remove('border-indigo-600', 'text-indigo-600');
            tabPdf.classList.add('border-transparent', 'text-gray-500');

            // Update content_url untuk edit mode
            if (contentUrlInput && fieldVideo.value) {
                contentUrlInput.value = fieldVideo.value;
            }
        }
    }

    // Fungsi untuk set tanggal ke hari ini
    function setToday() {
        const now = new Date();
        // Format: YYYY-MM-DDTHH:MM
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        
        const todayString = `${year}-${month}-${day}T${hours}:${minutes}`;
        document.getElementById('available_at_input').value = todayString;
    }

    // Auto-switch berdasarkan data yang ada
    document.addEventListener("DOMContentLoaded", function() {
        const currentType = "{{ old('type', $lesson->content_type ?? 'pdf') }}";
        switchType(currentType);
        
        // Update content_url saat input berubah (untuk edit mode)
        const pdfInput = document.querySelector('input[name="link_url_pdf"]');
        const videoInput = document.querySelector('input[name="link_url_video"]');
        const contentUrlInput = document.getElementById('content_url_input');
        
        if (pdfInput && contentUrlInput) {
            pdfInput.addEventListener('input', function() {
                if (document.querySelector('input[name="type"]:checked').value === 'pdf') {
                    contentUrlInput.value = this.value;
                }
            });
        }
        
        if (videoInput && contentUrlInput) {
            videoInput.addEventListener('input', function() {
                if (document.querySelector('input[name="type"]:checked').value === 'video') {
                    contentUrlInput.value = this.value;
                }
            });
        }
    });
</script>

@endsection