@extends('layouts.app')

@section('title', 'Student Profile')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-extrabold text-secondary">Student Profile</h1>
            <p class="text-gray-500 mt-2">Endpoint: <code class="bg-gray-100 px-2 py-1 rounded text-sm text-primary">GET /api/academy/profile</code></p>
        </div>
        <a href="{{ route('dashboard') }}" class="text-sm font-medium text-gray-500 hover:text-primary">&larr; Back to Dashboard</a>
    </div>

    <x-api-doc-viewer title="Profile Details" :curl="$curl" :raw="$raw">
        @if(isset($data['success']) && $data['success'] && isset($data['data']))
            @php $profile = $data['data']; @endphp
            <div class="flex items-center space-x-6 border border-gray-200 rounded-xl p-6 bg-gray-50">
                <!-- <div class="w-50 h-50 rounded-full border-4 border-white shadow-md bg-primary text-white flex items-center justify-center text-3xl font-bold uppercase shrink-0">
                    {{ substr($profile['name'] ?? 'U', 0, 1) }}
                </div> -->
                <div>
                    <h2 class="text-2xl font-bold text-secondary">{{ $profile['name'] ?? 'N/A' }}</h2>
                    <p class="text-gray-500 font-medium">{{ $profile['email'] ?? 'N/A' }}</p>
                    <div class="mt-4 flex flex-wrap gap-2">
                        <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-semibold">{{ ucfirst($profile['status'] ?? 'Unknown') }}</span>
                        @if(isset($profile['gender']))
                            <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-semibold">{{ $profile['gender'] === 'M' ? 'Male' : 'Female' }}</span>
                        @endif
                    </div>
                </div>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-6">
                <div class="p-4 border border-gray-200 rounded-lg bg-white">
                    <div class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Phone</div>
                    <div class="text-gray-900 mt-1 font-medium">{{ $profile['phone'] ?? 'N/A' }}</div>
                </div>
                <div class="p-4 border border-gray-200 rounded-lg bg-white">
                    <div class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Student ID</div>
                    <div class="text-gray-900 mt-1 font-medium">{{ $profile['student_id'] ?? 'N/A' }}</div>
                </div>
                <div class="p-4 border border-gray-200 rounded-lg bg-white">
                    <div class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Customer ID</div>
                    <div class="text-gray-900 mt-1 font-medium">{{ $profile['customer_id'] ?? 'N/A' }}</div>
                </div>
                <div class="p-4 border border-gray-200 rounded-lg bg-white">
                    <div class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Gender</div>
                    <div class="text-gray-900 mt-1 font-medium">{{ $profile['gender'] === 'M' ? 'Male' : ($profile['gender'] === 'F' ? 'Female' : ($profile['gender'] ?? 'N/A')) }}</div>
                </div>
                <div class="p-4 border border-gray-200 rounded-lg bg-white">
                    <div class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Career Goals</div>
                    <div class="text-gray-900 mt-1 font-medium">{{ $profile['career_goals'] ?? 'N/A' }}</div>
                </div>
                <div class="p-4 border border-gray-200 rounded-lg bg-white">
                    <div class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Registered At</div>
                    <div class="text-gray-900 mt-1 font-medium">{{ isset($profile['registered_at']) ? \Carbon\Carbon::parse($profile['registered_at'])->format('M d, Y H:i') : 'N/A' }}</div>
                </div>
            </div>
        @else
            <div class="p-4 bg-red-50 text-red-600 rounded">Failed to parse valid profile data.</div>
        @endif
    </x-api-doc-viewer>
</div>
@endsection