@extends('backend.partials.master')
@section('title')
    Product Create
@endsection
<style>
@media print {
    body * {
        visibility: hidden;
    }

    #printableArea, #printableArea * {
        visibility: visible;
    }

    #printableArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
}
</style>

@section('maincontent')
<main class="content">
    <div class="container-fluid p-0">

        <div class="mb-3">
            <h1 class="h3 d-inline align-middle">Create Product</h1>
        </div>

        <div class="row">

            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">

                        {{-- Form container to toggle visibility --}}
                        <div id="printFormContainer">
                            <form action="{{ route('products.print', $product->id) }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                @if(!empty($old))
                                    @method('PUT')
                                    <input type="hidden" name="id" id="id" value="{{ $old->id }}"/>
                                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                                    <input type="hidden" name="barcode" value="{{ $product->sku }}">
                                @endif
                                <div class="row">
                                    <div class="mb-3">
                                        <label>Barcode:</label>
                                        <div><img src="data:image/png;base64,{{ $barcodeImage }}" alt="barcode" /></div>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="quantity">Quantity to Print</label>
                                        <input type="number" class="form-control" name="quantity" id="quantity" value="1" min="1" required>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary">{{ !empty($old) ? 'Update' : 'Print' }}</button>
                                <a href="{{ route('products') }}" class="btn btn-secondary">Cancel</a>
                            </form>
                        </div>

                        {{-- Printable area --}}
                        @if(!empty($quantity) && !empty($printNow))
                            <div id="printableArea" style="display:none;">
                                <!-- <h4>Printing {{ $quantity }} Barcode(s) for {{ $product->name }}</h4> -->
                                <div style="display: flex; flex-wrap: wrap;">
                                    @for ($i = 0; $i < $quantity; $i++)
                                        <div style="margin: 10px; text-align: center;">
                                            <img src="data:image/png;base64,{{ $barcodeImage }}" alt="barcode" />
                                            <div>{{ $product->sku }}</div>
                                        </div>
                                    @endfor

                                </div>
                            </div>

                            <script>
                                // Hide the form container
                                document.getElementById('printFormContainer').style.display = 'none';

                                // Show printable area and trigger print
                                document.getElementById('printableArea').style.display = 'block';
                                window.print();

                                // After print, hide print area and show form again
                                window.onafterprint = function() {
                                    document.getElementById('printableArea').style.display = 'none';
                                    document.getElementById('printFormContainer').style.display = 'block';
                                };
                            </script>
                        @endif

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