@extends('layouts.app')

@section('title', 'Personal Details')

@section('content')
<div class="min-h-screen bg-gray-50 p-6">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-3xl font-bold text-gray-800">Personal Details</h1>
                    <p class="text-gray-600">Welcome, {{ auth()->user()->name }}</p>
                </div>
                <a href="{{ route('applicant.dashboard') }}" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700">
                    Back to Dashboard
                </a>
            </div>
        </div>

        <!-- Personal Details Card -->
        <div class="bg-white rounded-lg shadow-md p-8">
            <h2 class="text-xl font-semibold text-gray-800 mb-6">Personal Information</h2>

            @if(!$personalDetails)
                <div class="bg-amber-50 border border-amber-200 text-amber-700 px-4 py-4 rounded-lg text-sm">
                    You have not completed your personal details yet.
                    <a href="{{ route('applicant.profile.create') }}" class="font-semibold underline hover:text-amber-900 ml-1">
                        Complete registration →
                    </a>
                </div>
            @else
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                    <!-- Full Name -->
                    <div>
                        <p class="text-sm font-medium text-gray-500 mb-1">Full Name</p>
                        <p class="text-gray-800 font-medium">{{ $personalDetails->full_name ?? '—' }}</p>
                    </div>

                    <!-- Date of Birth -->
                    <div>
                        <p class="text-sm font-medium text-gray-500 mb-1">Date of Birth</p>
                        <p class="text-gray-800 font-medium">
                            {{ $personalDetails->date_of_birth ? \Carbon\Carbon::parse($personalDetails->date_of_birth)->format('d-M-Y') : '—' }}
                        </p>
                    </div>

                    <!-- Gender -->
                    <div>
                        <p class="text-sm font-medium text-gray-500 mb-1">Gender</p>
                        <p class="text-gray-800 font-medium">{{ ucfirst($personalDetails->gender ?? '—') }}</p>
                    </div>

                    <!-- Nationality -->
                    <div>
                        <p class="text-sm font-medium text-gray-500 mb-1">Nationality</p>
                        <p class="text-gray-800 font-medium">{{ $personalDetails->nationality ?? '—' }}</p>
                    </div>

                    <!-- Home Island -->
                    @if($personalDetails->home_island)
                        <div>
                            <p class="text-sm font-medium text-gray-500 mb-1">Home Island</p>
                            <p class="text-gray-800 font-medium">{{ $personalDetails->home_island }}</p>
                        </div>
                    @endif

                    <!-- Phone Number -->
                    <div>
                        <p class="text-sm font-medium text-gray-500 mb-1">Phone Number</p>
                        <p class="text-gray-800 font-medium">{{ $personalDetails->phone_number ?? '—' }}</p>
                    </div>

                    <!-- Residential Address -->
                    <div class="md:col-span-2">
                        <p class="text-sm font-medium text-gray-500 mb-1">Residential Address</p>
                        <p class="text-gray-800 font-medium">{{ $personalDetails->residential_address ?? '—' }}</p>
                    </div>

                    <!-- Email -->
                    <div class="md:col-span-2">
                        <p class="text-sm font-medium text-gray-500 mb-1">Email Address</p>
                        <p class="text-gray-800 font-medium">{{ $personalDetails->email ?? auth()->user()->email }}</p>
                    </div>

                </div>
            @endif
        </div>
    </div>
</div>
@endsection