@extends('layouts.app')

@section('content')
    <div class="max-w-4xl mx-auto mt-10 p-8 bg-white shadow-lg rounded-xl border border-gray-200">

        <div class="flex justify-between items-start">
            <h2 class="text-3xl font-bold text-gray-800 mb-6">
                Your Personal Information Records
            </h2>
            <a href="{{ route('dashboard') }}"
                class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg border">←
                Go Back
            </a>
        </div>

        <!-- Success Message -->
        @if (session('success') || session('error'))
            <div
                class=" {{ session('error') ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800' }}  p-3 rounded mb-6 text-center font-medium relative mt-2">
                {{ session('success') ?? session('error') }}
                <span onclick="this.parentElement.remove()" class="absolute right-3 top-2 cursor-pointer font-bold">
                    ✕
                </span>
            </div>
        @endif


        @if ($personalInfos->count() > 0)
            <div class="space-y-5">
                @foreach ($personalInfos as $info)
                    <div class="p-5 border border-gray-300 rounded-lg shadow-sm bg-gray-50">
                        <h3 class="text-xl font-semibold text-gray-800">{{ $info->full_name }}</h3>
                        <p class="text-gray-700"><strong>Email:</strong> {{ $info->email }}</p>
                        <p class="text-gray-700"><strong>Phone:</strong> {{ $info->phone }}</p>
                        <p class="text-gray-700"><strong>DOB:</strong> {{ $info->dob }}</p>
                        <p class="text-gray-700"><strong>Profession:</strong> {{ $info->profession }}</p>
                        <p class="text-gray-700"><strong>Address:</strong> {{ $info->address }}</p>
                        <p class="text-gray-700"><strong>Bio:</strong> {{ $info->bio }}</p>

                        @if ($info->profile_photo)
                            <img src="{{ asset('storage/' . $info->profile_photo) }}"
                                class="w-32 h-32 rounded-full mt-3 border shadow">
                        @endif
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-gray-600 text-center text-lg">No personal information saved yet.</p>
        @endif

        <div class="mt-8 text-center">
            <a href="{{ route('personal-info.create') }}"
                class="bg-blue-600 text-white px-5 py-2 rounded-lg hover:bg-blue-700 transition">
                Edit Personal Info
            </a>
        </div>

    </div>
@endsection