@extends('layouts.teacher')

@section('title', isset($task) ? 'Edit Tugas' : 'Buat Tugas Baru')
@section('header_title', isset($task) ? 'Edit Tugas' : 'Buat Tugas')

@section('content')

<div class="max-w-4xl mx-auto">
    {{-- BACK BUTTON --}}
    @if(isset($task) && isset($task->msc_id))
        <a href="{{ route('guru.tugas.module', $task->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 Daftar Tugas
        </a>
    @elseif(isset($msc))
        <a href="{{ route('guru.tugas.module', $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 Daftar Tugas
        </a>
    @else
        <a href="{{ route('guru.tugas.index') }}"
           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 Modul
        </a>
    @endif

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">

        @if ($errors->any())
        <div class="bg-red-100 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
            <ul class="text-sm list-disc list-inside">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <form action="{{ isset($task) ? route('guru.tugas.update', $task->id) : route('guru.tugas.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @if(isset($task))
                @method('PATCH')
            @endif

            <div class="grid grid-cols-1 gap-6">

                {{-- MODULE & LESSON --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                    {{-- INFO MODUL & KELAS --}}
                    <div class="bg-gray-50 border rounded-lg p-4">
                        <p class="text-sm text-gray-500">Modul</p>
                        <p class="font-semibold">{{ $msc->module->title }}</p>

                        <p class="text-sm text-gray-500 mt-2">Kelas</p>
                        <p class="font-semibold">{{ $msc->class->name }}</p>
                    </div>

                    {{-- HIDDEN FIELDS --}}
                    <input type="hidden"
                        name="modules_student_class_id"
                        value="{{ isset($task) ? $task->modules_student_class_id : $msc->id }}">

                    {{-- LESSON DROPDOWN --}}
                    <div>
                        <label class="block text-sm font-bold mb-2">
                            Materi / Lesson <span class="text-red-500">*</span>
                        </label>

                        <select name="lesson_id" required
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none">
                            <option value="">Pilih Materi</option>
                            @foreach($msc->sections as $section)
                                <optgroup label="{{ $section->title }}">
                                    @foreach($section->lessons as $lesson)
                                        <option value="{{ $lesson->id }}"
                                            {{ (isset($task) && $task->lesson_id == $lesson->id) || old('lesson_id') == $lesson->id ? 'selected' : '' }}>
                                            {{ $lesson->title }}
                                        </option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- JUDUL --}}
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Judul Tugas <span class="text-red-500">*</span>
                    </label>
                    <input type="text"
                           name="title"
                           value="{{ old('title', $task->title ?? '') }}"
                           required
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
                           placeholder="Misal: Tugas Video DevOps">
                </div>

                {{-- DESKRIPSI --}}
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Instruksi / Soal <span class="text-red-500">*</span>
                    </label>
                    <textarea name="description"
                              rows="4"
                              required
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
                              placeholder="Tuliskan instruksi pengerjaan tugas...">{{ old('description', $task->description ?? '') }}</textarea>
                </div>

                {{-- LAMPIRAN SOAL --}}
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Link Soal / Materi (Opsional)
                    </label>

                    <input type="url"
                        name="attachment_link"
                        value="{{ old('attachment_link', $task->attachment_link ?? '') }}"
                        placeholder="https://drive.google.com / https://youtube.com / dll"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none">
                        
                    <p class="text-xs text-gray-400 mt-1">
                        Gunakan link Google Drive, YouTube, atau website lain
                    </p>
                </div>

                {{-- JADWAL TUGAS --}}
                {{-- JADWAL TUGAS --}}
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">

    {{-- WAKTU DIBUKA --}}
    <div>
        <label class="block text-sm font-bold text-gray-700 mb-2">
            Waktu Dibuka
        </label>

        <div class="flex gap-2">
            <input type="datetime-local"
                   name="available_at"
                   id="available_at_input"
                   value="{{ old('available_at',
                        isset($task->available_at)
                            ? date('Y-m-d\TH:i', strtotime($task->available_at))
                            : ''
                   ) }}"
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none text-gray-600">

            <button type="button"
                    onclick="setTodayAvailable()"
                    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-500 mt-1">
            Tentukan kapan tugas mulai bisa dilihat siswa. Kosongkan jika langsung tersedia.
        </p>
    </div>

    {{-- DEADLINE --}}
    <div>
        <label class="block text-sm font-bold text-gray-700 mb-2">
            Deadline
        </label>

        <div class="flex gap-2">
            <input type="datetime-local"
                   name="deadline"
                   id="deadline_input"
                   value="{{ old('deadline',
                        isset($task) && $task->deadline
                            ? date('Y-m-d\TH:i', strtotime($task->deadline))
                            : ''
                   ) }}"
                   required
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none text-gray-600">

            <button type="button"
                    onclick="setTodayDeadline()"
                    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-500 mt-1">
            Batas terakhir siswa dapat mengumpulkan tugas. Setelah waktu ini, pengumpulan akan ditutup otomatis.
        </p>
    </div>

</div>

                {{-- OPSI TAMBAHAN --}}
                <div class="space-y-3">
                    {{-- ALLOW REVISION --}}
                    <div class="flex items-center space-x-3">
                        <input type="checkbox"
                               name="allow_revision"
                               value="1"
                               {{ (isset($task) && $task->allow_revision) || old('allow_revision', true) ? 'checked' : '' }}
                               class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        <label class="text-sm text-gray-700">
                            Izinkan siswa mengirim ulang (revisi)
                        </label>
                    </div>

                    {{-- IS ACTIVE (Hanya untuk EDIT) --}}
                    @if(isset($task))
                    <div class="flex items-center space-x-3">
                        <input type="checkbox"
                               name="is_active"
                               value="1"
                               {{ (isset($task) && $task->is_active) || old('is_active', true) ? 'checked' : '' }}
                               class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        <label class="text-sm text-gray-700">
                            Tugas Aktif (Siswa bisa mengerjakan)
                        </label>
                    </div>
                    @endif
                </div>

            </div>

            {{-- ACTION BUTTONS --}}
            <div class="mt-8 pt-6 border-t border-gray-100 flex justify-end space-x-3">
                @if(isset($task) && isset($task->msc_id))
                    <a href="{{ route('guru.tugas.module', $task->msc_id) }}"
                       class="px-6 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 font-medium transition">
                        Batal
                    </a>
                @elseif(isset($msc))
                    <a href="{{ route('guru.tugas.module', $msc->id) }}"
                       class="px-6 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 font-medium transition">
                        Batal
                    </a>
                @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">
                    {{ isset($task) ? 'Perbarui Tugas' : 'Terbitkan Tugas' }}
                </button>
            </div>
        </form>
    </div>
</div>


<script>
function getNowFormatted() {
    const now = new Date();
    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');

    return `${year}-${month}-${day}T${hours}:${minutes}`;
}

function setTodayAvailable() {
    document.getElementById('available_at_input').value = getNowFormatted();
}

function setTodayDeadline() {
    document.getElementById('deadline_input').value = getNowFormatted();
}
</script>
@endsection