@extends('layouts.app')
@section('title', 'CI Student Assignments')
@section('content')

<div class="mb-4">
    <h4 class="page-title">CI Student Assignments</h4>
    <p class="page-subtitle">
        Assign each student to a clinical instructor per semester for their Clinical Performance Report.
    </p>
</div>

@if($errors->any())
<div class="alert alert-danger">
    <ul class="mb-0 small">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
</div>
@endif

{{-- ── Filters ────────────────────────────────────────────────────────── --}}
<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row g-2 align-items-center">
            <div class="col-12 col-md-auto">
                <select name="semester_id" class="form-select" onchange="this.form.submit()" aria-label="Semester">
                    @foreach($semesters as $sem)
                    <option value="{{ $sem->id }}" @selected($semester?->id === $sem->id)>{{ $sem->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-12 col-md">
                <div class="proc-search">
                    <i class="bi bi-search"></i>
                    <input type="search" name="q" class="form-control" placeholder="Search name, ID or email…"
                           value="{{ request('q') }}">
                </div>
            </div>
            <div class="col-6 col-md-auto">
                <select name="intake" class="form-select">
                    <option value="">All intakes</option>
                    @foreach($intakes as $intake)
                    <option value="{{ $intake }}" @selected(request('intake') === $intake)>{{ $intake }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-auto">
                <select name="filter" class="form-select">
                    <option value="">All students</option>
                    <option value="unassigned" @selected(request('filter') === 'unassigned')>Unassigned only</option>
                    <option value="assigned" @selected(request('filter') === 'assigned')>Assigned only</option>
                </select>
            </div>
            <div class="col-auto">
                <button class="btn btn-primary"><i class="bi bi-funnel"></i></button>
                @if(request()->hasAny(['q', 'intake', 'filter']))
                <a href="{{ route('admin.assignments.index', ['semester_id' => $semester?->id]) }}"
                   class="btn btn-outline-secondary ms-1">Clear</a>
                @endif
            </div>
        </form>
    </div>
</div>

@if($semester)
{{-- ── Coverage ───────────────────────────────────────────────────────── --}}
<div class="card mb-3">
    <div class="card-body py-3">
        @php $unassigned = max(0, $totalStudents - $assignedTotal); @endphp
        <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
            <span class="fw-semibold small">{{ $semester->name }} coverage</span>
            <span class="ms-auto small text-muted">
                <strong class="text-body">{{ $assignedTotal }}</strong> of {{ $totalStudents }} students assigned
            </span>
        </div>
        <div class="progress progress-xs mb-3">
            <div class="progress-bar bg-success"
                 style="width:{{ $totalStudents > 0 ? round($assignedTotal / $totalStudents * 100) : 0 }}%"></div>
        </div>

        <div class="d-flex flex-wrap gap-2">
            <span class="pill {{ $unassigned > 0 ? 'pill-warn' : 'pill-muted' }} pill-sm">
                <i class="bi bi-person-dash"></i> {{ $unassigned }} unassigned
            </span>
            @forelse($instructors as $ci)
            <span class="pill pill-muted pill-sm">
                <i class="bi bi-person-check"></i> {{ $ci->name }}: {{ $counts->get($ci->id, 0) }}
            </span>
            @empty
            <span class="text-muted small">No active clinical instructors exist yet.</span>
            @endforelse
        </div>
    </div>
</div>

@if($instructors->isEmpty())
<div class="alert alert-warning d-flex align-items-start gap-2">
    <i class="bi bi-exclamation-triangle mt-1"></i>
    <div>
        There are no active clinical instructors to assign.
        <a href="{{ route('admin.users.index', ['role' => 'clinical_instructor']) }}" class="alert-link">Manage users</a>.
    </div>
</div>
@endif

<form method="POST" action="{{ route('admin.assignments.store') }}">
    @csrf
    <input type="hidden" name="semester_id" value="{{ $semester->id }}">

    <div class="card">
        <div class="card-body p-0 table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>Student</th>
                        <th class="d-none d-md-table-cell">Intake</th>
                        <th style="min-width:14rem">Assigned clinical instructor</th>
                        <th class="text-center" style="width:6rem">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($students as $student)
                    @php $assigned = $student->ciAssignment->first(); @endphp
                    <tr>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                @if($student->studentProfile?->photo_path)
                                <img src="{{ asset('storage/' . $student->studentProfile->photo_path) }}"
                                     class="student-avatar" style="width:32px;height:32px" alt="">
                                @else
                                <span class="student-avatar d-inline-flex align-items-center justify-content-center"
                                      style="width:32px;height:32px;font-size:.78rem">
                                    {{ strtoupper(mb_substr($student->name, 0, 1)) }}
                                </span>
                                @endif
                                <div class="min-w-0">
                                    <div class="fw-semibold small text-truncate">{{ $student->name }}</div>
                                    <div class="text-muted text-truncate" style="font-size:.73rem">
                                        {{ $student->studentProfile?->student_id ?: '—' }}
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="small text-muted d-none d-md-table-cell">{{ $student->studentProfile?->intake ?: '—' }}</td>
                        <td>
                            <select name="assignments[{{ $student->id }}]" class="form-select form-select-sm"
                                    data-searchable data-placeholder="Search instructors…"
                                    @disabled($instructors->isEmpty())>
                                <option value="">— Unassigned —</option>
                                @foreach($instructors as $ci)
                                <option value="{{ $ci->id }}" @selected($assigned?->ci_user_id === $ci->id)>{{ $ci->name }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td class="text-center">
                            @if($assigned)
                            <span class="badge bg-success-subtle text-success-emphasis"><i class="bi bi-check2"></i></span>
                            @else
                            <span class="badge bg-secondary-subtle text-secondary-emphasis">—</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="4" class="text-center text-muted py-5">
                        <i class="bi bi-person-x d-block fs-4 mb-2 opacity-50"></i>No students match your filters.
                    </td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($students->isNotEmpty())
        <div class="card-footer bg-transparent">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                <div class="small text-muted">
                    <i class="bi bi-info-circle me-1"></i>
                    Saving applies to the {{ $students->count() }} student(s) on this page only.
                    <strong>Save before changing page</strong> — unsaved edits are lost otherwise.
                </div>
                <button type="submit" class="btn btn-primary px-4">
                    <i class="bi bi-check-lg me-1"></i>Save assignments
                </button>
            </div>
            @if($students->hasPages())
            <div class="mt-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div class="small text-muted">
                    Showing {{ $students->firstItem() }}–{{ $students->lastItem() }}
                    of {{ $students->total() }}
                </div>
                {{ $students->links() }}
            </div>
            @endif
        </div>
        @endif
    </div>
</form>
@endif
@endsection