@extends('layouts.admin')

@section('title', 'Products & Catalog | Omni Trade')
@section('page_title', 'Products & Dropship Inventory')

@section('content')
<div style="display:flex; flex-direction:column; gap:24px;">
    <!-- Top Action Bar -->
    <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;">
        <div style="display:flex; gap:12px;">
            <a href="{{ route('admin.import.index') }}" class="btn btn-primary">
                <i data-lucide="download-cloud" style="width:16px;"></i> Import from AliExpress / Amazon
            </a>
            <a href="{{ route('admin.products.create') }}" class="btn btn-outline">
                <i data-lucide="plus" style="width:16px;"></i> Add Manual Product
            </a>
        </div>

        <form action="{{ route('admin.products.index') }}" method="GET" style="display:flex; gap:8px;">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search products..." style="width:220px; padding:7px 12px; font-size:13px;">
            <button type="submit" class="btn btn-outline btn-sm">Search</button>
        </form>
    </div>

    <!-- Products Table -->
    <div class="card">
        <div style="overflow-x:auto;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Category</th>
                        <th>Supplier</th>
                        <th>Supplier Cost</th>
                        <th>Store Price</th>
                        <th>Gross Margin</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;">
                                    <img src="{{ $product->primary_image }}" alt="" style="width:48px; height:48px; border-radius:6px; object-fit:cover; border:1px solid var(--admin-border);">
                                    <div>
                                        <a href="{{ route('store.product', $product->slug) }}" target="_blank" style="font-weight:700; color:var(--admin-text-main); font-size:13.5px;">
                                            {{ Str::limit($product->title, 45) }}
                                        </a>
                                        <div style="font-size:11px; color:var(--admin-text-muted); font-family:monospace;">
                                            SKU: {{ $product->sku }} &bull; {{ $product->variants->count() }} variant(s)
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span style="font-size:12px; color:var(--admin-text-muted);">{{ $product->category?->name ?? 'None' }}</span>
                            </td>
                            <td>
                                <span class="badge badge-cyan">{{ $product->supplier?->name ?? 'Direct' }}</span>
                            </td>
                            <td>${{ number_format($product->cost_price, 2) }}</td>
                            <td style="font-weight:700; color:var(--admin-text-main);">${{ number_format($product->price, 2) }}</td>
                            <td style="color:#059669; font-weight:700;">
                                +${{ number_format($product->profit_margin, 2) }} ({{ $product->margin_percentage }}%)
                            </td>
                            <td>{{ $product->stock_quantity }}</td>
                            <td>
                                <span class="badge {{ $product->is_active ? 'badge-success' : 'badge-danger' }}">
                                    {{ $product->is_active ? 'Active' : 'Hidden' }}
                                </span>
                            </td>
                            <td>
                                <div style="display:flex; gap:8px;">
                                    <a href="{{ route('admin.products.edit', $product->id) }}" class="btn btn-outline btn-sm">
                                        Edit
                                    </a>
                                    <form action="{{ route('admin.products.destroy', $product->id) }}" method="POST" onsubmit="return confirm('Remove product?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" style="background:none; border:none; color:#ef4444; cursor:pointer; font-size:12px; padding:6px;">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" style="text-align:center; padding:40px; color:var(--admin-text-muted);">
                                No products found. Click "Import from AliExpress / Amazon" to add items!
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div style="margin-top:20px;">
            {{ $products->links() }}
        </div>
    </div>
</div>
@endsection