@extends('layouts.app')
@section('title', 'Homework Board')
@section('page-title', 'Homework Board')

@section('content')
<div class="space-y-6">

    {{-- Header --}}
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
            <h2 class="text-xl font-bold text-stone-800">
                <i class="fas fa-book-open text-amber-500 mr-2"></i>Daily Homework
            </h2>
            <p class="text-sm text-stone-500 mt-0.5">
                @if(in_array(auth()->user()->role, ['teacher', 'admin']))
                    Post and manage daily homework for your classes
                @else
                    View homework assigned by your teachers
                @endif
            </p>
        </div>
        @if(in_array(auth()->user()->role, ['teacher', 'admin']))
        <button onclick="document.getElementById('postModal').classList.remove('hidden')"
                class="px-5 py-2.5 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition shadow-sm">
            <i class="fas fa-plus mr-1.5"></i> Post Homework
        </button>
        @endif
    </div>

    {{-- Filters --}}
    <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm px-5 py-3">
        <form method="GET" class="flex flex-wrap items-center gap-3">
            <input type="date" name="date" value="{{ request('date', today()->format('Y-m-d')) }}"
                   class="border border-stone-300 rounded-lg px-3 py-1.5 text-sm">
            @if($classes->count() > 1)
            <select name="class_id" class="border border-stone-300 rounded-lg px-3 py-1.5 text-sm">
                <option value="">All Classes</option>
                @foreach($classes as $cls)
                <option value="{{ $cls->id }}" {{ $classId == $cls->id ? 'selected' : '' }}>{{ $cls->full_name }}</option>
                @endforeach
            </select>
            @endif
            <button type="submit" class="px-4 py-1.5 bg-amber-500 text-white rounded-lg text-sm font-medium hover:bg-amber-600 transition">
                <i class="fas fa-search mr-1"></i> Filter
            </button>
            <a href="{{ route('homework.index') }}" class="text-xs text-stone-500 hover:text-stone-700">This Week</a>
        </form>
    </div>

    {{-- Homework List Grouped by Date --}}
    @forelse($grouped as $dateKey => $items)
    @php
        $d = \Carbon\Carbon::parse($dateKey);
        $isToday = $d->isToday();
        $isYesterday = $d->isYesterday();
        $dayLabel = $isToday ? 'Today' : ($isYesterday ? 'Yesterday' : $d->format('l'));
    @endphp
    <div class="space-y-3">
        {{-- Date Header --}}
        <div class="flex items-center gap-3">
            <div class="flex items-center gap-2.5">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center font-bold text-sm {{ $isToday ? 'bg-amber-500 text-white' : 'bg-stone-200 text-stone-600' }}">
                    {{ $d->format('d') }}
                </div>
                <div>
                    <p class="font-bold text-stone-800 text-sm">{{ $dayLabel }}</p>
                    <p class="text-[10px] text-stone-400">{{ $d->format('d M Y') }} · {{ $items->count() }} {{ Str::plural('item', $items->count()) }}</p>
                </div>
            </div>
            <div class="flex-1 border-t border-stone-200"></div>
        </div>

        {{-- Homework Cards --}}
        <div class="grid md:grid-cols-2 gap-3 pl-2">
            @foreach($items as $hw)
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden hover:shadow-md transition group">
                {{-- Color bar --}}
                @php
                    $colors = ['bg-amber-500','bg-blue-500','bg-emerald-500','bg-purple-500','bg-rose-500','bg-cyan-500','bg-orange-500','bg-indigo-500'];
                    $barColor = $colors[$hw->subject_id % count($colors)];
                @endphp
                <div class="{{ $barColor }} h-1"></div>

                <div class="p-4">
                    {{-- Header --}}
                    <div class="flex items-start justify-between gap-2">
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 flex-wrap">
                                <span class="text-[10px] px-2 py-0.5 rounded-full font-bold text-white {{ $barColor }}">
                                    {{ $hw->subject->name ?? '—' }}
                                </span>
                                <span class="text-[10px] text-stone-400 bg-stone-100 px-1.5 py-0.5 rounded font-medium">
                                    {{ $hw->class_->full_name ?? '—' }}
                                </span>
                            </div>
                            <h3 class="font-bold text-stone-800 mt-2 text-sm leading-snug">{{ $hw->title }}</h3>
                        </div>

                        @if(auth()->id() === $hw->teacher_id || auth()->user()->role === 'admin')
                        <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition flex-shrink-0">
                            <button onclick="editHomework({{ $hw->id }}, '{{ addslashes($hw->title) }}', `{{ addslashes($hw->description ?? '') }}`)"
                                    class="p-1.5 text-stone-400 hover:text-amber-500 hover:bg-amber-50 rounded-lg transition" title="Edit">
                                <i class="fas fa-pen text-[10px]"></i>
                            </button>
                            <form method="POST" action="{{ route('homework.destroy', $hw) }}" onsubmit="return confirm('Delete this homework?')">
                                @csrf @method('DELETE')
                                <button class="p-1.5 text-stone-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition" title="Delete">
                                    <i class="fas fa-trash text-[10px]"></i>
                                </button>
                            </form>
                        </div>
                        @endif
                    </div>

                    {{-- Description --}}
                    @if($hw->description)
                    <p class="text-sm text-stone-500 mt-2 leading-relaxed line-clamp-3">{{ $hw->description }}</p>
                    @endif

                    {{-- Footer --}}
                    <div class="flex items-center justify-between mt-3 pt-3 border-t border-stone-100">
                        <div class="flex items-center gap-2">
                            <div class="w-6 h-6 bg-stone-200 rounded-full flex items-center justify-center">
                                <span class="text-[8px] font-bold text-stone-500">{{ strtoupper(substr($hw->teacher->name ?? '?', 0, 1)) }}</span>
                            </div>
                            <span class="text-[11px] text-stone-400">{{ $hw->teacher->name ?? 'Unknown' }}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            @if($hw->attachment)
                            <a href="{{ Storage::url($hw->attachment) }}" target="_blank"
                               class="text-[11px] text-amber-600 hover:text-amber-700 font-medium">
                                <i class="fas fa-paperclip mr-0.5"></i> File
                            </a>
                            @endif
                            <span class="text-[10px] text-stone-300">{{ $hw->created_at->format('h:i A') }}</span>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @empty
    <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-12 text-center">
        <div class="w-16 h-16 bg-amber-50 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-book-open text-2xl text-amber-300"></i>
        </div>
        <p class="text-stone-500 font-medium">No homework found</p>
        <p class="text-xs text-stone-400 mt-1">
            @if(request('date'))
                No homework posted for {{ \Carbon\Carbon::parse(request('date'))->format('d M Y') }}
            @else
                No homework posted in the last 7 days
            @endif
        </p>
    </div>
    @endforelse

    {{-- Pagination --}}
    @if($homework->hasPages())
    <div class="mt-4">{{ $homework->links() }}</div>
    @endif
