@extends('layouts.app')
@section('title')
    Transfer Request Receive
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('transfer_request.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <style>
        #productTable input {
            width: 130px;
        }
    </style>
    <form method="post" action="{{ route('transfer_request.received', $tr->id) }}" enctype="multipart/form-data">
        @csrf
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <h5>Transfer Request Details</h5>
                </div>
                <br>
                <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">Tr No.</label>
                            <div class="col-6">
                                <input type="text" disabled value="{{ $tr->ref_no }}" name="ref_no" id="ref_no"
                                    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="mrf_no" class="form-label col-4">MRF No.</label>
                            <div class="col-6">
                                <select name="mrf_no" id="mrf_no" disabled class="form-select" onchange="change_mrf()"
                                    style="width: 100% !imporatant;">
                                    <option value="" selected disabled>Please Select</option>
                                    <option value="{{ $tr->mrf_no }}" selected>
                                        {{ $tr->mrf->ref_no ?? '' }}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="request_date" class="form-label col-4">Request Date</label>
                            <div class="col-6">
                                <input type="text" disabled value="{{ $tr->request_date }}" name="request_date"
                                    id="request_date" 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="shift" class="form-label col-4">Shift</label>
                            <div class="col-6">
                                <input type="text" disabled value="{{ $tr->shift }}" name="shift" id="shift"
                                    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="request_from" class="form-label col-4">Request From (Dept)</label>
                            <div class="col-6">
                                <select disabled name="request_from" id="request_from" class="form-select"
                                    style="width: 100% !imporatnat;">
                                    <option value="{{ $tr->request_from }}" selected>
                                        {{ $tr->department_from->name ?? '' }}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="machine" class="form-label col-4">Machine</label>
                            <div class="col-6">
                                <input type="text" disabled value="{{ $tr->machines->name ?? '' }}" id="machine_name"
                                    class="form-control rounded-4">
                                <input type="hidden" value="{{ $tr->machine }}" name="machine_id" id="machine_id"
                                    class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="request_to" class="form-label col-4">Request To (Dept)</label>
                            <div class="col-6">
                                <select name="request_to" disabled id="request_to" class="form-select"
                                    style="width: 100% !imporatnat;">
                                    <option value="{{ $tr->request_to }}" selected>
                                        {{ $tr->department_to->name ?? '' }}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="description" class="form-label col-4">Description</label>
                            <div class="col-6">
                                <input type="text" disabled name="description" id="description" rows="4"
                                    cols="4" class="form-control rounded-4"
                                    value="{{ old('description', $tr->description ?? '') }}">
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-12 d-flex justify-content-between">
                        <h5>ISSUER</h5>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="issue_by" class="form-label col-4">Issue By</label>
                            <div class="col-6">
                                <input type="text" disabled id="issue_by"
                                    value="{{ $tr->issue_by_user->user_name ?? '' }}" 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="issue_date" class="form-label col-4">Issue Date</label>
                            <div class="col-6">
                                <input type="text" disabled name="issue_date" id=""
                                    value="{{ $tr->issue_date ?? '' }}" 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="issue_remarks" class="form-label col-4">Remarks</label>
                            <div class="col-6">
                                <input type="text" disabled name="issue_remarks" id="issue_remarks"
                                    value="{{ $tr->issue_remarks }}" 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="time" class="form-label col-4">Time</label>
                            <div class="col-6">
                                <input type="text" disabled name="issue_time" value="{{ $tr->issue_time }}"
                                    id="time" class="form-control rounded-4" />
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-12 d-flex justify-content-between">
                        <h5>RECEIVER</h5>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="rcv_by" class="form-label col-4">Received By</label>
                            <div class="col-6">
                                <input type="text" disabled id="rcv_by" value="{{ Auth::user()->user_name }}"
                                    class="form-control rounded-4">
                                <input type="hidden" name="rcv_by" id="rcv_by" value="{{ Auth::user()->id }}"
                                    class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="rcv_date" class="form-label col-4">Receive Date</label>
                            <div class="col-6">
                                <input type="date" readonly name="rcv_date" id="rcv_date"
                                    value="{{ date('Y-m-d') }}" 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="rcv_remarks" class="form-label col-4">Remarks</label>
                            <div class="col-6">
                                <input type="text" name="rcv_remarks" id="rcv_remarks"
                                    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="time" class="form-label col-4">Time</label>
                            <div class="col-6">
                                <input type="time" name="rcv_time"
                                    value="{{ \Carbon\Carbon::now('Asia/Kuala_Lumpur')->format('H:i') }}" id="time"
                                    class="form-control rounded-4" />
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-12 d-flex justify-content-between">
                        <h5>PRODUCT/MATERIAL DETAILS</h5>
                    </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>Type</th>
                                        <th>Model</th>
                                        <th>Unit</th>
                                        <th>Variance</th>
                                        <th>Transfer Qty</th>
                                        <th>Remarks</th>
                                        <th>Receive Qty</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($trds as $index => $trd)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>
                                                {{ $trd->products->part_no ?? '' }}
                                                <input type="hidden" name="product[{{ $index }}][product_id]"
                                                    class="product_id form-control" value="{{ $trd->product_id }}">
                                                <input type="hidden" name="product[{{ $index }}][tr_detail_id]"
                                                    class="tr_detail_id form-control" value="{{ $trd->id }}">
                                            </td>
                                            <td>{{ $trd->products->part_name ?? '' }}</td>
                                            <td>{{ $trd->products->type_of_products->type ?? '' }}</td>
                                            <td>{{ $trd->products->model ?? '' }}</td>
                                            <td>
                                                {{ $trd->products->units->name ?? '' }}
                                                <input type="hidden" name="product[{{ $index }}][uom]"
                                                    class="uom form-control"
                                                    value="{{ $trd->products->units->name ?? '' }}">
                                            </td>
                                            <td>{{ $trd->products->variance ?? '' }}</td>
                                            <td>
                                                <input readonly name="product[{{ $index }}][req_qty]"
                                                    class="qty form-control" value="{{ $trd->request_qty }}">
                                            </td>
                                            <td>
                                                <input name="product[{{ $index }}][rcv_remarks]"
                                                    class="rcv_remarks form-control">
                                            </td>
                                            <td>
                                                <input name="product[{{ $index }}][rcv_qty]"
                                                    class="rcv_qty form-control" value="{{ $trd->rcv_qty ?? '' }}"
                                                    readonly>
                                            </td>
                                            <td>
                                                <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>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <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">Submit</button>
                </div>
            </div>
        </div>
        {{-- PRODUCTS MODAL --}}
        <div class="modal fade" id="product_modal" 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>Select</th>
                                        <th>Part No</th>
                                        <th>Part Name</th>
                                        <th>Unit</th>
                                        <th>Model</th>
                                        <th>Variance</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">
                        <input type="hidden" class="trd_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>Request Quantity: <span class="request_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>Receive: <span class="issue_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>Receive Qty</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>
    </form>
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
    <script>
        var tr_receive = {!! json_encode($tr_receive) !!};
        let productTable;
        let modalTable;
        let allocationTable;

        locations = @json($locations);

        $(document).ready(function() {
            allocationTable = $('#allocationTable').DataTable();
            sessionStorage.clear();
            productTable = $('#productTable').DataTable();
            modalTable = $('#modalTable').DataTable();
            $('#productTable tbody button.remove-product').each(function() {
                $(this).trigger('click');
            });
            var pro_order_no = $("#pro_order_no").val();
            let data = [];
            $.each(tr_receive, function(key, detail) {
                if (detail.tr_detail_id == tr_detail_id) {
                    locations.forEach(location => {
                        if (location.product_id == productId) {
                            if (location.area_id == detail.area && location
                                .rack_id == detail.rack && location.level_id ==
                                detail.level && location.lot_no == detail.lot_no
                            ) {
                                avl_qty = location.used_qty;
                            }
                        }
                    });
                    let rowData = {};
                    rowData['location'] = detail.area + '->' + detail.rack + '->' +
                        detail.level;
                    rowData['area'] = detail.area;
                    rowData['rack'] = detail.rack;
                    rowData['level'] = detail.level;
                    rowData['lot_no'] = detail.lot_no;
                    rowData['qty'] = detail.qty;
                    rowData['avl_qty'] = avl_qty;
                    rowData['hiddenId'] = productId;
                    rowData['tr_detail_id'] = tr_detail_id;
                    if (rowData['location'] && rowData['lot_no'] && rowData['qty']) {
                        data.push(rowData);
                    }
                }
            });

            if (data.length > 0) {
                sessionStorage.setItem(`modalData${productId}`, JSON.stringify(data));
            }
        });

        function addRow(button) {
            let total = 0;
            $('#allocationTable .qty').each(function() {
                total += +$(this).val();

            });
            var req_qty = $('.request_qty_text').text();
            if (total >= req_qty) {
                $('#popUp').prepend(`
    <div class="alert border-warning alert-dismissible fade show text-warning" role="alert">
        <b>Warning!</b> Can't add more rows !.
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    `);
            } else {
                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();
            let tr_detail_id = $(this).closest('tr').find('.tr_detail_id').val();
            $('.product_ids').val(hiddenId);
            $('.trd_ids').val(tr_detail_id);

            let storedData = sessionStorage.getItem(`modalData${hiddenId}`);
            var row = $(this).closest('tr');
            var rowData = productTable.row(row).data();

            allocationTable.clear().draw(false);
            if (storedData) {
                storedData = JSON.parse(storedData);
                storedData.forEach(element => {
                    let locationOptionsHtml = '';

                    locations.forEach(location => {
                        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 location">${locationOptionsHtml}</select>`,
                        `<input type="text" 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 {
                var flag = false;
                let locationOptionsHtml = '';

                locations.forEach(location => {
                    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>`;
                });
                allocationTable.row.add([
                    `<select class="form-control location">
        <option>select</option>${locationOptionsHtml}
    </select>`,
                    `<input type="text" 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 request_qty_text = $(row).find('.qty').val();
            $('.part_no_text').text(part_no);
            $('.part_name_text').text(part_name);
            $('.request_qty_text').text(request_qty_text);
            $('.qty').trigger('keyup');

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

        $('#saveModal').on('click', function() {
            $('#exampleModal').modal('hide');
            let hiddenId = $('.product_ids').val();
            let tr_detail_id = $('.trd_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;
                rowData['tr_detail_id'] = tr_detail_id;
                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 = $('.issue_qty_text').text();
                    if (total_qty == null || total_qty == undefined || total_qty == 0) {
                        $(this).find('.rcv_qty').val(0);
                    } else {
                        $(this).find('.rcv_qty').val(total_qty);
                        var qty = $(this).find('.qty').val();
                        var balance = qty - total_qty;
                        $(this).find('.balance').val(balance);
                    }

                }
            });
        });

        $(document).on('keyup change', '.qty', function() {
            let total = 0;
            $('#allocationTable .qty').each(function() {
                total += +$(this).val();
            });
            var request_qty_text = $('.request_qty_text').text();
            if (total > request_qty_text) {
                newqty = request_qty_text - total;
                $(this).val(newqty);
            }
            if ($(this).val() <= 0) {
                $(this).val(0);
            }
            $('.issue_qty_text').text(total);
        });
        $('#saveForm').on('click', function() {
            let array = [];
            $('.product_id').each(function() {
                let
                    storedData = sessionStorage.getItem(`modalData${$(this).val()}`);
                if (storedData == null) {}
                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 requestDate = $("#request_date").val();
            const ref_no = $("#ref_no").val();
            const part_no = $('.part_no_text').text();
            const part_name = $('.part_name_text').text();
            const uom = $('.uom').val();
            const request_to = $('#request_to').find('option:selected').text();
            const request_from = $('#request_from').find('option:selected').text();
            const quantity = row.find('.qty').val();

            const tableData = [
                [{
                        content: 'Request Date',
                        styles: {
                            fontStyle: 'bold'
                        }
                    }, requestDate,
                    {
                        content: 'Tr.No',
                        styles: {
                            fontStyle: 'bold'
                        }
                    },
                    ref_no,
                ],
                [{
                        content: 'Request From',
                        styles: {
                            fontStyle: 'bold'
                        }
                    }, request_from,
                    {
                        content: 'Request To',
                        styles: {
                            fontStyle: 'bold'
                        }
                    },
                    request_to
                ],
                [{
                        content: 'Part No',
                        styles: {
                            fontStyle: 'bold'
                        },
                        colSpan: 1
                    },
                    {
                        content: part_no,
                        colSpan: 3
                    }
                ],
                [{
                        content: 'Part Name',
                        styles: {
                            fontStyle: 'bold'
                        },
                        colSpan: 1
                    },
                    {
                        content: part_name,
                        colSpan: 3
                    }
                ],
                [{
                        content: 'UOM',
                        styles: {
                            fontStyle: 'bold'
                        }
                    }, uom,
                    {
                        content: 'Quantity',
                        styles: {
                            fontStyle: 'bold'
                        }
                    },
                    quantity
                ]
            ];
            const qrData = JSON.stringify({
                ref_no,
                part_no,
                part_name,
                request_to,
                request_from,
                uom,
                quantity,
                requestDate,
            });



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

            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,
            });

            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('Transfer-Request-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