@extends('layouts.app')
@section('title')
    Material Issue & Receive Create
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('material-issue-receive.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <style>
        #productTable input {
            width: 130px;
        }
    </style>
    <form method="post" action="{{ route('material-issue-receive.issued') }}" enctype="multipart/form-data">
        @csrf
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <h5>MATERIAL REQUISITION 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">Ref No.</label>
                            <div class="col-6">
                                <input type="text" readonly value="{{ $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="ref_no" class="form-label col-4">MRF Ref No.</label>
                            <div class="col-6">
                                <select name="material_requisition_id" id="mir_rf_no" class="form-select"
                                    style="width: 100% !important;">
                                    <option value="" selected disabled>Please Select</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="pro_order_no1" class="form-label col-4">Production Order No.</label>
                            <div class="col-6">
                                <input type="text" readonly name="production" id="production_order_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="request_date" class="form-label col-4">Request Date</label>
                            <div class="col-6">
                                <input type="text" name="request_date" readonly 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" name="shift" id="shift" readonly 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">
                                <input type="text" name="depart-from" id="depart-from" readonly
                                    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="process" class="form-label col-4">Process</label>
                            <div class="col-6">
                                <input type="text" name="process" id="process" rows="1" readonly
                                    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_to" class="form-label col-4">Request To (Dept)</label>
                            <div class="col-6">
                                <input type="text" name="depart-to" id="depart-to" readonly
                                    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="machine1" class="form-label col-4">Machine</label>
                            <div class="col-6">
                                <input type="text" readonly name="machine" id="machine" 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="plan_date" class="form-label col-4">Planned Date</label>
                            <div class="col-6">
                                <input type="text" readonly name="plan_date" id="plan_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="total_planned_qty" class="form-label col-4">Total Planned Qty</label>
                            <div class="col-6">
                                <input min=0 type="text" readonly name="total_planned_qty" id="total_planned_qty"
                                    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="remarks" class="form-label col-4">Remarks:</label>
                            <div class="col-6">
                                <textarea name="remarkmain" id="remarks_main" rows="1" readonly class="form-control rounded-4"></textarea>
                            </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="request_date" class="form-label col-4">Issue By</label>
                            <div class="col-6">
                                <input type="text" readonly id="issue_by" value="{{ Auth::user()->user_name }}"
                                    class="form-control rounded-4">
                                <input type="hidden" name="issue_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="issue_date" class="form-label col-4">Issue Date</label>
                            <div class="col-6">
                                @php
                                    $klDate = \Carbon\Carbon::now('Asia/Kuala_Lumpur')->format('Y-m-d');
                                @endphp
                                <input type="text" name="issue_date" id="issue_date" value="{{ $klDate }}"
                                    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">
                                <textarea name="issue_remarks" id="isseu_remarks" rows="1" class="form-control rounded-4">{{ old('issue_remarks') }}</textarea>
                            </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">
                                @php
                                    $klTime = \Carbon\Carbon::now('Asia/Kuala_Lumpur')->format('H:i');
                                @endphp
                                <input type="time" name="issue_time" id="time" value="{{ $klTime }}"
                                    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>Required Qty(BOM)</th>
                                        <th>Request Qty</th>
                                        <th>Remark Request</th>
                                        <th>Previous Qty</th>
                                        <th>Balance Qty</th>
                                        <th>Remaining Qty</th>
                                        <th>Issue Qty</th>
                                        <th>Issue Remark</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </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>
        {{-- 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">
                        <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" 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>
        {{-- 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="mrf_detail_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>Issue: <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>Lot No</th>
                                        <th>Location</th>
                                        <th>Unit</th>
                                        <th>Available Qty</th>
                                        <th>Issue 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>
    <script>
        var mrf_limit = @json($mrf_limit);
        let productTable;
        let allocationTable;
        let locations = @json($locations);

        $(document).ready(function() {

            $(document).on('click', '.add-remarks', function() {
                selectedRow = productTable.row($(this).closest('tr'));
                $('#remarksText').val($(this).closest('tr').find('.remarks').val());
                $('#remarksModal').modal('show');
            });

            productTable = $('#productTable').DataTable();

            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.ref_no || item.name,
                                        id: item.id,
                                    };
                                }),
                                pagination: {
                                    more: (params.page * 10) < data.total_count
                                }
                            };
                        },
                        cache: true
                    }
                });
            }
            initSelect2WithAjax('#mir_rf_no', 'Select Material Requisition',
                '{{ route('material_requisition.search.in.issue') }}');

            $('#mir_rf_no').on('change', function() {
                var id = $(this).val();

                $.ajax({
                    url: '{{ route('material-issue-receive.getData') }}', // Replace with your server endpoint
                    type: 'GET',
                    data: {
                        id: id
                    }, // Send the ID as a parameter
                    success: function(response) {

                        if (response != null) {
                            if (response.material_requisition != null) {

                                $('#id').val(response.material_requisition != null ? response
                                    .material_requisition.pro_order_no : '')
                                $('#production_order_no').val(response.material_requisition !=
                                    null ? response.material_requisition.pro_order_no : '')
                                $('#request_date').val(response.material_requisition != null ?
                                    response.material_requisition.request_date : '')
                                $('#shift').val(response.material_requisition != null ? response
                                    .material_requisition.shift : '')
                                $('#depart-from').val(response.material_requisition != null &&
                                    response.material_requisition.department_from != null ?
                                    response.material_requisition.department_from.name : '')
                                $('#process').val(response.material_requisition != null ?
                                    response.material_requisition.process : '')
                                $('#depart-to').val(response.material_requisition != null &&
                                    response.material_requisition.department_to != null ?
                                    response.material_requisition.department_to.name : '')
                                $('#machine').val(response.material_requisition != null &&
                                    response.material_requisition.machines != null ?
                                    response.material_requisition.machines.name : '')
                                $('#plan_date').val(response.material_requisition != null ?
                                    response.material_requisition.plan_date : '');
                                $('#total_planned_qty').val(response.material_requisition !=
                                    null ? response.material_requisition
                                    .total_planned_qty ?? '' : '')
                                $('#remarks_main').text(response.material_requisition != null ?
                                    response.material_requisition.remarkmain : '')
                            }

                            productTable.clear().draw(false);
                            if (response.material_requisition_details != null) {
                                response.material_requisition_details.forEach((detail,
                                    index) => {
                                    const bom_qty = detail.bom_qty ?? 0;
                                    const req_qty = detail.request_qty ?? 0;
                                    const issue_qty = detail.issue_qty ?? 0;
                                    const remarks = detail.remarks ?? '';
                                    const issue_remarks = detail.issue_remarks ?? '';
                                    const prev_issue_qty = detail.prev_issue_qty ?? '';
                                    const balance = parseInt(req_qty) - parseInt(
                                        issue_qty);
                                        if (detail.products) {
                                    productTable.row.add([
                                        index + 1, // Row number
                                        `${detail?.products?.part_no ?? ''}<input type="hidden" value="${detail?.id}" class="mrf_detail_id" name="material_details[${index + 1}][material_detail_id]">
                                        <input type="hidden" value="${detail?.products?.id}" class="product_id" name="material_details[${index + 1}][product_id]">`,
                                        `${detail?.products?.part_name ?? ''}`,
                                        `${detail?.products?.type_of_products.type ?? ''}`,
                                        `${detail?.products?.model ?? ''}`,
                                        `${detail?.products?.units.name ?? ''}`,
                                        `${bom_qty}<input type="hidden" value="${bom_qty}" class="bom_qty">`,
                                        `${req_qty}`,
                                        `<div class="description">
                                <p class="short-desc">  ${remarks.substring(0, 100)}</p>
                                <p class="full-desc" style="display:none;">${remarks}</p>
                                <a href="#" class="read-more">Read More</a>
                                </div>`,
                                        `${prev_issue_qty}<input type="hidden" value="${prev_issue_qty}" class="issue_qty" name="material_details[${index + 1}][previous_issue_qty]">`,
                                        `${req_qty - issue_qty}<input type="hidden" value="${balance}" class="balance_qty" name="material_details[${index + 1}][balance_qty]">`, // Subtraction
                                        `<input readonly name="material_details[${index + 1}][remaining_qty]" class="remaining_qty form-control" value="${req_qty - prev_issue_qty}">`,
                                        `<input type="number" readonly name="material_details[${index + 1}][issue_qty]" class="issue_qty form-control"  value="0">`,
                                        `<button type="button" class="btn btn-danger btn-sm add-remarks">Add</button><input type="hidden" class="remarks" name="material_details[${index + 1}][remarks]" value="">`,
                                        `<div class="d-flex"><button type="button" class="btn btn-danger btn-sm remove-product me-2"><i
                                                            class="bi bi-trash"></i></button>
                                        <button type="button" class="btn btn-success btn-sm openModal" data-id="${detail.id}"><i
                                                            class="bi bi-plus"></i></button></div>`,
                                    ]).draw(false);
                                        }
                                });

                            }
                        }


                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', error);
                    }
                });
            });

            allocationTable = $('#allocationTable').DataTable();
            sessionStorage.clear();
            $('#productTable tbody button.remove-product').each(function() {
                $(this).closest('tr').remove();
            });
        });

        $(document).on('click', '#saveRemarks', function() {
            let remarks = $('#remarksText').val();
            let button = selectedRow.node().querySelector('.add-remarks');
            if (remarks.trim() !== '') {
                button.classList.remove('btn-danger');
                button.classList.add('btn-success');
                button.textContent = 'Edit';
            } else {
                button.classList.remove('btn-success');
                button.classList.add('btn-danger');
                button.textContent = 'Add';
            }
            selectedRow.node().querySelector('.remarks').value = remarks;
            $('#remarksModal').modal('hide');
        });

        function addRow(button) {
            // Clone the row and get the data from it
            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();

                // Add the cloned data as a new row in DataTable
                allocationTable.row.add(rowData).draw(false);

                // Trigger any additional required events
                $('.qty').trigger('keyup');
            }

        }

        function removeRow(button) {
            // Check if there is more than one row
            if ($('#allocationTable tr').length > 2) { // Including header row
                // Find the row index and remove it
                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>
                `);
            }

            // Trigger any additional required events
            $('.qty').trigger('keyup');
        }



        $(document).on('click', '.openModal', function() {
            let rowId = $(this).data('id');
            let modal = $('#exampleModal');
            modal.modal('show');

            let hiddenId = $(this).closest('tr').find('.product_id').val();
            let mrf_detail_id = $(this).closest('tr').find('.mrf_detail_id').val();
            modal.find('.product_ids').val(hiddenId);
            modal.find('.mrf_detail_ids').val(mrf_detail_id);

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

            //Clear existing rows in the table
            allocationTable.clear().draw(false);
            let part_no = $(this).closest('tr').find('td:eq(1)').text();
            let balance_qty = $(this).closest('tr').find('td:eq(10)').text();
            let part_name = $(this).closest('tr').find('td:eq(2)').text();
            let request_qty_text = $(row).find('.issue_qty').val();
            modal.find('.part_no_text').text(part_no);
            modal.find('.part_name_text').text(part_name);
            modal.find('.request_qty_text').text(request_qty_text);
            modal.find('.issue_qty_text').text(request_qty_text);
            modal.find('.qty').trigger('keyup');

            if (storedData) {
                storedData = JSON.parse(storedData);
                storedData.forEach(element => {
                    let lotOptionsHtml = '';
                    let locationOptionsHtml = '';

                    //Populate lot number options
                    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>`;
                        }
                    });

                    //Populate location options
                    //for the selected lot number
                    locations.forEach(location => {
                        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" required>${lotOptionsHtml}</select>`,
                        `<select class="form-control location">${locationOptionsHtml}</select>`,
                        rowData[5],
                        `<input type="number" readonly class="form-control avl_qty" value="${element.avl_qty}">`,
                        `<input type="number" class="form-control qty" value="${element.qty}"><input type="hidden" class="form-control balance_qty" value="${balance_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 = '';

                //Populate lot number options
                locations.forEach(location => {
                    if (location.product_id == hiddenId) {
                        flag = true;
                        lotOptionsHtml += `<option value="${location.lot_no}">${location.lot_no}</option>`;
                    }
                });
                //Populate location options for the first lot number initially
                let selectedLotNo = '';
                if (locations[0]) {
                    selectedLotNo = locations[0].lot_no; //Assuming first lot number initially
                }

                locations.forEach(location => {
                    if (location.product_id == hiddenId) {
                        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" required><option>select</option>${lotOptionsHtml}</select>`,
                        `<select class="form-control location"><option>select</option>${locationOptionsHtml}</select> <input type="hidden" class="form-control balance_qty" value="${balance_qty}">`,
                        rowData[5],
                        `<input type="number" readonly class="form-control avl_qty">`,
                        `<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 {
                    if ($('#popUp .qt_alert').length === 0) {
                        $('#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>
            `);
                    }
                }
            }

            $('.request_qty_text').text($(this).closest('tr').find('.balance_qty').val());

        });

        // Attach onchange event handlers to the selects
        $(document).off('change', '.lot_no').on('change', '.lot_no', function() {
            updateLocations(this);
        });

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

        // // Function to update location options based on selected lot number
        function updateLocations(lotSelect) {
            const selectedLotNo = lotSelect.value;
            const locationSelect = $(lotSelect).closest('tr').find('.location');
            let locationOptionsHtml = '';

            locations.forEach(location => {
                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>`;
                }
            });

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

        // Function to fetch and display quantity based on selected location
        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() {
            let total_avl_qty = 0;
            let total_qty = 0;

            $('.avl_qty').each(function(index, element) {
                let avl_qty = parseFloat($(this).val()) || 0;
                total_avl_qty += avl_qty;
            });

            $('.qty').each(function(index, element) {
                let qty = parseFloat($(this).val()) || 0;
                total_qty += qty;
            });

            if (total_qty > total_avl_qty) {
                if ($('#popUp .alert-warning').length === 0) {
                    $('#popUp').prepend(`
                        <div class="alert border-warning alert-dismissible fade show text-warning" role="alert">
                            <b>Warning!</b> Issue Qty must be less than or equal to Available Qty
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    `);
                }
                return;
            }
            $('#exampleModal').modal('hide');
            let hiddenId = $('.product_ids').val();
            let mrf_detail_id = $('.mrf_detail_ids').val();
            balanceQty = 0;
            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();
                balanceQty = $(this).find('.balance_qty').val();
                rowData['qty'] = $(this).find('.qty').val();
                rowData['avl_qty'] = $(this).find('.avl_qty').val();
                rowData['hiddenId'] = hiddenId;
                rowData['mrf_detail_id'] = mrf_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('.issue_qty').val();
                    } else {

                        $(this).find('.issue_qty').val(total_qty);
                        var qty = $(this).find('.issue_qty').val();
                        var balance = +balanceQty - (+total_qty);
                        $(this).find('.remaining_qty').val(balance);
                        $(this).find('.balance').val(balance);
                    }

                }
            });
        });

        $(document).on('keyup change', '.qty', function () {
            let modal = $(this).closest('.modal');
            let total = 0;

            modal.find('.qty').each(function () {
                total += +$(this).val();
            });

            modal.find('.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));
            productTable.page.len(-1).draw(false);
            $(this).closest('form').submit();
        });
    </script>

    <!-- Include Bootstrap Datepicker CSS and JS -->
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#request_date').datepicker({
                format: 'dd/mm/yyyy', // Set the desired date format
                autoclose: true, // Automatically close the datepicker after selection
                todayHighlight: true,
                orientation: 'bottom' // Ensures the date picker opens below the input
                // Highlight today's date
            }).datepicker("setDate", new Date()); // Set today's date as the default
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#issue_date').datepicker({
                format: 'dd/mm/yyyy', // Set the desired date format
                autoclose: true, // Automatically close the datepicker after selection
                todayHighlight: true,
                orientation: 'bottom' // Ensures the date picker opens below the input
                // Highlight today's date
            }).datepicker("setDate", new Date()); // Set today's date as the default
        });
    </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 issueBy = $("#issue_by").val();
            const requestedBy = $("#depart-from").val();
            const issueDate = $("#issue_date").val();
            const Time = $("#time").val();


            const tableData = [
                [{
                        content: 'MRF No',
                        styles: {
                            fontStyle: 'bold'
                        }
                    }, ref_no,
                    {
                        content: 'Issue Date',
                        styles: {
                            fontStyle: 'bold'
                        }
                    },
                    issueDate,
                ],
                [{
                        content: 'Issue By',
                        styles: {
                            fontStyle: 'bold'
                        }
                    }, issueBy,
                    {
                        content: 'Issue Time',
                        styles: {
                            fontStyle: 'bold'
                        }
                    },
                    Time
                ],
                [{
                        content: 'Requested By',
                        styles: {
                            fontStyle: 'bold'
                        }
                    }, requestedBy,
                    {
                        content: 'Requested Date',
                        styles: {
                            fontStyle: 'bold'
                        }
                    },
                    requestDate
                ]
            ];
            const qrData = '{{ route('material-issue-receive.index') }}';



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

            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('Material-Issue-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