📄 index.blade.php

<x-vendor-layout>
    <x-slot name="title">Products</x-slot>

    <div class="vp-ph">
        <h1>Products</h1>
        <div class="vp-ph-actions">
            <a href="{{ route('vendor.products.create') }}" class="vp-btn vp-btn-primary">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                Add Product
            </a>
            <a href="{{ route('vendor.products.export') }}" class="vp-btn vp-btn-secondary">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                Export CSV
            </a>
        </div>
    </div>

    <div class="vp-card">
        {{-- Import bar --}}
        <div style="padding:12px 20px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px;flex-wrap:wrap">
            <form method="POST" action="{{ route('vendor.products.import') }}" enctype="multipart/form-data" style="display:flex;align-items:center;gap:10px">
                @csrf
                <label style="font-size:12px;font-weight:600;color:var(--mu)">Bulk Import:</label>
                <input type="file" name="file" accept=".csv,.xlsx" style="font-size:12px;color:var(--mu)">
                <button type="submit" class="vp-btn vp-btn-secondary vp-btn-sm">Import</button>
            </form>
        </div>

        {{-- Table --}}
        <div class="vp-table-wrap">
            <table class="vp-table">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Price</th>
                        <th>Stock</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($products as $product)
                    <tr>
                        <td>
                            <div style="display:flex;align-items:center;gap:12px">
                                <div class="vp-thumb">
                                    @if($product->thumbnail)
                                        <img src="{{ $product->thumbnail }}" alt="{{ $product->name }}">
                                    @else
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                                    @endif
                                </div>
                                <div>
                                    <div style="font-weight:600;font-size:13.5px">{{ $product->name }}</div>
                                    <div style="font-size:11px;color:var(--mu)">SKU: {{ $product->sku ?: '—' }}</div>
                                </div>
                            </div>
                        </td>
                        <td style="font-weight:700;color:var(--ac)">Rs. {{ number_format($product->price, 0) }}</td>
                        <td>
                            @if($product->stock_quantity < 5)
                                <span style="color:var(--dr);font-weight:600">{{ $product->stock_quantity }} <span style="font-weight:400;font-size:11px">(Low)</span></span>
                            @else
                                <span style="color:var(--tx)">{{ $product->stock_quantity }}</span>
                            @endif
                        </td>
                        <td>
                            <span class="vp-pill {{ $product->is_active ? 'vp-pill-green' : 'vp-pill-gray' }}">
                                {{ $product->is_active ? 'Active' : 'Draft' }}
                            </span>
                        </td>
                        <td>
                            <div class="vp-table-actions">
                                <a href="{{ route('vendor.products.edit', $product) }}" class="vp-btn vp-btn-secondary vp-btn-sm">Edit</a>
                                <form method="POST" action="{{ route('vendor.products.duplicate', $product) }}">
                                    @csrf
                                    <button type="submit" class="vp-btn vp-btn-secondary vp-btn-sm">Duplicate</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5">
                            <div class="vp-empty">
                                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#d1d5db" stroke-width="1.5" style="margin:0 auto 10px"><path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                                <div class="vp-empty-title">No products yet</div>
                                <div class="vp-empty-sub">Add your first product to start selling.</div>
                                <a href="{{ route('vendor.products.create') }}" class="vp-btn vp-btn-primary" style="margin-top:14px">Add Product</a>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="vp-pag">
            <span class="vp-pag-info">Showing {{ $products->firstItem() ?? 0 }}–{{ $products->lastItem() ?? 0 }} of {{ $products->total() }} products</span>
            {{ $products->links() }}
        </div>
    </div>
</x-vendor-layout>