@props([
    'trigger' => 'showCreateModal',
    'categories' => [],
    'connectedUsers' => []
])

<div
    x-show="{{ $trigger }}"
    style="display: none;"
    class="relative z-[100]" 
    aria-labelledby="modal-title" 
    role="dialog" 
    aria-modal="true"
>
    {{-- 
        BACKDROP 
    --}}
    <div 
        x-show="{{ $trigger }}"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 bg-black/30 transition-opacity"
    ></div>

    {{-- WRAPPER & LOGIC --}}
    <div 
        class="fixed inset-0 z-10 w-screen overflow-y-auto"
        x-data="{ 
            privacy: 'public',
            searchQuery: '',
            selectedUsers: [],
            toggleUser(id) {
                if (this.selectedUsers.includes(id)) {
                    this.selectedUsers = this.selectedUsers.filter(u => u !== id);
                } else {
                    this.selectedUsers.push(id);
                }
            }
        }"
    >
        <div 
            class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
            @click="{{ $trigger }} = false"
        >
            
            {{-- Panel Transition --}}
            <div 
                x-show="{{ $trigger }}"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                class="relative transform overflow-hidden rounded-xl bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg border border-gray-100"
                @click.stop
            >
                {{-- CONTENT --}}
                <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                    <div class="mb-6 space-y-1.5 text-center sm:text-left">
                        <h3 class="text-xl font-semibold leading-none tracking-tight text-[#2F3D7E]" id="modal-title">
                            Create a Community
                        </h3>
                        <p class="text-sm text-gray-500">
                            Build a space for professionals to share salary insights safely.
                        </p>
                    </div>

                    <form action="{{ route('communities.store') }}" method="POST" class="space-y-6">
                        @csrf
                        
                        {{-- Basic Info --}}
                        <div class="space-y-4">
                            <div class="grid gap-2">
                                <label for="name" class="text-sm font-medium leading-none text-gray-700">Community Name</label>
                                <input type="text" id="name" name="name" required placeholder="e.g. London Fintech Designers" class="flex h-10 w-full rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-sm placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-[#2F3D7E] focus:border-transparent">
                            </div>

                            <div class="grid grid-cols-2 gap-4">
                                <div class="grid gap-2">
                                    <label for="category" class="text-sm font-medium leading-none text-gray-700">Category</label>
                                    <select id="category" name="category" class="flex h-10 w-full items-center justify-between rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#2F3D7E] focus:border-transparent">
                                        <option value="" disabled selected>Select category</option>
                                        @foreach($categories as $category)
                                            <option value="{{ $category }}">{{ $category }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="grid gap-2">
                                    <label for="location" class="text-sm font-medium leading-none text-gray-700">Location (Optional)</label>
                                    <input type="text" id="location" name="location" placeholder="e.g. New York" class="flex h-10 w-full rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-sm placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-[#2F3D7E] focus:border-transparent">
                                </div>
                            </div>

                            <div class="grid gap-2">
                                <label for="description" class="text-sm font-medium leading-none text-gray-700">Description</label>
                                <textarea id="description" name="description" placeholder="What is this community about? Who should join?" class="flex min-h-[100px] w-full rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-sm placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-[#2F3D7E] focus:border-transparent"></textarea>
                            </div>

                            {{-- Privacy Setting --}}
                            <div class="grid gap-2">
                                <label class="text-sm font-medium leading-none text-gray-700">Privacy Setting</label>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <input type="radio" id="public" name="privacy" value="public" class="peer sr-only" x-model="privacy">
                                        <label for="public" :class="privacy === 'public' ? 'border-[#2F3D7E] ring-1 ring-[#2F3D7E]' : 'border-gray-200 hover:bg-gray-100'" class="flex flex-col items-center justify-between rounded-md border-2 bg-white p-4 cursor-pointer transition-all">
                                            <svg class="mb-3 h-6 w-6 transition-colors" :class="privacy === 'public' ? 'text-[#2F3D7E]' : 'text-gray-500'" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" x2="22" y1="12" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                                            <span class="font-semibold text-sm">Public</span>
                                            <span class="text-xs text-center text-gray-500 mt-1">Anyone can see posts</span>
                                        </label>
                                    </div>
                                    <div>
                                        <input type="radio" id="private" name="privacy" value="private" class="peer sr-only" x-model="privacy">
                                        <label for="private" :class="privacy === 'private' ? 'border-[#2F3D7E] ring-1 ring-[#2F3D7E]' : 'border-gray-200 hover:bg-gray-100'" class="flex flex-col items-center justify-between rounded-md border-2 bg-white p-4 cursor-pointer transition-all">
                                            <svg class="mb-3 h-6 w-6 transition-colors" :class="privacy === 'private' ? 'text-[#2F3D7E]' : 'text-gray-500'" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                                            <span class="font-semibold text-sm">Private</span>
                                            <span class="text-xs text-center text-gray-500 mt-1">Invite only</span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            {{-- Invites Section --}}
                            <div class="grid gap-4 mt-6">
                                <div class="grid gap-2">
                                    <label for="invites" class="text-sm font-medium leading-none text-gray-700">Invite by Email</label>
                                    <textarea id="invites" name="invites" placeholder="Enter email addresses separated by commas..." class="flex min-h-[80px] w-full rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-sm placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-[#2F3D7E] focus:border-transparent"></textarea>
                                </div>

                                <div class="relative py-1">
                                    <div class="absolute inset-0 flex items-center"><span class="w-full border-t border-gray-200"></span></div>
                                    <div class="relative flex justify-center text-xs uppercase"><span class="bg-white px-2 text-gray-400 font-medium">Or</span></div>
                                </div>

                                <div class="grid gap-2">
                                    <label class="text-sm font-medium leading-none text-gray-700">Invite from Rate My Pay</label>
                                    <div class="relative">
                                        <div class="flex items-center border border-gray-200 rounded-md bg-gray-50 px-3 py-2 focus-within:ring-2 focus-within:ring-[#2F3D7E] focus-within:bg-white">
                                            <svg class="h-4 w-4 text-gray-400 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
                                            <input type="text" x-model="searchQuery" placeholder="Search connections..." class="w-full bg-transparent border-none p-0 text-sm focus:ring-0 placeholder:text-gray-500 focus:outline-none">
                                        </div>

                                        {{-- Hidden Inputs for Form Submission --}}
                                        <template x-for="id in selectedUsers" :key="id">
                                            <input type="hidden" name="platform_invites[]" :value="id">
                                        </template>

                                        {{-- Selected Pills --}}
                                        <div class="flex flex-wrap gap-2 mt-2" x-show="selectedUsers.length > 0">
                                            <template x-for="id in selectedUsers" :key="id">
                                                @foreach($connectedUsers as $user)
                                                <div x-show="id == {{ $user->id }}" class="inline-flex items-center rounded-full bg-blue-50 border border-blue-100 px-2.5 py-0.5 text-xs font-medium text-[#2F3D7E]">
                                                    <span>{{ '@' . $user->nickname }}</span>
                                                    <button type="button" @click="toggleUser({{ $user->id }})" class="ml-1.5 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full text-blue-400 hover:bg-blue-200 hover:text-blue-500 focus:outline-none">
                                                        <span class="sr-only">Remove</span>
                                                        <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8"><path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" /></svg>
                                                    </button>
                                                </div>
                                                @endforeach
                                            </template>
                                        </div>

                                        {{-- Dropdown Results --}}
                                        <div x-show="searchQuery.length > 0" class="absolute z-20 mt-1 max-h-48 w-full overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" style="display:none;">
                                            @if(count($connectedUsers) > 0)
                                                @foreach($connectedUsers as $user)
                                                <div 
                                                    x-show="'{{ strtolower($user->nickname . ' ' . $user->name) }}'.includes(searchQuery.toLowerCase())"
                                                    @click="toggleUser({{ $user->id }}); searchQuery = ''"
                                                    class="cursor-pointer select-none px-4 py-2 text-sm text-gray-900 hover:bg-gray-100 flex items-center justify-between"
                                                >
                                                    <div class="flex items-center">
                                                        <div class="h-6 w-6 flex-shrink-0 rounded-full bg-[#2F3D7E] text-white flex items-center justify-center text-[10px] font-bold mr-2">
                                                            {{ strtoupper(substr($user->nickname, 0, 1)) }}
                                                        </div>
                                                        <span>{{ '@' . $user->nickname }}</span>
                                                    </div>
                                                    <div x-show="selectedUsers.includes({{ $user->id }})" class="text-[#2F3D7E]">
                                                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
                                                    </div>
                                                </div>
                                                @endforeach
                                            @else
                                                <div class="px-4 py-2 text-sm text-gray-500">No connections found</div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Footer Buttons --}}
                            <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 pt-4 border-t border-gray-100">
                                <button type="button" @click="{{ $trigger }} = false" class="mt-2 sm:mt-0 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium border border-gray-200 bg-white hover:bg-gray-100 h-10 px-4 py-2 transition-colors">Cancel</button>
                                <button type="submit" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium bg-[#2F3D7E] text-white hover:bg-[#232d5e] h-10 px-4 py-2 transition-colors shadow-sm">Create Community</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>