@extends('guests.layout')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-green-50 to-emerald-100 px-4 py-8">
    <div class="max-w-6xl mx-auto">
        <!-- Header Section -->
        <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 mb-8">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Guest Activities</h1>
                <p class="text-green-600 mt-1">{{ $guest->full_name }} - {{ $guest->email }}</p>
                <div class="flex flex-wrap gap-2 mt-2">
                    @if($guest->is_service_guest)
                    <span class="px-3 py-1 text-xs font-semibold rounded-full bg-orange-100 text-orange-800 border border-orange-200">
                        <i class="fas fa-concierge-bell mr-1"></i>Service Guest
                    </span>
                    @endif
                    @if($guest->is_regular_guest)
                    <span class="px-3 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800 border border-purple-200">
                        <i class="fas fa-star mr-1"></i>Regular Guest
                    </span>
                    @endif
                </div>
            </div>
            <div class="flex flex-wrap gap-2">
                <a href="{{ route('guests.show', $guest) }}" class="bg-green-600 text-white px-5 py-3 rounded-lg hover:bg-green-700 transition-all duration-200 shadow-md hover:shadow-lg flex items-center group">
                    <i class="fas fa-user mr-2 group-hover:scale-110 transition-transform"></i>View Profile
                </a>
                <a href="{{ route('guests.index') }}" class="bg-gray-600 text-white px-5 py-3 rounded-lg hover:bg-gray-700 transition-all duration-200 shadow-md hover:shadow-lg flex items-center group">
                    <i class="fas fa-arrow-left mr-2 group-hover:scale-110 transition-transform"></i>Back to Guests
                </a>
            </div>
        </div>

        <!-- Service History Section -->
        @if(isset($serviceRequests) && $serviceRequests->count() > 0)
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-orange-100 mb-8">
            <div class="bg-gradient-to-r from-orange-500 to-amber-600 px-6 py-4 text-white">
                <h2 class="text-xl font-bold flex items-center justify-between">
                    <span>
                        <i class="fas fa-concierge-bell mr-3"></i>Service History
                        <span class="ml-2 text-sm bg-white bg-opacity-20 px-2 py-1 rounded-full">{{ $serviceRequests->count() }} services</span>
                    </span>
                </h2>
            </div>
            
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-orange-50">
                        <tr>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-orange-800 uppercase tracking-wider">Service</th>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-orange-800 uppercase tracking-wider">Requested</th>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-orange-800 uppercase tracking-wider">Scheduled</th>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-orange-800 uppercase tracking-wider">Status</th>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-orange-800 uppercase tracking-wider">Price</th>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-orange-800 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($serviceRequests as $request)
                        <tr class="hover:bg-orange-50 transition-colors duration-150">
                            <td class="px-6 py-4">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10 bg-orange-100 rounded-lg flex items-center justify-center text-orange-600">
                                        <i class="fas fa-concierge-bell"></i>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">{{ $request->service->name ?? 'Unknown Service' }}</div>
                                        @if($request->customer_notes)
                                        <div class="text-sm text-gray-500">{{ Str::limit($request->customer_notes, 50) }}</div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ $request->created_at->format('M d, Y') }}</div>
                                <div class="text-sm text-gray-500">{{ $request->created_at->format('h:i A') }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ $request->scheduled_at->format('M d, Y') }}</div>
                                <div class="text-sm text-gray-500">{{ $request->scheduled_at->format('h:i A') }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @php
                                    $statusConfig = [
                                        'pending' => ['color' => 'yellow', 'icon' => 'clock'],
                                        'in_progress' => ['color' => 'blue', 'icon' => 'spinner'],
                                        'completed' => ['color' => 'green', 'icon' => 'check-circle'],
                                        'cancelled' => ['color' => 'red', 'icon' => 'times-circle']
                                    ];
                                    $config = $statusConfig[$request->status] ?? ['color' => 'gray', 'icon' => 'circle'];
                                @endphp
                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full 
                                    bg-{{ $config['color'] }}-100 text-{{ $config['color'] }}-800 border border-{{ $config['color'] }}-200">
                                    <i class="fas fa-{{ $config['icon'] }} mr-1"></i>
                                    {{ ucfirst(str_replace('_', ' ', $request->status)) }}
                                </span>
                                @if($request->is_urgent)
                                <span class="ml-1 px-2 py-1 text-xs bg-red-100 text-red-800 rounded-full border border-red-200">
                                    <i class="fas fa-exclamation-circle"></i> Urgent
                                </span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">UGX {{ number_format($request->total_price, 0) }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <a href="{{ route('services.requests.show', $request->id) }}" class="text-blue-600 hover:text-blue-900 mr-3" title="View Details">
                                    <i class="fas fa-eye"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif

        <!-- Activity Log -->
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-green-100">
            <div class="bg-gradient-to-r from-green-500 to-emerald-600 px-6 py-4 text-white">
                <h2 class="text-xl font-bold flex items-center justify-between">
                    <span>
                        <i class="fas fa-history mr-3"></i>Activity Timeline
                        <span class="ml-2 text-sm bg-white bg-opacity-20 px-2 py-1 rounded-full">{{ $activities->total() }} activities</span>
                    </span>
                </h2>
            </div>
            
            <div class="divide-y divide-gray-100">
                @forelse($activities as $activity)
                <div class="px-6 py-5 hover:bg-green-50 transition-colors duration-150">
                    <div class="flex items-start">
                        <!-- Activity Icon -->
                        <div class="flex-shrink-0 mr-4">
                            @switch($activity->activity_type)
                                @case('service_used')
                                @case('service_completed')
                                    <div class="h-12 w-12 rounded-xl bg-orange-100 flex items-center justify-center text-orange-600 border border-orange-200">
                                        <i class="fas fa-concierge-bell text-lg"></i>
                                    </div>
                                    @break
                                @case('check_in')
                                    <div class="h-12 w-12 rounded-xl bg-green-100 flex items-center justify-center text-green-600 border border-green-200">
                                        <i class="fas fa-door-open text-lg"></i>
                                    </div>
                                    @break
                                @case('room_booking')
                                    <div class="h-12 w-12 rounded-xl bg-blue-100 flex items-center justify-center text-blue-600 border border-blue-200">
                                        <i class="fas fa-bed text-lg"></i>
                                    </div>
                                    @break
                                @case('payment')
                                    <div class="h-12 w-12 rounded-xl bg-yellow-100 flex items-center justify-center text-yellow-600 border border-yellow-200">
                                        <i class="fas fa-credit-card text-lg"></i>
                                    </div>
                                    @break
                                @case('blacklisted')
                                    <div class="h-12 w-12 rounded-xl bg-red-100 flex items-center justify-center text-red-600 border border-red-200">
                                        <i class="fas fa-ban text-lg"></i>
                                    </div>
                                    @break
                                @case('profile_created')
                                    <div class="h-12 w-12 rounded-xl bg-purple-100 flex items-center justify-center text-purple-600 border border-purple-200">
                                        <i class="fas fa-user-plus text-lg"></i>
                                    </div>
                                    @break
                                @case('profile_updated')
                                    <div class="h-12 w-12 rounded-xl bg-indigo-100 flex items-center justify-center text-indigo-600 border border-indigo-200">
                                        <i class="fas fa-user-edit text-lg"></i>
                                    </div>
                                    @break
                                @default
                                    <div class="h-12 w-12 rounded-xl bg-gray-100 flex items-center justify-center text-gray-600 border border-gray-200">
                                        <i class="fas fa-history text-lg"></i>
                                    </div>
                            @endswitch
                        </div>
                        
                        <!-- Activity Content -->
                        <div class="flex-1 min-w-0">
                            <div class="flex items-start justify-between">
                                <div>
                                    <h4 class="text-sm font-semibold text-gray-900">
                                        @switch($activity->activity_type)
                                            @case('service_used')
                                                Service Requested
                                                @break
                                            @case('service_completed')
                                                Service Completed
                                                @break
                                            @case('check_in')
                                                Checked In
                                                @break
                                            @case('room_booking')
                                                Room Booked
                                                @break
                                            @case('payment')
                                                Payment Made
                                                @break
                                            @case('profile_created')
                                                Profile Created
                                                @break
                                            @case('profile_updated')
                                                Profile Updated
                                                @break
                                            @case('blacklisted')
                                                Added to Blacklist
                                                @break
                                            @case('blacklist_removed')
                                                Removed from Blacklist
                                                @break
                                            @default
                                                {{ ucfirst(str_replace('_', ' ', $activity->activity_type)) }}
                                        @endswitch
                                    </h4>
                                    <p class="mt-1 text-sm text-gray-600">{{ $activity->description }}</p>
                                    
                                    <!-- Service Details -->
                                    @if(in_array($activity->activity_type, ['service_used', 'service_completed']) && isset($activity->metadata['service_name']))
                                    <div class="mt-3 p-3 bg-orange-50 rounded-lg border border-orange-100">
                                        <div class="flex items-center mb-2">
                                            <i class="fas fa-concierge-bell text-orange-500 mr-2"></i>
                                            <span class="text-sm font-medium text-orange-800">{{ $activity->metadata['service_name'] }}</span>
                                        </div>
                                        <div class="grid grid-cols-2 gap-2 text-xs">
                                            @if(isset($activity->metadata['scheduled_at']))
                                            <div>
                                                <span class="text-orange-600 font-medium">Scheduled:</span>
                                                <span class="text-gray-700 ml-1">{{ \Carbon\Carbon::parse($activity->metadata['scheduled_at'])->format('M d, Y H:i') }}</span>
                                            </div>
                                            @endif
                                            @if(isset($activity->metadata['service_price']))
                                            <div>
                                                <span class="text-orange-600 font-medium">Price:</span>
                                                <span class="text-gray-700 ml-1">UGX {{ number_format($activity->metadata['service_price'], 0) }}</span>
                                            </div>
                                            @endif
                                            @if(isset($activity->metadata['status']))
                                            <div>
                                                <span class="text-orange-600 font-medium">Status:</span>
                                                <span class="ml-1 px-2 py-0.5 inline-flex text-xs leading-4 font-semibold rounded-full 
                                                    @if($activity->metadata['status'] == 'completed') bg-green-100 text-green-800 border border-green-200
                                                    @elseif($activity->metadata['status'] == 'pending') bg-yellow-100 text-yellow-800 border border-yellow-200
                                                    @else bg-blue-100 text-blue-800 border border-blue-200 @endif">
                                                    {{ ucfirst($activity->metadata['status']) }}
                                                </span>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                    @endif
                                    
                                    <!-- Metadata -->
                                    @if($activity->metadata && count($activity->metadata) > 0 && !in_array($activity->activity_type, ['service_used', 'service_completed']))
                                    <div class="mt-2 flex flex-wrap gap-2">
                                        @foreach($activity->metadata as $key => $value)
                                            @if(!in_array($key, ['service_name', 'service_price', 'scheduled_at', 'status']))
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 border border-gray-200">
                                                {{ ucfirst(str_replace('_', ' ', $key)) }}: {{ is_array($value) ? json_encode($value) : $value }}
                                            </span>
                                            @endif
                                        @endforeach
                                    </div>
                                    @endif
                                </div>
                                
                                <!-- Timestamp -->
                                <div class="ml-4 text-right">
                                    <div class="text-sm font-medium text-gray-900">{{ $activity->activity_date->format('M j, Y') }}</div>
                                    <div class="text-sm text-gray-500">{{ $activity->activity_date->format('g:i A') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                <div class="px-6 py-12 text-center">
                    <div class="text-green-400 text-5xl mb-4">
                        <i class="fas fa-history"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">No Activities Found</h3>
                    <p class="text-gray-500 max-w-md mx-auto">This guest doesn't have any recorded activities yet.</p>
                </div>
                @endforelse
            </div>
            
            <!-- Pagination -->
            @if($activities->hasPages())
            <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
                {{ $activities->links() }}
            </div>
            @endif
        </div>
    </div>
</div>
@endsection