@extends('layout.index')

@section('printBarcode', 'active')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/printBarcode.css') }}">
@endsection

@section('contents')
    <input type="text"value="{{ $template }}" id="template" hidden>

    <div class="content-wrapper mb-3">
        <div class="container-fluid p-2">
            <div class="content-header">
                <div class="">
                    <div>
                        <h4 class="">Printing Preview</h4>
                        <p class="text-muted font-weight-light">Please assign the number of copy you need for each printing.
                        </p>
                    </div>
                    <button class="btn btn-primary" id="print-labels" form="barcode-form">Print Barcode</button>
                </div>
                <form id="barcode-form">
                    @csrf
                    <div class="card-container mt-3">
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var labels = [];
        var _script = {
            init: function() {
                _script.showBarcodeLabels();
                _script.events();
            },
            events: function() {
                $(document).on('submit', '#barcode-form', function(e) {
                    e.preventDefault(); // Prevent the default form submission

                    let formData = new FormData(this);
                    let template = $("#template");

                    let serializedFormData = new URLSearchParams(formData).toString();

                    window.open('/submit-product-quantity-form/' + template.val() + '?' + serializedFormData);
                    _script.submitBarcodeForm(formData, template)
                });
            },
            showBarcodeLabels: function() {
                $.ajax({
                    url: '',
                    method: "GET",
                    cache: false,
                    processData: false,
                    success: function(response) {
                        labels = response;
                        $.each(response, function(indexInArray, valueOfElement) {
                            // console.log(valueOfElement)
                            setTimeout(function() {
                                    $(".card-container").append(
                                        `<div class="card">
                                        <img src="${valueOfElement.image_link}" class="card-img-top" alt="...">
                                        <div class="card-footer">
                                            <input type="number" class="form-control form-control-sm w-25 float-right text-right" name="barcode_${valueOfElement.id}" value="1">
                                        </div>
                                    </div>`
                                    );
                                }, indexInArray *
                                250
                            ); // indexInArray * 1000 gives a delay of 1 second for each iteration
                        });
                    },
                    error: function(response) {
                        console.log(response)
                    },
                })
            },
            submitBarcodeForm: function(formData, template) {
                $.ajax({
                    url: '/submit-product-quantity-form/' + template.val(),
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    cache: false,
                    processData: false,
                    dataType: "JSON",
                    success: function(response) {
                        console.log(response)
                    },
                    error: function(response) {

                    }
                });
            }
        }

        _script.init();
    </script>
@endsection