@props([
    'trigger' => 'showCreatePostModal',
    'experiences' => [],
    'communities' => [],
    'currentCommunityId' => null
])

<div
    x-show="{{ $trigger }}"
    style="display: none;"
    class="relative z-[100]"
    aria-labelledby="modal-title" 
    role="dialog" 
    aria-modal="true"
>
    {{-- VISUAL 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>

    {{-- INTERACTIVE CONTAINER --}}
    <div 
        class="fixed inset-0 z-10 w-screen overflow-y-auto"
        x-data="{ 
            selectedJobId: '{{ $experiences->isNotEmpty() ? $experiences->first()->id : "" }}',
            searchQuery: '',
            // Initialize with current ID if exists (Auto-Select)
            selectedCommunities: [{{ $currentCommunityId ?? 'null' }}].filter(id => id !== null),
            isAnonymous: false,
            fileName: null,
            filePreview: null,
            allCommunities: {{ json_encode($communities) }},

            toggleCommunity(id) {
                if (this.selectedCommunities.includes(id)) {
                    this.selectedCommunities = this.selectedCommunities.filter(c => c !== id);
                } else {
                    this.selectedCommunities.push(id);
                }
            },

            getCommunityName(id) {
                const comm = this.allCommunities.find(c => c.id == id);
                return comm ? comm.name : '';
            },

            handleFile(event) {
                const file = event.target.files[0];
                if (!file) return;
                
                if (file.size > 5 * 1024 * 1024) {
                    alert('File is too large. Max 5MB.');
                    event.target.value = '';
                    return;
                }

                this.fileName = file.name;
                
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = e => this.filePreview = e.target.result;
                    reader.readAsDataURL(file);
                } else {
                    this.filePreview = null;
                }
            }
        }"
    >
        {{-- ENTERING WRAPPER --}}
        <div 
            class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
            @click="{{ $trigger }} = false"
        >
            
            {{-- MODAL PANEL --}}
            <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-2xl border border-gray-100"
                @click.stop
            >
                {{-- HEADER --}}
                <div class="bg-white px-6 py-5 border-b border-gray-100 flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <div class="h-10 w-10 rounded-full bg-blue-50 flex items-center justify-center text-[#2F3D7E]">
                            <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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-[#2F3D7E]">Share Your Post</h3>
                            <p class="text-xs text-gray-500">Contribute anonymously to community data.</p>
                        </div>
                    </div>
                    
                    {{-- Anonymous Toggle --}}
                    <div class="flex items-center gap-3 bg-gray-50 px-3 py-1.5 rounded-lg border border-gray-100">
                        <span class="text-xs font-medium text-gray-600">Post Anonymously</span>
                        <button 
                            type="button" 
                            @click="isAnonymous = !isAnonymous"
                            :class="isAnonymous ? 'bg-[#2F3D7E]' : 'bg-gray-300'"
                            class="relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none"
                        >
                            <span 
                                :class="isAnonymous ? 'translate-x-4' : 'translate-x-0'"
                                class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                            ></span>
                        </button>
                    </div>
                </div>

                {{-- FORM --}}
                <form action="{{ route('rate-my-pay.store') }}" method="POST" enctype="multipart/form-data" class="px-6 py-6 space-y-6">
                    @csrf
                    <input type="hidden" name="is_anonymous" :value="isAnonymous ? '1' : '0'">

                    {{-- JOB EXPERIENCE --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Select Job Experience</label>
                        <select 
                            name="job_experience_id" 
                            x-model="selectedJobId"
                            class="w-full rounded-lg border-gray-200 bg-gray-50 px-3 py-2.5 text-sm focus:border-[#2F3D7E] focus:ring-[#2F3D7E]"
                        >
                            <option value="" disabled>Select a job...</option>
                            @foreach($experiences as $job)
                                <option value="{{ $job->id }}">
                                    {{ $job->job_title }} at {{ $job->company_name }}
                                </option>
                            @endforeach
                        </select>
                        @if($experiences->isEmpty())
                            <p class="text-xs text-red-500 mt-1">You need to add a job experience in your profile first.</p>
                        @endif
                    </div>

                    {{-- COMMUNITIES SELECT --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Share with Communities</label>
                        <div class="relative">
                            {{-- Search Input --}}
                            <div class="flex items-center border border-gray-200 rounded-lg bg-gray-50 px-3 py-2 focus-within:ring-1 focus-within:ring-[#2F3D7E] focus-within:bg-white transition-colors">
                                <svg class="h-4 w-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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 communities..." 
                                    class="w-full bg-transparent border-none p-0 text-sm focus:ring-0 placeholder:text-gray-400 focus:outline-none"
                                >
                            </div>

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

                            {{-- Selected Pills (Auto-renders current community) --}}
                            <div class="flex flex-wrap gap-2 mt-3" x-show="selectedCommunities.length > 0">
                                <template x-for="id in selectedCommunities" :key="id">
                                    <div class="inline-flex items-center rounded-full bg-blue-50 border border-blue-100 px-3 py-1 text-xs font-medium text-[#2F3D7E]">
                                        <span x-text="getCommunityName(id)"></span>
                                        <button type="button" @click="toggleCommunity(id)" class="ml-2 text-blue-400 hover:text-blue-600 focus:outline-none">
                                            <svg class="h-3 w-3" 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>
                                </template>
                            </div>

                            {{-- Dropdown Results --}}
                            <div x-show="searchQuery.length > 0" class="absolute z-20 mt-1 max-h-48 w-full overflow-auto rounded-lg bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5" style="display:none;">
                                <template x-for="community in allCommunities.filter(c => c.name.toLowerCase().includes(searchQuery.toLowerCase()))" :key="community.id">
                                    <div 
                                        @click="toggleCommunity(community.id); searchQuery = ''"
                                        class="cursor-pointer select-none px-4 py-2 text-sm text-gray-900 hover:bg-gray-50 flex items-center justify-between"
                                    >
                                        <span x-text="community.name"></span>
                                        <div x-show="selectedCommunities.includes(community.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>
                                </template>
                                <div x-show="allCommunities.filter(c => c.name.toLowerCase().includes(searchQuery.toLowerCase())).length === 0" class="px-4 py-2 text-sm text-gray-500">
                                    No communities found.
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- CONTENT --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Your Thoughts</label>
                        <textarea 
                            name="content" 
                            rows="4" 
                            required
                            placeholder="Share details about your role, negotiation process, or ask for advice..." 
                            class="w-full rounded-lg border-gray-200 bg-gray-50 px-3 py-2 text-sm focus:border-[#2F3D7E] focus:ring-[#2F3D7E]"
                        ></textarea>
                    </div>

                    {{-- PAYSLIP UPLOAD --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Verify with Payslip (Optional)</label>
                        <div class="flex items-center justify-center w-full">
                            <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition-colors relative overflow-hidden">
                                
                                {{-- Default View --}}
                                <div class="flex flex-col items-center justify-center pt-5 pb-6" x-show="!fileName">
                                    <svg class="w-8 h-8 mb-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
                                    <p class="text-xs text-gray-500"><span class="font-semibold text-[#2F3D7E]">Click to upload</span> or drag and drop</p>
                                    <p class="text-[10px] text-gray-400 mt-1">PNG, JPG or PDF (MAX. 5MB)</p>
                                </div>

                                {{-- File Selected View --}}
                                <div x-show="fileName" class="flex flex-col items-center justify-center w-full h-full bg-blue-50" style="display: none;">
                                    <template x-if="filePreview">
                                        <img :src="filePreview" class="h-20 w-auto object-cover rounded shadow-sm mb-2">
                                    </template>
                                    <template x-if="!filePreview">
                                        <svg class="w-10 h-10 text-red-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                    </template>
                                    <p class="text-sm font-medium text-gray-700" x-text="fileName"></p>
                                    <p class="text-xs text-gray-500">Click to change</p>
                                </div>

                                <input id="dropzone-file" name="payslip" type="file" class="hidden" accept=".pdf,.jpg,.jpeg,.png" @change="handleFile" />
                            </label>
                        </div>
                        <p class="text-[10px] text-gray-400 mt-1 flex items-center gap-1">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                            Payslips are strictly private and only used for verification badge.
                        </p>
                    </div>

                    {{-- FOOTER BUTTONS --}}
                    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-100">
                        <button 
                            type="button" 
                            @click="{{ $trigger }} = false"
                            class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none transition-colors"
                        >
                            Cancel
                        </button>
                        <button 
                            type="submit" 
                            :disabled="!selectedJobId"
                            class="px-6 py-2.5 text-sm font-medium text-white bg-[#2F3D7E] rounded-lg hover:bg-[#232d5e] focus:outline-none shadow-sm disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                        >
                            Share Post
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>