@extends('layouts.app')

@section('title', 'Transferred List')

@section('content')
    <div class="flex flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">Transferred List</h1>
            <p class="text-xs text-muted-foreground">Students removed or transferred out — re-admit them or delete permanently</p>
        </div>

        <div class="flex flex-col gap-3 rounded-xl border border-border bg-card p-3">
            <div class="flex flex-wrap items-center gap-3">
                <div class="flex items-center gap-2 rounded-lg border border-border bg-muted/40 px-3 py-2">
                    <svg class="size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                    <span class="text-sm text-muted-foreground">Total Transferred</span>
                    <span class="text-lg font-semibold tabular-nums">{{ \App\Models\Student::where('status', 'Transferred')->count() }}</span>
                </div>

                <form method="get" class="relative min-w-52 flex-1">
                    <input type="hidden" name="size" value="{{ request('size', 10) }}">
                    <svg class="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                    <input name="q" value="{{ request('q') }}" placeholder="Search name, admission no..."
                           class="h-8 w-full rounded-lg border border-input bg-transparent pl-8 pr-16 text-sm outline-none focus-visible:border-ring">
                    <button type="submit" class="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-md bg-primary px-2 py-0.5 text-xs font-medium text-primary-foreground hover:bg-primary/90">Search</button>
                </form>

                <form method="get" class="flex items-center gap-2 text-xs text-muted-foreground">
                    @if (request('q'))
                        <input type="hidden" name="q" value="{{ request('q') }}">
                    @endif
                    <span>Show</span>
                    <select name="size" onchange="this.form.submit()"
                            class="h-8 rounded-md border border-input bg-transparent px-2 text-sm outline-none">
                        @foreach ([5, 10, 20, 50] as $n)
                            <option value="{{ $n }}" @selected((int) request('size', 10) === $n)>{{ $n }}</option>
                        @endforeach
                    </select>
                    <span>items</span>
                </form>

                <a href="{{ route('students.transferred.export', ['q' => request('q')]) }}" class="inline-flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1 text-sm transition-colors hover:bg-accent">
                    <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M12 18v-6"/><path d="m9 15 3 3 3-3"/></svg>
                    CSV
                </a>
                <a href="{{ route('students.transferred.print', ['q' => request('q')]) }}" target="_blank" class="inline-flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1 text-sm transition-colors hover:bg-accent">
                    <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M12 18v-6"/><path d="m9 15 3 3 3-3"/></svg>
                    PDF
                </a>
            </div>

            <form method="post" action="{{ route('students.bulk-readmit') }}" id="bulk-readmit-form">
                @csrf
                <div class="flex flex-col gap-3">
                    <div id="bulk-bar" class="hidden items-center gap-3 rounded-lg border border-primary/30 bg-primary/5 px-3 py-2">
                        <span class="text-sm"><strong id="bulk-count">0</strong> selected</span>
                        <button type="submit" class="rounded-lg border border-border px-2 py-1 text-sm hover:bg-accent">Re-admit</button>
                        <a href="#" onclick="event.preventDefault(); bulkDelete()"
                           class="rounded-lg border border-destructive/40 px-2 py-1 text-sm text-destructive hover:bg-destructive/10">Permanently Delete</a>
                        <button type="button" onclick="clearSelection()" class="ml-auto text-sm text-muted-foreground hover:underline">Clear selection</button>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="w-full table-fixed border-collapse text-sm">
                            <thead>
                                <tr class="border-b border-border text-left text-xs text-muted-foreground">
                                    <th class="w-9 py-2 pr-2">
                                        <input type="checkbox" class="size-3.5 accent-primary" onchange="toggleAll(this)">
                                    </th>
                                    <th class="py-2 pr-3 font-medium">Adm No</th>
                                    <th class="py-2 pr-3 font-medium">Name</th>
                                    <th class="py-2 pr-3 font-medium">Original Class</th>
                                    <th class="py-2 pr-3 font-medium">Transferred On</th>
                                    <th class="py-2 pr-3 font-medium">Reason</th>
                                    <th class="w-32 py-2 text-right font-medium">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($students as $s)
                                    <tr class="border-b border-border/60 last:border-0 hover:bg-accent/40">
                                        <td class="py-2.5 pr-2">
                                            <input type="checkbox" name="ids[]" value="{{ $s->id }}" class="row-check size-3.5 accent-primary" onchange="updateBulk()">
                                        </td>
                                        <td class="py-2.5 pr-3 font-mono text-xs">{{ $s->admission_no }}</td>
                                        <td class="py-2.5 pr-3">
                                            <a href="{{ route('students.show', $s) }}" class="font-medium hover:underline">{{ $s->full_name }}</a>
                                        </td>
                                        <td class="py-2.5 pr-3">{{ $s->class_name }} <span class="text-muted-foreground">{{ $s->stream }}</span></td>
                                        <td class="py-2.5 pr-3 text-muted-foreground">{{ $s->transferred_on?->format('d M Y') }}</td>
                                        <td class="py-2.5 pr-3">
                                            <span class="inline-block max-w-40 truncate rounded-full border border-border px-2 py-0.5 text-[10px]">{{ $s->transfer_reason }}</span>
                                        </td>
                                        <td class="py-2.5">
                                            <div class="flex items-center justify-end gap-1">
                                                <form method="post" action="{{ route('students.readmit', $s) }}"
                                                      onsubmit="return confirm('Re-admit {{ $s->full_name }} back to {{ $s->class_name }} {{ $s->stream }}?')">
                                                    @csrf
                                                    <button type="submit" class="rounded-md px-1.5 py-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground" title="Re-admit">
                                                        <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
                                                    </button>
                                                </form>
                                                <a href="{{ route('students.show', $s) }}" class="rounded-md px-1.5 py-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground" title="View">
                                                    <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                                                </a>
                                                <form method="post" action="{{ route('students.destroy', $s) }}"
                                                      onsubmit="return confirm('Permanently delete {{ $s->full_name }}? This is irreversible.')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="rounded-md px-1.5 py-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive" title="Permanently delete">
                                                        <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="py-10 text-center text-sm text-muted-foreground">No transferred students found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </form>

            <div class="flex items-center justify-between">
                <span class="text-xs text-muted-foreground">
                    Showing {{ $students->firstItem() ?? 0 }}–{{ $students->lastItem() ?? 0 }} of {{ $students->total() }}
                </span>
                {{ $students->links('pagination::tailwind') }}
            </div>
        </div>
    </div>

    <form method="post" action="{{ route('students.bulk-destroy') }}" id="bulk-delete-form" class="hidden">
        @csrf
        @method('DELETE')
    </form>

    <script>
        function toggleAll(el) {
            document.querySelectorAll('.row-check').forEach(c => { c.checked = el.checked; });
            updateBulk();
        }
        function updateBulk() {
            var checked = document.querySelectorAll('.row-check:checked');
            var bar = document.getElementById('bulk-bar');
            if (checked.length > 0) {
                bar.classList.remove('hidden'); bar.classList.add('flex');
                document.getElementById('bulk-count').textContent = checked.length;
                checked.forEach(c => { c.name = 'ids[]'; });
                document.querySelectorAll('.row-check').forEach(c => { if (!c.checked) c.removeAttribute('name'); });
            } else {
                bar.classList.add('hidden'); bar.classList.remove('flex');
            }
        }
        function clearSelection() {
            document.querySelectorAll('.row-check').forEach(c => { c.checked = false; });
            updateBulk();
        }
        function bulkDelete() {
            var form = document.getElementById('bulk-delete-form');
            form.querySelectorAll('[name="ids[]"]').forEach(e => e.remove());
            document.querySelectorAll('.row-check:checked').forEach(c => {
                var inp = document.createElement('input');
                inp.type = 'hidden'; inp.name = 'ids[]'; inp.value = c.value;
                form.appendChild(inp);
            });
            if (confirm('Permanently delete the selected students?')) form.submit();
        }
    </script>
@endsection