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

<div class="d-flex align-items-center gap-2 mb-3">
    <a href="{{ route('student.logbook.semester', $semester) }}" class="text-muted text-decoration-none small">
        <i class="bi bi-chevron-left"></i> {{ $semester->name }} Logbook
    </a>
</div>

<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h4 class="fw-bold mb-0">Clinical Performance Report</h4>
        <p class="text-muted small mb-0">{{ $semester->name }}</p>
    </div>
    <a href="{{ route('student.reports.pdf', $semester) }}" target="_blank" class="btn btn-danger">
        <i class="bi bi-file-earmark-pdf me-1"></i>Download PDF
    </a>
</div>

{{-- Student Info --}}
<div class="card border-0 shadow-sm mb-3">
    <div class="card-header bg-primary text-white fw-semibold small py-2">
        <i class="bi bi-person me-1"></i>Student Information
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-sm-6 col-md-3">
                <div class="text-muted small">Student Name</div>
                <div class="fw-semibold">{{ auth()->user()->name }}</div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="text-muted small">Student ID</div>
                <div class="fw-semibold">{{ $profile?->student_id ?? '—' }}</div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="text-muted small">IC Number</div>
                <div class="fw-semibold">{{ $profile?->ic_number ?? '—' }}</div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="text-muted small">Intake</div>
                <div class="fw-semibold">{{ $profile?->intake ?? '—' }}</div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="text-muted small">Semester</div>
                <div class="fw-semibold">{{ $semester->name }}</div>
            </div>
            <div class="col-sm-6 col-md-9">
                <div class="text-muted small">Hospital / Placement</div>
                <div class="fw-semibold">{{ $report->hospital_name ?? '—' }}</div>
            </div>
        </div>
    </div>
</div>

{{-- Attendance --}}
<div class="card border-0 shadow-sm mb-3">
    <div class="card-header bg-primary text-white fw-semibold small py-2">
        <i class="bi bi-calendar-check me-1"></i>Clinical Attendance
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-6 col-md-3">
                <div class="text-muted small">Total Clinical Days</div>
                <div class="fw-bold fs-5">{{ $report->total_clinical_days ?? '—' }}</div>
            </div>
            <div class="col-6 col-md-3">
                <div class="text-muted small">Attendance Rate</div>
                @php $att = $report->clinical_attendance; @endphp
                <div class="fw-bold fs-5 text-{{ $att >= 80 ? 'success' : ($att >= 60 ? 'warning' : 'danger') }}">
                    {{ $att ? number_format($att, 1) . '%' : '—' }}
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="text-muted small">Absent Days</div>
                <div class="fw-bold fs-5">{{ $report->absent_days ?? '—' }}</div>
            </div>
            <div class="col-6 col-md-3">
                <div class="text-muted small">Replacement Dates</div>
                <div class="small">
                    @if(!empty($report->replacement_dates))
                    @foreach($report->replacement_dates as $d)
                    <span class="badge bg-light text-dark border me-1">{{ $d }}</span>
                    @endforeach
                    @else
                    <span class="text-muted">—</span>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Procedure Progress --}}
<div class="card border-0 shadow-sm mb-3">
    <div class="card-header bg-primary text-white fw-semibold small py-2">
        <i class="bi bi-graph-up me-1"></i>Clinical Competency Summary (Year {{ $semester->year }})
    </div>
    <div class="card-body p-0">
        <table class="table table-sm mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>Semester</th>
                    <th class="text-center">Compulsory</th>
                    <th class="text-center">Optional</th>
                    <th class="text-center">Overall</th>
                    <th class="text-center">Status</th>
                </tr>
            </thead>
            <tbody>
                @foreach($yearSemesters as $sem)
                @php
                $p = $yearProgress[$sem->id] ?? [];
                $total = ($p['compulsory_total']??0) + ($p['optional_total']??0);
                $passed = ($p['compulsory_passed']??0) + ($p['optional_passed']??0);
                $pct = $total > 0 ? round($passed / $total * 100) : 0;
                $ok = $pct >= 70;
                $isCurrent = $sem->id === $semester->id;
                @endphp
                <tr class="{{ $isCurrent ? 'table-primary fw-semibold' : '' }}">
                    <td>{{ $sem->name }}{{ $isCurrent ? ' ★' : '' }}</td>
                    <td class="text-center">{{ ($p['compulsory_passed']??0) }}/{{ ($p['compulsory_total']??0) }}</td>
                    <td class="text-center">{{ ($p['optional_passed']??0) }}/{{ ($p['optional_total']??0) }}</td>
                    <td class="text-center">
                        <div class="progress" style="height:6px;min-width:60px">
                            <div class="progress-bar bg-{{ $ok ? 'success' : 'warning' }}" style="width:{{ $pct }}%"></div>
                        </div>
                        <span class="small">{{ $pct }}%</span>
                    </td>
                    <td class="text-center">
                        @if($ok)
                        <span class="badge bg-success">Satisfactory</span>
                        @else
                        <span class="badge bg-warning text-dark">Needs Improvement</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

@if($report->notes)
{{-- Remarks --}}
<div class="card border-0 shadow-sm mb-3">
    <div class="card-header bg-primary text-white fw-semibold small py-2">
        <i class="bi bi-chat-left-text me-1"></i>Remarks / Notes
    </div>
    <div class="card-body">
        <p class="mb-0" style="white-space:pre-line">{{ $report->notes }}</p>
    </div>
</div>
@endif

{{-- Checked by --}}
<div class="card border-0 shadow-sm mb-3">
    <div class="card-header bg-transparent fw-semibold small py-2">
        <i class="bi bi-person-check me-1 text-success"></i>Verified By
    </div>
    <div class="card-body">
        <div class="d-flex align-items-center gap-3">
            @php $ci = $report->checkedBy; $ciProfile = $ci?->ciProfile; @endphp
            @if($ciProfile?->photo_path)
            <img src="{{ asset('storage/' . $ciProfile->photo_path) }}" class="rounded-circle"
                style="width:48px;height:48px;object-fit:cover" alt="">
            @else
            <div class="rounded-circle bg-secondary d-flex align-items-center justify-content-center"
                style="width:48px;height:48px">
                <i class="bi bi-person-fill text-white"></i>
            </div>
            @endif
            <div>
                <div class="fw-semibold">{{ $ci?->name ?? '—' }}</div>
                @if($ciProfile?->position || $ciProfile?->department)
                <div class="text-muted small">{{ implode(' · ', array_filter([$ciProfile->position, $ciProfile->department])) }}</div>
                @endif
                <div class="text-muted small">
                    <i class="bi bi-calendar3 me-1"></i>
                    {{ $report->checked_date ? $report->checked_date->format('d M Y') : 'Not yet signed' }}
                </div>
            </div>
        </div>
    </div>
</div>

@endsection