@extends('layouts.print')

@section('content')
    <div class="mb-6 flex flex-wrap items-center justify-between gap-3 print:hidden">
        <div>
            <h1 class="text-title-md font-semibold text-gray-800 dark:text-white/90">{{ __('Product Label Generator') }}</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400">
                {{ __('Print QR labels to stick on item boxes.') }}
            </p>
        </div>
        <button onclick="window.print()"
            class="rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-800">
            {{ __('Print Labels') }}
        </button>
    </div>

    <div class="mb-6 rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-xs print:hidden dark:border-gray-800 dark:bg-gray-900">
        <form method="GET" action="{{ route('products.label', $product) }}" class="flex flex-wrap items-end gap-3">
            <div>
                <label class="mb-1.5 block text-sm text-gray-700 dark:text-gray-300">{{ __('Copies') }}</label>
                <input type="number" name="copies" min="1" max="50" value="{{ $copies }}"
                    class="h-11 w-28 rounded-lg border border-gray-200 bg-white px-3 text-sm text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200" />
            </div>
            <button class="h-11 rounded-lg border border-gray-300 px-4 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200">
                {{ __('Update') }}
            </button>
        </form>
    </div>

    <div class="label-grid grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 print:grid-cols-3">
        @for ($i = 0; $i < $copies; $i++)
            @php
                $qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=' . urlencode($product->sku);
            @endphp
            <div class="rounded-xl border border-gray-300 bg-white p-4 shadow-sm print:break-inside-avoid print:shadow-none">
                <div class="mb-3 flex items-start justify-between gap-2">
                    <div>
                        <p class="text-xs uppercase tracking-wide text-gray-500">{{ __('Dari Stock Item Label') }}</p>
                        <p class="text-sm font-semibold text-gray-900">{{ $product->name }}</p>
                    </div>
                    <p class="text-xs font-medium text-gray-600">{{ $product->sku }}</p>
                </div>

                <div class="flex items-center justify-center">
                    <img
                        src="{{ $qrUrl }}"
                        alt="{{ __('QR Code :sku', ['sku' => $product->sku]) }}"
                        class="h-36 w-36"
                        loading="eager"
                        decoding="sync" />
                </div>

                <div class="mt-3 space-y-1 text-xs text-gray-700">
                    <p><span class="font-semibold">{{ __('Stock') }}:</span> {{ $product->sku }}</p>
                    <p><span class="font-semibold">{{ __('Price') }}:</span> {{ number_format($product->unit_price, 2) }} {{ config('stockiny.currency') }}</p>
                    <p><span class="font-semibold">{{ __('Location') }}:</span> {{ $product->location ?: '—' }}</p>
                </div>
            </div>
        @endfor
    </div>
@endsection