@extends('layouts.app')
@section('title', 'Dashboard – Student')
@section('content')

@php
    $me = auth()->user();
    $cp = $currentSemester ? ($progress[$currentSemester->id] ?? null) : null;
@endphp

{{-- ── Greeting ───────────────────────────────────────────────────────── --}}
<div class="dash-hero card mb-4">
    <div class="card-body d-flex flex-wrap align-items-center gap-3">
        @if($profile?->photo_path)
        <img src="{{ asset('storage/' . $profile->photo_path) }}" class="dash-avatar" alt="">
        @else
        <span class="dash-avatar d-inline-flex align-items-center justify-content-center">
            {{ strtoupper(mb_substr($me->name, 0, 1)) }}
        </span>
        @endif

        <div class="flex-grow-1 min-w-0">
            <h4 class="page-title mb-1">{{ $me->name }}</h4>
            <div class="d-flex flex-wrap gap-2 small text-muted">
                @if($profile?->student_id)
                <span><i class="bi bi-person-badge me-1"></i>{{ $profile->student_id }}</span>
                @endif
                @if($profile?->intake)
                <span><i class="bi bi-calendar3 me-1"></i>{{ $profile->intake }}</span>
                @endif
                @if($currentSemester)
                <span><i class="bi bi-mortarboard me-1"></i>{{ $currentSemester->name }}</span>
                @endif
            </div>
        </div>

        <div class="d-flex gap-2 flex-wrap">
            <a href="{{ route('student.qr-card') }}" class="btn btn-outline-secondary">
                <i class="bi bi-qr-code me-1"></i>My QR Card
            </a>
            <a href="{{ route('student.logbook') }}" class="btn btn-primary">
                <i class="bi bi-journal-text me-1"></i>Open Logbook
            </a>
        </div>
    </div>
</div>

