@extends('Component.layout')

@section('title', 'My Child\'s Info - Iqra Parent Portal')
@section('breadcrumb', 'Parent Portal')

@section('content')
<div class="space-y-6">

    @if(session('success'))
    <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-100 text-emerald-800 text-xs font-semibold flex items-center gap-2">
        <svg class="w-4 h-4 text-emerald-600 fill-none stroke-current shrink-0" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        {{ session('success') }}
    </div>
    @endif
    @if($errors->any())
    <div class="bg-red-50 border border-red-100 text-red-700 p-3.5 rounded-2xl text-xs font-semibold flex items-start gap-2">
        <svg class="w-4 h-4 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <span>{{ $errors->first() }}</span>
    </div>
    @endif

    <!-- Student Card Hero -->
    <div class="bg-emerald-700 rounded-3xl p-6 shadow-xl overflow-hidden relative">
        <div class="absolute -top-10 -right-10 w-40 h-40 bg-white/5 rounded-full"></div>
        <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-white/5 rounded-full"></div>

        <div class="flex flex-col sm:flex-row items-start sm:items-center gap-5 relative z-10">
            <!-- Avatar -->
            <div class="w-20 h-20 rounded-2xl bg-white/20 border-2 border-white/30 flex items-center justify-center shrink-0 overflow-hidden shadow-lg">
                <img src="{{ $student->avatar_url }}" alt="Avatar" class="w-full h-full object-cover">
            </div>

            <!-- Name & Class -->
            <div class="flex-1 min-w-0">
                <h2 class="text-2xl font-extrabold text-white tracking-tight">
                    {{ $student->first_name }} {{ $student->surname }}
                </h2>
                <div class="flex flex-wrap items-center gap-2 mt-2">
                    <span class="px-3 py-1 bg-white/15 border border-white/20 text-white text-xs font-bold rounded-full">
                        {{ $student->schoolClass->name ?? 'N/A' }}
                    </span>
                    <span class="px-3 py-1 bg-white/15 border border-white/20 text-white text-xs font-bold rounded-full">
                        Section {{ $student->section->name ?? 'N/A' }}
                    </span>
                    @if($student->rte_status)
                        <span class="px-3 py-1 bg-orange-400/80 text-white text-xs font-bold rounded-full">RTE</span>
                    @endif
                </div>
            </div>

            <!-- Login Credentials Box -->
            <div class="shrink-0 bg-white/10 border border-white/20 rounded-2xl p-4 text-right">
                <div class="text-white/60 text-[10px] font-bold uppercase tracking-wider mb-1">Login Credentials</div>
                <div class="text-white font-extrabold text-base">{{ $student->mobile_number }}</div>
                <div class="text-white/70 text-[11px] font-medium mt-1">Password: Date of Birth</div>
                <div class="text-emerald-200 text-[11px] font-bold">{{ $student->dob->format('d/m/Y') }}</div>
            </div>
        </div>
    </div>

    <!-- Stats Row -->
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
        <div class="bg-white rounded-2xl p-4 border border-slate-200 shadow-sm text-center">
            <div class="text-2xl font-extrabold text-indigo-600">{{ $student->schoolClass->name ?? '—' }}</div>
            <div class="text-[11px] text-slate-500 font-medium mt-1">Class</div>
        </div>
        <div class="bg-white rounded-2xl p-4 border border-slate-200 shadow-sm text-center">
            <div class="text-2xl font-extrabold text-violet-600">{{ $student->section->name ?? '—' }}</div>
            <div class="text-[11px] text-slate-500 font-medium mt-1">Section</div>
        </div>
        <div class="bg-white rounded-2xl p-4 border border-slate-200 shadow-sm text-center">
            <div class="text-2xl font-extrabold text-emerald-600">₹{{ number_format($student->total_fees, 0) }}</div>
            <div class="text-[11px] text-slate-500 font-medium mt-1">Total Fees</div>
        </div>
        <div class="bg-white rounded-2xl p-4 border border-slate-200 shadow-sm text-center">
            <div class="text-2xl font-extrabold {{ $student->rte_status ? 'text-orange-500' : 'text-slate-400' }}">
                {{ $student->rte_status ? 'Yes' : 'No' }}
            </div>
            <div class="text-[11px] text-slate-500 font-medium mt-1">RTE Student</div>
        </div>
    </div>

    <!-- Info Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <!-- Family Information -->
        <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100 flex items-center gap-3">
                <div class="w-8 h-8 rounded-xl bg-emerald-100 flex items-center justify-center">
                    <svg class="w-4 h-4 text-emerald-600 fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                </div>
                <h3 class="text-sm font-extrabold text-slate-800">Family Information</h3>
            </div>
            <div class="p-6 space-y-4">
                <div class="flex justify-between items-center py-2 border-b border-slate-50">
                    <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wide">Father's Name</span>
                    <span class="text-xs font-extrabold text-slate-800">{{ $student->father_name }}</span>
                </div>
                <div class="flex justify-between items-center py-2 border-b border-slate-50">
                    <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wide">Mother's Name</span>
                    <span class="text-xs font-bold text-slate-700">{{ $student->mother_name ?? '—' }}</span>
                </div>
                <div class="flex justify-between items-center py-2 border-b border-slate-50">
                    <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wide">RTE Status</span>
                    @if($student->rte_status)
                        <span class="px-2 py-1 bg-orange-100 text-orange-700 rounded-lg text-[11px] font-extrabold">RTE Student</span>
                    @else
                        <span class="px-2 py-1 bg-slate-100 text-slate-500 rounded-lg text-[11px] font-extrabold">General</span>
                    @endif
                </div>
                <div class="flex justify-between items-center py-2">
                    <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wide">Added By</span>
                    <span class="text-xs font-bold text-slate-700">{{ $student->creator->name ?? 'School Admin' }}</span>
                </div>
            </div>
        </div>

        <!-- Upcoming Test Schedule -->
        <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
            <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-xl bg-violet-100 flex items-center justify-center shadow-sm">
                        <svg class="w-4 h-4 text-violet-600 fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    </div>
                    <h3 class="text-sm font-extrabold text-slate-800">Upcoming Test Schedule</h3>
                </div>
                <span class="px-2.5 py-1 bg-violet-50 text-violet-700 font-bold text-[10px] rounded-lg border border-violet-100">{{ $upcomingExams->count() }} Tests</span>
            </div>
            <div class="p-0 flex-grow relative overflow-y-auto max-h-[300px]">
                @if($upcomingExams->isEmpty())
                    <div class="p-8 text-center h-full flex flex-col items-center justify-center">
                        <div class="w-12 h-12 bg-slate-50 rounded-full flex items-center justify-center mb-3 border border-slate-100 shadow-sm">
                            <svg class="w-5 h-5 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                        </div>
                        <p class="text-slate-500 font-bold text-sm">No upcoming tests scheduled.</p>
                        <p class="text-slate-400 font-medium text-xs mt-1">Check back later for updates.</p>
                    </div>
                @else
                    <ul class="divide-y divide-slate-50">
                        @foreach($upcomingExams as $exam)
                            <li class="p-4 hover:bg-slate-50 transition-colors flex items-center gap-4 group">
                                <div class="w-12 h-12 shrink-0 rounded-2xl bg-slate-100 border border-slate-200 flex flex-col items-center justify-center shadow-sm group-hover:border-violet-300 group-hover:bg-violet-50 transition-all">
                                    <span class="text-[10px] font-extrabold text-slate-400 uppercase leading-none group-hover:text-violet-500">{{ $exam->exam_date->format('M') }}</span>
                                    <span class="text-base font-extrabold text-slate-700 leading-tight group-hover:text-violet-700">{{ $exam->exam_date->format('d') }}</span>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex items-center gap-2 mb-0.5">
                                        <h4 class="text-sm font-extrabold text-slate-800 truncate">{{ $exam->title }}</h4>
                                        @if($exam->exam_date->isToday())
                                            <span class="px-2 py-0.5 bg-red-100 text-red-700 text-[9px] font-bold uppercase rounded-md tracking-widest whitespace-nowrap">Today</span>
                                        @elseif($exam->exam_date->isTomorrow())
                                            <span class="px-2 py-0.5 bg-orange-100 text-orange-700 text-[9px] font-bold uppercase rounded-md tracking-widest whitespace-nowrap">Tomorrow</span>
                                        @endif
                                    </div>
                                    <p class="text-xs font-semibold text-slate-500 truncate flex items-center gap-2">
                                        <span class="inline-block w-1.5 h-1.5 rounded-full bg-violet-400"></span>
                                        {{ $exam->subject }}
                                        <span class="text-slate-300">•</span>
                                        {{ $exam->max_marks }} Marks
                                    </p>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>

    </div>

</div>
@endsection