@extends('layouts.admin')

@section('page-title', 'Products')

@section('content')
<div class="space-y-6">
    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Products</h2>
            <p class="text-sm text-gray-500 mt-1">You have total {{ $products->total() }} products</p>
        </div>
        <div class="flex items-center gap-3">
            <form id="bulk-delete-form" action="{{ route('admin.products.bulk-delete') }}" method="POST" class="hidden">
                @csrf
                @method('DELETE')
                <div id="bulk-delete-ids"></div>
            </form>
            <button id="bulk-delete-btn" onclick="confirmBulkDelete()" class="hidden inline-flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition-colors shadow-sm">
                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                Delete Selected (<span id="selected-count">0</span>)
            </button>
            <a href="{{ route('admin.products.create') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition-colors shadow-sm">
                <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 4v16m8-8H4"/></svg>
                Add New Product
            </a>
            <div class="relative" id="add-product-dropdown">
                <button onclick="document.getElementById('add-product-menu').classList.toggle('hidden')" class="inline-flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 text-sm font-medium rounded-lg transition-colors shadow-sm">
                    <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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"/></svg>
                </button>
                <div id="add-product-menu" class="hidden absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50">
                    <a href="{{ route('admin.products.create') }}?type=digital" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        <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="2" d="M12 4v16m8-8H4"/></svg>
                        Add Digital Product
                    </a>
                    <a href="{{ route('admin.products.create') }}?type=catalog" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        <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="2" d="M12 4v16m8-8H4"/></svg>
                        Add Catalog Product
                    </a>
                    <a href="{{ route('admin.products.create') }}?type=classified" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        <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="2" d="M12 4v16m8-8H4"/></svg>
                        Add Classified Product
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Status Tabs --}}
    <div class="royal-card overflow-hidden">
        <div class="p-4">
            <nav class="flex gap-1 overflow-x-auto">
                <a href="{{ route('admin.products.index') }}" class="px-4 py-2 text-sm font-medium rounded-lg whitespace-nowrap transition-colors {{ !request('status') ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:bg-gray-100' }}">
                    All <span class="ml-1 px-2 py-0.5 bg-white/20 rounded-full text-xs">{{ $products->total() }}</span>
                </a>
                <a href="{{ route('admin.products.index', ['status' => 'published']) }}" class="px-4 py-2 text-sm font-medium rounded-lg whitespace-nowrap transition-colors {{ request('status') === 'published' ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:bg-gray-100' }}">
                    Published <span class="ml-1 px-2 py-0.5 bg-white/20 rounded-full text-xs">{{ \App\Models\Product::where('status', 'published')->count() }}</span>
                </a>
                <a href="{{ route('admin.products.index', ['status' => 'draft']) }}" class="px-4 py-2 text-sm font-medium rounded-lg whitespace-nowrap transition-colors {{ request('status') === 'draft' ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:bg-gray-100' }}">
                    Unpublished <span class="ml-1 px-2 py-0.5 bg-white/20 rounded-full text-xs">{{ \App\Models\Product::whereIn('status', ['draft', 'rejected'])->count() }}</span>
                </a>
                <a href="{{ route('admin.products.index', ['status' => 'pending']) }}" class="px-4 py-2 text-sm font-medium rounded-lg whitespace-nowrap transition-colors {{ request('status') === 'pending' ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:bg-gray-100' }}">
                    Pending <span class="ml-1 px-2 py-0.5 bg-white/20 rounded-full text-xs">{{ \App\Models\Product::where('status', 'pending')->count() }}</span>
                </a>
            </nav>
        </div>
    </div>

    {{-- Filters & Table --}}
    <div class="royal-card overflow-hidden">
        {{-- Filter Bar --}}
        <div class="p-4 border-b border-gray-200">
            <form action="{{ route('admin.products.index') }}" method="GET" class="flex flex-col sm:flex-row gap-3">
                <select name="vendor" class="px-3 py-2 border border-gray-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none w-full sm:w-48">
                    <option value="">All Vendors</option>
                    @foreach($vendors as $vendor)
                        <option value="{{ $vendor->id }}" {{ request('vendor') == $vendor->id ? 'selected' : '' }}>{{ $vendor->name }}</option>
                    @endforeach
                </select>
                <select name="category" class="px-3 py-2 border border-gray-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none w-full sm:w-48">
                    <option value="">All Categories</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @endforeach
                </select>
                <select name="sort" class="px-3 py-2 border border-gray-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none w-full sm:w-48">
                    <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Latest On Top</option>
                    <option value="oldest" {{ request('sort') == 'oldest' ? 'selected' : '' }}>Oldest On Top</option>
                    <option value="price_high" {{ request('sort') == 'price_high' ? 'selected' : '' }}>Price (High &gt; Low)</option>
                    <option value="price_low" {{ request('sort') == 'price_low' ? 'selected' : '' }}>Price (Low &gt; High)</option>
                    <option value="name" {{ request('sort') == 'name' ? 'selected' : '' }}>Name (A-Z)</option>
                </select>
                <div class="flex gap-2 flex-1">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search products..." class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">
                    <button type="submit" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors">
                        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    </button>
                </div>
            </form>
        </div>

        {{-- Table --}}
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th class="text-left py-3 px-4 w-12">
                            <input type="checkbox" id="select-all" class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 cursor-pointer" onchange="toggleSelectAll(this)">
                        </th>
                        <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600 w-12">#</th>
                        <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Title</th>
                        <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Vendor</th>
                        <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Detail</th>
                        <th class="text-center py-3 px-4 text-sm font-semibold text-gray-600">Warehouse</th>
                        <th class="text-center py-3 px-4 text-sm font-semibold text-gray-600">Stock</th>
                        <th class="text-center py-3 px-4 text-sm font-semibold text-gray-600">Published</th>
                        <th class="text-center py-3 px-4 text-sm font-semibold text-gray-600">Featured</th>
                        <th class="text-center py-3 px-4 text-sm font-semibold text-gray-600">Options</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($products as $index => $product)
                        <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                            <td class="py-3 px-4">
                                <input type="checkbox" class="product-checkbox w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 cursor-pointer" value="{{ $product->id }}" onchange="updateSelectedCount()">
                            </td>
                            <td class="py-3 px-4 text-sm text-gray-500">{{ $products->firstItem() + $index }}</td>
                            <td class="py-3 px-4">
                                <div class="flex items-center gap-3">
                                    @if($product->images->count() > 0)
                                        <img src="{{ asset('storage/' . $product->images->first()->path) }}" alt="{{ $product->name }}" class="w-10 h-10 rounded-lg object-cover">
                                    @else
                                        <div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400">
                                            <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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                        </div>
                                    @endif
                                    <div>
                                        <a href="{{ route('admin.products.show', $product) }}" class="text-sm font-medium text-gray-900 hover:text-indigo-600">{{ $product->name }}</a>
                                    </div>
                                </div>
                            </td>
                            <td class="py-3 px-4">
                                @if($product->vendor)
                                    <span class="inline-flex items-center px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">{{ $product->vendor->name }}</span>
                                @else
                                    <span class="inline-flex items-center px-2 py-1 bg-amber-100 text-amber-800 text-xs font-medium rounded-full">Admin Product</span>
                                @endif
                            </td>
                            <td class="py-3 px-4">
                                <p class="text-sm text-gray-600">Price: <span class="font-semibold">${{ number_format($product->price, 2) }}</span></p>
                                <p class="text-xs text-gray-500">Sales: {{ $product->sales_count ?? 0 }} | Rating: {{ $product->rating ?? 0 }}</p>
                            </td>
                            <td class="py-3 px-4 text-center">
                                @if(($product->warehouse ?? 'ghana') === 'china')
                                    <span class="inline-flex items-center gap-1 px-2 py-1 bg-red-50 text-red-700 text-xs font-medium rounded-full">🇨🇳 China</span>
                                @else
                                    <span class="inline-flex items-center gap-1 px-2 py-1 bg-green-50 text-green-700 text-xs font-medium rounded-full">🇬🇭 Ghana</span>
                                @endif
                            </td>
                            <td class="py-3 px-4 text-center">
                                <span class="text-sm font-mono {{ $product->stock_quantity <= 5 ? 'text-red-600' : 'text-gray-600' }}">{{ $product->stock_quantity }}</span>
                            </td>
                            <td class="py-3 px-4 text-center">
                                <form action="{{ route('admin.products.status', $product) }}" method="POST" class="inline">
                                    @csrf
                                    <input type="hidden" name="status" value="{{ $product->status === 'published' ? 'draft' : 'published' }}">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer" {{ $product->status === 'published' ? 'checked' : '' }} onchange="this.form.submit()">
                                        <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>
                                </form>
                            </td>
                            <td class="py-3 px-4 text-center">
                                <form action="{{ route('admin.products.featured', $product) }}" method="POST" class="inline">
                                    @csrf
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer" {{ $product->is_featured ? 'checked' : '' }} onchange="this.form.submit()">
                                        <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>
                                </form>
                            </td>
                            <td class="py-3 px-4">
                                <div class="flex items-center gap-1">
                                    <a href="{{ route('admin.products.edit', $product) }}" class="p-1.5 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors" 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>
                                    <a href="{{ route('admin.products.show', $product) }}" target="_blank" class="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="View">
                                        <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                                    </a>
                                    <div class="relative" id="options-{{ $product->id }}">
                                        <button onclick="document.getElementById('options-menu-{{ $product->id }}').classList.toggle('hidden')" class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                                            <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.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
                                        </button>
                                        <div id="options-menu-{{ $product->id }}" class="hidden absolute right-0 mt-1 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50">
                                            <a href="{{ route('admin.products.show', $product) }}" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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 Product
                                            </a>
                                            <a href="{{ route('admin.products.edit', $product) }}" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                <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>
                                                Edit Product
                                            </a>
                                            <a href="{{ route('admin.products.index', ['status' => 'pending']) }}" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                <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="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>
                                                Set Pending
                                            </a>
                                            <hr class="my-1 border-gray-200">
                                            <form action="{{ route('admin.products.destroy', $product) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this product?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="flex items-center gap-2 w-full px-4 py-2 text-sm text-red-600 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="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                                    Delete
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="py-12 text-center">
                                <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                                <p class="text-gray-500 font-medium">No products found</p>
                                <p class="text-sm text-gray-400 mt-1">Try adjusting your filters or add a new product</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

<script>
document.addEventListener('click', function(e) {
    document.querySelectorAll('[id^="options-menu-"]').forEach(menu => {
        if (!menu.parentElement.contains(e.target)) {
            menu.classList.add('hidden');
        }
    });
    const addMenu = document.getElementById('add-product-menu');
    if (addMenu && !document.getElementById('add-product-dropdown').contains(e.target)) {
        addMenu.classList.add('hidden');
    }
});

function toggleSelectAll(checkbox) {
    const checkboxes = document.querySelectorAll('.product-checkbox');
    checkboxes.forEach(cb => {
        cb.checked = checkbox.checked;
        cb.closest('tr').classList.toggle('bg-indigo-50', checkbox.checked);
    });
    updateSelectedCount();
}

function updateSelectedCount() {
    const checkboxes = document.querySelectorAll('.product-checkbox:checked');
    const count = checkboxes.length;
    document.getElementById('selected-count').textContent = count;
    const bulkDeleteBtn = document.getElementById('bulk-delete-btn');
    bulkDeleteBtn.classList.toggle('hidden', count === 0);

    checkboxes.forEach(cb => {
        cb.closest('tr').classList.toggle('bg-indigo-50', cb.checked);
    });

    document.querySelectorAll('.product-checkbox:not(:checked)').forEach(cb => {
        cb.closest('tr').classList.remove('bg-indigo-50');
    });

    const selectAll = document.getElementById('select-all');
    const totalCheckboxes = document.querySelectorAll('.product-checkbox');
    selectAll.checked = totalCheckboxes.length > 0 && count === totalCheckboxes.length;
}

function confirmBulkDelete() {
    const selected = document.querySelectorAll('.product-checkbox:checked');
    if (selected.length === 0) return;

    const count = selected.length;
    if (confirm(`Are you sure you want to delete ${count} product(s)? This action cannot be undone.`)) {
        const form = document.getElementById('bulk-delete-form');
        const idsContainer = document.getElementById('bulk-delete-ids');
        idsContainer.innerHTML = '';
        selected.forEach(cb => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'ids[]';
            input.value = cb.value;
            idsContainer.appendChild(input);
        });
        form.submit();
    }
}
</script>
@endsection