@extends('layouts.app')
@section('title', $student->name . ' - Student Profile')
@section('page-title', 'Student Profile')

@section('content')
<div class="max-w-5xl mx-auto space-y-6">

    {{-- Back Button --}}
    <a href="{{ route('students.index') }}" class="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 transition">
        <i class="fas fa-arrow-left"></i> Back to Students
    </a>

    {{-- Success Messages --}}
    @if(session('success'))
    <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl text-sm">
        <i class="fas fa-check-circle mr-1"></i> {{ session('success') }}
    </div>
    @endif

    {{-- Profile Header --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="flex flex-col sm:flex-row sm:items-center gap-4">
            <div class="w-16 h-16 rounded-full bg-primary-100 flex items-center justify-center text-primary-700 text-2xl font-bold">
                {{ strtoupper(substr($student->name, 0, 1)) }}
            </div>
            <div class="flex-1">
                <div class="flex items-center gap-3">
                    <h2 class="text-xl font-bold text-gray-900">{{ $student->name }}</h2>
                    @if($student->is_active)
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
                    @else
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Inactive</span>
                    @endif
                </div>
                <p class="text-sm text-gray-500 mt-1">
                    {{ $student->studentProfile?->schoolClass?->full_name ?? 'No class assigned' }}
                    @if($student->studentProfile?->roll_number)
                        &bull; Roll: {{ $student->studentProfile->roll_number }}
                    @endif
                    @if($student->studentProfile?->admission_number)
                        &bull; Adm: {{ $student->studentProfile->admission_number }}
                    @endif
                </p>
            </div>
            @if(auth()->user()->isAdmin())
            <a href="{{ route('students.edit', $student) }}"
               class="inline-flex items-center gap-2 bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-700 transition">
                <i class="fas fa-edit"></i> Edit
            </a>
            @endif
        </div>
    </div>

    {{-- Stats Cards --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 text-center">
            <p class="text-2xl font-bold text-green-600">{{ $attendanceStats?->present ?? 0 }}</p>
            <p class="text-xs text-gray-500 mt-1">Days Present</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 text-center">
            <p class="text-2xl font-bold text-red-600">{{ $attendanceStats?->absent ?? 0 }}</p>
            <p class="text-xs text-gray-500 mt-1">Days Absent</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 text-center">
            <p class="text-2xl font-bold text-yellow-600">{{ $attendanceStats?->late ?? 0 }}</p>
            <p class="text-xs text-gray-500 mt-1">Days Late</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 text-center">
            @php
                $total = $attendanceStats?->total_days ?? 0;
                $present = $attendanceStats?->present ?? 0;
                $percentage = $total > 0 ? round(($present / $total) * 100, 1) : 0;
            @endphp
            <p class="text-2xl font-bold text-primary-600">{{ $percentage }}%</p>
            <p class="text-xs text-gray-500 mt-1">Attendance Rate</p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

        {{-- Personal Information --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                <i class="fas fa-user text-primary-600 mr-2"></i> Personal Information
            </h3>
            <dl class="space-y-3">
                <div class="flex justify-between">
                    <dt class="text-sm text-gray-500">Email</dt>
                    <dd class="text-sm font-medium text-gray-900">{{ $student->email }}</dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-sm text-gray-500">Phone</dt>
                    <dd class="text-sm font-medium text-gray-900">{{ $student->phone ?? '—' }}</dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-sm text-gray-500">Date of Birth</dt>
                    <dd class="text-sm font-medium text-gray-900">{{ $student->studentProfile?->dob?->format('d M Y') ?? '—' }}</dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-sm text-gray-500">Gender</dt>
                    <dd class="text-sm font-medium text-gray-900">{{ ucfirst($student->studentProfile?->gender ?? '—') }}</dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-sm text-gray-500">Blood Group</dt>
                    <dd class="text-sm font-medium text-gray-900">{{ $student->studentProfile?->blood_group ?? '—' }}</dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-sm text-gray-500">Admission Date</dt>
                    <dd class="text-sm font-medium text-gray-900">{{ $student->studentProfile?->admission_date?->format('d M Y') ?? '—' }}</dd>
                </div>
                @if($student->studentProfile?->address)
                <div>
                    <dt class="text-sm text-gray-500 mb-1">Address</dt>
                    <dd class="text-sm text-gray-900 bg-gray-50 rounded-lg p-2">{{ $student->studentProfile->address }}</dd>
                </div>
                @endif
                @if($student->studentProfile?->medical_notes)
                <div>
                    <dt class="text-sm text-gray-500 mb-1">Medical Notes</dt>
                    <dd class="text-sm text-gray-900 bg-yellow-50 rounded-lg p-2 border border-yellow-100">
                        <i class="fas fa-notes-medical text-yellow-600 mr-1"></i> {{ $student->studentProfile->medical_notes }}
                    </dd>
                </div>
                @endif
            </dl>
        </div>

        {{-- Parent / Guardian --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                <i class="fas fa-user-friends text-primary-600 mr-2"></i> Parent / Guardian
            </h3>
            @if($student->studentProfile?->parent)
                @php $parent = $student->studentProfile->parent; @endphp
                <dl class="space-y-3">
                    <div class="flex justify-between">
                        <dt class="text-sm text-gray-500">Name</dt>
                        <dd class="text-sm font-medium text-gray-900">{{ $parent->name }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-sm text-gray-500">Email</dt>
                        <dd class="text-sm font-medium text-gray-900">{{ $parent->email }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-sm text-gray-500">Phone</dt>
                        <dd class="text-sm font-medium text-gray-900">{{ $parent->phone ?? '—' }}</dd>
                    </div>
                </dl>
            @else
                <div class="text-center py-6 text-gray-400">
                    <i class="fas fa-user-slash text-3xl mb-2"></i>
                    <p class="text-sm">No parent assigned.</p>
                </div>
            @endif
        </div>
    </div>

    {{-- Recent Marks --}}
    @if($recentMarks->isNotEmpty())
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">
            <i class="fas fa-chart-bar text-primary-600 mr-2"></i> Recent Marks
        </h3>
        <div class="overflow-x-auto">
            <table class="w-full min-w-[500px]">
                <thead class="bg-gray-50 border-b border-gray-100">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-semibold text-gray-600">Subject</th>
                        <th class="px-4 py-2 text-left text-xs font-semibold text-gray-600">Exam</th>
                        <th class="px-4 py-2 text-center text-xs font-semibold text-gray-600">Marks</th>
                        <th class="px-4 py-2 text-center text-xs font-semibold text-gray-600">Percentage</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @foreach($recentMarks as $mark)
                    @php
                        $pct = $mark->max_marks > 0 ? round(($mark->marks_obtained / $mark->max_marks) * 100, 1) : 0;
                        $colorClass = $pct >= 80 ? 'text-green-600' : ($pct >= 50 ? 'text-yellow-600' : 'text-red-600');
                    @endphp
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-2 text-sm font-medium text-gray-900">{{ $mark->subject }}</td>
                        <td class="px-4 py-2 text-sm text-gray-600">{{ $mark->exam }}</td>
                        <td class="px-4 py-2 text-sm text-center">{{ $mark->marks_obtained }}/{{ $mark->max_marks }}</td>
                        <td class="px-4 py-2 text-sm text-center font-semibold {{ $colorClass }}">{{ $pct }}%</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

</div>
@endsection