@extends('layouts.layout-horizontal')

@section('title', 'Stock Stickers')

@section('css')
<style>
    .stock-sticker-card .card-body { overflow: visible; }
    .stock-sticker-card .ts-dropdown { z-index: 1050; }
</style>
@endsection

@section('content')
<div class="row justify-content-center">
    <div class="col-md-10">
        <div class="card stock-sticker-card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="mb-0">Stock Sticker Printing</h5>
            </div>
            <div class="card-body">

                {{-- Product Search --}}
                <div class="mb-3">
                    <label class="form-label">Search Product</label>
                    <select id="productSearch" placeholder="Type product ID or name...">
                        <option value="">Select a product...</option>
                        @foreach($products as $p)
                            <option value="{{ $p->id }}">{{ $p->product_id }} — {{ $p->name }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- Print Options (hidden until product selected) --}}
                <div id="printOptions" class="d-none">
                    <form id="printForm" method="POST" action="" target="_blank">
                        @csrf
                        <div class="row g-3 align-items-end">
                            <div class="col-md-4">
                                <label class="form-label">Size</label>
                                <select name="size" class="form-select" required>
                                    <option value="small">Small</option>
                                    <option value="medium" selected>Medium</option>
                                    <option value="large">Large</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Pages</label>
                                <input type="number" name="pages" class="form-control" min="1" max="50" value="1" required>
                            </div>
                            <div class="col-md-4">
                                <button type="submit" class="btn btn-primary w-100" id="printBtn">
                                    <i class="ph-duotone ph-printer me-1"></i> Print Stickers
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const printOptions = document.getElementById('printOptions');
    const printForm    = document.getElementById('printForm');
    const printBaseUrl = @json(route('stock-stickers.print', ['product' => '__ID__']));

    new TomSelect('#productSearch', {
        allowEmptyOption: true,
        maxOptions: null,
        dropdownParent: 'body',
        onChange: function(productId) {
            if (!productId) {
                printOptions.classList.add('d-none');
                return;
            }
            printForm.action = printBaseUrl.replace('__ID__', productId);
            printOptions.classList.remove('d-none');
        }
    });
</script>
@endpush