@extends('layouts.user.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-3xl mx-auto">
        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
            <div class="bg-[#8B0000] px-6 py-4">
                <h1 class="text-2xl font-bold text-white">Profil Saya</h1>
            </div>

            @if(session('success'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4 mx-6 mt-4" role="alert">
                    <span class="block sm:inline">{{ session('success') }}</span>
                </div>
            @endif

            <div class="p-6">
                <div class="flex items-center space-x-6 mb-6">
                    <div class="shrink-0">
                        @if($user->profile_picture)
                            <img class="h-32 w-32 object-cover rounded-full" src="{{ Storage::url($user->profile_picture) }}" alt="{{ $user->name }}">
                        @else
                            <div class="h-32 w-32 rounded-full bg-gray-200 flex items-center justify-center">
                                <i class="fas fa-user text-4xl text-gray-400"></i>
                            </div>
                        @endif
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-gray-800">{{ $user->name }}</h2>
                        <p class="text-gray-600">{{ $user->email }}</p>
                        <a href="{{ route('profile.edit') }}" class="mt-4 inline-flex items-center px-4 py-2 bg-[#8B0000] text-white rounded-md hover:bg-[#660000] transition">
                            <i class="fas fa-edit mr-2"></i> Edit Profil
                        </a>
                    </div>
                </div>

                <div class="border-t pt-6">
                    <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Nomor Telepon</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ $user->phone ?? 'Belum diisi' }}</dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500">Alamat</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ $user->address ?? 'Belum diisi' }}</dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500">Tanggal Lahir</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                {{ $user->birth_date ? $user->birth_date->format('d F Y') : 'Belum diisi' }}
                            </dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500">Jenis Kelamin</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                @if($user->gender == 'male')
                                    Laki-laki
                                @elseif($user->gender == 'female')
                                    Perempuan
                                @else
                                    Belum diisi
                                @endif
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection