<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guest Profile</title>
    <!-- Theme and Hotel Settings Styles -->
    
    @hotelSettings
    <!-- Font Awesome and other dependencies (assumed from original layout) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Custom Theme Applier -->
    <script src="{{ asset('js/theme-applier.js') }}"></script>
</head>
<body class="bg-gradient-to-br from-green-50 to-emerald-100 min-h-screen antialiased">

    <div class="min-h-screen 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 Profile</h1>
                    <p class="text-green-600 mt-1">Detailed information about the guest</p>
                </div>
                <div class="flex flex-wrap gap-3">
                    <a href="{{ route('guests.edit', $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-edit mr-2 group-hover:scale-110 transition-transform"></i>Edit
                    </a>
                    @if($guest->is_blacklisted)
                    <form action="{{ route('guests.removeFromBlacklist', $guest) }}" method="POST">
                        @csrf
                        <button type="submit" class="bg-emerald-600 text-white px-5 py-3 rounded-lg hover:bg-emerald-700 transition-all duration-200 shadow-md hover:shadow-lg flex items-center group">
                            <i class="fas fa-check mr-2 group-hover:scale-110 transition-transform"></i>Remove from Blacklist
                        </button>
                    </form>
                    @else
                    <button onclick="openBlacklistModal()" class="bg-red-500 text-white px-5 py-3 rounded-lg hover:bg-red-600 transition-all duration-200 shadow-md hover:shadow-lg flex items-center group">
                        <i class="fas fa-ban mr-2 group-hover:scale-110 transition-transform"></i>Blacklist
                    </button>
                    @endif
                    <a href="{{ route('guests.activities', $guest) }}" class="bg-blue-600 text-white px-5 py-3 rounded-lg hover:bg-blue-700 transition-all duration-200 shadow-md hover:shadow-lg flex items-center group">
                        <i class="fas fa-history mr-2 group-hover:scale-110 transition-transform"></i>View Activities
                    </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 List
                    </a>
                </div>
            </div>

            <!-- Guest Type Badges -->
            <div class="flex flex-wrap gap-3 mb-6">
                @if($guest->is_blacklisted)
                <span class="px-4 py-2 text-sm font-semibold rounded-full bg-red-100 text-red-800 border border-red-200">
                    <i class="fas fa-ban mr-1"></i>Blacklisted
                </span>
                @else
                <span class="px-4 py-2 text-sm font-semibold rounded-full bg-green-100 text-green-800 border border-green-200">
                    <i class="fas fa-check-circle mr-1"></i>Active Guest
                </span>
                @endif
                
                @if($guest->is_regular_guest)
                <span class="px-4 py-2 text-sm 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
                
                @if($guest->is_walkin_guest)
                <span class="px-4 py-2 text-sm font-semibold rounded-full bg-blue-100 text-blue-800 border border-blue-200">
                    <i class="fas fa-walking mr-1"></i>Walk-in Guest
                </span>
                @endif
                
                @if($guest->is_room_guest)
                <span class="px-4 py-2 text-sm font-semibold rounded-full bg-indigo-100 text-indigo-800 border border-indigo-200">
                    <i class="fas fa-bed mr-1"></i>Room Guest
                </span>
                @endif
                
                @if($guest->is_service_guest)
                <span class="px-4 py-2 text-sm 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
                
                <span class="text-green-600 text-sm flex items-center">
                    <i class="fas fa-calendar-alt mr-1"></i>Member since {{ $guest->created_at->format('M Y') }}
                </span>
            </div>

            <!-- Main Card -->
            <div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-green-100 mb-8">
                <!-- Profile Header -->
                <div class="bg-gradient-to-r from-green-500 to-emerald-600 px-6 py-8 text-white">
                    <div class="flex flex-col md:flex-row items-center gap-6">
                        <div class="flex-shrink-0 h-24 w-24 rounded-full bg-white bg-opacity-20 flex items-center justify-center text-white text-3xl font-bold border-4 border-white border-opacity-30">
                            {{ strtoupper(substr($guest->first_name, 0, 1)) }}{{ strtoupper(substr($guest->last_name, 0, 1)) }}
                        </div>
                        <div class="text-center md:text-left">
                            <h2 class="text-3xl font-bold">{{ $guest->full_name }}</h2>
                            <div class="mt-2">
                                <p class="text-green-100 opacity-90">{{ $guest->email }}</p>
                                @if($guest->phone)
                                <p class="text-green-100 opacity-90 mt-1">{{ $guest->phone }}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Guest Details -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
                    <!-- Left Column -->
                    <div class="space-y-6">
                        <div class="bg-green-50 rounded-xl p-5 border border-green-100">
                            <h3 class="text-lg font-semibold text-green-800 mb-4 flex items-center">
                                <i class="fas fa-id-card mr-2"></i>Personal Information
                            </h3>
                            <div class="space-y-4">
                                <div class="flex items-start">
                                    <div class="w-8 text-green-600">
                                        <i class="fas fa-birthday-cake"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-green-700 font-medium">Date of Birth</p>
                                        <p class="text-gray-900">{{ $guest->date_of_birth ? $guest->date_of_birth->format('F d, Y') : 'Not provided' }}</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <div class="w-8 text-green-600">
                                        <i class="fas fa-venus-mars"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-green-700 font-medium">Gender</p>
                                        <p class="text-gray-900">{{ ucfirst($guest->gender) ?? 'Not provided' }}</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <div class="w-8 text-green-600">
                                        <i class="fas fa-flag"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-green-700 font-medium">Nationality</p>
                                        <p class="text-gray-900">{{ $guest->nationality ?? 'Not provided' }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="bg-green-50 rounded-xl p-5 border border-green-100">
                            <h3 class="text-lg font-semibold text-green-800 mb-4 flex items-center">
                                <i class="fas fa-map-marker-alt mr-2"></i>Address Information
                            </h3>
                            <div class="space-y-4">
                                <div class="flex items-start">
                                    <div class="w-8 text-green-600">
                                        <i class="fas fa-home"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-green-700 font-medium">Address</p>
                                        <p class="text-gray-900">{{ $guest->address ?? 'Not provided' }}</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <div class="w-8 text-green-600">
                                        <i class="fas fa-city"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-green-700 font-medium">City & Country</p>
                                        <p class="text-gray-900">{{ $guest->city ?? 'Not provided' }}, {{ $guest->country ?? 'Not provided' }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div class="space-y-6">
                        <div class="bg-green-50 rounded-xl p-5 border border-green-100">
                            <h3 class="text-lg font-semibold text-green-800 mb-4 flex items-center">
                                <i class="fas fa-passport mr-2"></i>Identification
                            </h3>
                            <div class="space-y-4">
                                <div class="flex items-start">
                                    <div class="w-8 text-green-600">
                                        <i class="fas fa-id-card"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-green-700 font-medium">ID Type & Number</p>
                                        <p class="text-gray-900">
                                            {{ ucfirst(str_replace('_', ' ', $guest->id_type)) ?? 'Not provided' }} 
                                            @if($guest->id_number) - {{ $guest->id_number }} @endif
                                        </p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <div class="w-8 text-green-600">
                                        <i class="fas fa-star"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-green-700 font-medium">Loyalty Points</p>
                                        <p class="text-gray-900">{{ $guest->loyalty_points ?? 0 }} points</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="bg-green-50 rounded-xl p-5 border border-green-100">
                            <h3 class="text-lg font-semibold text-green-800 mb-4 flex items-center">
                                <i class="fas fa-concierge-bell mr-2"></i>Service Statistics
                            </h3>
                            <div class="grid grid-cols-2 gap-4">
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-green-700">{{ $totalServicesUsed ?? 0 }}</div>
                                    <div class="text-sm text-green-600">Total Services</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-green-700">UGX {{ number_format($totalServiceSpent ?? 0, 0) }}</div>
                                    <div class="text-sm text-green-600">Total Spent</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-green-700">{{ $completedServices ?? 0 }}</div>
                                    <div class="text-sm text-green-600">Completed</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-green-700">{{ $guest->is_service_guest ? 'Yes' : 'No' }}</div>
                                    <div class="text-sm text-green-600">Service Guest</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Special Requests -->
                @if($guest->special_requests)
                <div class="mx-6 mb-6 bg-amber-50 rounded-xl p-5 border border-amber-200">
                    <h3 class="text-lg font-semibold text-amber-800 mb-3 flex items-center">
                        <i class="fas fa-star mr-2"></i>Special Requests
                    </h3>
                    <p class="text-amber-900">{{ $guest->special_requests }}</p>
                </div>
                @endif

                <!-- Blacklist Reason -->
                @if($guest->is_blacklisted)
                <div class="mx-6 mb-6 bg-red-50 rounded-xl p-5 border border-red-200">
                    <h3 class="text-lg font-semibold text-red-800 mb-3 flex items-center">
                        <i class="fas fa-exclamation-triangle mr-2"></i>Blacklist Reason
                    </h3>
                    <p class="text-red-900">{{ $guest->blacklist_reason }}</p>
                </div>
                @endif
            </div>

            <!-- Service History -->
            @if($serviceRequests->count() > 0)
            <div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-green-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">
                        <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>
                    </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">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->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">
                                        <i class="fas fa-eye"></i> View
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @endif

            <!-- Reservation History -->
            <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">
                        <i class="fas fa-history mr-3"></i>Reservation History
                        <span class="ml-2 text-sm bg-white bg-opacity-20 px-2 py-1 rounded-full">{{ $reservations->count() }} reservations</span>
                    </h2>
                </div>
                
                @if($reservations->count() > 0)
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-green-50">
                            <tr>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-green-800 uppercase tracking-wider">Reservation ID</th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-green-800 uppercase tracking-wider">Room</th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-green-800 uppercase tracking-wider">Check-in</th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-green-800 uppercase tracking-wider">Check-out</th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-green-800 uppercase tracking-wider">Status</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach($reservations as $reservation)
                            <tr class="hover:bg-green-50 transition-colors duration-150">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-sm font-medium text-gray-900">#{{ $reservation->id }}</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <i class="fas fa-door-open text-green-500 mr-2"></i>
                                        <span class="text-sm text-gray-900">{{ $reservation->room->room_number }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    {{ $reservation->check_in->format('M d, Y') }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    {{ $reservation->check_out->format('M d, Y') }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    @php
                                        $statusConfig = [
                                            'confirmed' => ['color' => 'green', 'icon' => 'check-circle'],
                                            'checked_in' => ['color' => 'blue', 'icon' => 'sign-in-alt'],
                                            'checked_out' => ['color' => 'gray', 'icon' => 'sign-out-alt'],
                                            'cancelled' => ['color' => 'red', 'icon' => 'times-circle']
                                        ];
                                        $config = $statusConfig[$reservation->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('_', ' ', $reservation->status)) }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="text-center py-12">
                    <div class="text-green-400 text-5xl mb-4">
                        <i class="fas fa-bed"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">No Reservations Yet</h3>
                    <p class="text-gray-500 max-w-md mx-auto">This guest hasn't made any reservations with us yet.</p>
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Blacklist Modal -->
    <div id="blacklistModal" class="fixed inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full hidden z-50 transition-opacity duration-300">
        <div class="relative top-10 mx-auto p-5 w-full max-w-md">
            <div class="bg-white rounded-2xl shadow-2xl overflow-hidden border border-red-200 transform transition-transform duration-300 scale-95">
                <div class="bg-red-500 px-6 py-4 text-white">
                    <h3 class="text-xl font-bold flex items-center">
                        <i class="fas fa-exclamation-triangle mr-3"></i>Blacklist Guest
                    </h3>
                </div>
                <form action="{{ route('guests.blacklist', $guest) }}" method="POST" class="p-6">
                    @csrf
                    <div class="mb-6">
                        <label for="blacklist_reason" class="block text-sm font-medium text-gray-700 mb-3">Please provide the reason for blacklisting:</label>
                        <textarea name="blacklist_reason" id="blacklist_reason" rows="4" required 
                            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-200 resize-none"
                            placeholder="Enter the reason for blacklisting this guest..."></textarea>
                    </div>
                    <div class="flex justify-end space-x-3">
                        <button type="button" onclick="closeBlacklistModal()" class="px-5 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all duration-200 font-medium">
                            Cancel
                        </button>
                        <button type="submit" class="px-5 py-2.5 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-all duration-200 font-medium shadow-md">
                            Confirm Blacklist
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function openBlacklistModal() {
            const modal = document.getElementById('blacklistModal');
            modal.classList.remove('hidden');
            setTimeout(() => {
                modal.querySelector('.transform').classList.remove('scale-95');
                modal.querySelector('.transform').classList.add('scale-100');
            }, 10);
        }
        
        function closeBlacklistModal() {
            const modal = document.getElementById('blacklistModal');
            modal.querySelector('.transform').classList.remove('scale-100');
            modal.querySelector('.transform').classList.add('scale-95');
            setTimeout(() => {
                modal.classList.add('hidden');
            }, 200);
        }

        // Close modal when clicking outside
        document.getElementById('blacklistModal').addEventListener('click', function(e) {
            if (e.target.id === 'blacklistModal') {
                closeBlacklistModal();
            }
        });
    </script>
    
<script src="{{ asset('js/theme-applier.js') }}"></script>
</body>
</html>
