@extends('layouts.app')
@section('title', 'Products - HBL Product Scraper')
@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <div><h1 class="h3 mb-1">Products</h1><div class="text-muted">{{ number_format($products->total()) }} products match the current filters.</div></div>
    <a class="btn btn-outline-success" href="{{ route('products.export', request()->query()) }}">Export CSV</a>
</div>
<form method="get" class="card card-body mb-3"><div class="row g-2">
    <div class="col-md-3"><input class="form-control" name="search" value="{{ request('search') }}" placeholder="Search product or brand"></div>
    <div class="col-md-2"><select class="form-select" name="brand"><option value="">All brands</option>@foreach($brands as $brand)<option @selected(request('brand') === $brand)>{{ $brand }}</option>@endforeach</select></div>
    <div class="col-md-2"><select class="form-select" name="category"><option value="">All categories</option>@foreach($categories as $category)<option @selected(request('category') === $category)>{{ $category }}</option>@endforeach</select></div>
    <input type="hidden" name="tag" value="{{ request('tag') }}">
    <div class="col-md-2"><select class="form-select" name="details_status"><option value="">Any detail status</option>@foreach(['pending','running','completed','failed'] as $s)<option value="{{ $s }}" @selected(request('details_status') === $s)>Details: {{ ucfirst($s) }}</option>@endforeach</select></div>
    <div class="col-md-2"><select class="form-select" name="images_status"><option value="">Any image status</option>@foreach(['pending','running','completed','failed'] as $s)<option value="{{ $s }}" @selected(request('images_status') === $s)>Images: {{ ucfirst($s) }}</option>@endforeach</select></div>
    <div class="col-md-1 d-flex gap-2"><button class="btn btn-primary flex-grow-1">Filter</button><a class="btn btn-outline-secondary" href="{{ route('products.index') }}">Clear</a></div>
</div></form>
@if(request('tag') || request('category'))
    <div class="alert alert-info d-flex justify-content-between align-items-center">
        <div>
            Active taxonomy filter:
            @if(request('category')) <span class="badge text-bg-primary">Category: {{ request('category') }}</span> @endif
            @if(request('tag')) <span class="badge text-bg-secondary">Tag: {{ request('tag') }}</span> @endif
        </div>
        <a class="btn btn-sm btn-outline-primary" href="{{ route('taxonomy.index') }}">Back to Tags & Categories</a>
    </div>
@endif
<form method="post" action="{{ route('scrape.bulk') }}" id="bulk-form">
@csrf
<div class="card">
    <div class="card-header bg-white d-flex flex-wrap gap-2 align-items-center">
        <select class="form-select w-auto" name="action" required><option value="details">Scrape details</option><option value="images">Download images</option></select>
        <label class="input-group w-auto"><span class="input-group-text">Delay ms</span><input class="form-control" style="width:100px" type="number" name="delay_ms" value="{{ config('scraper.delay_ms') }}" min="0" max="30000"></label>
        <label class="form-check ms-2"><input class="form-check-input" type="checkbox" name="force" value="1"><span class="form-check-label">Force image re-download</span></label>
        <button class="btn btn-success ms-auto">Run for selected products</button>
    </div>
    <div class="table-responsive"><table class="table table-hover mb-0">
        <thead><tr><th><input class="form-check-input" id="select-all" type="checkbox"></th><th>Product</th><th>Brand</th><th>Category</th><th>Details</th><th>Images</th><th></th></tr></thead>
        <tbody>@forelse($products as $product)
        <tr><td><input class="form-check-input product-check" type="checkbox" name="product_ids[]" value="{{ $product->id }}"></td>
            <td><div class="d-flex align-items-center gap-2">@if($product->thumbnail_url)<img class="product-thumb rounded border" src="{{ $product->thumbnail_url }}" alt="">@endif<div><strong>{{ $product->name }}</strong><div class="small text-muted">{{ $product->source_id ?: 'No source ID' }}</div></div></div></td>
            <td>{{ $product->brand ?: '—' }}</td><td>{{ $product->category ?: '—' }}</td>
            <td><span class="badge text-bg-{{ $product->details_status === 'completed' ? 'success' : ($product->details_status === 'failed' ? 'danger' : 'secondary') }}">{{ $product->details_status }}</span></td>
            <td><span class="badge text-bg-{{ $product->images_status === 'completed' ? 'success' : ($product->images_status === 'failed' ? 'danger' : 'secondary') }}">{{ $product->images_status }}</span></td>
            <td><a class="btn btn-sm btn-outline-primary" href="{{ route('products.show', $product) }}">View</a></td></tr>
        @empty <tr><td colspan="7" class="text-center py-5 text-muted">No products found. Run product discovery from the dashboard.</td></tr> @endforelse</tbody>
    </table></div>
</div>
<div class="mt-3">{{ $products->links() }}</div>
</form>
@endsection
@push('scripts')<script>
document.getElementById('select-all')?.addEventListener('change', e => document.querySelectorAll('.product-check').forEach(c => c.checked = e.target.checked));
document.getElementById('bulk-form')?.addEventListener('submit', e => { if (!document.querySelector('.product-check:checked')) { e.preventDefault(); alert('Select at least one product.'); } });
</script>@endpush