@extends('layouts.app')
@section('title', $student->user->name)
@section('page-title', 'Student Profile')
@section('sidebar-nav')
<div class="nav-item"><a href="{{ route('admin.dashboard') }}"><i class="bi bi-grid"></i> Dashboard</a></div>
<div class="nav-item"><a href="{{ route('admin.students.index') }}"><i class="bi bi-people"></i> Students</a></div>
@endsection

@section('content')
<div class="page-header">
    <div style="display:flex;align-items:center;gap:16px;">
        <div class="avatar" style="width:56px;height:56px;font-size:22px;">{{ strtoupper(substr($student->user->name, 0, 1)) }}</div>
        <div>
            <h1>{{ $student->user->name }}</h1>
            <p>{{ $student->stream?->schoolClass->name }} {{ $student->stream?->name }} &bull; Adm: {{ $student->admission_no }}</p>
        </div>
    </div>
    <div style="display:flex;gap:8px;">
        <a href="{{ route('admin.students.edit', $student) }}" class="btn btn-outline"><i class="bi bi-pencil"></i> Edit</a>
        <a href="{{ route('admin.students.index') }}" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Back</a>
    </div>
</div>

<div class="grid grid-3" style="margin-bottom:24px;">
    <div class="stat-card">
        <div class="stat-icon green"><i class="bi bi-envelope"></i></div>
        <div class="stat-info"><h3 style="font-size:14px;">{{ $student->user->email }}</h3><p>Email</p></div>
    </div>
    <div class="stat-card">
        <div class="stat-icon blue"><i class="bi bi-phone"></i></div>
        <div class="stat-info"><h3 style="font-size:14px;">{{ $student->user->phone ?? 'N/A' }}</h3><p>Phone</p></div>
    </div>
    <div class="stat-card">
        <div class="stat-icon {{ $student->status === 'active' ? 'green' : 'red' }}"><i class="bi bi-circle-fill"></i></div>
        <div class="stat-info"><h3 style="font-size:14px;">{{ ucfirst($student->status) }}</h3><p>Status</p></div>
    </div>
</div>

<div class="grid grid-2">
    <div class="card">
        <div class="card-header"><h5>Recent Marks</h5></div>
        <div class="card-body" style="padding:0;">
            @forelse($student->marks->take(10) as $mark)
            <div style="padding:10px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;">
                <div>
                    <div style="font-weight:500;font-size:13px;">{{ $mark->subject->name }}</div>
                    <div style="font-size:12px;color:var(--gray);">{{ $mark->exam->name }}</div>
                </div>
                <div style="text-align:right;">
                    <span style="font-weight:700;">{{ $mark->score }}%</span>
                    <span class="badge badge-info" style="margin-left:6px;">{{ $mark->grade }}</span>
                </div>
            </div>
            @empty
            <div style="padding:20px;text-align:center;color:var(--gray);">No marks recorded</div>
            @endforelse
        </div>
    </div>
    <div class="card">
        <div class="card-header"><h5>Fee Invoices</h5></div>
        <div class="card-body" style="padding:0;">
            @forelse($student->feeInvoices as $invoice)
            <div style="padding:10px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;">
                <div>
                    <div style="font-weight:500;font-size:13px;">{{ $invoice->term->name }}</div>
                    <div style="font-size:12px;color:var(--gray);">Total: KES {{ number_format($invoice->total_amount) }}</div>
                </div>
                <div style="text-align:right;">
                    <div style="font-size:13px;color:{{ $invoice->balance > 0 ? 'var(--danger)' : 'var(--success)' }};">
                        Balance: KES {{ number_format($invoice->balance) }}
                    </div>
                    <span class="badge {{ $invoice->status === 'paid' ? 'badge-success' : ($invoice->status === 'partial' ? 'badge-warning' : 'badge-danger') }}">
                        {{ ucfirst($invoice->status) }}
                    </span>
                </div>
            </div>
            @empty
            <div style="padding:20px;text-align:center;color:var(--gray);">No invoices</div>
            @endforelse
        </div>
    </div>
</div>
@endsection
