@extends('layouts.teacher')

@section('title', 'Materi - ' . $course->title)

@section('header', 'Materi Pembelajaran')

@section('breadcrumb')
    <a href="{{ route('teacher.courses.index') }}">Kursus</a>
    <span class="breadcrumb-sep">/</span>
    <a href="{{ route('teacher.courses.show', $course) }}">{{ $course->title }}</a>
    <span class="breadcrumb-sep">/</span>
    <span>Materi</span>
@endsection

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-[var(--navy)]">Materi Pembelajaran</h1>
            <p class="text-gray-500 mt-1">Kursus: {{ $course->title }}</p>
        </div>
        <a href="{{ route('teacher.courses.materials.create', $course) }}" 
           class="bg-[var(--gold)] text-[var(--navy)] px-4 py-2 rounded-lg font-semibold hover:bg-[var(--gold-2)] transition">
            <i class="fas fa-plus mr-2"></i> Tambah Materi
        </a>
    </div>

    @if($materials->isEmpty())
        <div class="bg-white rounded-lg shadow-sm border border-[var(--border)] p-12 text-center">
            <div class="text-6xl mb-4">📚</div>
            <h3 class="text-lg font-semibold text-gray-700 mb-2">Belum Ada Materi</h3>
            <p class="text-gray-500 mb-4">Mulai tambahkan materi pembelajaran untuk kursus ini.</p>
            <a href="{{ route('teacher.courses.materials.create', $course) }}" 
               class="inline-flex items-center gap-2 bg-[var(--gold)] text-[var(--navy)] px-4 py-2 rounded-lg font-semibold hover:bg-[var(--gold-2)] transition">
                <i class="fas fa-plus"></i> Tambah Materi Pertama
            </a>
        </div>
    @else
        <div class="grid gap-4">
            @foreach($materials as $material)
            <div class="bg-white rounded-lg shadow-sm border border-[var(--border)] hover:shadow-md transition">
                <div class="p-5 flex items-start justify-between">
                    <div class="flex items-start gap-4 flex-1">
                        <div class="w-12 h-12 rounded-lg bg-[var(--gold-light)] flex items-center justify-center">
                            @if($material->type == 'video')
                                <i class="fas fa-video text-[var(--gold)] text-xl"></i>
                            @elseif($material->type == 'pdf')
                                <i class="fas fa-file-pdf text-red-500 text-xl"></i>
                            @elseif($material->type == 'word')
                                <i class="fas fa-file-word text-blue-500 text-xl"></i>
                            @elseif($material->type == 'excel')
                                <i class="fas fa-file-excel text-green-500 text-xl"></i>
                            @elseif($material->type == 'link')
                                <i class="fas fa-link text-[var(--gold)] text-xl"></i>
                            @else
                                <i class="fas fa-file-alt text-[var(--gold)] text-xl"></i>
                            @endif
                        </div>
                        <div class="flex-1">
                            <h3 class="font-semibold text-[var(--navy)] text-lg">{{ $material->title }}</h3>
                            <div class="flex items-center gap-3 mt-2 text-sm text-gray-500">
                                <span class="capitalize">
                                    <i class="fas fa-tag mr-1"></i> {{ $material->type }}
                                </span>
                                @if($material->order)
                                <span>
                                    <i class="fas fa-sort-numeric-down mr-1"></i> Urutan: {{ $material->order }}
                                </span>
                                @endif
                            </div>
                            @if($material->content)
                            <div class="mt-2 text-sm text-gray-600 line-clamp-2">
                                {{ Str::limit(strip_tags($material->content), 100) }}
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <a href="{{ route('teacher.courses.materials.edit', [$course, $material]) }}" 
                           class="p-2 text-gray-500 hover:text-[var(--gold)] transition">
                            <i class="fas fa-edit"></i>
                        </a>
                        <form action="{{ route('teacher.courses.materials.destroy', [$course, $material]) }}" 
                              method="POST" 
                              onsubmit="return confirm('Yakin ingin menghapus materi ini?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="p-2 text-gray-500 hover:text-red-500 transition">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    @endif
</div>
@endsection