@extends('layouts.app')
@section('title', $student->name . ' – ' . $semester->name . ' – Logbook')
@section('content')

@php
    $profile = $student->studentProfile;
    $cTotal  = $progress['compulsory_total'];
    $cPassed = $progress['compulsory_passed'];
    $cPct    = $cTotal > 0 ? round($cPassed / $cTotal * 100) : 0;
@endphp

<a href="{{ route('lecturer.students.show', $student) }}" class="text-muted text-decoration-none small d-inline-flex align-items-center gap-1 mb-2">
    <i class="bi bi-chevron-left"></i> {{ $student->name }}
</a>

{{-- ── Header ─────────────────────────────────────────────────────────── --}}
<div class="card mb-3">
    <div class="card-body">
        <div class="d-flex flex-wrap align-items-center gap-3">
            @if($profile?->photo_path)
            <img src="{{ asset('storage/' . $profile->photo_path) }}" class="student-avatar" style="width:48px;height:48px" alt="">
            @else
            <span class="student-avatar d-inline-flex align-items-center justify-content-center" style="width:48px;height:48px">
                {{ strtoupper(mb_substr($student->name, 0, 1)) }}
            </span>
            @endif

            <div class="flex-grow-1 min-w-0">
                <h4 class="page-title mb-1">
                    {{ $semester->name }}
                    <span class="badge bg-secondary-subtle text-secondary-emphasis align-middle ms-1"
                          style="font-size:.7rem">Read-only</span>
                </h4>
                <p class="page-subtitle">{{ $student->name }} · {{ $profile?->student_id ?: '—' }}</p>
            </div>

            <a href="{{ route('lecturer.reports.show', [$student, $semester]) }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-file-earmark-text me-1"></i>Clinical report
            </a>
        </div>

        <div class="row g-3 mt-1">
            <div class="col-md-8">
                <div class="d-flex align-items-baseline justify-content-between mb-1">
                    <span class="small fw-semibold text-muted">Compulsory progress</span>
                    <span class="small"><strong>{{ $cPassed }}</strong> of {{ $cTotal }} passed</span>
                </div>
                <div class="progress progress-lg">
                    <div class="progress-bar bg-success" style="width: {{ $cPct }}%"></div>
                </div>
                <div class="small text-muted mt-1">{{ $cPct }}% complete
                    @if($progress['retry'] > 0)· <span class="text-warning-emphasis">{{ $progress['retry'] }} to retry</span>@endif
                </div>
            </div>
            @if($progress['optional_total'] > 0)
            <div class="col-md-4">
                <div class="d-flex align-items-baseline justify-content-between mb-1">
                    <span class="small fw-semibold text-muted">Optional</span>
                    <span class="small"><strong>{{ $progress['optional_passed'] }}</strong> of {{ $progress['optional_total'] }}</span>
                </div>
                <div class="progress progress-lg">
                    <div class="progress-bar bg-info"
                         style="width: {{ round($progress['optional_passed'] / $progress['optional_total'] * 100) }}%"></div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- ── Toolbar ────────────────────────────────────────────────────────── --}}
<div class="proc-toolbar card mb-3">
    <div class="card-body py-2 d-flex flex-wrap align-items-center gap-2">
        <div class="proc-search flex-grow-1">
            <i class="bi bi-search"></i>
            <input type="search" id="procSearch" class="form-control" placeholder="Search procedures…" autocomplete="off">
        </div>
        <div class="btn-group btn-group-sm proc-filters" role="group">
            <button type="button" class="btn btn-outline-secondary active" data-filter="all">All</button>
            <button type="button" class="btn btn-outline-secondary" data-filter="passed">Passed</button>
            <button type="button" class="btn btn-outline-secondary" data-filter="retry">Retry</button>
            <button type="button" class="btn btn-outline-secondary" data-filter="pending">Not assessed</button>
        </div>
        <div class="btn-group btn-group-sm" role="group">
            <button type="button" class="btn btn-outline-secondary" id="expandAll" title="Expand all"><i class="bi bi-arrows-expand"></i></button>
            <button type="button" class="btn btn-outline-secondary" id="collapseAll" title="Collapse all"><i class="bi bi-arrows-collapse"></i></button>
        </div>
    </div>
    <div class="proc-resultbar d-none" id="resultBar"></div>
</div>

{{-- Shares the student logbook partials so both views stay in step --}}
@if($roots->isNotEmpty())
<section data-section>
    <h6 class="proc-section-title"><i class="bi bi-star-fill text-warning"></i> Compulsory Procedures</h6>
    @foreach($roots as $root)
        @include('student.logbook._group', ['root' => $root, 'userId' => $student->id])
    @endforeach
</section>
@endif

@if($optionalRoots->isNotEmpty())
<section data-section>
    <h6 class="proc-section-title mt-4"><i class="bi bi-bookmark-fill text-info"></i> Optional Procedures</h6>
    @foreach($optionalRoots as $root)
        @include('student.logbook._group', ['root' => $root, 'userId' => $student->id])
    @endforeach
</section>
@endif

<div id="noResults" class="text-center text-muted py-5 d-none">
    <i class="bi bi-search d-block fs-3 mb-2 opacity-50"></i>No procedures match your search.
</div>

@include('student.logbook._filter-script')
@endsection