@extends('layouts.app')

@section('title', 'Student Profile | Institution Axis')

@section('sidebar-menu')
    @include('schooladmin.partials.sidebar')
@endsection

@section('sidebar-footer')
    <p>{{ auth()->user()->school?->name ?? 'Institution Axis' }}</p>
@endsection

@section('breadcrumb')
    <span><a href="{{ route('schooladmin.dashboard') }}">Home</a></span> / <span><a href="{{ route('schooladmin.students.index') }}">Students</a></span> / <span class="active-page">Digital Profile</span>
@endsection

@section('content')
    <div class="row g-4">
        <!-- Profile Sidebar -->
        <div class="col-md-4">
            <div class="card shadow-sm rounded-4 border-0 text-center p-4">
                <img src="https://ui-avatars.com/api/?background=e54027&color=fff&name=Student" class="rounded-circle mx-auto mb-3" width="100">
                <h5>Student Name</h5>
                <p class="text-muted mb-1">Adm No: 12345</p>
                <div class="badge bg-primary">Class 8 - North</div>
            </div>

            <div class="card shadow-sm rounded-4 border-0 mt-3 p-4">
                <h6 class="mb-3 border-bottom pb-2">Emergency Contact</h6>
                <p class="mb-1"><i class="fas fa-user text-muted"></i> Parent Name (Father)</p>
                <p class="mb-0"><i class="fas fa-phone text-muted"></i> +254 712 345 678</p>
            </div>
        </div>

        <!-- Main Info -->
        <div class="col-md-8">
            <div class="card shadow-sm rounded-4 border-0">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <ul class="nav nav-tabs card-header-tabs" id="profileTabs">
                        <li class="nav-item">
                            <a class="nav-link active" href="#bio" data-bs-toggle="tab">Biography</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#academic" data-bs-toggle="tab">Academic History</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#medical" data-bs-toggle="tab">Medical Records</a>
                        </li>
                    </ul>
                    <a href="#" class="btn btn-sm btn-outline-primary"><i class="fas fa-edit"></i> Edit</a>
                </div>
                <div class="card-body tab-content">
                    <!-- Bio Tab -->
                    <div class="tab-pane fade show active" id="bio">
                        <p><strong>Date of Birth:</strong> Jan 1, 2010</p>
                        <p><strong>Gender:</strong> Male</p>
                        <p class="mt-3"><strong>Biography:</strong></p>
                        <p class="text-muted">A dedicated student with a passion for sciences.</p>
                    </div>

                    <!-- Academic Tab -->
                    <div class="tab-pane fade" id="academic">
                        <table class="table table-sm">
                            <thead><tr><th>Term</th><th>Math</th><th>Eng</th><th>Sci</th><th>Rank</th></tr></thead>
                            <tbody>
                                <tr><td>Term 1, 2026</td><td>85%</td><td>78%</td><td>92%</td><td>Top 10%</td></tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Medical Tab -->
                    <div class="tab-pane fade" id="medical">
                        <div class="alert alert-info">
                            <strong><i class="fas fa-notes-medical"></i> Medical Info</strong>
                            <p class="mb-0 mt-2"><strong>Allergies:</strong> Peanuts</p>
                            <p class="mb-0 mt-2"><strong>Conditions:</strong> None</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection