@extends('master.app')
@section('title', 'Stock Barcode Print')

@section('body')
    <main class="app-content">
        <div class="card border-0 shadow-sm" style="border-radius:18px; overflow:hidden;">
            <div class="p-3 p-md-4 border-bottom d-print-none"
                style="background:linear-gradient(135deg, rgba(13,110,253,.12), rgba(102,16,242,.06));">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                    <div>
                        <h5 class="mb-1 fw-bold"><i class="fa fa-qrcode me-1"></i> Barcode Labels</h5>
                        <div class="text-muted small">
                            CODE128 • Token + Serial • A4 Print
                        </div>
                    </div>

                    <div class="d-flex flex-wrap gap-2">
                        <form class="d-flex gap-2" method="GET" action="{{ route('stock.generate_barcode', $stock->id) }}">
                            <input type="number" min="1" max="500" name="qty" value="{{ $qty }}"
                                class="form-control form-control-sm" style="width:110px;border-radius:10px;">
                            <button class="btn btn-sm btn-outline-dark" style="border-radius:10px;">
                                Reload
                            </button>
                        </form>

                        <button onclick="window.print()" class="btn btn-sm btn-primary" style="border-radius:10px;">
                            <i class="fa fa-print me-1"></i> Print
                        </button>
                    </div>
                </div>
            </div>

            <div class="card-body p-2 p-md-3">

                {{-- LABEL GRID --}}
                <div class="labels">
                    @for ($i = 1; $i <= $qty; $i++)
                        @php
                            $serial = str_pad($i, 3, '0', STR_PAD_LEFT);
                            // هر لیبل unique token:
                            $tokenSerial = $baseToken . '-' . $serial;
                        @endphp

                        <div class="label">
                            <div class="top">
                                <div class="brand">PAINT / STOCK</div>
                                <div class="small">{{ $warehouse }}</div>
                            </div>

                            <div class="name">{{ $productName }}</div>

                            <div class="rowx">
                                <div class="left">
                                    <div class="small">TOKEN</div>
                                    <div class="token">{{ $tokenSerial }}</div>
                                </div>
                                <div class="right">
                                    <div class="small text-end">QTY</div>
                                    <div class="token text-end">1</div>
                                </div>
                            </div>

                            <svg class="barcode" id="barcode-{{ $i }}" data-code="{{ $tokenSerial }}"></svg>

                            <div class="footer">
                                <span class="small">Date: {{ date('Y-m-d') }}</span>
                                <span class="small">ID: {{ $stock->id }}</span>
                            </div>
                        </div>
                    @endfor
                </div>

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

@section('pageJs')
    {{-- JSBarcode (CODE128) --}}
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>

    <script>
        document.querySelectorAll('svg.barcode').forEach((el) => {
            const code = el.getAttribute('data-code');

            JsBarcode(el, code, {
                format: "CODE128",
                lineColor: "#000",
                width: 1.2,
                height: 28,
                displayValue: false,
                margin: 0
            });
        });

        $(".app-menu").removeClass("active");
        $("#nav_stocki").addClass("active");
        $("#stocki").addClass("is-expanded");
    </script>

    <style>
        /* ====== PRINT SETTINGS ====== */
        @page {
            size: A4;
            margin: 8mm;
        }

        .labels {
            display: flex;
            flex-wrap: wrap;
            gap: 4mm;
        }

        /* LABEL SIZE: تغییر یې کړه د خپل sticker مطابق */
        .label {
            width: 48mm;
            height: 30mm;
            border: 1px solid #111;
            border-radius: 6px;
            padding: 2.2mm;
            overflow: hidden;
            background: #fff;
            page-break-inside: avoid;
        }

        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1mm;
        }

        .brand {
            font-weight: 800;
            font-size: 9px;
            letter-spacing: .5px;
        }

        .small {
            font-size: 8px;
            color: #111;
        }

        .name {
            font-size: 8.5px;
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 1mm;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .rowx {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 1mm;
        }

        .token {
            font-size: 9px;
            font-weight: 900;
            line-height: 1;
        }

        .barcode {
            width: 100%;
            height: 11mm;
        }

        .footer {
            display: flex;
            justify-content: space-between;
            margin-top: 1mm;
        }

        /* Print clean */
        @media print {
            .card {
                box-shadow: none !important;
            }

            .label {
                break-inside: avoid;
            }
        }
    </style>
@endsection