@extends('layouts.admin')

@section('title', 'Product Management')

@section('content')
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
    <div>
        <h1 class="serif" style="font-size: 26px; margin: 0; color: #0f172a;">Product Catalog Management</h1>
        <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">Manage store products, prices, variants, inventory, and visibility.</p>
    </div>
    <a href="{{ route('admin.products.create') }}" class="btn-admin btn-primary">
        <i data-lucide="plus" style="width: 18px;"></i>
        <span>Add Product</span>
    </a>
</div>

<!-- Filters Bar -->
<div class="admin-card" style="margin-bottom: 24px; padding: 16px 20px;">
    <form action="{{ route('admin.products.index') }}" method="GET" style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
        <div style="flex: 1; min-width: 200px;">
            <input type="text" name="search" value="{{ $search }}" placeholder="Search by product name or tag..." class="form-control">
        </div>
        <div style="width: 200px;">
            <select name="category_id" class="form-control" onchange="this.form.submit()">
                <option value="">All Categories</option>
                @foreach($categories as $cat)
                    <option value="{{ $cat->id }}" {{ $category_id == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="btn-admin btn-secondary">Filter</button>
        @if($search || $category_id)
            <a href="{{ route('admin.products.index') }}" class="btn-admin btn-secondary" style="color: #b91c1c;">Clear</a>
        @endif
    </form>
</div>

<!-- Products Table -->
<div class="admin-card">
    @if($products->isEmpty())
        <div style="padding: 40px; text-align: center; color: var(--text-muted);">
            No products found matching your filter criteria.
        </div>
    @else
        <div style="overflow-x: auto;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th style="width: 70px;">Image</th>
                        <th>Product Name & Tag</th>
                        <th>Category</th>
                        <th>Price (₹)</th>
                        <th>Stock</th>
                        <th>Badge</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($products as $prod)
                        <tr>
                            <td>
                                <div style="width: 52px; height: 52px; background: #f1f5f9; border-radius: 10px; overflow: hidden; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center;">
                                    @if($prod->image)
                                        <img src="{{ asset($prod->image) }}" alt="{{ $prod->name }}" style="width: 100%; height: 100%; object-fit: cover;">
                                    @else
                                        <i data-lucide="package" style="width: 20px; color: var(--primary);"></i>
                                    @endif
                                </div>
                            </td>
                            <td>
                                <strong style="color: #0f172a; font-size: 15px;">{{ $prod->name }}</strong>
                                <div style="font-size: 12px; color: var(--text-muted); margin-top: 2px;">{{ $prod->tag ?? 'No tagline' }}</div>
                            </td>
                            <td>
                                <span class="badge" style="background: #f1f5f9; color: #334155;">{{ $prod->category->name ?? 'Unassigned' }}</span>
                            </td>
                            <td>
                                <strong>₹{{ number_format($prod->price, 2) }}</strong>
                                @if($prod->compare_at)
                                    <div style="font-size: 11px; color: var(--text-muted); text-decoration: line-through;">₹{{ number_format($prod->compare_at, 2) }}</div>
                                @endif
                            </td>
                            <td>
                                <span class="badge {{ $prod->stock <= 10 ? 'badge-pending' : 'badge-delivered' }}">
                                    {{ $prod->stock }} units
                                </span>
                            </td>
                            <td>
                                @if($prod->badge)
                                    <span class="badge" style="background: #fef3c7; color: #b45309;">{{ $prod->badge }}</span>
                                @else
                                    <span style="color: var(--text-muted); font-size: 12px;">—</span>
                                @endif
                            </td>
                            <td>
                                <form action="{{ route('admin.products.toggle', $prod) }}" method="POST" style="margin:0;">
                                    @csrf
                                    <button type="submit" class="badge {{ $prod->is_active ? 'badge-active' : 'badge-inactive' }}" style="cursor: pointer; border: none;">
                                        {{ $prod->is_active ? 'Active' : 'Disabled' }}
                                    </button>
                                </form>
                            </td>
                            <td>
                                <div style="display: flex; gap: 8px;">
                                    <a href="{{ route('admin.products.show', $prod) }}" class="btn-admin btn-secondary" style="padding: 6px 10px; font-size: 12px; background: #e0eff9; color: #186297; border-color: #b9dff3;">
                                        <i data-lucide="eye" style="width: 14px;"></i> View
                                    </a>
                                    <a href="{{ route('admin.products.edit', $prod) }}" class="btn-admin btn-secondary" style="padding: 6px 10px; font-size: 12px;">
                                        <i data-lucide="edit-3" style="width: 14px;"></i> Edit
                                    </a>
                                    <form action="{{ route('admin.products.destroy', $prod) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this product?')" style="margin: 0;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn-admin btn-danger" style="padding: 6px 10px; font-size: 12px;">
                                            <i data-lucide="trash-2" style="width: 14px;"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

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