@extends('layouts.app')

@section('title', 'Homework')

@section('content')
    @php
        $accent = fn (string $s) => match ($s) {
            'Past Due' => 'bg-amber-500/15 text-amber-700',
            'Graded' => 'bg-sky-500/15 text-sky-700',
            default => 'bg-emerald-500/15 text-emerald-700',
        };

        $toggle = function (string $key) use ($filters) {
            $current = $filters['sort'];
            $dir = $filters['dir'];

            if ($current === $key) {
                return route('online.homework', array_merge($filters, ['dir' => $dir === 'asc' ? 'desc' : 'asc']));
            }

            return route('online.homework', array_merge($filters, ['sort' => $key, 'dir' => 'asc']));
        };

        $arrow = fn (string $key) => $filters['sort'] === $key ? ($filters['dir'] === 'asc' ? '↑' : '↓') : '↕';
    @endphp

    <div class="flex flex-col gap-6">
        <div class="flex items-end justify-between gap-3">
            <div>
                <p class="text-xs font-medium text-muted-foreground">Assign, track submissions and grade homework for online classes</p>
                <h1 class="text-lg font-semibold">Homework</h1>
            </div>
            <button type="button" onclick="document.getElementById('homework-new').open = true"
                    class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">
                Create Homework
            </button>
        </div>

        @include('partials.flashes')

        <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
            @foreach ([
                ['label' => 'Active Assignments', 'value' => $stats['Active Assignments']],
                ['label' => 'Pending Grading', 'value' => $stats['Pending Grading']],
                ['label' => 'Past Due', 'value' => $stats['Past Due']],
            ] as $stat)
                <div class="rounded-xl border border-border bg-card p-4">
                    <div class="flex flex-col">
                        <span class="text-lg font-semibold leading-tight tabular-nums">{{ $stat['value'] }}</span>
                        <span class="text-xs text-muted-foreground">{{ $stat['label'] }}</span>
                    </div>
                </div>
            @endforeach
        </div>

        <form method="get" action="{{ route('online.homework') }}"
              class="flex flex-wrap items-end gap-3 rounded-xl border border-border bg-card p-3">
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">Search</label>
                <input type="search" name="q" value="{{ $filters['q'] }}" placeholder="Search homework..."
                       class="h-9 w-64 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">Class</label>
                <select name="class" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    <option value="All" @selected($filters['class'] === 'All')>All Classes</option>
                    @foreach ($classOptions as $c)
                        <option value="{{ $c }}" @selected($filters['class'] === $c)>{{ $c }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">Status</label>
                <select name="status" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    <option value="All" @selected($filters['status'] === 'All')>All Statuses</option>
                    @foreach ($statuses as $s)
                        <option value="{{ $s }}" @selected($filters['status'] === $s)>{{ $s }}</option>
                    @endforeach
                </select>
            </div>
            <input type="hidden" name="sort" value="{{ $filters['sort'] }}">
            <input type="hidden" name="dir" value="{{ $filters['dir'] }}">
            <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Filter</button>
            <a href="{{ route('online.homework') }}" class="h-9 rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Clear</a>
            <div class="ml-auto flex items-center gap-2">
                <a href="{{ route('online.homework.csv', $filters) }}"
                   class="rounded-lg border border-border px-3 py-2 text-sm font-medium hover:bg-accent">CSV</a>
                <a href="{{ route('online.homework.print', $filters) }}" target="_blank"
                   class="rounded-lg border border-border px-3 py-2 text-sm font-medium hover:bg-accent">PDF</a>
            </div>
        </form>

        <div class="rounded-xl border border-border bg-card">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                            <th class="px-3 py-2">
                                <a href="{{ $toggle('title') }}" class="flex items-center gap-1 uppercase hover:text-foreground">Title {{ $arrow('title') }}</a>
                            </th>
                            <th class="px-3 py-2">
                                <a href="{{ $toggle('subject') }}" class="flex items-center gap-1 uppercase hover:text-foreground">Subject {{ $arrow('subject') }}</a>
                            </th>
                            <th class="px-3 py-2 font-medium">Class</th>
                            <th class="px-3 py-2">
                                <a href="{{ $toggle('due') }}" class="flex items-center gap-1 uppercase hover:text-foreground">Due {{ $arrow('due') }}</a>
                            </th>
                            <th class="px-3 py-2 font-medium">Marks</th>
                            <th class="px-3 py-2 font-medium">Status</th>
                            <th class="px-3 py-2 font-medium">Submissions</th>
                            <th class="px-3 py-2 text-right font-medium">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $hw)
                            @php
                                $submitted = $hw->submittedCount();
                                $done = $hw->gradedCount();
                                $totalSubs = $hw->submissions()->count();
                                $pct = $totalSubs ? (int) round($done / $totalSubs * 100) : 0;
                            @endphp
                            <tr class="cursor-pointer border-b last:border-0 hover:bg-accent/40"
                                onclick="if (!event.target.closest('button,a,form')) { window.location = '{{ route('online.homework', array_merge($filters, ['view' => $hw->id])) }}'; }">
                                <td class="px-3 py-2">
                                    <div class="flex flex-col">
                                        <span class="font-medium">{{ $hw->title }}</span>
                                        <span class="text-xs text-muted-foreground">{{ \Illuminate\Support\Str::limit($hw->instructions ?: 'No instructions', 60) }}</span>
                                        @if ($hw->attachments->isNotEmpty())
                                            <span class="flex items-center gap-1 text-xs text-muted-foreground">{{ $hw->attachments->count() }} file(s)</span>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-3 py-2">{{ $hw->subject }}</td>
                                <td class="px-3 py-2 text-muted-foreground">{{ $hw->class_name }}</td>
                                <td class="px-3 py-2 text-xs">
                                    <div class="flex flex-col">
                                        <span>{{ $hw->isoDueDate() }}</span>
                                        <span class="text-muted-foreground">{{ $hw->due_time }}</span>
                                    </div>
                                </td>
                                <td class="px-3 py-2">{{ $hw->gradable ? $hw->total_marks.' pts' : '—' }}</td>
                                <td class="px-3 py-2">
                                    <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $accent($hw->status) }}">{{ $hw->status }}</span>
                                </td>
                                <td class="px-3 py-2">
                                    <div class="flex items-center gap-2">
                                        <span class="text-xs text-muted-foreground">{{ $done }}/{{ $submitted }}</span>
                                        <div class="h-1.5 w-16 overflow-hidden rounded-full bg-muted">
                                            <div class="h-full rounded-full bg-emerald-500" style="width: {{ $pct }}%"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-3 py-2">
                                    <div class="flex items-center justify-end gap-1">
                                        <a href="{{ route('online.homework', array_merge($filters, ['view' => $hw->id])) }}"
                                           class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">View</a>
                                        <button type="button" onclick="document.getElementById('homework-{{ $hw->id }}').classList.toggle('hidden')"
                                                class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Edit</button>
                                        <form method="post" action="{{ route('online.homework.destroy', $hw) }}"
                                              onsubmit="return confirm('This will permanently remove {{ $hw->title }} and all of its {{ $totalSubs }} submissions. This action cannot be undone.')">
                                            @csrf @method('DELETE')
                                            <button class="rounded-md border border-rose-300 px-2 py-1 text-xs text-rose-700 hover:bg-rose-50">Delete</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>

                            <tr class="hidden" id="homework-{{ $hw->id }}">
                                <td colspan="8" class="bg-muted/30 px-3 py-4">
                                    @include('online.partials.homework-form', [
                                        'action' => route('online.homework.update', $hw),
                                        'method' => 'PUT',
                                        'prefix' => 'homework-'.$hw->id,
                                        'row' => $hw,
                                        'classCombos' => $classCombos,
                                        'subjectMap' => $subjectMap,
                                    ])
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="8" class="px-3 py-8 text-center text-muted-foreground">No homework matches your filters.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="border-t px-4 py-2 text-xs text-muted-foreground">
                {{ $rows->total() }} assignments
            </div>
        </div>

        @if ($detail)
            <div class="rounded-xl border border-border bg-card p-4">
            <h2 class="font-medium">{{ $detail->title }}</h2>
            <p class="text-xs text-muted-foreground">{{ $detail->class_name }} &middot; {{ $detail->subject }}</p>

            <div class="grid grid-cols-2 gap-3 rounded-lg border border-border p-3 text-sm">
                <div class="flex flex-col gap-1">
                    <span class="text-xs text-muted-foreground">Due</span>
                    <span class="font-medium">{{ $detail->isoDueDate() }} {{ $detail->due_time }}</span>
                </div>
                <div class="flex flex-col gap-1">
                    <span class="text-xs text-muted-foreground">Marks</span>
                    <span class="font-medium">{{ $detail->gradable ? $detail->total_marks.' pts' : 'Not graded' }}</span>
                </div>
                <div class="flex flex-col gap-1">
                    <span class="text-xs text-muted-foreground">Status</span>
                    <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $accent($detail->status) }}">{{ $detail->status }}</span>
                </div>
                <div class="flex flex-col gap-1">
                    <span class="text-xs text-muted-foreground">Late</span>
                    <span class="font-medium">{{ $detail->allow_late ? 'Allowed' : 'Not allowed' }}</span>
                </div>
            </div>

            @if ($detail->instructions)
                <p class="text-sm text-muted-foreground">{{ $detail->instructions }}</p>
            @endif

            @if ($detail->attachments->isNotEmpty())
                <div class="flex flex-col gap-1.5">
                    <span class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Attachments</span>
                    @foreach ($detail->attachments as $file)
                        <div class="flex items-center gap-2 rounded-lg border border-border px-2.5 py-1.5 text-sm">
                            <span class="truncate">{{ $file->name }}</span>
                            <span class="ml-auto text-xs text-muted-foreground">{{ \App\Support\Fmt::attachmentSize($file->size) }}</span>
                        </div>
                    @endforeach
                </div>
            @endif

            <div class="flex items-center justify-between">
                <span class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Submissions ({{ $detail->submissions->count() }})</span>
                <span class="text-xs text-muted-foreground">{{ $detail->gradedCount() }} graded</span>
            </div>

                <form method="post" action="{{ route('online.homework.scores', $detail) }}" class="mt-3 flex flex-col gap-2">
                    @csrf
                    @php $max = $detail->gradable ? ($detail->total_marks ?: 0) : 0; @endphp

                    @foreach ($detail->submissions as $submission)
                        <div class="flex flex-wrap items-center gap-2 rounded-lg border border-border p-2.5">
                            <div class="flex min-w-0 flex-1 flex-col">
                                <span class="truncate font-medium">{{ $submission->student?->full_name ?? 'Unknown' }}</span>
                                <span class="text-xs text-muted-foreground">
                                    {{ $submission->submitted_at ? 'Submitted '.$submission->submitted_at : 'Not submitted' }}
                                </span>
                            </div>
                            @if ($detail->gradable)
                                <div class="flex items-center gap-1.5">
                                    <input type="number" name="scores[{{ $submission->id }}]" min="0" max="{{ $max }}" step="0.5"
                                           value="{{ old('scores.'.$submission->id, $submission->score) }}"
                                           class="h-7 w-16 rounded-lg border border-input bg-transparent px-2 text-right text-sm outline-none focus-visible:border-ring">
                                    @if ($max > 0)
                                        <span class="text-xs text-muted-foreground">/{{ $max }}</span>
                                    @endif
                                </div>
                            @else
                                <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $submission->status === 'Graded' ? 'bg-emerald-500/15 text-emerald-700' : 'bg-slate-500/15 text-slate-700' }}">
                                    {{ $submission->status === 'Graded' ? 'Graded' : 'Submitted' }}
                                </span>
                            @endif
                        </div>
                    @endforeach

                    <div class="flex items-center justify-between">
                        <a href="{{ route('online.homework', $filters) }}"
                           class="rounded-lg border border-border px-4 py-2 text-sm hover:bg-accent">Close</a>
                        <button class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Save Scores</button>
                    </div>
                </form>
            </div>
        @endif

        <details id="homework-new" class="rounded-xl border border-border bg-card p-4" @if ($errors->any()) open @endif>
            <summary class="cursor-pointer text-sm font-semibold">Create Homework Assignment</summary>
            <div class="mt-3">
                <p class="mb-3 text-xs text-muted-foreground">Fields marked * are required.</p>
                @include('online.partials.homework-form', [
                    'action' => route('online.homework.store'),
                    'method' => 'POST',
                    'prefix' => 'homework-new',
                    'row' => null,
                    'classCombos' => $classCombos,
                    'subjectMap' => $subjectMap,
                ])
            </div>
        </details>
    </div>
