@extends('layouts.app')

@section('title', 'Manage Accounts')

@section('content')
    <div class="flex flex-col h-full">
        
        <div class="mb-8">
            <h2 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
                Manage Accounts <i class="far fa-question-circle text-gray-400 text-sm"></i>
            </h2>
        </div>

        <div class="bg-white p-4 rounded-lg border border-gray-200 flex justify-between items-center mb-6 shadow-sm">
            <div class="text-sm text-gray-600">
                Current Plan: <span class="font-bold text-gray-800">Business</span> 
                <span class="mx-2 text-gray-300">|</span>
                You have <span class="font-bold">{{ $accounts->count() }}</span> social accounts
                <button class="ml-2 px-3 py-1 border border-gray-300 rounded text-xs font-bold hover:bg-gray-50">Upgrade Plan</button>
            </div>
            <a href="/auth/facebook" class="bg-[#FF6900] hover:bg-[#e65e00] text-white px-6 py-2.5 rounded-lg text-sm font-bold shadow-md transition flex items-center gap-2">
                <i class="fas fa-plus"></i> Add New Social Account
            </a>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 min-h-[500px]">
            
            <div class="p-4 border-b border-gray-100 flex flex-col md:flex-row justify-between items-center gap-4">
                <div class="flex-1 w-full md:w-auto">
                    <h3 class="font-bold text-lg text-gray-800">Accounts</h3>
                    <p class="text-xs text-gray-500">A list of all the accounts including their Name, Platform and Token expiry.</p>
                </div>

                <div class="flex items-center gap-3 w-full md:w-auto" x-data="{ filterOpen: false }">
                    
                    <div class="relative">
                        <button @click="filterOpen = !filterOpen" class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-bold text-gray-700 flex items-center gap-2 hover:bg-gray-50">
                            <i class="fas fa-sliders-h"></i> Filter By <i class="fas fa-chevron-down text-xs"></i>
                        </button>

                        <div x-show="filterOpen" @click.away="filterOpen = false" class="absolute right-0 top-full mt-2 w-72 bg-white border border-gray-200 rounded-xl shadow-xl z-50 p-4" style="display: none;">
                            <div class="flex justify-between items-center mb-4 border-b border-gray-100 pb-2">
                                <button class="text-xs font-bold text-gray-500 hover:text-gray-800">Clear</button>
                                <span class="font-bold text-gray-800">Filters</span>
                                <button class="bg-[#FF6900] text-white text-xs px-3 py-1 rounded font-bold">Done</button>
                            </div>
                            
                            <div class="space-y-2">
                                <div x-data="{ open: false }" class="border-b border-gray-100 pb-2">
                                    <button @click="open = !open" class="flex justify-between w-full text-sm font-bold text-gray-700 mb-2">
                                        Network <i class="fas fa-chevron-down text-xs transition" :class="{'rotate-180': open}"></i>
                                    </button>
                                    <div x-show="open" class="space-y-1 pl-2">
                                        <label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer"><input type="checkbox" class="rounded text-[#FF6900]"> Facebook</label>
                                        <label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer"><input type="checkbox" class="rounded text-[#FF6900]"> Instagram</label>
                                    </div>
                                </div>

                                <div x-data="{ open: true }" class="pb-2">
                                    <button @click="open = !open" class="flex justify-between w-full text-sm font-bold text-gray-700 mb-2">
                                        Workspace <i class="fas fa-chevron-down text-xs transition" :class="{'rotate-180': open}"></i>
                                    </button>
                                    <div x-show="open" class="space-y-1 pl-2 max-h-40 overflow-y-auto">
                                        @foreach($workspaces as $ws)
                                        <label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer">
                                            <input type="checkbox" class="rounded text-[#FF6900]"> 
                                            <span class="w-2 h-2 rounded-full bg-gray-400"></span> {{ $ws->name }}
                                        </label>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <form method="GET" class="relative">
                        <i class="fas fa-search absolute left-3 top-3 text-gray-400 text-sm"></i>
                        <input type="text" name="search" placeholder="Search Account" value="{{ request('search') }}" class="pl-9 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-[#FF6900] focus:border-[#FF6900] w-48">
                    </form>

                    <div class="flex border border-gray-300 rounded-lg overflow-hidden">
                        <button class="px-3 py-2 bg-orange-50 text-[#FF6900] border-r border-gray-300"><i class="fas fa-list"></i></button>
                        <button class="px-3 py-2 bg-white text-gray-500 hover:bg-gray-50"><i class="fas fa-th-large"></i></button>
                    </div>
                </div>
            </div>

            <table class="w-full text-left">
                <thead class="bg-white border-b border-gray-100 text-xs font-bold text-gray-500 uppercase">
                    <tr>
                        <th class="px-6 py-4">Account Name</th>
                        <th class="px-6 py-4">Platform</th>
                        <th class="px-6 py-4">Workspace</th>
                        <th class="px-6 py-4 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($accounts as $acc)
                    <tr class="hover:bg-gray-50 group transition">
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-4">
                                <div class="relative">
                                    <img src="{{ $acc->profile_picture ?? 'https://ui-avatars.com/api/?name='.urlencode($acc->name) }}" class="w-10 h-10 rounded-full border border-gray-200">
                                    <div class="absolute -bottom-1 -right-1 bg-blue-600 text-white rounded-full w-4 h-4 flex items-center justify-center text-[8px] border border-white">
                                        <i class="fab fa-facebook-f"></i>
                                    </div>
                                </div>
                                <div>
                                    <div class="font-bold text-gray-800 text-sm">{{ $acc->name }}</div>
                                    <div class="text-xs text-gray-400">ID: {{ $acc->api_id }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-2 text-blue-600 font-bold text-sm">
                                <i class="fab fa-facebook text-lg"></i> Facebook Page
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            @php $ws = $workspaces->where('id', $acc->workspace_id ?? session('active_workspace_id'))->first(); @endphp
                            @if($ws)
                                <span class="inline-flex items-center gap-1 px-2 py-1 rounded bg-gray-100 text-xs font-bold text-gray-600 border border-gray-200">
                                    {{ substr($ws->name, 0, 1) }} - {{ $ws->name }}
                                </span>
                            @else
                                <span class="text-gray-300 text-xs italic">Unassigned</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-right">
                            <div class="flex justify-end gap-3 opacity-0 group-hover:opacity-100 transition">
                                <a href="/delete-page/{{ $acc->id }}" onclick="return confirm('Disconnect this account?')" class="text-gray-400 hover:text-red-600" title="Delete">
                                    <i class="far fa-trash-alt"></i>
                                </a>
                                <button class="text-gray-400 hover:text-gray-600"><i class="fas fa-ellipsis-v"></i></button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="px-6 py-12 text-center text-gray-400">
                            <div class="flex flex-col items-center">
                                <i class="fas fa-users-slash text-4xl mb-3 text-gray-300"></i>
                                <p>No accounts found.</p>
                                <a href="/auth/facebook" class="mt-2 text-[#FF6900] font-bold hover:underline">Connect one now</a>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection