{{-- resources/views/dashboard/network/index.blade.php --}}
@extends('layouts.dashboard')

@section('content')

    <div class="md:max-w-[80%] max-w-[90%] mx-auto min-h-screen bg-[#f8f9fa]" x-data="{ activeTab: 'overview' }">

        {{-- Header Section --}}
        <div class="bg-white border-b border-gray-200 pt-8 pb-12 px-4 md:px-8">
            <div class="max-w-6xl mx-auto">
                <h1 class="text-3xl font-bold text-[#2F3D7E] mb-2">Community & Network</h1>
                <p class="text-gray-500 max-w-2xl">
                    Connect with professionals, join salary discussions, and grow your network anonymously.
                </p>
            </div>
        </div>

        <div class="max-w-6xl mx-auto px-4 md:px-8 -mt-6">

            <div class="w-full">
                <div
                    class="bg-white p-1.5 rounded-xl shadow-sm border border-gray-200 inline-flex mb-8 h-auto overflow-x-auto md:w-auto w-[250px] w-full">

                    {{-- Overview Trigger --}}
                    <button @click="activeTab = 'overview'"
                        :class="activeTab === 'overview' ? 'bg-[#2F3D7E] text-white' : 'text-gray-600 hover:bg-gray-50'"
                        class="rounded-lg px-5 py-2.5 transition-all flex items-center gap-2 font-medium">
                        <svg class="w-4 h-4" 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="7" height="7" x="3" y="3" rx="1" />
                            <rect width="7" height="7" x="14" y="3" rx="1" />
                            <rect width="7" height="7" x="14" y="14" rx="1" />
                            <rect width="7" height="7" x="3" y="14" rx="1" />
                        </svg>
                        Overview
                    </button>

                    {{-- Communities Trigger --}}
                    <button @click="activeTab = 'communities'"
                        :class="activeTab === 'communities' ? 'bg-[#2F3D7E] text-white' : 'text-gray-600 hover:bg-gray-50'"
                        class="rounded-lg px-5 py-2.5 transition-all flex items-center gap-2 font-medium">
                        <svg class="w-4 h-4" 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">
                            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                            <circle cx="9" cy="7" r="4" />
                            <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
                            <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                        </svg>
                        Communities
                    </button>

                    {{-- People Directory Trigger --}}
                    <button @click="activeTab = 'people'"
                        :class="activeTab === 'people' ? 'bg-[#2F3D7E] text-white' : 'text-gray-600 hover:bg-gray-50'"
                        class="rounded-lg px-5 py-2.5 transition-all flex items-center gap-2 font-medium">
                        <svg class="w-4 h-4" 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">
                            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                            <circle cx="9" cy="7" r="4" />
                            <line x1="19" x2="19" y1="8" y2="14" />
                            <line x1="22" x2="16" y1="11" y2="11" />
                        </svg>
                        People Directory
                    </button>
                    </div>

                {{--
                                                                    ============================================
                                                                    OVERVIEW TAB CONTENT
                                                                    ============================================
                                                                --}}
                <div x-show="activeTab === 'overview'" class="mt-0 space-y-8" style="display: none;">

                    {{-- 1. Incoming Requests --}}
                    @if(isset($incomingRequests) && $incomingRequests->count() > 0)
                        <section>
                            <div class="flex items-center justify-between mb-4">
                                <h2 class="text-lg font-bold text-gray-900 flex items-center gap-2">
                                    <svg class="w-5 h-5 text-[#2F3D7E]" 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">
                                        <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
                                        <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
                                    </svg>
                                    Pending Requests
                                    <span
                                        class="bg-red-100 text-red-600 text-xs px-2 py-0.5 rounded-full">{{ $incomingRequests->count() }}</span>
                                </h2>
                                <button @click="activeTab = 'people'" class="text-[#2F3D7E] text-sm hover:underline font-medium">
                                    Manage all
                                </button>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                @foreach($incomingRequests as $user)
                                    <x-network.request-card :user="$user" />
                                @endforeach
                            </div>
                        </section>
                    @endif

                    {{-- 2. My Communities Highlights --}}
                    <section>
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-lg font-bold text-gray-900 flex items-center gap-2">
                                <svg class="w-5 h-5 text-[#2F3D7E]" 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">
                                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                                    <circle cx="9" cy="7" r="4" />
                                    <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                                </svg>
                                Your Communities
                                </h2>
                            <button @click="activeTab = 'communities'"
                                class="text-gray-500 hover:text-[#2F3D7E] text-sm flex items-center gap-1 transition-colors">
                                View all
                                <svg class="w-4 h-4" 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">
                                    <path d="M5 12h14" />
                                    <path d="m12 5 7 7-7 7" />
                                </svg>
                                </button>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    @foreach($myCommunities as $community)
                                        <x-network.community-card :community="$community" />
                                    @endforeach

                            {{-- Create/Find More Card --}}
                            <div @click="activeTab = 'communities'"
                                class="border-2 border-dashed border-gray-200 rounded-xl flex flex-col items-center justify-center p-6 text-center hover:border-[#2F3D7E]/50 hover:bg-blue-50/50 transition-all cursor-pointer min-h-[200px]">
                                <div class="w-12 h-12 bg-white rounded-full shadow-sm flex items-center justify-center mb-3 text-[#2F3D7E]">
                                    <svg class="w-6 h-6" 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">
                                        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                                        <circle cx="9" cy="7" r="4" />
                                        <line x1="19" x2="19" y1="8" y2="14" />
                                        <line x1="22" x2="16" y1="11" y2="11" />
                                    </svg>
                                    </div>
                                    <h3 class="font-semibold text-gray-900">Join more communities</h3>
                                    <p class="text-sm text-gray-500 mt-1">Find peers in your industry</p>
                                    </div>
                                    </div>
                                    </section>

                    {{-- 3. Recommended People --}}
                    <section>
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-lg font-bold text-gray-900 flex items-center gap-2">
                                <svg class="w-5 h-5 text-[#2F3D7E]" 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">
                                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                                    <circle cx="9" cy="7" r="4" />
                                    <line x1="19" x2="19" y1="8" y2="14" />
                                    <line x1="22" x2="16" y1="11" y2="11" />
                                </svg>
                                Suggested Connections
                                </h2>
                            <button @click="activeTab = 'people'"
                                class="text-gray-500 hover:text-[#2F3D7E] text-sm flex items-center gap-1 transition-colors">
                                Find more people
                                <svg class="w-4 h-4" 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">
                                    <path d="M5 12h14" />
                                    <path d="m12 5 7 7-7 7" />
                                </svg>
                                </button>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                    @foreach($suggestedPeople as $user)
                                        <x-network.user-card :user="$user" />
                                    @endforeach
                                </div>
                                </section>
                                </div>

                {{--
                                                                    ============================================
                                                                    COMMUNITIES TAB CONTENT
                                                                    ============================================
                                                                --}}
                <div x-show="activeTab === 'communities'" class="mt-0" style="display: none;">
                    <x-network.community-hub :is-embedded="true" :my-communities="$myCommunities"
                        :discover-communities="$discoverCommunities" :categories="$categories" :connected-users="$networkUsers" />
                    </div>

                {{--
                                                                    ============================================
                                                                    PEOPLE TAB CONTENT
                                                                    ============================================
                                                                --}}
                <div x-show="activeTab === 'people'" class="mt-0" style="display: none;">
                    <x-network.people-directory :is-embedded="true" :discover-users="$discoverUsers" :network-users="$networkUsers"
                        :request-users="$incomingRequests" />
                    </div>

            </div>
            </div>
            </div>

    {{-- Toast Notification Script (Using simple SweetAlert or custom implementation to match 'sonner') --}}
    <script>
        function handleConnect(id) {
            // Implementation for AJAX connection request
            // On success:
            // alert('Connection request sent!');
        }
    </script>
@endsection
