@extends('layouts.app')
@section('title')
    Material Issue & Receive
@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.received', $material_issue->id) }}"
        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="{{ $material_issue->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">
                                <input type="text" readonly value="{{ $material_requisition->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">Production Order No.</label>
                            <div class="col-6">
                                <input type="text" readonly value="{{ $material_requisition->pro_order_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="request_date" class="form-label col-4">Request Date</label>
                            <div class="col-6">
                            <input type="date" readonly name="request_date" id="request_date" 
                                value="{{ \Carbon\Carbon::createFromFormat('d/m/Y', $material_requisition->request_date)->format('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="shift" class="form-label col-4">Shift</label>
                            <div class="col-6">

                                <input type="text" readonly name="shift" id="shift"
                                    value="{{ $material_requisition->shift }}" class="form-control rounded-4">
                                {{-- <select name="shift1" disabled id="shift1" class="form-select">
                                <option value="AM" @selected($material_requisition->shift == 'AM')>AM</option>
                                <option value="PM" @selected($material_requisition->shift == 'PM')>PM</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_from" class="form-label col-4">Request From (Dept)</label>
                            <div class="col-6">
                                <input type="text" readonly name="shift" id="shift"
                                    value="{{ $material_requisition->department_from->name ?? '' }}"
                                    class="form-control rounded-4">
                                {{-- <select name="request_from" id="request_from" class="form-select">
                                    <option value="" selected disabled>Please Select</option>
                                    @foreach ($depts as $dept)
                                    <option value="{{ $dept->id }}" @selected($material_requisition->request_from == $dept->id)>
                                        {{ $dept->name }}
                                    </option>
                                @endforeach
                                </select> --}}
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="process" class="form-label col-4">Process</label>
                            <div class="col-6">
                                <input type="text" name="process" readonly id="process"
                                    value="{{ $material_requisition->process }}" rows="1"
                                    class="form-control rounded-4" placeholder="auto based on order no"
                                    {{ old('process') }}>
                            </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" readonly name="shift" id="shift"
                                    value="{{ $material_requisition->department_to->name ?? '' }}"
                                    class="form-control rounded-4">

                                {{-- <select name="request_to" id="request_to" class="form-select">
                                    <option value="" selected disabled>Please Select</option>
                                    @foreach ($depts as $dept)
                                    <option value="{{ $dept->id }}" @selected($material_requisition->request_from == $dept->id)>
                                        {{ $dept->name }}
                                    </option>
                                @endforeach
                                </select> --}}
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="machine1" class="form-label col-4">Machine</label>
                            <div class="col-6">
                                <input type="text" name="machine" id="machine" readonly
                                    value="{{ $material_requisition->machines->name ?? '' }}" class="form-control rounded-4">
                                {{-- <select name="machine1" disabled id="machine1" class="form-select">
                                    <option value="" selected disabled>Please Select</option>
                                    @foreach ($machines as $machine)
                                    <option value="{{ $machine->id }}" @selected($material_requisition->machine  == $machine->id)>
                                        {{ $machine->name }}
                                    </option>
                                @endforeach
                                </select> --}}
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="plan_date" class="form-label col-4">Planned Date</label>
                            <div class="col-6">
                            <input type="text" readonly name="planned_date" id="planned_date"
                            value="{{ $material_requisition->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="number" readonly name="total_planned_qty"
                                    value="{{ $material_requisition->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" readonly id="remarks" rows="1" class="form-control rounded-4">
                             {{ $material_requisition->remarkmain ?? old('remarkmain') }}
                             </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-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="issue_by" class="form-label">Issue By</label>
                            <input type="text" disabled id="issue_by" value="{{ $user->user_name ?? '' }}"
                                class="form-control">
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="issue_date" class="form-label">Issue Date</label>
                            <input type="text" disabled name="issue_date" id="issue_date"
                                value="{{ $material_issue->issue_date }}" class="form-control">
                        </div>
                    </div>

                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="issue_remarks" class="form-label">Remarks</label>
                            <input type="text" disabled name="issue_remarks" id="issue_remarks"
                                value="{{ $material_issue->issue_remarks }}" class="form-control">
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="time" class="form-label">Time</label>
                            <input type="time" disabled name="issue_time" value="{{ $material_issue->issue_time }}"
                                id="time" class="form-control" />
                        </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-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="rcv_by" class="form-label">Received By</label>
                            <input type="text" disabled id="rcv_by" value="{{ Auth::user()->user_name }}"
                                class="form-control">
                            <input type="hidden" name="rcv_by" id="rcv_by" value="{{ Auth::user()->id }}"
                                class="form-control">
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="rcv_date" class="form-label">Receive Date</label>
                            <input type="text" readonly name="rcv_date" id="rcv_date" value="{{ date('d/m/Y') }}"
                                class="form-control">
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="rcv_remarks" class="form-label">Remarks</label>
                            <input type="text" name="rcv_remarks" id="rcv_remarks" class="form-control">
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="time" class="form-label">Time</label>
                            <input type="time" name="rcv_time"
                                value="{{ \Carbon\Carbon::now('Asia/Kuala_Lumpur')->format('H:i') }}" id="time"
                                class="form-control" />
                        </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>Request Remarks</th>
                                        <th>Previous Qty</th>
                                        <th>Balance Qty</th>
                                        <th>Issue Qty</th>
                                        <th>Issue Remarks</th>
                                        <th>Receive Qty</th>
                                        <th>Receive Remarks</th>
                                        <th>Remaining</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>
        {{-- 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>
                                    @foreach ($products as $product)
                                        <tr>
                                            <td>
                                                <input class="form-check-input modalTable_product_id" type="checkbox"
                                                    id="inlineCheckbox1" value="{{ $product->id }}">
                                            </td>
                                            <td>
                                                {{ $product->part_no }}
                                            </td>
                                            <td>
                                                {{ $product->part_name }}
                                            </td>
                                            <td>
                                                {{ $product->units->name }}
                                            </td>
                                            <td>
                                                {{ $product->model }}
                                            </td>
                                            <td>
                                                {{ $product->variance }}
                                            </td>
                                            <td>
                                                {{ $product->type_of_products->type ?? '' }}
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondry" data-bs-dismiss="modal">
                            CANCEL
                        </button>
                        <button type="button" class="btn btn-primary" onclick="add_product()">
                            ADD
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {{-- 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>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>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>

    <!-- 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() {
            // Initialize Bootstrap Datepicker
            $('#rcv_date').datepicker({
                format: 'dd/mm/yyyy', // Date format
                autoclose: true,
                todayHighlight: true,
                orientation: 'bottom' // Ensures the date picker opens below the input
            });
        });
    </script>

    {{-- <script>
               $(document).ready(function() {
           // Initialize Bootstrap Datepicker
           $('#issue_date').datepicker({
               format: 'dd/mm/yyyy', // Date format
               autoclose: true,
               todayHighlight: true,
               orientation: 'bottom' // Ensures the date picker opens below the input
           });
       });

           </script> --}}
    <script>
        var production_orders = {!! json_encode($production_orders) !!};
        var materialRequisitionDetails = {!! json_encode($material_requisition_details) !!};
        var material_issue_details = {!! json_encode($material_issue_details) !!};
        var material_requisition_product_details = {!! json_encode($material_requisition_product_details) !!};
        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();
            modalTable.$('.modalTable_product_id').each(function() {
                if (materialRequisitionDetails.find(detail => detail.product_id == $(this).val())) {
                    var row = $(this).closest('tr');
                    var rowData = modalTable.row(row).data();
                    var productId = $(this).val();
                    var qty = 0;
                    var rcv_qty = 0;
                    var bom_qty = 0;

                    var issue_qty = 0;
                    var remarks = '';
                    var rcv_remarks = '';
                    var issue_remarks = '';
                    var mrf_detail_id = '';
                    var matchedDetail = materialRequisitionDetails.find(detail => detail.product_id ==
                        productId);
                    var matchedDetailIssue = material_issue_details.find(detail => detail.material_requisition_detail_id ==
                    matchedDetail.id);
                    if (matchedDetail) {
                        qty = matchedDetail.request_qty;
                        bom_qty = matchedDetail.bom_qty !== null ? matchedDetail.bom_qty : 0;

                        issue_qty = matchedDetailIssue && matchedDetailIssue.issue_qty !== null ? matchedDetailIssue.issue_qty : 0;
                        rcv_qty = matchedDetailIssue && matchedDetailIssue.receive_qty !== null ? matchedDetailIssue.receive_qty : 0;
                        remarks = matchedDetailIssue && matchedDetail.remarks;
                        rcv_remarks = matchedDetailIssue && matchedDetailIssue.receive_remarks;
                        mrf_detail_id = matchedDetailIssue && matchedDetail.id;
                        issue_remarks = matchedDetailIssue && matchedDetailIssue.issue_remarks;
                        var avl_qty;
                        var balancenewQty = rcv_qty == 0 ? qty : rcv_qty; 
                        if (rcv_qty > 0 ) {
                            var balance = issue_qty - rcv_qty;
                        }else{
                            var balance = balancenewQty - issue_qty;
                        }
                        let data = [];
                        $.each(material_requisition_product_details, function(key, detail) {
                            if (detail.mrf_detail_id == mrf_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['mrf_detail_id'] = mrf_detail_id;
                                if (rowData['location'] && rowData['lot_no'] && rowData['qty']) {
                                    data.push(rowData);
                                }
                            }
                        });

                        if (data.length > 0) {
                            sessionStorage.setItem(`modalData${productId}`, JSON.stringify(data));
                        }
                    }
                    if ($('#productTable tbody input[value="' + productId + '"]').length == 0) {
                        productTable.row.add([
                            productTable.rows().data().length + 1,
                            rowData[1] +
                            `<input type="hidden" name="product[${productTable.rows().data().length + 1}][product_id]" class="product_id form-control" value="${productId}">` +
                            `<input type="hidden" name="product[${productTable.rows().data().length + 1}][mrf_detail_id]" class="mrf_detail_id form-control" value="${mrf_detail_id}">`,
                            rowData[2],
                            rowData[6],
                            rowData[4],
                            rowData[3],
                            `<input readonly name="product[${productTable.rows().data().length + 1}][bom_qty]" class="qty form-control" value="${bom_qty}">`,
                            `<input readonly name="product[${productTable.rows().data().length + 1}][req_qty]" class="qty form-control" value="${qty}"> <input type="hidden" class="variance form-control" value="${rowData[5]}">`,
                            `<input readonly name="product[${productTable.rows().data().length + 1}][remarks]" type="hidden" class="remarks form-control" value="${remarks}"><button type="button" class="btn btn-success btn-sm add-remarks">View</button>`,
                            `${issue_qty}`,
                            `${balance}`,
                            `<input name="product[${productTable.rows().data().length + 1}][issue_qty]" class="issue_qty form-control" value="${issue_qty}" readonly>`,
                            `<input readonly name="product[${productTable.rows().data().length + 1}][issue_remarks]" type="hidden" class="issue_remarks form-control" value="${issue_remarks ?? ''}"><button type="button" class="btn btn-success btn-sm add-remarks-issue">View</button>`,
                            `<input name="product[${productTable.rows().data().length + 1}][rcv_qty]" class="rcv_qty form-control" value='${rcv_qty}' >`,
                            `<input name="product[${productTable.rows().data().length + 1}][rcv_remarks]" type="hidden" class="rcv_remarks form-control" value="${rcv_remarks ?? ''}"><button type="button" class="btn btn-danger btn-sm add-remarks-rcv">Add</button>`,
                            `<input class="balance form-control" name="product[${productTable.rows().data().length + 1}][balance]" value="0" readonly>`,
                        ]).draw(false);

                        // Remove the row from the modal table
                    }
                }
            });

        });

        $(document).on('click', '.add-remarks', function() {
            selectedRow = productTable.row($(this).closest('tr'));
            $('#remarksText').val($(this).closest('tr').find('.remarks').val());
            $('#remarksModal').modal('show');
            $('#saveRemarks').hide();
            $('#remarksText').attr('disabled', true)
        });
        $(document).on('click', '.add-remarks-issue', function() {
            selectedRow = productTable.row($(this).closest('tr'));
            $('#remarksText').val($(this).closest('tr').find('.issue_remarks').val());
            $('#remarksModal').modal('show');
            $('#saveRemarks').hide();
            $('#remarksText').attr('disabled', true)
        });
        $(document).on('click', '.add-remarks-rcv', function() {
            selectedRow = productTable.row($(this).closest('tr'));
            $('#remarksText').val($(this).closest('tr').find('.rcv_remarks').val());
            $('#remarksModal').modal('show');
            $('#saveRemarks').show();
            $('#remarksText').removeAttr('disabled', true)
        });

        $(document).on('click', '#saveRemarks', function() {
            let remarks = $('#remarksText').val();
            let button = selectedRow.node().querySelector('.add-remarks-rcv');
            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('.rcv_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 hiddenId = $(this).closest('tr').find('.product_id').val();
            let mrf_detail_id = $(this).closest('tr').find('.mrf_detail_id').val();
            $('.product_ids').val(hiddenId);
            $('.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);
            if (storedData) {
                storedData = JSON.parse(storedData);
                storedData.forEach(element => {
                    let locationOptionsHtml = '';



                    // Populate location options for the selected lot number
                    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="number" class="form-control lot_no" value="${element.lot_no}">`,
                        `<input type="number" class="form-control qty" value="${element.qty}">`,
                        `<button type="button" class="btn btn-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="number" class="form-control lot_no">`,
                    `<input type="number" class="form-control qty">`,
                    `<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 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() {
            $('#exampleModal').modal('hide');
            let hiddenId = $('.product_ids').val();
            let mrf_detail_id = $('.mrf_detail_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['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('.rcv_qty').val(0);
                    } else {
                        $(this).find('.rcv_qty').val(total_qty);
                        var qty = $(this).find('.rcv_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));
            productTable.page.len(-1).draw(false);
            $(this).closest('form').submit();
        });


        $('#productTable').on('input', '.rcv_qty', function() {
            var row = $(this).closest('tr');
            var issue_qty = parseFloat(row.find('.issue_qty').val()) || 0;
            // var balance_qty = parseFloat(row.find('.balance').val()) || 0;
            var rcv_qty = parseFloat(row.find('.rcv_qty').val()) || 0;
            var balance = issue_qty - rcv_qty;
            row.find('.balance').val(balance) || 0;
            // var allowed_qty = bom_qty + (bom_qty * (mrf_limit / 100));
            // var difference = bom_qty - issue_qty;
            // row.find('.difference').val(difference);
            if (rcv_qty > issue_qty) {
                alert('Receive Quantity exceeds the Issue Quantity!');
                $(this).val(0);
                row.find('.balance').val(issue_qty)
                // row.find('.difference').val('')
            }
        });
    </script>
@endsection