@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-3">
                                <label class="form-label">Sheet</label>
                                <input type="hidden" name="size" value="st24">
                                <input type="text" class="form-control" value="24L — 24 per A4 (3 × 8)" readonly>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Pieces in packaging</label>
                                <input type="number" name="pieces_per_pack" id="piecesPerPack" class="form-control"
                                       min="1" max="100000" placeholder="e.g. 12">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Stickers</label>
                                <input type="number" name="quantity" id="quantityInput" class="form-control" min="1" max="1200" value="10" required>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Start at</label>
                                <input type="number" name="start_position" id="startPosition" class="form-control" min="1" max="24" value="1">
                            </div>
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-primary w-100" id="printBtn">
                                    <i class="ph-duotone ph-printer me-1"></i> Print
                                </button>
                            </div>
                            <div class="col-md-12">
                                <small class="text-muted">
                                    Sticker 66.252 × 34.008 mm. <strong>Stickers</strong> is the exact number printed, so 10 gives 10 labels only.
                                    <strong>Start at</strong> skips used labels on a part-used sheet (1 = top-left).
                                    <strong>Pieces in packaging</strong> is optional and is printed on each sticker.
                                    Sheets needed: <strong id="sheetCount">1</strong>
                                </small>
                            </div>
                            <div class="col-md-12">
                                <div class="alert alert-warning py-2 mb-0" role="alert">
                                    <i class="ph-duotone ph-warning-circle me-1"></i>
                                    In the PDF print dialog choose <strong>Actual size / 100%</strong> and A4 paper.
                                    Do not use <strong>Fit</strong> or <strong>Shrink oversized pages</strong>, because those settings change the label margins and spacing.
                                </div>
                            </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');
        }
    });

    // Show how many A4 sheets the requested sticker count will use.
    // Skipped labels on a part-used sheet count towards the first sheet.
    const quantityInput = document.getElementById('quantityInput');
    const startPosition = document.getElementById('startPosition');
    const sheetCount    = document.getElementById('sheetCount');

    function recountSheets() {
        const qty  = parseInt(quantityInput.value, 10) || 0;
        const skip = (parseInt(startPosition.value, 10) || 1) - 1;
        sheetCount.textContent = Math.max(1, Math.ceil((qty + skip) / 24));
    }

    quantityInput.addEventListener('input', recountSheets);
    startPosition.addEventListener('input', recountSheets);
    recountSheets();
</script>
@endpush