@extends('layouts.admin')

@section('page-title', 'All Vendors/Sellers')

@section('content')
<div class="space-y-6">
    {{-- Header --}}
    <div class="flex justify-between items-start">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Seller Lists</h2>
            <p class="text-gray-500 mt-1">You have total {{ $vendors->total() }} sellers</p>
        </div>
        <a href="{{ route('admin.vendors.create') }}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm font-medium transition shadow-sm">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            Add Seller
        </a>
    </div>

    {{-- Table Card --}}
    <div class="bg-white rounded-xl shadow-sm border overflow-hidden">
        {{-- Card Header with Filters --}}
        <div class="px-6 py-4 border-b border-gray-200 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <h4 class="text-base font-semibold text-gray-800">Sellers</h4>
            <div class="flex items-center gap-3">
                <form action="{{ route('admin.vendors.index') }}" method="GET" class="flex items-center gap-2">
                    <select name="filter" onchange="this.form.submit()" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white">
                        <option value="" {{ !request('filter') ? 'selected' : '' }}>Filter by</option>
                        <option value="verified" {{ request('filter') === 'verified' ? 'selected' : '' }}>Verified Shop</option>
                        <option value="unverified" {{ request('filter') === 'unverified' ? 'selected' : '' }}>Unverified Shop</option>
                    </select>
                    <div class="flex">
                        <input type="text" name="q" value="{{ request('q') }}" placeholder="Search" class="px-3 py-2 border border-gray-300 rounded-l-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 w-48">
                        <button type="submit" class="px-3 py-2 bg-indigo-600 text-white rounded-r-lg hover:bg-indigo-700 transition">
                            <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Table --}}
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b">
                    <tr>
                        <th class="text-left px-6 py-3 font-medium text-gray-500 w-12">#</th>
                        <th class="text-left px-6 py-3 font-medium text-gray-500">Shop Name</th>
                        <th class="text-left px-6 py-3 font-medium text-gray-500">Author</th>
                        <th class="text-left px-6 py-3 font-medium text-gray-500">Info</th>
                        <th class="text-center px-6 py-3 font-medium text-gray-500">Shop Publish</th>
                        <th class="text-right px-6 py-3 font-medium text-gray-500">Options</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($vendors as $index => $vendor)
                    <tr class="hover:bg-gray-50">
                        {{-- # --}}
                        <td class="px-6 py-4 text-gray-500">{{ $vendors->firstItem() + $index }}</td>

                        {{-- Shop Name --}}
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <a href="#" class="flex-shrink-0">
                                    @if($vendor->logo)
                                        <img src="{{ asset('storage/' . $vendor->logo) }}" alt="{{ $vendor->name }}" class="w-10 h-10 rounded-full object-cover">
                                    @else
                                        <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
                                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349m-16.5 11.65V9.35m0 0a3.001 3.001 0 003.75-.615A2.993 2.993 0 009.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 002.25 1.016c.896 0 1.7-.393 2.25-1.016a3.001 3.001 0 003.75.614m-16.5 0a3.004 3.004 0 01-.621-4.72L4.318 3.44A1.5 1.5 0 015.367 3h13.266a1.5 1.5 0 011.049.44l1.428 1.23a3.001 3.001 0 01-.621 4.72"/></svg>
                                        </div>
                                    @endif
                                </a>
                                <div>
                                    <span class="font-medium text-gray-800">{{ $vendor->name }}</span>
                                    @if($vendor->status === 'approved')
                                        <span class="text-green-600 text-xs ml-1">Verified</span>
                                    @else
                                        <span class="text-amber-600 text-xs ml-1">Unverified</span>
                                    @endif
                                    <br>
                                    <span class="text-xs text-gray-500">Total Products: {{ $vendor->products->count() }}</span>
                                </div>
                            </div>
                        </td>

                        {{-- Author --}}
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <div class="flex-shrink-0">
                                    @if($vendor->user && $vendor->user->avatar)
                                        <img src="{{ $vendor->user->avatar_url }}" alt="{{ $vendor->user->name }}" class="w-10 h-10 rounded-full object-cover">
                                    @else
                                        <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-700 font-medium text-sm">
                                            {{ $vendor->user ? substr($vendor->user->name, 0, 1) : '?' }}
                                        </div>
                                    @endif
                                </div>
                                <div>
                                    <a href="{{ route('admin.vendors.edit', $vendor) }}" class="font-medium text-gray-800 hover:text-indigo-600">{{ $vendor->user?->name ?? 'N/A' }}</a>
                                    <br>
                                    <span class="text-xs text-gray-500">{{ maskEmail($vendor->user?->email ?? '') }}</span>
                                    @if($vendor->user?->phone)
                                        <br>
                                        <span class="text-xs text-gray-500">{{ maskPhone($vendor->user->phone) }}</span>
                                    @endif
                                </div>
                            </div>
                        </td>

                        {{-- Info --}}
                        <td class="px-6 py-4">
                            <div class="text-sm">
                                <span class="text-gray-600">Current Balance: </span>
                                <span class="font-semibold">${{ number_format($vendor->wallet?->balance ?? $vendor->balance, 2) }}</span>
                                <br>
                                <span class="text-gray-500">Last Login: </span>
                                <span class="text-gray-600">{{ $vendor->user?->last_login_at?->format('M d, Y h:i A') ?? ($vendor->user?->updated_at?->format('M d, Y h:i A') ?? 'Never') }}</span>
                            </div>
                        </td>

                        {{-- Shop Publish Toggle --}}
                        <td class="px-6 py-4 text-center">
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" class="sr-only peer vendor-status-toggle" data-id="{{ $vendor->id }}" {{ in_array($vendor->status, ['approved', 'active']) ? 'checked' : '' }}>
                                <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div>
                            </label>
                        </td>

                        {{-- Options --}}
                        <td class="px-6 py-4 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <a href="{{ route('admin.vendors.edit', $vendor) }}" class="w-8 h-8 inline-flex items-center justify-center border border-gray-300 rounded-full text-gray-500 hover:text-indigo-600 hover:border-indigo-300 hover:bg-indigo-50 transition" title="Edit">
                                    <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                </a>

                                <div class="relative inline-block" id="dropdown-{{ $vendor->id }}">
                                    <button onclick="document.getElementById('menu-{{ $vendor->id }}').classList.toggle('hidden')" class="w-8 h-8 inline-flex items-center justify-center border border-gray-300 rounded-full text-gray-500 hover:text-gray-700 hover:border-gray-400 hover:bg-gray-50 transition">
                                        <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="M12 5v.01M12 12v.01M12 19v.01"/></svg>
                                    </button>
                                    <div id="menu-{{ $vendor->id }}" class="hidden absolute right-0 mt-2 w-52 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50">
                                        <a href="{{ route('admin.vendors.show', $vendor) }}" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
                                            <svg class="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="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                            View Details
                                        </a>
                                        @if($vendor->user)
                                        <form action="{{ route('admin.login-as', $vendor->user) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="flex items-center gap-2 w-full px-4 py-2 text-sm text-indigo-700 hover:bg-indigo-50">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 16l-4-4m0 0l4-4m0 0h14m-14 8h14"/></svg>
                                                Login as Seller
                                            </button>
                                        </form>
                                        @endif
                                        @if($vendor->status !== 'approved')
                                        <form action="{{ route('admin.vendors.approve', $vendor) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="flex items-center gap-2 w-full px-4 py-2 text-sm text-green-700 hover:bg-green-50">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                                Verify This Shop
                                            </button>
                                        </form>
                                        @else
                                        <form action="{{ route('admin.vendors.reject', $vendor) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="flex items-center gap-2 w-full px-4 py-2 text-sm text-amber-700 hover:bg-amber-50">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                                                Unverify This Shop
                                            </button>
                                        </form>
                                        @endif
                                        @if($vendor->user?->banned_at)
                                        <form action="{{ route('admin.customers.unban', $vendor->user) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="flex items-center gap-2 w-full px-4 py-2 text-sm text-green-700 hover:bg-green-50">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"/></svg>
                                                Unban This Seller
                                            </button>
                                        </form>
                                        @else
                                        <form action="{{ route('admin.customers.ban', $vendor->user) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="flex items-center gap-2 w-full px-4 py-2 text-sm text-red-700 hover:bg-red-50">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                                                Ban This Seller
                                            </button>
                                        </form>
                                        @endif
                                        @if($vendor->user && !$vendor->user->hasVerifiedEmail())
                                        <form action="{{ route('admin.customers.verify-email', $vendor->user) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="flex items-center gap-2 w-full px-4 py-2 text-sm text-blue-700 hover:bg-blue-50">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                                                Verify Account Email
                                            </button>
                                        </form>
                                        @else
                                        <form action="{{ route('admin.customers.unverify-email', $vendor->user) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="flex items-center gap-2 w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                                                Unverify Account Email
                                            </button>
                                        </form>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center text-gray-400">
                            <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349m-16.5 11.65V9.35m0 0a3.001 3.001 0 003.75-.615A2.993 2.993 0 009.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 002.25 1.016c.896 0 1.7-.393 2.25-1.016a3.001 3.001 0 003.75.614m-16.5 0a3.004 3.004 0 01-.621-4.72L4.318 3.44A1.5 1.5 0 015.367 3h13.266a1.5 1.5 0 011.049.44l1.428 1.23a3.001 3.001 0 01-.621 4.72"/></svg>
                            No sellers found
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        @if($vendors->hasPages())
        <div class="px-6 py-4 border-t border-gray-200">
            {{ $vendors->links() }}
        </div>
        @endif
    </div>
</div>

<script>
document.querySelectorAll('.vendor-status-toggle').forEach(toggle => {
    toggle.addEventListener('change', function() {
        const vendorId = this.dataset.id;
        const isActive = this.checked;

        fetch(`/admin/vendors/${vendorId}/toggle-status`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
            },
            body: JSON.stringify({ status: isActive ? 'approved' : 'suspended' }),
        }).then(res => res.json()).then(data => {
            if (data.success) {
                // Success
            } else {
                this.checked = !this.checked;
                alert('Failed to update status');
            }
        }).catch(() => {
            this.checked = !this.checked;
        });
    });
});

document.addEventListener('click', function(e) {
    document.querySelectorAll('[id^="menu-"]').forEach(menu => {
        if (!menu.parentElement.contains(e.target)) {
            menu.classList.add('hidden');
        }
    });
});
</script>
@endsection