@extends('layouts.admin')

@section('title', 'Load Products into Audit')

@section('content')
<div class="admin-page-header">
    <h1>Load Products — {{ $stock_audit->audit_name }}</h1>
    <a href="{{ route('admin.stock-audit.show', $stock_audit) }}" class="admin-btn-primary" style="background: #6c757d;">
        <i class="bi bi-arrow-left"></i> Back
    </a>
</div>

<div class="admin-card">
    <div class="card-body">
        <h3 class="mb-4" style="color: var(--admin-primary);">
            <i class="bi bi-boxes"></i> Select products to include
        </h3>
        <form action="{{ route('admin.stock-audit.load-products.store', $stock_audit) }}" method="POST" id="loadProductsForm">
            @csrf
            <div class="mb-4">
                <label class="admin-form-label">Scope *</label>
                <div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="scope" id="scope_all" value="all" {{ old('scope', 'all') === 'all' ? 'checked' : '' }}>
                        <label class="form-check-label" for="scope_all">All Products (single + all variants)</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="scope" id="scope_category" value="category" {{ old('scope') === 'category' ? 'checked' : '' }}>
                        <label class="form-check-label" for="scope_category">By Category</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="scope" id="scope_skus" value="skus" {{ old('scope') === 'skus' ? 'checked' : '' }}>
                        <label class="form-check-label" for="scope_skus">Selected SKUs / Products</label>
                    </div>
                </div>
            </div>
            <div class="mb-3" id="category_ids_wrap" style="display: {{ old('scope') === 'category' ? 'block' : 'none' }};">
                <label class="admin-form-label">Categories</label>
                <select name="category_ids[]" class="form-select admin-form-control" multiple size="6">
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ in_array($cat->id, old('category_ids', [])) ? 'selected' : '' }}>{{ $cat->name }}</option>
                    @endforeach
                </select>
                <small class="text-muted">Hold Ctrl/Cmd to select multiple</small>
            </div>
            <div class="mb-3" id="product_ids_wrap" style="display: {{ old('scope') === 'skus' ? 'block' : 'none' }};">
                <label class="admin-form-label">Product IDs (comma-separated)</label>
                <input type="text" name="product_ids_text" class="admin-form-control form-control" placeholder="e.g. 1,2,3" value="{{ is_array(old('product_ids')) ? implode(',', old('product_ids')) : old('product_ids_text') }}">
                <small class="text-muted">Enter product IDs to include (single or variant product IDs)</small>
            </div>
            <div class="mt-3">
                <button type="submit" class="admin-btn-primary">
                    <i class="bi bi-boxes"></i> Load Products
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.querySelectorAll('input[name="scope"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        document.getElementById('category_ids_wrap').style.display = this.value === 'category' ? 'block' : 'none';
        document.getElementById('product_ids_wrap').style.display = this.value === 'skus' ? 'block' : 'none';
    });
});
document.getElementById('loadProductsForm').addEventListener('submit', function(e) {
    if (document.querySelector('input[name="scope"]:checked').value === 'skus') {
        var text = document.querySelector('input[name="product_ids_text"]').value.trim();
        if (text) {
            var ids = text.split(/[\s,]+/).map(function(x) { return parseInt(x, 10); }).filter(function(n) { return !isNaN(n) && n > 0; });
            ids.forEach(function(id) {
                var h = document.createElement('input');
                h.type = 'hidden';
                h.name = 'product_ids[]';
                h.value = id;
                document.getElementById('loadProductsForm').appendChild(h);
            });
        }
    }
});
</script>
@endpush
@endsection