@extends('layouts.app')

@section('title', 'Dean Settings')

@section('content')
    <div class="flex flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">Dean Settings</h1>
            <p class="text-xs text-muted-foreground">Academic terms, subject list and teacher allocation</p>
        </div>

        @include('partials.flashes')

        <div class="flex flex-wrap gap-1 rounded-xl border border-border bg-card p-1 text-sm">
            @foreach ([['terms', 'Academic Terms'], ['subjects', 'Subjects & Allocation']] as [$key, $label])
                <a href="{{ route('academics.dean-settings', ['tab' => $key]) }}"
                   class="rounded-lg px-3 py-1.5 transition-colors {{ $tab === $key ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-accent' }}">
                    {{ $label }}
                </a>
            @endforeach
        </div>

        @if ($tab === 'terms')
            <div class="grid gap-6 lg:grid-cols-3">
                <div class="rounded-xl border border-border bg-card lg:col-span-2">
                    <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 font-medium">Term</th>
                                    <th class="px-3 py-2 font-medium">Year</th>
                                    <th class="px-3 py-2 font-medium">Start Date</th>
                                    <th class="px-3 py-2 font-medium">End Date</th>
                                    <th class="px-3 py-2 text-right font-medium">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($terms as $term)
                                    <tr class="border-b last:border-0">
                                        <form method="post" action="{{ route('academics.terms.update', $term->id) }}" class="contents">
                                            @csrf
                                            @method('PUT')
                                            <td class="px-3 py-2">
                                                <select name="term" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                                    @foreach ([1, 2, 3] as $t)
                                                        <option value="{{ $t }}" @selected($term->term === $t)>Term {{ $t }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td class="px-3 py-2">
                                                <input name="year" value="{{ $term->year }}" class="h-9 w-24 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                            </td>
                                            <td class="px-3 py-2">
                                                <input type="date" name="start_date" value="{{ $term->start_date?->toDateString() }}" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                            </td>
                                            <td class="px-3 py-2">
                                                <input type="date" name="end_date" value="{{ $term->end_date?->toDateString() }}" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                            </td>
                                            <td class="px-3 py-2">
                                                <div class="flex items-center justify-end gap-1">
                                                    <button class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Update</button>
                                                    <button form="delete-term-{{ $term->id }}" class="rounded-md border border-destructive/40 px-2 py-1 text-xs text-destructive hover:bg-destructive/5">Delete</button>
                                                </div>
                                            </td>
                                        </form>
                                        <form id="delete-term-{{ $term->id }}" method="post" action="{{ route('academics.terms.destroy', $term->id) }}" onsubmit="return confirm('Delete Term {{ $term->term }} {{ $term->year }}?')">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </tr>
                                @empty
                                    <tr><td colspan="5" class="px-3 py-10 text-center text-sm text-muted-foreground">No terms yet.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="rounded-xl border border-border bg-card">
                    <form method="post" action="{{ route('academics.terms.store') }}" class="flex flex-col gap-3 p-4">
                        @csrf
                        <h2 class="text-sm font-semibold">Add Term</h2>
                        <div class="flex flex-col gap-1.5">
                            <label class="text-xs text-muted-foreground">Term</label>
                            <select name="term" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                @foreach ([1, 2, 3] as $t)
                                    <option value="{{ $t }}">Term {{ $t }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="flex flex-col gap-1.5">
                            <label class="text-xs text-muted-foreground">Year</label>
                            <input name="year" value="2026" class="h-9 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">Start Date</label>
                            <input type="date" name="start_date" class="h-9 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">End Date</label>
                            <input type="date" name="end_date" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        </div>
                        <button class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Add Term</button>
                    </form>
                </div>
            </div>

            <div class="rounded-xl border border-border bg-card p-4">
                <form method="post" action="{{ route('academics.promote') }}" onsubmit="return confirm('Promote all active students to their next class?')" class="flex flex-wrap items-center gap-3">
                    @csrf
                    <div>
                        <h2 class="text-sm font-semibold">Promote Students</h2>
                        <p class="text-xs text-muted-foreground">Form 4 graduates, everyone else moves one class up.</p>
                    </div>
                    <div class="ml-auto flex gap-4 text-xs text-muted-foreground">
                        @foreach ($studentCounts as $form => $count)
                            <span>{{ $form }}: <strong class="tabular-nums">{{ $count }}</strong></span>
                        @endforeach
                    </div>
                    <button class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Promote All</button>
                </form>
            </div>
        @endif

        @if ($tab === 'subjects')
            <div class="flex flex-wrap items-end gap-3 rounded-xl border border-border bg-card p-3">
                <form method="get" action="{{ route('academics.dean-settings') }}" class="flex flex-wrap items-end gap-3">
                    <input type="hidden" name="tab" value="subjects">
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs text-muted-foreground">Class</label>
                        <select name="form" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            @foreach (\App\Support\Academics::FORMS as $f)
                                <option value="{{ $f }}" @selected($form === $f)>{{ $f }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs text-muted-foreground">Stream</label>
                        <select name="stream" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            @foreach (\App\Support\Academics::STREAMS as $st)
                                <option value="{{ $st }}" @selected($stream === $st)>{{ $st }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Load</button>
                </form>
            </div>

            <div class="grid gap-6 lg:grid-cols-3">
                <div class="rounded-xl border border-border bg-card lg:col-span-2">
                    <div class="flex items-center justify-between border-b border-border p-3">
                        <h2 class="text-sm font-semibold">Subjects · {{ $form }} {{ $stream }}</h2>
                        <span class="text-xs text-muted-foreground">{{ $subjectsByForm[$form]->count() ?? 0 }} subjects</span>
                    </div>
                    <form method="post" action="{{ route('academics.subjects.save') }}" class="p-3">
                        @csrf
                        <input type="hidden" name="form" value="{{ $form }}">
                        <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="py-2 pr-3 font-medium">#</th>
                                        <th class="py-2 pr-3 font-medium">Subject</th>
                                        <th class="py-2 pr-3 font-medium">Category</th>
                                        <th class="py-2 font-medium">Pathway</th>
                                    </tr>
                                </thead>
                                <tbody id="subject-rows">
                                    @forelse ($subjectsByForm[$form] ?? collect() as $i => $subject)
                                        <tr class="border-b last:border-0">
                                            <td class="py-2 pr-3">{{ $i + 1 }}</td>
                                            <td class="py-2 pr-3">
                                                <input name="rows[{{ $i }}][name]" value="{{ $subject->name }}" class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                            </td>
                                            <td class="py-2 pr-3">
                                                <select name="rows[{{ $i }}][category]" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                                    @foreach (['Compulsory', 'Optional'] as $c)
                                                        <option value="{{ $c }}" @selected($subject->category === $c)>{{ $c }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td class="py-2">
                                                <select name="rows[{{ $i }}][pathway]" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                                    @foreach (['All', 'STEM', 'Social Sciences', 'Arts and Sports'] as $p)
                                                        <option value="{{ $p }}" @selected($subject->pathway === $p)>{{ $p }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr><td colspan="4" class="py-8 text-center text-sm text-muted-foreground">No subjects for this class yet.</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        <button type="button" onclick="addSubjectRow()" class="mt-3 rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Add Row</button>
                        <button class="mt-3 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Save Subjects</button>
                    </form>
                </div>

                <div class="flex flex-col gap-6">
                    <div class="rounded-xl border border-border bg-card">
                        <div class="flex items-center justify-between border-b border-border p-3">
                            <h2 class="text-sm font-semibold">Teacher Allocations · {{ $form }} {{ $stream }}</h2>
                            <span class="text-xs text-muted-foreground">{{ $allocations->count() }} allocated</span>
                        </div>
                        <form method="post" action="{{ route('academics.allocation.save') }}" class="flex flex-col gap-3 p-4">
                            @csrf
                            <input type="hidden" name="form" value="{{ $form }}">
                            <input type="hidden" name="stream" value="{{ $stream }}">
                            @foreach ($subjectsByForm[$form] ?? collect() as $subject)
                                <div class="flex flex-col gap-1.5">
                                    <label class="text-xs text-muted-foreground">{{ $subject->name }}</label>
                                    <input name="allocations[{{ $subject->name }}]" value="{{ $allocations[$subject->name]->teacher ?? '' }}"
                                           placeholder="Teacher name…" class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                </div>
                            @endforeach
                            <button class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Save Allocation</button>
                        </form>
                    </div>

                    <div class="rounded-xl border border-border bg-card p-4">
                        <h2 class="text-sm font-semibold">Copy Subjects</h2>
                        <p class="mb-3 text-xs text-muted-foreground">Copy {{ $form }} subjects to other classes (missing subjects only).</p>
                        <form method="post" action="{{ route('academics.subjects.copy') }}" class="flex flex-col gap-3">
                            @csrf
                            <input type="hidden" name="form" value="{{ $form }}">
                            @foreach (\App\Support\Academics::FORMS as $f)
                                @if ($f !== $form)
                                    <label class="flex items-center gap-2 text-sm">
                                        <input type="checkbox" name="targets[]" value="{{ $f }}" class="size-4 accent-emerald-600">
                                        {{ $f }}
                                    </label>
                                @endif
                            @endforeach
                            <button class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Copy to Selected</button>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@push('scripts')
    <script>
        let subjectRow = {{ ($subjectsByForm[$form] ?? collect())->count() }};
        function addSubjectRow() {
            const tbody = document.getElementById('subject-rows');
            if (!tbody) return;
            const tr = document.createElement('tr');
            tr.className = 'border-b last:border-0';
            tr.innerHTML = '<td class="py-2 pr-3">' + (subjectRow + 1) + '</td>' +
                '<td class="py-2 pr-3"><input name="rows[' + subjectRow + '][name]" class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring"></td>' +
                '<td class="py-2 pr-3"><select name="rows[' + subjectRow + '][category]" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">' +
                '<option>Compulsory</option><option>Optional</option></select></td>' +
                '<td class="py-2"><select name="rows[' + subjectRow + '][pathway]" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">' +
                '<option>All</option><option>STEM</option><option>Social Sciences</option><option>Arts and Sports</option></select></td>';
            tbody.appendChild(tr);
            subjectRow++;
        }
    </script>
@endpush