@extends('layouts.app')
@section('title')
    Outgoing Create
@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.store') }}" 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="{{ $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" readonly name="date" id="date"
                                    class="form-control datepicker-current-date rounded-4" value="{{ date('d/m/Y') }}">
                            </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 class="form-select" onchange="get_order()" name="order_id" id="order_id"
                                    style="width: 100% !important;">
                                    @if (old('order_id') != null)
                                        @php
                                            $order = App\Models\Order::find(old('order_id'));
                                            $isInOutgoing = $outgoing->contains('order_id', $order->id);
                                        @endphp
                                        @if ($order)
                                            <option value="{{ $order->id }}" selected style="color: black;">
                                                {{ $order->order_no }}
                                            </option>
                                        @else
                                            <option value="" selected disabled>Invalid Order Selected</option>
                                        @endif
                                    @else
                                        <option value="" selected disabled>Select Order</option>
                                    @endif
                                </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-label 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">
                            </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></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-12 d-flex justify-content-end">
                        <button type="button" class="btn btn-primary " id="add_item" data-bs-toggle="modal"
                            data-bs-target="#exampleModalCenter">+ Add Product </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>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>Picking</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </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">Save</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" style="width: 22px; height: 22px;">
                                    </th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Unit</th>
                                    <th>Type Of Product</th>
                                </tr>
                            </thead>
                            <tbody>

                            </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>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>Lot No</th>
                                    <th>Location</th>
                                    <th>Picking 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>
    {{-- REMARKS MODAL --}}
    <div class="modal fade" id="remarksModal" tabindex="-1" aria-labelledby="remarksModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <input type="hidden" class="product_idss">
                    <h5 class="modal-title" id="remarksModalLabel">Add Remarks</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <textarea id="remarksText" name="remarks" class="form-control" rows="4"
                        placeholder="Enter your remarks here"></textarea>
                </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="saveRemarks">Save</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 modalTable;
        let productTable;
        let allocationTable;
        let purchase_returns;
        $(document).ready(function() {
            $('#date').datepicker({
                format: 'dd/mm/yyyy',
                autoclose: true,
                todayHighlight: true,
                orientation: 'bottom'
            }).datepicker("setDate", new Date());

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

            $('#productTable tbody').on('click', '.add-remarks', function() {
                $('.product_idss').val($(this).closest('tr').find('.product_id').val());
                $('#remarksText').val($(this).closest('tr').find('.remarks').val());
                $('#remarksModal').modal('show');
            });
            $('#saveRemarks').on('click', function() {
                let product_idss = $('.product_idss').val();
                $('#productTable .product_id').each(function() {
                    if (product_idss == $(this).val()) {
                        let remarks = $('#remarksText').val();
                        let button = $(this).closest('tr').find('.add-remarks');
                        if (remarks.trim() !== '') {
                            button.removeClass('btn-danger');
                            button.addClass('btn-success');
                            button.text('Edit');
                        } else {
                            button.removeClass('btn-success');
                            button.addClass('btn-danger');
                            button.text('Add');
                        }
                        $(this).closest('tr').find('.remarks').val($('#remarksText').val());
                        $('#remarksModal').modal('hide');
                        return;
                    }
                });
            });

            function initSelect2WithAjax(selector, placeholder, route) {
                $(selector).select2({
                    placeholder: placeholder,
                    ajax: {
                        url: route,
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                q: params.term,
                                page: params.page || 1
                            };
                        },
                        processResults: function(data, params) {
                            params.page = params.page || 1;

                            return {
                                results: $.map(data.items, function(item) {
                                    return {
                                        text: item.order_no,
                                        id: item.id,
                                    };
                                }),
                                pagination: {
                                    more: (params.page * 10) < data.total_count
                                }
                            };
                        },
                        cache: true
                    }
                });
            }
            initSelect2WithAjax('#order_id', 'Select Order', '{{ route('order.search.outgoing') }}');

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

        function get_order() {
            let modalTable;
            let mainTable;
            var orderId = $("#order_id").val();
            if (orderId) {
                $.ajax({
                    url: "{{ route('order.search.outgoing.detail') }}",
                    type: 'GET',
                    data: {
                        id: orderId
                    },
                    success: function(order) {
                        $('#supplier').val('');
                        $('#customer').val(order.customers.name);
                        let allLocations = '';
                        if (order.customers && order.customers.shipping_locations) {
                            order.customers.shipping_locations.forEach(function(location) {
                                allLocations += location.shipping_location;
                            });
                        }

                        $('#address').val(allLocations);
                        populateModalTable(order.order_detail);
                    }
                });
            } else {
                productTable.clear().draw(false);
            }
            sessionStorage.clear();
        };

        function populateModalTable(data) {
            modalTable.clear();
            data.forEach((product, index) => {
                let qty = 0;
                products = product.products;
                qty = product.firm_qty;
                modalTable.row.add([
                    `<input class="form-check-input product_id" type="checkbox"
                                                id="inlineCheckbox1" value="${products.id}"><input type="hidden" value="${products.id}" class="product_id"><input type="hidden" value="${qty}" class="product_qty"><input type="hidden" value="${products.carton_box_type}" class="carton_box_type"><input type="hidden" value="${products.qty_in_box}" class="qty_in_box">`,
                    products.part_no ?? "",
                    products.part_name,
                    products.units ? products.units.name : '',
                    products.type_of_products ? products.type_of_products.type : ''
                ]);

            });
            modalTable.draw(false);
        }

        let bool = 0;

        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 type_of_product = row.find('td:eq(4)').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[${bool}][product_id]" value="${product_id}">${part_no}`,
                    part_name,
                    unit,
                    carton_in_box,
                    qty_in_box,
                    `<input type="hidden" value="${type_of_product}" class="type_of_product"><input type="number" readonly class="form-control qty" name="products[${bool}][qty]" value="0">`,
                    `<input type="hidden" value=""  name="products[${bool}][remarks]" class="form-control remarks">
                    <button type="button" class="btn btn-danger btn-sm add-remarks">Add</button>`,
                    '<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);
                bool++;
            });

            $('#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('td:eq(4)').text();
            var qty_in_box = row.find('td:eq(5)').text();
            var typeofproduct = row.find('.type_of_product').val();
            var return_qty = row.find('.qty').val();

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

            ]).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) {
            let total = 0;
            $('#allocationTable .qty').each(function() {
                total += +$(this).val();

            });
            var req_qty = $('.request_qty_text').text();
            var row = button.parentNode.parentNode.cloneNode(true);
            var rowData = $(row).find('td').map(function() {
                return $(this).html();
            }).get();

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

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

        function removeRow(button) {
            if ($('#allocationTable tr').length > 2) {
                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 lotOptionsHtml = '';
                    let locationOptionsHtml = '';
                    locations.forEach(location => {
                        if (location.product_id == hiddenId) {
                            let selectedLot = (element.lot_no === location.lot_no) ? 'selected' :
                                '';
                            lotOptionsHtml +=
                                `<option value="${location.lot_no}" ${selectedLot}>${location.lot_no}</option>`;
                        }

                        if (location.product_id == hiddenId && location.lot_no === element.lot_no) {
                            let selected = (element.location ===
                                `${location.area_id}->${location.rack_id}->${location.level_id}`
                            ) ? 'selected' : '';
                            locationOptionsHtml +=
                                `<option data-area-id="${location.area_id}" data-rack-id="${location.rack_id}" data-level-id="${location.level_id}" data-qty="${location.used_qty}" 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 lot_no">${lotOptionsHtml}</select>`, `
                        <select class="form-control location">${locationOptionsHtml}</select>`,
                        `<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 {
                var flag = false;
                let lotOptionsHtml = '';
                let locationOptionsHtml = '';
                let selectedLotNo = locations[0].lot_no;
                locations.forEach((location, index) => {
                    if (location.product_id == hiddenId) {
                        flag = true;
                        lotOptionsHtml +=
                            `<option value="${location.lot_no}" data-area-id="${location.area_id}" data-rack-id="${location.rack_id}" data-level-id="${location.level_id}">${location.lot_no}</option>`;
                    }
                    if (location.product_id == hiddenId && location.lot_no === selectedLotNo) {
                        locationOptionsHtml +=
                            `<option data-area-id="${location.area_id}" data-rack-id="${location.rack_id}" data-level-id="${location.level_id}" data-qty="${location.used_qty}" value="${location.area_id}->${location.rack_id}->${location.level_id}">${location.area.name}->${location.rack.name}->${location.level?.name ?? ''}</option>`;
                    }
                });

                if (flag) {
                    $('.qt_alert').addClass('d-none');
                    $('#saveModal').removeClass('d-none');
                    allocationTable.row.add([
                        `<select class="form-control lot_no"><option>select</option>${lotOptionsHtml}</select>`, `
                        <select class="form-control location"><option>select</option>${locationOptionsHtml}</select>`,
                        `<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);
                } else {
                    $('.qt_alert').addClass('d-none');
                    $('#popUp').prepend(`
                        <div class="alert border-warning alert-dismissible fade show text-warning qt_alert" role="alert">
                        <b>Warning!</b> Not enough Quantity to issue
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    `);
                    $('#saveModal').addClass('d-none');
                }
            }

            $(document).off('change', '.lot_no').on('change', '.lot_no', function() {
                updateLocations(this);
            });

            $(document).off('change', '.location').on('change', '.location', function() {
                updateQuantity(this);
            });

            function updateLocations(lotSelect) {
                const selectedOption = $(lotSelect).find(':selected');
                const selectedLotNo = selectedOption.val();
                const area_id = selectedOption.data('area-id');
                const rack_id = selectedOption.data('rack-id');
                const level_id = selectedOption.data('level-id');
                const locationSelect = $(lotSelect).closest('tr').find('.location');
                let locationOptionsHtml = '';

                locations.forEach(location => {
                    if (location.product_id == hiddenId && location.lot_no === selectedLotNo && area_id ==
                        location.area_id && level_id == location.level_id && rack_id == location.rack_id) {
                        locationOptionsHtml +=
                            `<option data-area-id="${location.area_id}" data-rack-id="${location.rack_id}" data-level-id="${location.level_id}" data-qty="${location.used_qty}" value="${location.area_id}->${location.rack_id}->${location.level_id}">${location.area.name}->${location.rack.name}->${location.level?.name ?? ''}</option>`;
                    }
                });

                locationSelect.html(locationOptionsHtml);
                locationSelect.trigger('change');
            }

            function updateQuantity(locationSelect) {
                const selectedLocation = $(locationSelect).find('option:selected');
                const qty = selectedLocation.attr('data-qty');
                const qtyInput = $(locationSelect).closest('tr').find('.available_qty');
                qtyInput.val(qty);
            }

            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);
            $('.qty').trigger('keyup');
        });

        $('#saveModal').on('click', function() {

            var alertNeeded = false;

            $('#allocationTable tbody tr').each(function() {
                var availableQty = parseFloat($(this).find('.available_qty').val());
                var qty = parseFloat($(this).find('.qty').val());
                if (qty > availableQty) {
                    alertNeeded = true;
                    return false;
                }
            });

            if (alertNeeded) {
                $('#popUp').prepend(`
                    <div class="alert border-warning alert-dismissible fade show text-warning" role="alert">
                    <b>Warning!</b> available qty and picking 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['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