@extends('layouts.dashboard')

@section('content')
    {{-- 
        WRAPPER
    --}}
    <div class="w-full min-h-screen bg-[#f4f4f4]" x-data="{ showCreatePostModal: false }">
        <div class="mx-auto p-6">

            {{-- Header & CTA Area --}}
            <div class="mb-6 flex flex-col gap-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-bold text-[#2F3D7E]">Salary Feed</h1>
                        <p class="text-sm text-gray-500">Real, anonymous salary data from the community.</p>
                    </div>
                </div>

                {{-- Share / Start Post Widget --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
                    <div class="flex gap-3 mb-3">
                         {{-- Avatar --}}
                         <div class="w-12 h-12 shrink-0">
                            <img 
                                src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=2F3D7E&color=fff" 
                                alt="{{ $user->name }}" 
                                class="w-full h-full rounded-full object-cover"
                            >
                         </div>

                         {{-- 
                            TRIGGER to open modal 
                         --}}
                         <button 
                            @click="showCreatePostModal = true"
                            class="flex-1 text-left bg-white border border-gray-300 hover:bg-gray-50 rounded-full px-5 py-3 text-gray-500 font-medium transition-colors cursor-pointer block"
                        >
                            Start a post
                         </button>
                    </div>
                </div>
            </div>

            {{-- Filters - Sticky --}}
            <div class="sticky top-4 z30 space-y-4" x-data>
                <form action="{{ route('dashboard.index') }}" method="GET" id="filterForm">

                    {{-- SEARCH & DROPDOWNS --}}
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 flex flex-col sm:flex-row gap-3 mb-4">

                        {{-- Search --}}
                        <div class="relative flex-1">
                            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" 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" 
                                name="search" 
                                value="{{ request('search') }}"
                                placeholder="Search role, company, or skill..." 
                                class="w-full pl-10 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]"
                            >
                        </div>

                        {{-- Dropdowns (Auto-submit on change) --}}
                        <div class="flex gap-2 overflow-x-auto pb-1 sm:pb-0">

                            {{-- Country --}}
                            <select name="country" onchange="document.getElementById('filterForm').submit()" 
                                class="px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E] cursor-pointer min-w-[120px]">
                                <option value="">Country</option>
                                @foreach($filterOptions['countries'] as $country)
                                    <option value="{{ $country }}" {{ request('country') == $country ? 'selected' : '' }}>{{ $country }}</option>
                                @endforeach
                            </select>

                            {{-- Job Title --}}
                            <select name="job_title" onchange="document.getElementById('filterForm').submit()" 
                                class="px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E] cursor-pointer min-w-[120px]">
                                <option value="">Job Title</option>
                                @foreach($filterOptions['titles'] as $title)
                                    <option value="{{ $title }}" {{ request('job_title') == $title ? 'selected' : '' }}>{{ $title }}</option>
                                @endforeach
                            </select>

                            {{-- Experience --}}
                            <select name="experience" onchange="document.getElementById('filterForm').submit()" 
                                class="px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E] cursor-pointer min-w-[120px]">
                                <option value="">Experience</option>
                                @foreach($filterOptions['experience_levels'] as $exp)
                                    <option value="{{ $exp }}" {{ request('experience') == $exp ? 'selected' : '' }}>{{ $exp }} Years</option>
                                @endforeach
                            </select>

                            {{-- Reset Button --}}
                            @if(request()->anyFilled(['search', 'location', 'job_title', 'experience']))
                                <a href="{{ route('dashboard.index') }}" class="px-3 py-2 bg-red-50 text-red-600 rounded-lg text-sm font-medium hover:bg-red-100 flex items-center">
                                    <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="M6 18L18 6M6 6l12 12"/></svg>
                                </a>
                            @endif
                        </div>
                    </div>

                    {{-- TABS --}}
                    <div class="bg-white p-1.5 rounded-xl shadow-sm border border-gray-200 inline-flex w-full sm:w-auto overflow-x-auto">
                        @php $currentTab = request('tab', 'all'); @endphp

                        <button type="submit" name="tab" value="all" 
                            class="px-4 py-2 rounded-lg text-sm font-medium transition-all whitespace-nowrap {{ $currentTab === 'all' ? 'bg-[#2F3D7E] text-white shadow-sm' : 'text-gray-600 hover:bg-gray-50' }}">
                            All Posts
                        </button>
                        <button type="submit" name="tab" value="community" 
                            class="px-4 py-2 rounded-lg text-sm font-medium transition-all whitespace-nowrap {{ $currentTab === 'community' ? 'bg-[#2F3D7E] text-white shadow-sm' : 'text-gray-600 hover:bg-gray-50' }}">
                            My Communities
                        </button>
                        <button type="submit" name="tab" value="verified" 
                            class="px-4 py-2 rounded-lg text-sm font-medium transition-all whitespace-nowrap {{ $currentTab === 'verified' ? 'bg-[#2F3D7E] text-white shadow-sm' : 'text-gray-600 hover:bg-gray-50' }}">
                            Highest Verified
                        </button>
                        <button type="submit" name="tab" value="recent" 
                            class="px-4 py-2 rounded-lg text-sm font-medium transition-all whitespace-nowrap {{ $currentTab === 'recent' ? 'bg-[#2F3D7E] text-white shadow-sm' : 'text-gray-600 hover:bg-gray-50' }}">
                            Most Recent
                        </button>
                    </div>

                </form>
            </div>

            {{-- Feed List --}}
            <div class="mt-6 space-y-6">
                @forelse($rateMyPayPosts as $post)
                    <x-network.post-card :post="$post" />
                @empty
                    <div class="text-center py-20 bg-white rounded-xl border border-gray-200">
                        <div class="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900">No posts found</h3>
                        <p class="text-gray-500 mt-1 max-w-sm mx-auto">We couldn't find any salary data matching your filters. Try adjusting your search.</p>
                        <a href="{{ route('dashboard.index') }}" class="mt-4 inline-block text-[#2F3D7E] font-semibold hover:underline">Clear all filters</a>
                    </div>
                @endforelse

                {{-- Pagination --}}
                @if($rateMyPayPosts->hasPages())
                    <div class="mt-6">
                        {{ $rateMyPayPosts->links() }}
                    </div>
                @elseif($rateMyPayPosts->count() > 0)
                    <div class="text-center py-10">
                        <p class="text-gray-400 text-sm">You've reached the end of the list.</p>
                        <a href="{{ route('communities.index') }}" class="text-[#2F3D7E] text-sm font-semibold mt-2 hover:underline">Join more communities</a>
                    </div>
                @endif
            </div>
        </div>

        {{-- 
            CREATE POST MODAL
        --}}
        <x-network.create-post-modal 
            :experiences="$experiences" 
            :communities="$communities" 
        />

    </div>
@endsect