@extends('layouts.admin')

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

@section('content')
<div class="space-y-6 max-w-5xl mx-auto">
    <div class="flex items-center gap-4">
        <a href="{{ route('admin.users') }}" class="w-10 h-10 rounded-full bg-white shadow-sm border border-gray-100 flex items-center justify-center text-gray-500 hover:text-[#0c2340] hover:bg-gray-50 transition-colors">
            <i data-feather="arrow-left" class="w-5 h-5"></i>
        </a>
        <h2 class="font-serif text-2xl text-[#0c2340]">User Profile</h2>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Profile Sidebar -->
        <div class="lg:col-span-1 space-y-6">
            <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-8 text-center">
                <div class="w-24 h-24 rounded-full bg-[#0c2340] text-white flex items-center justify-center font-serif text-4xl mx-auto mb-4 border-4 border-white shadow-lg">
                    {{ substr($user->name, 0, 1) }}
                </div>
                <h3 class="font-bold text-xl text-[#0c2340] mb-1">{{ $user->name }}</h3>
                <p class="text-sm text-gray-500 mb-4">{{ $user->email }}</p>
                
                @if($user->hasRole('admin'))
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-[#c9a84c] text-[#0c2340]">Administrator</span>
                @else
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-800">Customer</span>
                @endif
                
                <div class="mt-6 pt-6 border-t border-gray-100 text-left space-y-4">
                    <div>
                        <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Phone</p>
                        <p class="font-medium text-[#0c2340]">{{ $user->phone ?? 'Not provided' }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Address</p>
                        <p class="font-medium text-[#0c2340]">{{ $user->address ?? 'Not provided' }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Joined Date</p>
                        <p class="font-medium text-[#0c2340]">{{ $user->created_at->format('F d, Y') }}</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-6 flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl bg-[#0c2340]/5 text-[#0c2340] flex items-center justify-center shrink-0">
                    <i data-feather="briefcase" class="w-6 h-6"></i>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-500">Total Bookings</p>
                    <h4 class="font-bold text-xl text-[#0c2340]">{{ $user->bookings->count() }}</h4>
                </div>
            </div>
        </div>

        <!-- Bookings History -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden flex flex-col h-full">
                <div class="px-8 py-6 border-b border-gray-100 bg-gray-50/50">
                    <h3 class="font-serif text-xl text-[#0c2340] font-semibold">Booking History</h3>
                </div>
                <div class="p-8 flex-1">
                    @if($user->bookings->count() > 0)
                        <div class="space-y-6">
                            @foreach($user->bookings as $booking)
                                <div class="flex items-center gap-6 p-4 rounded-2xl border border-gray-100 hover:shadow-md transition-shadow">
                                    <div class="w-16 h-16 rounded-xl bg-gray-100 overflow-hidden shrink-0">
                                        @if($booking->package->main_image)
                                            <img src="{{ asset('storage/' . $booking->package->main_image) }}" alt="{{ $booking->package->title }}" class="w-full h-full object-cover">
                                        @else
                                            <div class="w-full h-full flex items-center justify-center text-gray-400">
                                                <i data-feather="image" class="w-6 h-6"></i>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <div class="flex items-start justify-between gap-4">
                                            <div>
                                                <h4 class="font-bold text-[#0c2340] truncate">{{ $booking->package->title }}</h4>
                                                <p class="text-xs text-gray-500 mt-1">Ref: <span class="font-mono">{{ $booking->booking_reference }}</span> &bull; {{ $booking->total_people }} Pax</p>
                                            </div>
                                            <div class="text-right shrink-0">
                                                <p class="font-bold text-[#0c2340]">{{ $booking->formatted_total_amount }}</p>
                                                @php
                                                    $statusClasses = [
                                                        'pending' => 'text-yellow-600',
                                                        'confirmed' => 'text-green-600',
                                                        'cancelled' => 'text-red-600',
                                                    ];
                                                    $class = $statusClasses[$booking->status] ?? 'text-gray-500';
                                                @endphp
                                                <p class="text-xs font-semibold mt-1 {{ $class }}">{{ ucfirst($booking->status) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="shrink-0 pl-4 border-l border-gray-100">
                                        <a href="{{ route('admin.bookings.detail', $booking->booking_reference) }}" class="p-2 text-gray-400 hover:text-[#c9a84c] rounded-lg hover:bg-yellow-50 transition-colors block" title="View Booking">
                                            <i data-feather="chevron-right" class="w-5 h-5"></i>
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-12 text-gray-500 h-full flex flex-col items-center justify-center">
                            <i data-feather="inbox" class="w-12 h-12 text-gray-300 mb-4"></i>
                            <p>This user hasn't made any bookings yet.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection