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

@php
    $cTotal  = $progress['compulsory_total'];
    $cPassed = $progress['compulsory_passed'];
    $cPct    = $cTotal > 0 ? round($cPassed / $cTotal * 100) : 0;
    $oTotal  = $progress['optional_total'];
    $oPassed = $progress['optional_passed'];
@endphp

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

{{-- ── Header ─────────────────────────────────────────────────────────── --}}
<div class="card mb-3">
    <div class="card-body">
        <div class="d-flex flex-wrap align-items-start justify-content-between gap-3">
            <div>
                <h4 class="page-title mb-1">{{ $semester->name }}</h4>
                <p class="page-subtitle">Year {{ $semester->year }}, Semester {{ $semester->semester_number }}</p>
            </div>
            @if($report)
            <a href="{{ route('student.reports.show', $semester) }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-file-earmark-text me-1"></i>Clinical Report
            </a>
            @endif
        </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</div>
            </div>
            @if($oTotal > 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>{{ $oPassed }}</strong> of {{ $oTotal }}</span>
                </div>
                <div class="progress progress-lg">
                    <div class="progress-bar bg-info" style="width: {{ $oTotal > 0 ? round($oPassed / $oTotal * 100) : 0 }}%"></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 class="btn btn-outline-secondary active" data-filter="all">All</button>
            <button class="btn btn-outline-secondary" data-filter="passed">Passed</button>
            <button class="btn btn-outline-secondary" data-filter="retry">Retry</button>
            <button class="btn btn-outline-secondary" data-filter="pending">Not assessed</button>
        </div>

        <div class="btn-group btn-group-sm" role="group">
            <button class="btn btn-outline-secondary" id="expandAll" title="Expand all sections">
                <i class="bi bi-arrows-expand"></i>
            </button>
            <button class="btn btn-outline-secondary" id="collapseAll" title="Collapse all sections">
                <i class="bi bi-arrows-collapse"></i>
            </button>
        </div>
    </div>
    <div class="proc-resultbar d-none" id="resultBar"></div>
</div>

{{-- ── Compulsory ─────────────────────────────────────────────────────── --}}
@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' => $user->id])
    @endforeach
</section>
@endif

{{-- ── Optional ───────────────────────────────────────────────────────── --}}
@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' => $user->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