@endsection

@push('scripts')
    <script>window.__subjectMap = @json($subjectMap);</script>
    <script>
        (function () {
            function formOf(select) {
                const opt = select.options[select.selectedIndex];
                return opt ? opt.getAttribute('data-form') : null;
            }

            function sync(classSelect) {
                const target = document.querySelector('[data-subject-target="' + classSelect.getAttribute('data-subject-source') + '"]');
                if (!target) return;

                const current = target.value;
                const form = formOf(classSelect);
                target.innerHTML = '<option value="">Select subject</option>';

                (window.__subjectMap && window.__subjectMap[form] ? window.__subjectMap[form] : []).forEach(function (subject) {
                    const option = document.createElement('option');
                    option.value = subject;
                    option.textContent = subject;
                    target.appendChild(option);
                });

                if (current && target.querySelector('option[value="' + current.replace(/"/g, '\\"') + '"]')) {
                    target.value = current;
                }
            }

            document.querySelectorAll('.js-class').forEach(function (select) {
                select.addEventListener('change', function () { sync(select); });
            });

            // Attachment rows: one delegated handler serves every form on the page.
            // Start past any server-rendered rows so new indexes never collide.
            let attachmentIndex = {{ $rows->sum(fn ($hw) => $hw->attachments()->count()) }};

            document.addEventListener('click', function (event) {
                const remove = event.target.closest('.remove-attachment');
                if (remove) {
                    remove.closest('.attachment-row').remove();
                    return;
                }

                const browse = event.target.closest('.js-browse');
                if (browse) {
                    document.querySelector('.js-files[data-host="' + browse.dataset.host + '"]').click();
                }
            });

            // Drag & drop plus browse both land on the same validated list.
            document.addEventListener('change', function (event) {
                const input = event.target.closest('.js-files');
                if (!input) return;
                addFiles(input, input.files);
                input.value = '';
            });

            document.addEventListener('click', function (event) {
                const drop = event.target.closest('.js-drop');
                if (drop) document.querySelector('.js-files[data-host="' + drop.dataset.host + '"]').click();
            });

            document.addEventListener('dragover', function (event) {
                const drop = event.target.closest('.js-drop');
                if (drop) event.preventDefault();
            });

            document.addEventListener('drop', function (event) {
                const drop = event.target.closest('.js-drop');
                if (!drop) return;
                event.preventDefault();
                addFiles(drop, event.dataTransfer.files);
            });

            const allowedTypes = ['application/pdf', 'application/msword',
                'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                'image/jpeg', 'image/png'];
            const maxSize = 10 * 1024 * 1024;

            function addFiles(input, files) {
                const host = document.getElementById(input.dataset.host);
                const placeholder = host.querySelector('.js-empty');
                if (placeholder) placeholder.remove();

                Array.from(files).forEach(function (file) {
                    if (allowedTypes.indexOf(file.type) === -1) {
                        toast.error(`${file.name} must be PDF, DOC, DOCX, JPG or PNG`);
                        return;
                    }
                    if (file.size > maxSize) {
                        toast.error(`${file.name} must be under 10 MB`);
                        return;
                    }

                    const i = attachmentIndex++;
                    const row = document.createElement('div');
                    row.className = 'attachment-row flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-sm';
                    row.innerHTML =
                        '<input type="hidden" name="attachments[' + i + '][name]" value="' + file.name + '">' +
                        '<input type="hidden" name="attachments[' + i + '][size]" value="' + file.size + '">' +
                        '<input type="hidden" name="attachments[' + i + '][type]" value="' + file.type + '">' +
                        '<span class="flex min-w-0 flex-1 items-center gap-2 truncate">' +
                        '<span class="truncate">' + file.name + '</span>' +
                        '<span class="text-xs text-muted-foreground">' + sizeLabel(file.size) + '</span>' +
                        '</span>' +
                        '<button type="button" class="remove-attachment rounded-md border border-rose-300 px-2 py-1 text-xs text-rose-700 hover:bg-rose-50">Remove</button>';
                    host.appendChild(row);
                });
            }

            function sizeLabel(bytes) {
                if (bytes < 1024) return bytes + ' B';
                if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + ' KB';
                return Math.round((bytes / (1024 * 1024)) * 10) / 10 + ' MB';
            }

            function toast(message) {
                const box = document.createElement('div');
                box.className = 'fixed bottom-4 right-4 z-50 rounded-lg border border-rose-300 bg-card px-4 py-2 text-sm shadow-lg';
                box.textContent = message;
                document.body.appendChild(box);
                setTimeout(function () { box.remove(); }, 4000);
            }
        })();
    </script>
@endpush