@extends('admin.layout.master')
@section('title', 'Custom Barcode')
@section('custom_css')
    <style>
        .ck-editor__editable_inline {
            min-height: 150px;
        }
    </style>
@endsection

@section('content')
    <div class="card sina-card">
        <div class="card-header card-header-s d-flex flex-wrap justify-content-between align-items-center">
            <h4>Generate Custom Barcode </h4>
            <div class="d-flex justify-content-end gap-2">
                <button type="button" class="btn btn-success btn-sm" onclick="PrintDiv('printableArea')">Print</button>
                <a href="{{ route('admin.custom_barcode.index') }}" class="btn btn-warning btn-sm">Index</a>
            </div>
        </div>

        <div class="card-body">
            <div class="row">
                <div class="col-lg-2"></div>
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h4>Barcode</h4>
                        </div>
                        <div class="card-body">
                            {{-- <input type="number" name="message"
                                value="@isset($edit){{ $edit->barcode }}@endisset"
                                class="form-control" id="message" maxlength="12" min="0" max="999999999999"
                                placeholder="Enter 12-digit code" required /> --}}

                            <div class="d-flex gap-2">
                                <input type="text" name="name" id="name" @isset($edit) value="{{ $edit->name }}" @endisset class="form-control" placeholder="Name" />

                                @if (!isset($edit))
                                    <input type="number" name="qty" class="form-control" id="qty"
                                        placeholder="Qty" />
                                @endif

                                <input type="number" name="country_code"
                                    @isset($edit) value="{{ $edit->country_code }}" @endisset
                                    class="form-control" id="country_code" placeholder="Country Code (3 Digit)"
                                    min="3" max="3" />
                                <input type="number" name="manufacturer_code"
                                    @isset($edit) value="{{ $edit->manufacturer_code }}" @endisset
                                    class="form-control" id="manufacturer_code" placeholder="Manufacturer Code (4 Digit)" />
                            </div>

                            <input type="hidden" name="id" id="id"
                                value="@isset($edit){{ $edit->id }}@endisset" />
                        </div>
                    </div>
                </div>
                <div class="col-lg-2"></div>
                {{-- <div class="col-lg-4" id="barcodeImage" class="text-center">
                    <svg id="barcode"></svg>
                </div> --}}

                <div class="d-flex justify-content-center mt-2 gap-2">
                    <label>&nbsp;</label>
                    {{-- <button type="button" class="btn btn-success btn-sm" id="generateBtn"
                    onclick="generateBarCode()">Generate</button> --}}
                    <button type="button" class="btn btn-primary btn-sm" id="saveBtn" onclick="submit()">Submit</button>
                </div>
            </div>

            <div id="printableArea">

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


@section('script')
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
    <script>
        const edit = @json(@$edit);
        $(document).ready(function() {
            $('.select_2').select2();
            if (edit) {
                // generateBarCode();
            }
        });

        // const eanInput = document.getElementById('message');

        // eanInput.addEventListener('input', function() {
        //     // Remove any non-digit character
        //     this.value = this.value.replace(/\D/g, '');

        //     // Limit length to 12 digits
        //     if (this.value.length > 12) {
        //         this.value = this.value.slice(0, 12);
        //     }
        // });

        function loader(buttonId, title, status = true) {
            $("#" + buttonId).prop("disabled", status).text(title);
        }

        function generateBarCode() {
            const message = $('#message').val();

            if (message == '') return false;

            loader('generateBtn', 'processing...', true);
            ajaxCallV2("{{ route('admin.custom_barcode.generate') }}", 'POST', {
                barcode: message
            }, (data) => {
                $('#loader').hide();
                JsBarcode("#barcode", data, {
                    displayValue: true,
                    fontSize: 14,
                    textMargin: 5,
                    width: 2,
                    format: "ean13",
                    height: 80
                });
                loader('generateBtn', 'Generate', false);
            }, function(error) {
                loader('generateBtn', 'Generate', false);
                $('#loader').hide();
            });
        }

        function submit() {
            loader('saveBtn', 'processing...', true);
            ajaxCallV2("{{ route('admin.custom_barcode.store_update') }}", 'POST', {
                name: $('#name').val(),
                qty: $('#qty').val(),
                country_code: $('#country_code').val(),
                manufacturer_code: $('#manufacturer_code').val(),
                id: $('#id').val()
            }, (data) => {
                $('#loader').hide();
                loader('saveBtn', 'Submit', false);
                loadBarcode(data.data);
                // if (!edit) resetForm();

            }, function(error) {
                loader('saveBtn', 'Submit', false);
                $('#loader').hide();
            });
        }

        function resetForm() {
            $('#qty').val('');
            $('#name').val('');
            $('#country_code').val('');
            $('#manufacturer_code').val('');
        }

        function loadBarcode(data) {
            let html = '';
            data.forEach(barcode => {
                html += `<div style="display: inline-block; margin:10px; text-align: center;">
                            <svg id="barcode_${barcode.id}"></svg>
                        </div>`;
            });
            $('#printableArea').html(html);
            data.forEach(barcode => {
                let barcodeNumber = barcode.country_code + barcode.manufacturer_code + barcode.product_code;
                JsBarcode(`#barcode_${barcode.id}`, barcodeNumber, {
                    displayValue: true,
                    fontSize: 14,
                    textMargin: 5,
                    width: 2,
                    format: "ean13",
                    height: 80
                });
            });
        }
    </script>
@endsection