</div>

{{-- Post Homework Modal --}}
@if(in_array(auth()->user()->role, ['teacher', 'admin']))
<div id="postModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
        <div class="px-6 py-4 border-b border-stone-100 flex items-center justify-between sticky top-0 bg-white rounded-t-2xl z-10">
            <h3 class="text-lg font-bold text-stone-800"><i class="fas fa-plus-circle text-amber-500 mr-2"></i>Post Homework</h3>
            <button onclick="document.getElementById('postModal').classList.add('hidden')" class="text-stone-400 hover:text-stone-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form method="POST" action="{{ route('homework.store') }}" enctype="multipart/form-data" class="p-6 space-y-4">
            @csrf
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Class <span class="text-red-400">*</span></label>
                    <select name="class_id" required id="postClass" onchange="filterSubjects(this.value)"
                            class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                        <option value="">Select...</option>
                        @foreach($classes as $cls)
                        <option value="{{ $cls->id }}">{{ $cls->full_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Subject <span class="text-red-400">*</span></label>
                    <select name="subject_id" required id="postSubject"
                            class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                        <option value="">Select...</option>
                        @foreach($subjects as $sub)
                        <option value="{{ $sub->id }}">{{ $sub->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Date <span class="text-red-400">*</span></label>
                <input type="date" name="date" value="{{ today()->format('Y-m-d') }}" required
                       class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Title <span class="text-red-400">*</span></label>
                <input type="text" name="title" required maxlength="255" placeholder="e.g. Complete Exercise 5.2 Q1-Q10"
                       class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Description <span class="text-stone-400">(optional)</span></label>
                <textarea name="description" rows="3" maxlength="2000" placeholder="Additional instructions, page numbers, etc."
                          class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm resize-none"></textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Attachment <span class="text-stone-400">(optional, max 5MB)</span></label>
                <input type="file" name="attachment"
                       class="w-full border border-stone-300 rounded-xl px-3 py-2 text-sm file:mr-3 file:py-1 file:px-3 file:rounded-lg file:border-0 file:bg-amber-50 file:text-amber-700 file:text-xs file:font-semibold">
            </div>
            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="document.getElementById('postModal').classList.add('hidden')"
                        class="px-4 py-2 text-sm text-stone-600 hover:text-stone-800">Cancel</button>
                <button type="submit" class="px-5 py-2.5 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition shadow-sm">
                    <i class="fas fa-paper-plane mr-1.5"></i> Post
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Edit Homework Modal --}}
<div id="editModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-xl w-full max-w-lg">
        <div class="px-6 py-4 border-b border-stone-100 flex items-center justify-between">
            <h3 class="text-lg font-bold text-stone-800"><i class="fas fa-edit text-amber-500 mr-2"></i>Edit Homework</h3>
            <button onclick="document.getElementById('editModal').classList.add('hidden')" class="text-stone-400 hover:text-stone-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="editForm" method="POST" enctype="multipart/form-data" class="p-6 space-y-4">
            @csrf @method('PUT')
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Title <span class="text-red-400">*</span></label>
                <input type="text" name="title" id="editTitle" required maxlength="255"
                       class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Description</label>
                <textarea name="description" id="editDesc" rows="3" maxlength="2000"
                          class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm resize-none"></textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Replace Attachment <span class="text-stone-400">(optional)</span></label>
                <input type="file" name="attachment"
                       class="w-full border border-stone-300 rounded-xl px-3 py-2 text-sm file:mr-3 file:py-1 file:px-3 file:rounded-lg file:border-0 file:bg-amber-50 file:text-amber-700 file:text-xs file:font-semibold">
            </div>
            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="document.getElementById('editModal').classList.add('hidden')"
                        class="px-4 py-2 text-sm text-stone-600">Cancel</button>
                <button type="submit" class="px-5 py-2.5 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition shadow-sm">
                    <i class="fas fa-save mr-1.5"></i> Update
                </button>
            </div>
        </form>
    </div>
</div>
@endif

<script>
function editHomework(id, title, desc) {
    document.getElementById('editForm').action = '/homework/' + id;
    document.getElementById('editTitle').value = title;
    document.getElementById('editDesc').value = desc;
    document.getElementById('editModal').classList.remove('hidden');
}

function filterSubjects(classId) {
    // Simple: show all subjects for now since teacher only sees their own subjects
}
</script>
@endsection