{{-- ── Key numbers ────────────────────────────────────────────────────── --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="stat-tile h-100">
            <div class="d-flex align-items-center gap-3">
                @include('student.logbook._ring', ['percent' => $overall['percent'], 'size' => 62])
                <div>
                    <div class="stat-label">Overall</div>
                    <div class="small text-muted mt-1">{{ $overall['passed'] }}/{{ $overall['total'] }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-tile h-100">
            <div class="stat-value text-success">{{ $overall['passed'] }}</div>
            <div class="stat-label mt-1">Passed</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-tile h-100 {{ $overall['retry'] > 0 ? 'stat-alert' : '' }}">
            <div class="stat-value {{ $overall['retry'] > 0 ? 'text-warning' : '' }}">{{ $overall['retry'] }}</div>
            <div class="stat-label mt-1">Need retry</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-tile h-100">
            <div class="stat-value text-muted">{{ $overall['not_assessed'] }}</div>
            <div class="stat-label mt-1">Not assessed</div>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-7">

        {{-- ── Needs attention ────────────────────────────────────────── --}}
        <h6 class="proc-section-title">
            <i class="bi bi-exclamation-triangle-fill text-warning"></i> Needs your attention
        </h6>

        <div class="card mb-4">
            <div class="card-body p-0">
                @forelse($needsRetry as $a)
                <a href="{{ route('student.logbook.semester', $a->procedure->semester_id) }}"
                   class="retry-item text-decoration-none">
                    <span class="badge score-{{ $a->is_na ? 'na' : $a->score }} flex-shrink-0">
                        {{ $a->is_na ? 'NA' : $a->score }}
                    </span>

                    <span class="min-w-0 flex-grow-1">
                        <span class="d-block small fw-semibold text-body text-truncate">{{ $a->procedure->name }}</span>
                        <span class="d-block text-muted text-truncate" style="font-size:.74rem">
                            @if($a->procedure->parent){{ $a->procedure->parent->name }} · @endif
                            {{ $a->procedure->semester?->name }}
                        </span>
                        @if($a->remarks)
                        <span class="d-block retry-remark">
                            <i class="bi bi-chat-left-quote me-1"></i>{{ $a->remarks }}
                        </span>
                        @endif
                    </span>

                    <span class="text-muted small text-nowrap flex-shrink-0 d-none d-sm-block">
                        {{ $a->assessment_date->format('d M Y') }}
                    </span>
                </a>
                @empty
                <div class="text-center py-4 px-3">
                    <i class="bi bi-check2-circle d-block fs-3 mb-2 text-success opacity-75"></i>
                    <div class="fw-semibold small">Nothing to redo</div>
                    <div class="small text-muted">Every procedure you've been assessed on has passed.</div>
                </div>
                @endforelse
            </div>
            @if($overall['retry'] > $needsRetry->count())
            <div class="card-footer bg-transparent small text-muted text-center">
                Showing {{ $needsRetry->count() }} of {{ $overall['retry'] }} — open your logbook to see the rest.
            </div>
            @endif
        </div>

        {{-- ── Current semester ───────────────────────────────────────── --}}
        @if($currentSemester && $cp)
        <h6 class="proc-section-title"><i class="bi bi-geo-alt-fill text-primary"></i> Current semester</h6>

        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
                    <div>
                        <div class="fw-semibold">{{ $currentSemester->name }}</div>
                        <div class="small text-muted">
                            Year {{ $currentSemester->year }}, Semester {{ $currentSemester->semester_number }}
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        @if($currentReport)
                        <a href="{{ route('student.reports.show', $currentSemester) }}" class="btn btn-sm btn-outline-secondary">
                            <i class="bi bi-file-earmark-text me-1"></i>Report
                        </a>
                        @endif
                        <a href="{{ route('student.logbook.semester', $currentSemester) }}" class="btn btn-sm btn-primary">
                            Continue <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>

                <div class="mb-2">
                    <div class="d-flex justify-content-between small mb-1">
                        <span class="text-muted">Compulsory</span>
                        <span><strong>{{ $cp['compulsory_passed'] }}</strong>/{{ $cp['compulsory_total'] }}</span>
                    </div>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-success"
                             style="width:{{ $cp['compulsory_total'] > 0 ? round($cp['compulsory_passed'] / $cp['compulsory_total'] * 100) : 0 }}%"></div>
                    </div>
                </div>

                @if($cp['optional_total'] > 0)
                <div>
                    <div class="d-flex justify-content-between small mb-1">
                        <span class="text-muted">Optional</span>
                        <span><strong>{{ $cp['optional_passed'] }}</strong>/{{ $cp['optional_total'] }}</span>
                    </div>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-info"
                             style="width:{{ round($cp['optional_passed'] / $cp['optional_total'] * 100) }}%"></div>
                    </div>
                </div>
                @endif
            </div>
        </div>
        @else
        <div class="alert alert-info d-flex align-items-start gap-2">
            <i class="bi bi-info-circle mt-1"></i>
            <div>
                <div class="fw-semibold">No current semester set</div>
                <div class="small">Ask your faculty administrator to set your current semester so your dashboard can track it.</div>
            </div>
        </div>
        @endif
    </div>

    {{-- ── Recent feedback ────────────────────────────────────────────── --}}
    <div class="col-lg-5">
        <h6 class="proc-section-title"><i class="bi bi-clock-history text-muted"></i> Recent feedback</h6>

        <div class="card">
            <div class="card-body p-0">
                @forelse($recent as $a)
                <div class="recent-item">
                    <div class="flex-shrink-0">
                        <span class="badge score-{{ $a->is_na ? 'na' : $a->score }}">{{ $a->is_na ? 'NA' : $a->score }}</span>
                    </div>
                    <div class="min-w-0 flex-grow-1">
                        <div class="small fw-semibold text-truncate">{{ $a->procedure?->name ?? 'Procedure removed' }}</div>
                        <div class="text-muted" style="font-size:.74rem">{{ $a->assessment_date->format('d M Y') }}</div>
                        @if($a->assessedBy)
                        <div class="text-muted text-truncate" style="font-size:.72rem">
                            <i class="bi bi-person-check me-1"></i>{{ $a->assessedBy->name }}
                        </div>
                        @endif
                        @if($a->remarks)
                        <div class="retry-remark mt-1">{{ $a->remarks }}</div>
                        @endif
                    </div>
                </div>
                @empty
                <div class="text-center text-muted py-4 px-3">
                    <i class="bi bi-clipboard-x d-block fs-4 mb-2 opacity-50"></i>
                    <div class="small">No assessments yet.</div>
                    <div class="small">Show your QR card to a clinical instructor to begin.</div>
                </div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection