@extends('layouts.admin')
@section('title', 'Products')
@section('content')
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">Products</h1>
    <a href="{{ route('admin.products.create') }}" class="bg-brand text-white px-4 py-2 rounded-lg text-sm font-semibold">+ New Product</a>
</div>

<form method="POST" action="{{ route('admin.products.bulk-action') }}" x-data="{ checked: [] }">
    @csrf
    <div class="bg-white rounded-xl shadow-sm overflow-x-auto">
        <div class="p-3 flex gap-2 border-b">
            <select name="bulk_action" class="border rounded-lg px-2 py-1 text-sm">
                <option value="activate">Activate</option>
                <option value="deactivate">Deactivate</option>
                <option value="feature">Mark Featured</option>
                <option value="unfeature">Unmark Featured</option>
                <option value="delete">Delete</option>
            </select>
            <button class="border rounded-lg px-3 py-1 text-sm">Apply to selected</button>
        </div>
        <table class="w-full text-sm">
            <thead><tr class="text-left text-gray-500 border-b bg-gray-50">
                <th class="p-3"><input type="checkbox" @click="document.querySelectorAll('.row-check').forEach(c=>c.checked=$event.target.checked)"></th>
                <th>Image</th><th>Title</th><th>Price</th><th>Stock</th><th>Featured</th><th>Active</th><th></th>
            </tr></thead>
            <tbody>
            @foreach($products as $product)
            <tr class="border-b">
                <td class="p-3"><input type="checkbox" name="product_ids[]" value="{{ $product->id }}" class="row-check"></td>
                <td class="p-2"><img src="{{ $product->main_image ? asset('storage/'.$product->main_image) : '' }}" class="w-10 h-10 rounded object-cover bg-gray-100"></td>
                <td>{{ $product->title }}</td>
                <td>৳{{ number_format($product->displayPrice(), 0) }}</td>
                <td>{{ $product->stock_qty }}</td>
                <td>
                    <form method="POST" action="{{ route('admin.products.toggle-featured', $product) }}">@csrf
                        <button class="text-xs px-2 py-1 rounded-full {{ $product->is_featured ? 'bg-brand text-white' : 'bg-gray-100' }}">{{ $product->is_featured ? 'Yes' : 'No' }}</button>
                    </form>
                </td>
                <td>
                    <form method="POST" action="{{ route('admin.products.toggle-active', $product) }}">@csrf
                        <button class="text-xs px-2 py-1 rounded-full {{ $product->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">{{ $product->is_active ? 'In stock' : 'Out' }}</button>
                    </form>
                </td>
                <td class="p-2 space-x-2 whitespace-nowrap">
                    <a href="{{ route('admin.products.edit', $product) }}" class="text-brand">Edit</a>
                    <form method="POST" action="{{ route('admin.products.destroy', $product) }}" class="inline" onsubmit="return confirm('Delete this product?')">@csrf @method('DELETE')<button class="text-red-500">Delete</button></form>
                </td>
            </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</form>
<div class="mt-4">{{ $products->links() }}</div>
@endsection