@extends('staff.layouts.app')
@section('title', 'Student Profile')
@section('content')
<div class="max-w-3xl mx-auto px-4 py-6">
    <!-- Back Button -->
    <a href="{{ route('staff.my_students.list', ['slug' => request()->route('slug') ?? session('staff_school_slug')]) }}" class="inline-flex items-center gap-1.5 text-xs font-bold text-slate-500 hover:text-slate-700 mb-4">
        <i class="fa-solid fa-arrow-left"></i> Back to Students List
    </a>

    <!-- Profile Header -->
    <div class="bg-gradient-to-br from-indigo-600 to-indigo-800 p-6 rounded-3xl text-white shadow-xl mb-6 relative overflow-hidden">
        <div class="flex items-center gap-4 relative z-10">
            <img src="{{ $studentPhoto }}" alt="{{ $student->student_name }}" class="w-20 h-20 rounded-full border-4 border-white/30 object-cover shadow-lg">
            <div class="flex-1 min-w-0">
                <h2 class="text-2xl font-extrabold leading-tight truncate">{{ $student->student_name }}</h2>
                <p class="text-sm opacity-90 mt-1"><i class="fa-solid fa-graduation-cap mr-1"></i> Class {{ $student->class_name ?? 'N/A' }} | Sec {{ $student->section_name ?? 'N/A' }}</p>
                <p class="text-xs opacity-75 mt-1"><i class="fa-solid fa-id-card mr-1"></i> Admission No: {{ $student->admission_no }}</p>
            </div>
        </div>
        <div class="absolute -top-10 -right-10 w-32 h-32 bg-white/10 rounded-full"></div>
    </div>

    <!-- Details Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- Personal Info -->
        <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm">
            <h3 class="text-slate-800 font-bold text-sm mb-4 flex items-center gap-2"><i class="fa-solid fa-user text-indigo-500"></i> Personal Information</h3>
            <div class="space-y-3">
                <div><p class="text-[10px] text-slate-400 uppercase font-bold">Date of Birth</p><p class="text-sm text-slate-700 font-medium">{{ $student->date_of_birth ? \Carbon\Carbon::parse($student->date_of_birth)->format('d M, Y') : 'N/A' }}</p></div>
                <div><p class="text-[10px] text-slate-400 uppercase font-bold">Gender</p><p class="text-sm text-slate-700 font-medium capitalize">{{ $student->gender ?? 'N/A' }}</p></div>
                <div><p class="text-[10px] text-slate-400 uppercase font-bold">Aadhaar No</p><p class="text-sm text-slate-700 font-medium">{{ $student->aadhaar_no ?? 'N/A' }}</p></div>
                <div><p class="text-[10px] text-slate-400 uppercase font-bold">Transport Mode</p><p class="text-sm text-slate-700 font-medium">{{ $student->transport_mode ?? 'N/A' }}</p></div>
            </div>
        </div>

        <!-- Contact & Address -->
        <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm">
            <h3 class="text-slate-800 font-bold text-sm mb-4 flex items-center gap-2"><i class="fa-solid fa-address-book text-emerald-500"></i> Contact & Address</h3>
            <div class="space-y-3">
                @if($isPrincipalOrCoord)
                    <div><p class="text-[10px] text-slate-400 uppercase font-bold">Contact Number</p><p class="text-sm text-slate-700 font-medium">{{ $student->contact_number ?? 'N/A' }}</p></div>
                @else
                    <div class="p-3 bg-slate-50 rounded-xl border border-dashed border-slate-200 text-center">
                        <p class="text-[10px] text-slate-400 uppercase font-bold mb-1">Contact Number</p>
                        <p class="text-xs text-slate-500 font-medium"><i class="fa-solid fa-lock mr-1 text-rose-400"></i> Locked</p>
                    </div>
                @endif
                <div><p class="text-[10px] text-slate-400 uppercase font-bold">Permanent Address</p><p class="text-sm text-slate-700 font-medium whitespace-pre-line">{{ $student->permanent_address ?? 'N/A' }}</p></div>
            </div>
        </div>

        <!-- Father's Info -->
        <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm">
            <h3 class="text-slate-800 font-bold text-sm mb-4 flex items-center gap-2"><i class="fa-solid fa-male text-blue-500"></i> Father's Information</h3>
            <div class="flex items-center gap-3 mb-4">
                <img src="{{ $fatherPhoto }}" alt="Father" class="w-12 h-12 rounded-full object-cover border-2 border-white shadow-sm">
                <div>
                    <p class="text-sm font-bold text-slate-800">{{ $student->father_name ?? 'N/A' }}</p>
                    <p class="text-[10px] text-slate-500">{{ $student->father_profession ?? 'Profession N/A' }}</p>
                </div>
            </div>
        </div>

        <!-- Mother's Info -->
        <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm">
            <h3 class="text-slate-800 font-bold text-sm mb-4 flex items-center gap-2"><i class="fa-solid fa-female text-pink-500"></i> Mother's Information</h3>
            <div class="flex items-center gap-3 mb-4">
                <img src="{{ $motherPhoto }}" alt="Mother" class="w-12 h-12 rounded-full object-cover border-2 border-white shadow-sm">
                <div>
                    <p class="text-sm font-bold text-slate-800">{{ $student->mother_name ?? 'N/A' }}</p>
                    <p class="text-[10px] text-slate-500">{{ $student->mother_profession ?? 'Profession N/A' }}</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection