<div class="h-full flex flex-col bg-white rounded-lg shadow-sm border border-gray-200"
     x-data="{
         showEmojiPicker: false,
         emojiTab: 'emojis',
         emojis: ['😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '😉', '😊', '😇', '🥰', '😍', '🤩', '😘', '😗', '😚', '😙', '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔', '🤐', '🤨', '😐', '😑', '😶', '😏', '😒', '🙄', '😬', '🤥', '😌', '😔', '😪', '🤤', '😴', '👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙', '👈', '👉', '👆', '👇', '☝️', '✋', '🤚', '🖐️', '🖖', '👋', '🤝', '💪', '🙏', '✍️', '💅', '🤳', '💃', '🕺', '👯', '🎉', '🎊', '🎈', '🎁', '🏆', '🥇', '🥈', '🥉', '⭐', '🌟', '💫', '✨', '🔥', '💯', '✅', '❌', '❗', '❓', '💯'],
         partyParrots: [
             {name: 'Party Parrot', file: 'parrot'},
             {name: 'Party Parrot HD', file: 'partyparrot'},
             {name: 'Fast Parrot', file: 'fastparrot'},
             {name: '60fps Parrot', file: '60fpsparrot'},
             {name: 'Ultra Fast Parrot', file: 'ultrafastparrot'},
             {name: 'Slow Parrot', file: 'slowparrot'},
             {name: 'Conga Parrot', file: 'congaparrot'},
             {name: 'Reverse Conga Parrot', file: 'reversecongaparrot'},
             {name: 'Shuffle Parrot', file: 'shuffleparrot'},
             {name: 'Middle Parrot', file: 'middleparrot'},
             {name: 'Reverse Parrot', file: 'reverseparrot'},
             {name: 'Disco Parrot', file: 'discoparrot'},
             {name: 'Moonwalking Parrot', file: 'moonwalkingparrot'},
             {name: 'Deal With It Parrot', file: 'dealwithitparrot'},
             {name: 'Sad Parrot', file: 'sadparrot'},
             {name: 'Angry Parrot', file: 'angryparrot'},
             {name: 'Bored Parrot', file: 'boredparrot'},
             {name: 'Confused Parrot', file: 'confusedparrot'},
             {name: 'Sleeping Parrot', file: 'sleepingparrot'},
             {name: 'Aussie Parrot', file: 'aussieparrot'},
             {name: 'Aussie Conga', file: 'aussiecongaparrot'},
             {name: 'Coffee Parrot', file: 'coffeeparrot'},
             {name: 'Beer Parrot', file: 'beerparrot'},
             {name: 'Laptop Parrot', file: 'laptop_parrot'},
             {name: 'Headbanging Parrot', file: 'headbangingparrot'},
             {name: 'Thumbs Up Parrot', file: 'thumbsupparrot'},
             {name: 'Hypno Parrot', file: 'hypnoparrot'},
             {name: 'Hypno Parrot Dark', file: 'hypnoparrotdark'},
             {name: 'Science Parrot', file: 'scienceparrot'},
             {name: 'Christmas Parrot', file: 'christmasparrot'},
             {name: 'Gentleman Parrot', file: 'gentlemanparrot'},
         ],
         insertEmoji(emoji) {
             const input = this.$refs.messageInput;
             input.focus();
             document.execCommand('insertText', false, emoji);
             this.$wire.set('newMessage', input.innerHTML);
             this.showEmojiPicker = false;
         },
         insertParrot(parrot) {
             const input = this.$refs.messageInput;
             input.focus();
             const img = document.createElement('img');
             img.src = '/images/parrots/' + parrot.file + '.gif';
             img.alt = parrot.name;
             img.className = 'inline-block h-6 align-middle';
             const selection = window.getSelection();
             if (selection.rangeCount > 0) {
                 const range = selection.getRangeAt(0);
                 range.deleteContents();
                 range.insertNode(img);
                 range.setStartAfter(img);
                 range.setEndAfter(img);
                 selection.removeAllRanges();
                 selection.addRange(range);
             } else {
                 input.appendChild(img);
             }
             this.$wire.set('newMessage', input.innerHTML);
             this.showEmojiPicker = false;
         },
         syncMessage() {
             this.$wire.set('newMessage', this.$refs.messageInput.innerHTML);
         },
         handleKeydown(event) {
             if (event.key === 'Enter' && !event.shiftKey) {
                 event.preventDefault();
                 this.submitMessage();
             }
         },
         submitMessage() {
             this.$wire.sendMessage();
             this.$refs.messageInput.innerHTML = '';
         }
     }"
     @scroll-to-bottom.window="setTimeout(() => {
         const messagesContainer = $refs.messagesContainer;
         if (messagesContainer) messagesContainer.scrollTop = messagesContainer.scrollHeight;
     }, 100)"
     wire:poll.5s>

    <div class="flex h-[calc(100vh-12rem)]">
        <!-- Chat Rooms Sidebar -->
        <div class="w-64 border-r border-gray-200 flex flex-col bg-gray-50">
            <!-- Sidebar Header -->
            <div class="p-4 border-b border-gray-200 bg-white">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="font-semibold text-gray-900">Chat Rooms</h3>
                    <button wire:click="openRoomModal"
                            class="p-1 rounded-full hover:bg-gray-100 transition-colors"
                            title="Add new room">
                        <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                        </svg>
                    </button>
                </div>
                <p class="text-xs text-gray-500">{{ $project->name }}</p>
            </div>

            <!-- Rooms List -->
            <div class="flex-1 overflow-y-auto">
                @forelse($rooms as $room)
                    <div class="px-2 py-1">
                        <button wire:click="selectRoom({{ $room->id }})"
                                class="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors {{ $selectedRoomId === $room->id ? 'bg-green-100 text-green-900' : 'hover:bg-gray-100 text-gray-700' }}">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
                                </svg>
                                <div class="flex-1 min-w-0">
                                    <div class="font-medium text-sm truncate">{{ $room->name }}</div>
                                    @if($room->description)
                                        <div class="text-xs text-gray-500 truncate">{{ $room->description }}</div>
                                    @endif
                                </div>
                                @if($room->is_default)
                                    <span class="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded">Default</span>
                                @endif
                            </button>
                    </div>
                @empty
                    <div class="p-4 text-center text-gray-500 text-sm">
                        No chat rooms yet
                    </div>
                @endforelse
            </div>

            <!-- Participants Count -->
            @if($selectedRoom)
                <div class="p-3 border-t border-gray-200 bg-white">
                    <div class="flex items-center gap-2 text-sm text-gray-600">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
                        </svg>
                        <span>{{ $selectedRoom->users->count() }} participant{{ $selectedRoom->users->count() !== 1 ? 's' : '' }}</span>
                    </div>
                </div>
            @endif
        </div>

        <!-- Chat Area -->
        <div class="flex-1 flex flex-col">
            @if($selectedRoom)
                <!-- Chat Header -->
                <div class="px-6 py-4 border-b border-gray-200 bg-white">
                    <div class="flex items-start justify-between">
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">{{ $selectedRoom->name }}</h2>
                            @if($selectedRoom->description)
                                <p class="text-sm text-gray-600">{{ $selectedRoom->description }}</p>
                            @endif
                        </div>
                        <!-- Manage People Button -->
                        <button wire:click="openManagePeopleModal({{ $selectedRoom->id }})"
                                class="p-2 rounded-lg hover:bg-gray-100 transition-colors"
                                title="Manage participants">
                            <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
                            </svg>
                        </button>
                    </div>
                </div>

                <!-- Messages Area -->
                <div class="flex-1 overflow-y-auto p-6 space-y-4 bg-gray-50"
                     x-ref="messagesContainer"
                     x-init="setTimeout(() => $el.scrollTop = $el.scrollHeight, 100)">
                    @forelse($messages as $message)
                        @php
                            $nameParts = explode(' ', $message->user->name);
                            $initials = count($nameParts) >= 2
                                ? strtoupper(substr($nameParts[0], 0, 1) . substr($nameParts[1], 0, 1))
                                : strtoupper(substr($message->user->name, 0, 2));
                            $isEmployee = \App\Models\Employees::where('user_id', $message->user->id)->exists();
                        @endphp

                        @if($message->user_id === auth()->id())
                            {{-- Current user's message (right-aligned) --}}
                            <div class="flex justify-end mb-4">
                                <div class="flex gap-3 max-w-2xl">
                                    <!-- Message Content -->
                                    <div class="text-right">
                                        <div class="flex items-center gap-2 mb-2 justify-end">
                                            <span class="text-xs text-gray-500">{{ $message->created_at->format('g:i A') }}</span>
                                            <span class="font-medium text-sm text-gray-900">You</span>
                                        </div>

                                        <div class="bg-gray-800 text-white rounded-lg px-4 py-3 shadow-sm">
                                            @if($message->message)
                                                <p class="text-sm whitespace-pre-wrap break-words text-left">{!! $message->message_with_links !!}</p>
                                            @endif

                                            @if($message->hasFile())
                                                <div class="mt-2 pt-2 {{ $message->message ? 'border-t border-gray-600' : '' }}">
                                                    @if($message->isImage())
                                                        <a href="{{ Storage::url($message->file_path) }}"
                                                           target="_blank"
                                                           class="block">
                                                            <img src="{{ Storage::url($message->file_path) }}"
                                                                 alt="{{ $message->file_name }}"
                                                                 class="max-w-sm rounded-lg">
                                                        </a>
                                                    @else
                                                        <a href="{{ Storage::url($message->file_path) }}"
                                                           target="_blank"
                                                           download="{{ $message->file_name }}"
                                                           class="flex items-center gap-2 text-gray-300 hover:text-white">
                                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                                            </svg>
                                                            <span class="text-sm underline">{{ $message->file_name }}</span>
                                                        </a>
                                                    @endif
                                                </div>
                                            @endif

                                            {{-- Link Previews --}}
                                            @if($message->linkPreviews->count() > 0)
                                                @foreach($message->linkPreviews as $preview)
                                                    <x-link-preview :preview="$preview" :dark="true" />
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @else
                            {{-- Other users' messages (left-aligned) --}}
                            <div class="flex justify-start mb-4">
                                <div class="flex gap-3 max-w-2xl">
                                    <!-- Avatar with Initials -->
                                    <div class="flex-shrink-0">
                                        @if($message->user->avatar)
                                            <img src="{{ Storage::url($message->user->avatar) }}"
                                                 alt="{{ $message->user->name }}"
                                                 class="w-10 h-10 rounded-full object-cover">
                                        @else
                                            <div class="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-medium {{ $isEmployee ? 'bg-gradient-to-r from-[#39b44a] to-[#2ba8e0]' : 'bg-gradient-to-r from-[#39b44a] to-[#075054]' }}">
                                                {{ $initials }}
                                            </div>
                                        @endif
                                    </div>

                                    <!-- Message Content -->
                                    <div>
                                        <div class="flex items-center gap-2 mb-2">
                                            <span class="font-medium text-sm text-gray-900">{{ $message->user->name }}</span>
                                            <span class="text-xs text-gray-500">{{ $message->created_at->format('g:i A') }}</span>
                                        </div>

                                        <div class="text-gray-900">
                                            @if($message->message)
                                                <p class="text-sm whitespace-pre-wrap break-words">{!! $message->message_with_links !!}</p>
                                            @endif

                                            @if($message->hasFile())
                                                <div class="mt-2 {{ $message->message ? 'pt-2' : '' }}">
                                                    @if($message->isImage())
                                                        <a href="{{ Storage::url($message->file_path) }}"
                                                           target="_blank"
                                                           class="block">
                                                            <img src="{{ Storage::url($message->file_path) }}"
                                                                 alt="{{ $message->file_name }}"
                                                                 class="max-w-sm rounded-lg border border-gray-200">
                                                        </a>
                                                    @else
                                                        <a href="{{ Storage::url($message->file_path) }}"
                                                           target="_blank"
                                                           download="{{ $message->file_name }}"
                                                           class="inline-flex items-center gap-2 px-3 py-2 bg-gray-100 rounded-lg text-gray-700 hover:bg-gray-200 transition-colors">
                                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
                                                            </svg>
                                                            <span class="text-sm">{{ $message->file_name }}</span>
                                                        </a>
                                                    @endif
                                                </div>
                                            @endif

                                            {{-- Link Previews --}}
                                            @if($message->linkPreviews->count() > 0)
                                                @foreach($message->linkPreviews as $preview)
                                                    <x-link-preview :preview="$preview" :dark="false" />
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @empty
                        <div class="flex items-center justify-center h-full">
                            <div class="text-center text-gray-500">
                                <svg class="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                                </svg>
                                <p class="text-sm">No messages yet. Start the conversation!</p>
                            </div>
                        </div>
                    @endforelse
                </div>

                <!-- Message Input -->
                <div class="p-4 border-t border-gray-200 bg-white">
                    <form @submit.prevent="submitMessage()" class="space-y-3">
                        <!-- Attachments Preview -->
                        @if(count($attachments) > 0)
                            <div class="flex flex-wrap gap-2 p-2 bg-gray-50 rounded-lg border border-gray-200">
                                @foreach($attachments as $index => $att)
                                    <div class="flex items-center gap-2 bg-white px-3 py-1.5 rounded-md border border-gray-200">
                                        <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
                                        </svg>
                                        <span class="text-sm text-gray-700 max-w-[150px] truncate">{{ $att->getClientOriginalName() }}</span>
                                        <button type="button"
                                                wire:click="removeAttachment({{ $index }})"
                                                class="p-0.5 rounded hover:bg-gray-200 transition-colors">
                                            <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                            </svg>
                                        </button>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        <!-- Input Row -->
                        <div class="flex items-end gap-2">
                            <!-- Emoji Picker Button -->
                            <div class="relative">
                                <button type="button"
                                        @click="showEmojiPicker = !showEmojiPicker"
                                        class="p-2 rounded-lg hover:bg-gray-100 transition-colors"
                                        title="Add emoji">
                                    <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                </button>

                                <!-- Emoji Picker Dropdown -->
                                <div x-show="showEmojiPicker"
                                     @click.outside="showEmojiPicker = false"
                                     x-transition
                                     wire:ignore
                                     class="absolute bottom-full left-0 mb-2 w-80 bg-white rounded-lg shadow-xl border border-gray-200 z-10">
                                    <!-- Tabs -->
                                    <div class="flex border-b border-gray-200">
                                        <button type="button"
                                                @click="emojiTab = 'emojis'"
                                                :class="emojiTab === 'emojis' ? 'border-b-2 border-green-500 text-green-600' : 'text-gray-500 hover:text-gray-700'"
                                                class="flex-1 px-3 py-2 text-sm font-medium transition-colors">
                                            Emojis
                                        </button>
                                        <button type="button"
                                                @click="emojiTab = 'parrots'"
                                                :class="emojiTab === 'parrots' ? 'border-b-2 border-green-500 text-green-600' : 'text-gray-500 hover:text-gray-700'"
                                                class="flex-1 px-3 py-2 text-sm font-medium transition-colors flex items-center justify-center gap-1">
                                            <img src="/images/parrots/parrot.gif" class="h-4 w-4" alt="">
                                            Parrots
                                        </button>
                                    </div>
                                    <!-- Emojis Grid -->
                                    <div x-show="emojiTab === 'emojis'" class="p-3">
                                        <div class="grid grid-cols-10 gap-1 max-h-48 overflow-y-auto">
                                            <template x-for="(emoji, index) in emojis" :key="index">
                                                <button type="button"
                                                        @click="insertEmoji(emoji)"
                                                        class="text-xl hover:bg-gray-100 rounded p-1 transition-colors"
                                                        x-text="emoji"></button>
                                            </template>
                                        </div>
                                    </div>
                                    <!-- Party Parrots Grid -->
                                    <div x-show="emojiTab === 'parrots'" class="p-3">
                                        <div class="grid grid-cols-5 gap-2 max-h-48 overflow-y-auto">
                                            <template x-for="(parrot, index) in partyParrots" :key="index">
                                                <button type="button"
                                                        @click="insertParrot(parrot)"
                                                        :title="parrot.name"
                                                        class="hover:bg-gray-100 rounded p-1.5 transition-colors flex items-center justify-center">
                                                    <img :src="'/images/parrots/' + parrot.file + '.gif'"
                                                         :alt="parrot.name"
                                                         class="h-8 w-8 object-contain">
                                                </button>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- File Upload Button -->
                            <label class="p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
                                   title="Attach files">
                                <input type="file"
                                       wire:model="attachments"
                                       class="hidden"
                                       multiple
                                       accept="image/*,.pdf,.doc,.docx,.txt">
                                <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
                                </svg>
                            </label>

                            <!-- Message Input -->
                            <div wire:ignore
                                 x-ref="messageInput"
                                 contenteditable="true"
                                 @input="syncMessage()"
                                 @keydown="handleKeydown($event)"
                                 class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent min-h-[38px] max-h-[120px] overflow-y-auto"
                                 style="word-break: break-word;"
                                 data-placeholder="Type a message..."></div>

                            <!-- Send Button -->
                            <button type="submit"
                                    class="p-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                    :disabled="!$wire.newMessage && (!$wire.attachments || $wire.attachments.length === 0)">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                                </svg>
                            </button>
                        </div>

                        @error('newMessage')
                            <p class="text-sm text-red-600">{{ $message }}</p>
                        @enderror
                        @error('attachments.*')
                            <p class="text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </form>
                </div>
            @else
                <div class="flex-1 flex items-center justify-center bg-gray-50">
                    <div class="text-center text-gray-500">
                        <svg class="w-20 h-20 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                        </svg>
                        <p>Select a chat room to start messaging</p>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <!-- Add Room Modal -->
    @if($showRoomModal)
        <div class="fixed inset-0 z-50 overflow-y-auto">
            <div class="fixed inset-0 bg-black/50 transition-opacity" @click="$wire.closeRoomModal()"></div>

            <div class="flex min-h-screen items-center justify-center p-4">
                <div class="relative bg-white rounded-lg shadow-xl max-w-md w-full mx-auto" @click.stop>
                    <!-- Modal Header -->
                    <div class="flex items-center justify-between p-6 border-b border-gray-200">
                        <h3 class="text-xl font-semibold text-gray-900">Add Chat Room</h3>
                        <button wire:click="closeRoomModal"
                                class="p-1 rounded-full hover:bg-gray-100 transition-colors">
                            <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>

                    <!-- Modal Body -->
                    <form wire:submit.prevent="createRoom">
                        <div class="p-6 space-y-4">
                            <div>
                                <label for="roomName" class="block text-sm font-medium text-gray-700 mb-1">
                                    Room Name <span class="text-red-500">*</span>
                                </label>
                                <input type="text"
                                       id="roomName"
                                       wire:model="roomName"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
                                       placeholder="e.g., Graphic Design">
                                @error('roomName')
                                    <span class="text-sm text-red-600 mt-1">{{ $message }}</span>
                                @enderror
                            </div>

                            <div>
                                <label for="roomDescription" class="block text-sm font-medium text-gray-700 mb-1">
                                    Description
                                </label>
                                <textarea id="roomDescription"
                                          wire:model="roomDescription"
                                          rows="3"
                                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
                                          placeholder="Optional description for this chat room"></textarea>
                                @error('roomDescription')
                                    <span class="text-sm text-red-600 mt-1">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <!-- Modal Footer -->
                        <div class="flex items-center justify-end gap-3 p-6 border-t border-gray-200 bg-gray-50">
                            <button type="button"
                                    wire:click="closeRoomModal"
                                    class="px-4 py-2 bg-white border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                                Cancel
                            </button>
                            <button type="submit"
                                    class="px-4 py-2 bg-green-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                                Create Room
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    <!-- Manage People Modal -->
    @if($showManagePeopleModal)
        <div class="fixed inset-0 z-50 overflow-y-auto" wire:key="manage-people-modal-{{ $managePeopleRoomId }}">
            <div class="fixed inset-0 bg-black/50 transition-opacity" @click="$wire.closeManagePeopleModal()"></div>

            <div class="flex min-h-screen items-center justify-center p-4">
                <div class="relative bg-white rounded-lg shadow-xl max-w-md w-full mx-auto" @click.stop>
                    <!-- Modal Header -->
                    <div class="flex items-center justify-between p-6 border-b border-gray-200">
                        <h3 class="text-xl font-semibold text-gray-900">Manage Participants</h3>
                        <button type="button"
                                @click="$wire.closeManagePeopleModal()"
                                class="p-1 rounded-full hover:bg-gray-100 transition-colors">
                            <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>

                    <!-- Modal Body -->
                    <div class="p-6">
                        <p class="text-sm text-gray-600 mb-4">Select which users can access this chat room:</p>
                        <div class="space-y-2 max-h-96 overflow-y-auto">
                            @foreach($this->allUsers as $user)
                                <label class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
                                    <input type="checkbox"
                                           wire:model="selectedUserIds"
                                           value="{{ $user->id }}"
                                           class="w-4 h-4 text-green-600 border-gray-300 rounded focus:ring-green-500">
                                    <div class="flex items-center gap-3 flex-1">
                                        @if($user->avatar)
                                            <img src="{{ Storage::url($user->avatar) }}"
                                                 alt="{{ $user->name }}"
                                                 class="w-8 h-8 rounded-full object-cover">
                                        @else
                                            @php
                                                $nameParts = explode(' ', $user->name);
                                                $initials = count($nameParts) >= 2
                                                    ? strtoupper(substr($nameParts[0], 0, 1) . substr($nameParts[1], 0, 1))
                                                    : strtoupper(substr($user->name, 0, 2));
                                                $isEmployee = \App\Models\Employees::where('user_id', $user->id)->exists();
                                            @endphp
                                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-medium {{ $isEmployee ? 'bg-gradient-to-r from-[#39b44a] to-[#2ba8e0]' : 'bg-gradient-to-r from-[#39b44a] to-[#075054]' }}">
                                                {{ $initials }}
                                            </div>
                                        @endif
                                        <div>
                                            <div class="font-medium text-sm text-gray-900">{{ $user->name }}</div>
                                            <div class="text-xs text-gray-500">{{ $user->email }}</div>
                                        </div>
                                    </div>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <!-- Modal Footer -->
                    <div class="flex items-center justify-end gap-3 p-6 border-t border-gray-200 bg-gray-50">
                        <button type="button"
                                @click="$wire.closeManagePeopleModal()"
                                class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                            Cancel
                        </button>
                        <button type="button"
                                wire:click="updateRoomUsers"
                                class="px-4 py-2 bg-green-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                            Update Participants
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>