@extends('layouts.app')
@section('title')
    Outgoing Edit
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('outgoing.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <form method="post" action="{{ route('outgoing.update', $outgoing->id) }}" enctype="multipart/form-data">
        @csrf
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="ref_no" class="form-label col-4">Delivery Order (DO) No</label>
                            <div class="col-6">
                                <input type="text" name="ref_no" id="ref_no" class="form-control rounded-4"
                                    value="{{ $outgoing->ref_no }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="date" class="form-label col-4">Date</label>
                            <div class="col-6">
                                <input type="text" name="date" id="date" class="form-control rounded-4"
                                    value="{{ $outgoing->date }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="order_id" class="form-label col-4">Order No :</label>
                            <div class="col-6">
                                <select name="order_id" disabled id="order_id" class="form-select"
                                    style="width: 100% !important;">
                                    <option value="" selected disabled>Please Select</option>
                                    @foreach ($orders as $order)
                                        <option value="{{ $order->id }}" @selected($outgoing->order_id == $order->id)>
                                            {{ $order->order_no }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="created_by" class="form-label col-4">Created By</label>
                            <div class="col-6">
                                <input type="text" readonly name="created_by" id="created_by"
                                    class="form-control rounded-4" value="{{ Auth::user()->user_name }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3 customer @if (old('category') == 2) d-none @endif">
                        <div class="row align-items-center">
                            <label for="customer" class="form-labe col-4">Customer</label>
                            <div class="col-6">
                                <input type="text" readonly name="customer" id="customer"
                                    placeholder="auto based or order" class="form-control rounded-4"
                                    value="{{ $outgoing->order->customers->name }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="shipping_location" class="form-label col-4">Shipping Location</label>
                            <div class="col-6">
                                <textarea type="text" name="address" id="address" class="form-control rounded-4" disabled>
                                    {{ optional($outgoing->order->customers->shippingLocations->first())->shipping_location }}
                                </textarea>

                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <br>
                <div class="row">
                    <div class="col-12 d-flex justify-content-between">
                        <h5>PRODUCT DETAIL</h5>
                        <button type="button" class="btn btn-primary" id="add_item" data-bs-toggle="modal"
                            data-bs-target="#exampleModalCenter">ADD PRODUCTS</button>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table table-bordered m-0" id="productTable">
                                <thead>
                                    <tr>
                                        <th>Sr No</th>
                                        <th>Part No</th>
                                        <th>Part Name</th>
                                        <th>Unit</th>
                                        <th>Carton Box</th>
                                        <th>Qty in Box</th>
                                        <th>Quantity</th>
                                        <th>Remarks</th>
                                        <th>Allocation</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($outgoing_details as $outgoing_detail)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td><input type="hidden" class="product_id"
                                                    name="products[{{ $loop->iteration }}][product_id]"
                                                    value="{{ $outgoing_detail->product_id }}">{{ $outgoing_detail->product->part_no }}
                                            </td>
                                            <td>{{ $outgoing_detail->product->part_name }}</td>
                                            <td>{{ $outgoing_detail->product->units->name ?? '' }}</td>
                                            <td>{{ $outgoing_detail->product->carton_box_type }}</td>
                                            <td>{{ $outgoing_detail->product->qty_in_box }}</td>
                                            <td><input type="number" readonly class="form-control qty"
                                                    name="products[{{ $loop->iteration }}][qty]"
                                                    value="{{ $outgoing_detail->qty }}"></td>
                                            <td>
                                                <textarea class="form-control remarks" rows="1" name="products[{{ $loop->iteration }}][remarks]">{{ $outgoing_detail->remarks }}</textarea>
                                            </td>
                                            <td>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="d-flex gap-2 justify-content-end col-12">
                        <input type="hidden" id="storedData" name="details">
                        <button type="button" class="btn btn-primary" id="saveForm">Update</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    {{-- PRODUCTS MODAL --}}
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle"
        aria-modal="true" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">
                        PRODUCTS
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0 w-100" id="modalTable">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" id="selectAll"></th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Unit</th>
                                    <th>Return Qty</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($order->order_detail as $product)
                                    @php
                                        $isInOutgoing = $outgoing_details->contains(
                                            'product_id',
                                            $product->products->id,
                                        );
                                    @endphp
                                    @if (!$isInOutgoing)
                                        <tr>
                                            <td>
                                                <input type="hidden" value="{{ $product->products->id }}"
                                                    class="product_id">
                                                <input type="hidden" class="carton_box_type"
                                                    value="{{ $product->products->carton_box_type }}">
                                                <input type="hidden" class="qty_in_box"
                                                    value="{{ $product->products->qty_in_box }}">
                                                <input type="hidden" class="product_qty"
                                                    value="{{ $product->firm_qty }}">
                                                <input class="form-check-input product_id" type="checkbox"
                                                    id="inlineCheckbox1" value="{{ $product->products->id }}">
                                            </td>
                                            <td>
                                                {{ $product->products->part_no }}
                                            </td>
                                            <td>
                                                {{ $product->products->part_name }}
                                            </td>
                                            <td>
                                                {{ $product->products->products->units->name ?? '' }}
                                            </td>
                                            <td>
                                                {{ $product->products->type_of_products->type ?? '' }}
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondry" data-bs-dismiss="modal">
                        CANCEL
                    </button>
                    <button type="button" class="btn btn-primary" onclick="add_product()">
                        ADD
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{-- LOCATIONS MODAL --}}
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">ALLOCATION</h5>
                    <input type="hidden" class="product_ids">
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 d-flex justify-content-between">
                            <div>Part No: <span class="part_no_text"></span></div>
                            <div>Total Quantity: <span class="total_qty_text"></span></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 d-flex justify-content-between">
                            <div>Unit: <span class="unit_text"></span></div>
                            <div>Part Name: <span class="part_name_text"></span></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 d-flex justify-content-between">
                            <div><span></span></div>
                            <div>Actual Quantity: <span class="actual_qty_text"></span></div>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive" id="popUp">
                        <table class="table table-bordered m-0 w-100" id="allocationTable">
                            <thead>
                                <tr>
                                    <th>Location</th>
                                    <th>Lot No</th>
                                    <th>Quantity</th>
                                    <th>Label</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="saveModal">Add</button>
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
    <script>
        let orders;
        let modalTable;
        let productTable;
        let allocationTable;
        let purchase_returns;
        $(document).ready(function() {
            const rawDate = @json($outgoing->date);
            const parts = rawDate.split('/');
            const formattedDate = new Date(parts[2], parts[1] - 1, parts[0]);

            $('#date').datepicker({
                format: 'dd/mm/yyyy',
                autoclose: true,
                todayHighlight: true,
                orientation: 'bottom'
            }).datepicker("setDate", formattedDate);

            modalTable = $('#modalTable').DataTable({
                "columnDefs": [{
                    "targets": 0,
                    "orderable": false
                }]
            });
            productTable = $('#productTable').DataTable();
            allocationTable = $('#allocationTable').DataTable();
            sessionStorage.clear();
            locations = @json($locations);

            document.getElementById('selectAll').addEventListener('change', function() {
                const checkboxes = document.querySelectorAll('.product_id');
                checkboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
            });
        });

        function add_product() {
            modalTable.$('input:checked').each(function() {
                var row = $(this).closest('tr');
                var product_id = row.find('.product_id').val();
                var part_no = row.find('td:eq(1)').text();
                var part_name = row.find('td:eq(2)').text();
                var unit = row.find('td:eq(3)').text();
                var carton_in_box = row.find('.carton_box_type').val();
                var qty_in_box = row.find('.qty_in_box').val();
                var return_qty = row.find('.product_qty').val();
                productTable.row.add([
                    productTable.rows().data().length + 1,
                    `<input type="hidden" class="product_id" name="products[${productTable.rows().data().length + 1}][product_id]" value="${product_id}">${part_no}`,
                    part_name,
                    unit,
                    carton_in_box,
                    qty_in_box,
                    `<input type="number" readonly class="form-control qty" name="products[${productTable.rows().data().length + 1}][qty]" value="${return_qty}">`,
                    `<textarea class="form-control remarks" rows="1" name="products[${productTable.rows().data().length + 1}][remarks]"></textarea>`,
                    '<button type="button" class="btn btn-success btn-sm openModal" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="bi bi-plus-circle"></i></button><button type="button" class="btn btn-danger btn-sm remove-product ms-2"><i class="bi bi-trash"></i></button>'
                ]).draw(false);

                modalTable.row(row).remove().draw(false);
            });

            $('#modalTable input:checked').prop('checked', false);

            $('#exampleModalCenter').modal('hide');
        }

        $('#productTable tbody').on('click', 'button.remove-product', function() {
            var row = $(this).closest('tr');
            var part_no = row.find('td:eq(1)').text();
            var part_name = row.find('td:eq(2)').text();
            var unit = row.find('td:eq(3)').text();
            var carton_in_box = row.find('.carton_box_type').val();
            var qty_in_box = row.find('.qty_in_box').val();
            var return_qty = row.find('.product_qty').val();

            modalTable.row.add([
                `<input class="form-check-input product_id" type="checkbox" value="${$(row).find('.product_id').val()}">`,
                part_no,
                part_name,
                unit,

            ]).draw(false);

            productTable.row(row).remove().draw(false);
            resetSerialNumbers(productTable);
        });

        function resetSerialNumbers() {
            if ($('#productTable tbody tr:first').find('td:first').text() != 'No data available in table') {
                $('#productTable tbody tr').each(function(index) {
                    $(this).find('td:first').text(index + 1);
                });
            }
        }

        // ALLOCATION WORK
        function addRow(button) {
            var row = button.parentNode.parentNode.cloneNode(true);
            var rowData = $(row).find('td').map(function() {
                return $(this).html();
            }).get();

            var clonedDropdown = row.querySelector('.location');
            var clonedDropdownValue = clonedDropdown.value;

            allocationTable.row.add(rowData).draw(false);

            var rows = document.querySelectorAll('#allocationTable tbody tr');
            var foundMatch = false;

            for (var i = 0; i < rows.length; i++) {
                var dropdown = rows[i].querySelector('.location');
                if (dropdown.value === clonedDropdownValue) {
                    var qtyInput = rows[i].querySelector(
                        '.available_qty');
                    if (rows.length == i + 1) {
                        foundMatch = true;
                    }
                    if (!foundMatch) {
                        qtyInput.value = 0;
                    }
                }
            }

            $('.qty').trigger('keyup');
        }

        function removeRow(button) {
            if ($('#allocationTable tr').length > 2) {
                var $rowToRemove = $(button).closest('tr');
                var dropdownValue = $rowToRemove.find('.location').val();
                var availableQty = parseFloat($rowToRemove.find('.available_qty').val());
                $nextMatchingRow = '';

                if (availableQty > 0) {
                    var $nextMatchingRow = null;

                    $('#allocationTable tbody tr').each(function() {
                        var $currentRow = $(this);
                        var thisDropdownValue = $currentRow.find('.location').val();
                        var thisAvailableQty = parseFloat($currentRow.find('.available_qty').val());

                        if ($currentRow.is($rowToRemove)) {
                            return true;
                        }

                        if (thisDropdownValue === dropdownValue) {
                            $nextMatchingRow = $currentRow;
                            return false;
                        }
                    });

                    if ($nextMatchingRow) {
                        var $nextMatchingAvailableQtyInput = $nextMatchingRow.find('.available_qty');
                        var nextMatchingAvailableQty = parseFloat($nextMatchingAvailableQtyInput.val());
                        $nextMatchingAvailableQtyInput.val(nextMatchingAvailableQty + availableQty);
                    }
                }

                allocationTable.row($(button).closest('tr')).remove().draw(false);
            } else {
                $('#popUp').prepend(`
                    <div class="alert border-warning alert-dismissible fade show text-warning" role="alert">
                    <b>Warning!</b> Can't remove Row!.
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `);
            }

            $('.qty').trigger('keyup');
        }

        $(document).on('click', '.openModal', function() {
            let hiddenId = $(this).closest('tr').find('.product_id').val();
            $('.product_ids').val(hiddenId);
            let storedData = sessionStorage.getItem(`modalData${hiddenId}`);

            allocationTable.clear().draw(false);

            if (storedData) {
                storedData = JSON.parse(storedData);
                storedData.forEach(element => {
                    let optionsHtml = '';
                    locations.forEach(location => {
                        let selected = '';
                        if (element.location ===
                            `${location.area_id}->${location.rack_id}->${location.level_id}`) {
                            selected = 'selected';
                        }
                        optionsHtml +=
                            `<option data-area-id="${location.area_id}" data-rack-id="${location.rack_id}" data-level-id="${location.level_id}" value="${location.area_id}->${location.rack_id}->${location.level_id}" ${selected}>${location.area.name}->${location.rack.name}->${location.level.name}</option>`;
                    });

                    allocationTable.row.add([
                        `<select class="form-control location">${optionsHtml}</select>`,
                        `<input type="number" class="form-control lot_no" value="${element.lot_no}">`,
                        `<input type="number" class="form-control qty" value="${element.qty}">`,
                        `<button type="button" class="btn btn-primary btn-sm" onclick="printRow(this)"> Print</button>`,
                        `<button type="button" class="btn btn-success btn-sm me-2" onclick="addRow(this)"><i class="bi bi-plus"></i></button><button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)"><i class="bi bi-dash"></i></button>`
                    ]).draw(false);
                });
            } else {
                let optionsHtml = '';
                locations.forEach((location, index) => {
                    optionsHtml +=
                        `<option ${(index == 0) ? 'selected' : ''} data-area-id="${location.area_id}" data-rack-id="${location.rack_id}" data-level-id="${location.level_id}" value="${location.area_id}->${location.rack_id}->${location.level_id}">${location.area.name}->${location.rack.name}->${location.level.name}</option>`;
                });

                allocationTable.row.add([
                    `<select class="form-control location">${optionsHtml}</select>`,
                    `<input type="number" class="form-control lot_no">`,
                    `<input type="number" class="form-control qty">`,
                    `<button type="button" class="btn btn-primary btn-sm" onclick="printRow(this)"> Print</button>`,
                    `<button type="button" class="btn btn-success btn-sm me-2" onclick="addRow(this)"><i class="bi bi-plus"></i></button><button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)"><i class="bi bi-dash"></i></button>`
                ]).draw(false);
            }

            let part_no = $(this).closest('tr').find('td:eq(1)').text();
            let part_name = $(this).closest('tr').find('td:eq(2)').text();
            let unit = $(this).closest('tr').find('td:eq(3)').text();
            let qty = $(this).closest('tr').find('.qty').val();
            $('.part_no_text').text(part_no);
            $('.part_name_text').text(part_name);
            $('.unit_text').text(unit);
            $('.actual_qty_text').text(qty);
            $('.location').trigger('change');
            $('.qty').trigger('keyup');
        });

        $('#saveModal').on('click', function() {
            var alertNeeded = false;

            $('#allocationTable tr').each(function() {
                var availableQty = parseFloat($(this).find('.available_qty').val());
                var qty = parseFloat($(this).find('.qty').val());

                if (availableQty < qty) {
                    alertNeeded = true;
                    return false;
                }
            });

            if ($('#category').val() != 1) {
                var total_qty = parseFloat($('.total_qty_text').text());
                var actual_qty = parseFloat($('.actual_qty_text').text());
                if (actual_qty != total_qty) {
                    alertNeeded = true;
                }
            }

            if (alertNeeded) {
                $('#popUp').prepend(`
                    <div class="alert border-warning alert-dismissible fade show text-warning" role="alert">
                    <b>Warning!</b> total quantity and actual qty must be equal!.
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `);
            } else {

                $('#exampleModal').modal('hide');
                let hiddenId = $('.product_ids').val();
                let data = [];
                $('#allocationTable tbody tr').each(function() {
                    let rowData = {};
                    rowData['location'] = $(this).find('.location').val();
                    rowData['area'] = $(this).find('.location option:selected').attr('data-area-id');
                    rowData['rack'] = $(this).find('.location option:selected').attr('data-rack-id');
                    rowData['level'] = $(this).find('.location option:selected').attr('data-level-id');
                    rowData['available_qty'] = $(this).find('.available_qty').val();
                    rowData['lot_no'] = $(this).find('.lot_no').val();
                    rowData['qty'] = $(this).find('.qty').val();
                    rowData['hiddenId'] = hiddenId;
                    data.push(rowData);
                });
                sessionStorage.setItem(`modalData${hiddenId}`, JSON.stringify(data));
                $('#productTable tbody tr').each(function() {
                    if ($(this).find('.product_id').val() == hiddenId) {
                        let total_qty = $('.total_qty_text').text();
                        $(this).find('.qty').val(total_qty);
                    }
                });
            }
        });

        $(document).on('keyup change', '.qty', function() {
            let total = 0;
            $('#allocationTable .qty').each(function() {
                total += +$(this).val();
            });
            $('.total_qty_text').text(total);
        });

        $(document).on('change', '.location, .lot_no', function() {
            var value = $(this).closest('tr').find('.location').val();
            var $this = $(this).closest('tr').find('.available_qty');
            var lot_no = $(this).closest('tr').find('.lot_no').val();
            var location = $(this).closest('tr').find('.location');
            var area_id = location.find('option:selected').attr('data-area-id');
            var rack_id = location.find('option:selected').attr('data-rack-id');
            var level_id = location.find('option:selected').attr('data-level-id');
            var product_id = $('.product_ids').val();

            var $currentRow = $(this).closest('tr');
            var dropdownValueSelected = false;

            $('.location').not(location).each(function() {
                if ($(this).val() === value) {
                    dropdownValueSelected = true;
                    return false;
                }
            });
        });

        $('#saveForm').on('click', function() {
            let array = [];
            $('.product_id').each(function() {
                let storedData = sessionStorage.getItem(`modalData${$(this).val()}`);
                if (storedData == null) {
                    storedData = `{"hiddenId":"${$(this).val()}"}`;
                }
                array.push(JSON.parse(storedData));
            });
            $('#storedData').val(JSON.stringify(array));
            $(this).closest('form').submit();
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>
    <script>
        async function printRow(button) {
            const row = $(button).closest('tr');

            const ref_no = $('#ref_no').val();
            const lotNo = row.find('.lot_no').val();
            const part_no = row.find('.part_no').val();
            const part_name = row.find('.part_name').text();
            const customer = $('#customer').val();
            const uom = row.find('td:nth-child(4)').text();
            const order_id = $('#order_id option:selected').val();
            const quantity = row.find('.qty').val();

            const tableData = [
                [{
                        content: 'Do No',
                        styles: {
                            fontStyle: 'bold'
                        }
                    }, ref_no,
                    {
                        content: 'Date',
                        styles: {
                            fontStyle: 'bold'
                        }
                    },
                    new Date().toLocaleDateString()
                ],
                [{
                        content: 'Order No',
                        styles: {
                            fontStyle: 'bold'
                        }
                    }, order_id,
                    {
                        content: 'Customer',
                        styles: {
                            fontStyle: 'bold'
                        }
                    },
                    customer
                ],
                [{
                        content: 'Part No',
                        styles: {
                            fontStyle: 'bold'
                        },
                    },
                    {
                        content: products.part_no,
                        colSpan: 4
                    }
                ],
                [{
                        content: 'Part Name',
                        styles: {
                            fontStyle: 'bold'
                        },
                    },
                    {
                        content: products.part_name,
                        colSpan: 4
                    }
                ],
                [{
                        content: 'UOM',
                        styles: {
                            fontStyle: 'bold'
                        }
                    }, products.units.name,
                    {
                        content: 'Quantity',
                        styles: {
                            fontStyle: 'bold'
                        }
                    },
                    quantity
                ]
            ];

            const qrData = JSON.stringify({
                ref_no,
                lotNo,
                part_no,
                part_name,
                customer,
                order_id,
                uom,
                quantity,
                date: new Date().toLocaleDateString()
            });

            const {
                jsPDF
            } = window.jspdf;
            const doc = new jsPDF({
                orientation: 'landscape',
                unit: 'mm',
                format: [105, 205]
            });

            const logoBase64 = await getBase64Image('{{ asset('assets/images/pna_logo.png') }}');
            const logoWidth = 30;
            const logoHeight = 30;
            const pageWidth = doc.internal.pageSize.width;
            const logoX = (pageWidth - logoWidth) / 2;
            const logoY = 10;
            doc.addImage(logoBase64, 'JPEG', logoX, logoY, logoWidth, logoHeight);

            const tableMargin = {
                left: 10
            };
            const tableWidth = pageWidth * 0.7;
            doc.autoTable({
                body: tableData,
                startY: logoY + logoHeight + 10,
                theme: 'grid',
                styles: {
                    fontSize: 10
                },
                margin: tableMargin,
                tableWidth: tableWidth,
            });

            // Generate the QR code with the data
            const qrCodeUrl =
                `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(qrData)}&size=100x100`;
            const qrWidth = 40;
            const qrHeight = 40;
            const qrX = tableMargin.left + tableWidth + 5;
            const qrY = logoY + logoHeight + 20 - 10;

            const qrCode = await loadImage(qrCodeUrl);
            doc.addImage(qrCode, 'PNG', qrX, qrY, qrWidth, qrHeight);

            doc.save('Outgoing-Label.pdf');
        }

        async function getBase64Image(url) {
            const response = await fetch(url);
            const blob = await response.blob();
            return new Promise((resolve) => {
                const reader = new FileReader();
                reader.onloadend = () => resolve(reader.result);
                reader.readAsDataURL(blob);
            });
        }

        function loadImage(url) {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.crossOrigin = 'Anonymous';
                img.onload = () => resolve(img);
                img.onerror = () => reject('Failed to load image');
                img.src = url;
            });
        }
    </script>
@endsection