@extends('layouts.teacher')

@section('title', 'Tugas - ' . $msc->module->title)
@section('header_title', 'Tugas')

@section('content')

{{-- HEADER --}}
<div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4 mb-6">
    <div>
        <a href="{{ route('guru.tugas.index') }}"
           class="text-sm text-gray-500 hover:text-indigo-600">
            ← Kembali ke Modul
        </a>

        <h2 class="text-lg font-bold text-gray-800 mt-1">
            {{ $msc->module->title }}
        </h2>
    </div>

    {{-- CREATE --}}
    <a href="{{ route('guru.tugas.create', ['msc' => $msc->id]) }}"
       class="bg-indigo-600 text-white px-5 py-2.5 rounded-lg font-medium
              hover:bg-indigo-700 transition flex items-center
              shadow-lg shadow-indigo-200 w-fit">
        <i class="ph ph-plus mr-2"></i> Buat Tugas
    </a>
</div>

{{-- LIST --}}
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@forelse($assignments as $tugas)

    <div class="bg-white p-6 rounded-xl border border-gray-100 shadow-sm
                relative hover:border-indigo-300 transition">

        {{-- STATUS --}}
        <div class="absolute top-4 right-4">
            <span class="text-xs font-bold px-3 py-1 rounded-full
                {{ $tugas->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                {{ $tugas->is_active ? 'Aktif' : 'Selesai' }}
            </span>
        </div>

        {{-- TITLE --}}
        <h3 class="text-lg font-bold text-gray-800 mb-3">
            {{ $tugas->title }}
        </h3>

        {{-- INFO --}}
        <div class="text-sm text-gray-500 mb-4 flex items-center">
            <i class="ph ph-clock text-lg mr-1.5"></i>
            Deadline: {{ $tugas->deadline->format('d M Y, H:i') }}
        </div>

        {{-- FOOTER --}}
        <div class="flex justify-between items-center text-sm pt-4 border-t border-gray-50">
            <span class="text-gray-600">
                {{ $tugas->submitted_count }} siswa mengumpulkan
            </span>

            <div class="flex items-center space-x-2">
                {{-- BUTTON EDIT --}}
                <a href="{{ route('guru.tugas.edit', $tugas->id) }}"
                   class="text-indigo-600 hover:text-indigo-800 p-2 rounded-lg hover:bg-indigo-50 transition"
                   title="Edit Tugas">
                    <i class="ph ph-pencil-simple text-lg"></i>
                </a>

                {{-- BUTTON HAPUS --}}
                <form action="{{ route('guru.tugas.destroy', $tugas->id) }}" method="POST" class="inline"
                      onsubmit="return confirm('Apakah Anda yakin ingin menghapus tugas ini?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                            class="text-red-600 hover:text-red-800 p-2 rounded-lg hover:bg-red-50 transition"
                            title="Hapus Tugas">
                        <i class="ph ph-trash text-lg"></i>
                    </button>
                </form>

                {{-- BUTTON DETAIL --}}
                <a href="{{ route('guru.tugas.show', $tugas->id) }}"
                   class="text-indigo-600 font-semibold hover:underline px-2">
                    Detail →
                </a>
            </div>
        </div>
    </div>

@empty
    <div class="col-span-full text-center text-gray-400 py-12 italic">
        Belum ada tugas di modul ini
    </div>
@endforelse
</div>

@endsection