@extends('siswa.layout')

@section('content')

<div class="max-w-3xl mx-auto bg-white p-8 rounded-xl shadow space-y-6">

    <!-- ================= BACK ================= -->
    <a href="{{ route('siswa.modul.show', $task->lesson_id) }}"
       class="text-sm text-gray-500 hover:text-black inline-flex items-center gap-1">
        <i data-lucide="arrow-left" class="w-4 h-4"></i>
        Kembali ke Materi
    </a>

    <!-- ================= HEADER ================= -->
    <div>
        <h1 class="text-2xl font-bold mt-2 mb-2 flex items-center gap-2">
            <i data-lucide="upload-cloud" class="w-6 h-6"></i>
            {{ $task->title }}
        </h1>

        <p class="text-gray-700 mb-4">
            {{ $task->description }}
        </p>

        {{-- AVAILABLE AT --}}
        @if($task->available_at && now()->lt($task->available_at))
            <div class="p-4 mb-4 bg-yellow-50 border border-yellow-300 rounded-lg text-yellow-800 flex gap-2">
                <i data-lucide="lock" class="w-5 h-5 mt-0.5"></i>
                <div>
                    Tugas dapat dikerjakan mulai:
                    <strong>
                        {{ $task->available_at->translatedFormat('d F Y H:i') }}
                    </strong>
                </div>
            </div>
        @endif

        {{-- DEADLINE --}}
        @if($task->deadline)
            <p class="text-sm text-gray-500 flex items-center gap-1">
                <i data-lucide="clock" class="w-4 h-4"></i>
                Deadline:
                <strong>
                    {{ $task->deadline->translatedFormat('d F Y H:i') }}
                </strong>
            </p>
        @endif
    </div>

    <!-- ================= LAMPIRAN GURU ================= -->
    @if($task->has_attachment)
        <div class="p-4 rounded-lg bg-slate-50 border border-slate-200">
            <p class="text-sm font-semibold text-slate-700 mb-2 flex items-center gap-1">
                <i data-lucide="paperclip" class="w-4 h-4"></i>
                Lampiran dari Guru
            </p>

            <a href="{{ asset('storage/'.$task->attachment_path) }}"
               target="_blank"
               class="inline-flex items-center gap-2
                      text-blue-600 hover:underline font-medium">
                <i data-lucide="download" class="w-4 h-4"></i>
                Download Lampiran
            </a>
        </div>
    @endif

    {{-- ================= FLASH MESSAGE ================= --}}
    @if(session('success'))
        <div class="p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 flex gap-2">
            <i data-lucide="check-circle" class="w-5 h-5 mt-0.5"></i>
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex gap-2">
            <i data-lucide="x-circle" class="w-5 h-5 mt-0.5"></i>
            {{ session('error') }}
        </div>
    @endif

    {{-- ================= CATATAN GURU ================= --}}
    @if($submission && $submission->teacher_note)
        <div class="p-4 rounded-lg bg-blue-50 border border-blue-200">
            <p class="text-sm font-semibold text-blue-700 mb-1 flex items-center gap-1">
                <i data-lucide="message-square" class="w-4 h-4"></i>
                Catatan dari Guru
            </p>
            <p class="text-sm text-blue-700">
                {{ $submission->teacher_note }}
            </p>
        </div>
    @endif

    {{-- ================= STATUS SUBMISSION ================= --}}
    @php
        $deadlinePassed = $task->deadline && now()->gt($task->deadline);
    @endphp

    {{-- ✔ SUDAH SUBMIT & TIDAK BOLEH REVISI --}}
    @if($submission && ! $task->allow_revision)

        <div class="p-4 rounded-lg bg-green-50 border border-green-200">
            <p class="text-green-700 font-semibold flex items-center gap-1">
                <i data-lucide="check-circle" class="w-5 h-5"></i>
                Tugas sudah dikumpulkan
            </p>

            <p class="text-sm text-gray-600 mt-2 break-all flex items-center gap-1">
                <i data-lucide="link" class="w-4 h-4"></i>
                <a href="{{ $submission->submission_link }}"
                   target="_blank"
                   class="text-blue-600 hover:underline">
                    {{ $submission->submission_link }}
                </a>
            </p>

            <p class="text-sm text-gray-500 mt-2">
                Revisi tidak diperbolehkan
            </p>
        </div>

    {{-- ❌ DEADLINE LEWAT & BELUM SUBMIT --}}
    @elseif($deadlinePassed && ! $submission)

        <div class="p-4 rounded-lg bg-red-50 border border-red-200">
            <p class="text-red-700 font-semibold flex items-center gap-1">
                <i data-lucide="alert-triangle" class="w-5 h-5"></i>
                Deadline tugas telah berakhir
            </p>

            <p class="text-sm text-red-600 mt-1">
                Pengumpulan tugas sudah ditutup.
            </p>

            <p class="text-sm text-gray-600 mt-3">
                Tugas ini tetap dihitung <strong>selesai</strong> untuk progres pembelajaran.
            </p>
        </div>

    {{-- ✏ FORM SUBMIT (MASIH VALID) --}}
    @elseif(!($task->available_at && now()->lt($task->available_at)))

        <form method="POST"
              action="{{ route('siswa.task.submit', $task->id) }}"
              class="space-y-4">
            @csrf

            <div>
                <label class="text-sm font-medium text-gray-700">
                    Link Tugas
                </label>
                <input
                    type="url"
                    name="submission_link"
                    required
                    value="{{ $submission->submission_link ?? '' }}"
                    placeholder="https://drive.google.com/..."
                    class="w-full mt-1 px-4 py-2 border rounded-lg
                           focus:ring focus:ring-teal-200"
                >
            </div>

            <button
                type="submit"
                class="bg-teal-600 text-white px-6 py-2 rounded-lg
                       hover:bg-teal-500 transition font-semibold inline-flex items-center gap-2">
                <i data-lucide="send" class="w-4 h-4"></i>
                {{ $submission ? 'Kirim Ulang Tugas' : 'Kirim Tugas' }}
            </button>
        </form>

    @endif

</div>

@endsection