@extends('layouts.app')
@section('title')
    Material Requisition Create
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('material_requisition.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <style>
        #productTable input {
            width: 130px;
        }

        .card {
            overflow-x: hidden;
        }
    </style>
    <form method="post" action="{{ route('material_requisition.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <h5>Material Requisition Form 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="pro_order_no1" class="form-label col-4">Production Order No.</label>
                            <div class="col-6">
                                <button type="button" class="btn btn-primary add-pro_order_no" data-bs-toggle="modal"
                                    data-bs-target="#po_modal">
                                    Select Production Order No
                                </button>
                            </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">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="request_date" class="form-label col-4">Request Date</label>
                            <div class="col-6">
                                <input type="text" name="request_date" id="request_date" value="{{ date('d/m/Y') }}"
                                    class="form-control datepicker-current-date 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 class="form-select" name="request_from" id="request_from"
                                    style="width: 100% !important;">
                                    @if (old('request_from') != null)
                                        @php
                                            $department = App\Models\Department::find(old('request_from'));
                                        @endphp
                                        @if ($department)
                                            <option value="{{ $department->id }}" selected style="color: black;">
                                                {{ $department->name }}
                                            </option>
                                        @else
                                            <option value="" selected disabled>Invalid Request From Selected</option>
                                        @endif
                                    @else
                                        <option value="" selected disabled>Select Request From</option>
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="request_to" class="form-label col-4">Request To (Dept)</label>
                            <div class="col-6">
                                <select class="form-select" name="request_to" id="request_to"
                                    style="width: 100% !important;">
                                    @if (old('request_to') != null)
                                        @php
                                            $department = App\Models\Department::find(old('request_to'));
                                        @endphp
                                        @if ($department)
                                            <option value="{{ $department->id }}" selected style="color: black;">
                                                {{ $department->name }}
                                            </option>
                                        @else
                                            <option value="" selected disabled>Invalid Request From Selected</option>
                                        @endif
                                    @else
                                        <option value="" selected disabled>Select Request From</option>
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="remarks" class="form-label col-4">Remarks:</label>
                            <div class="col-6">
                                <textarea name="remarkmain" id="remarks" rows="1" class="form-control rounded-4">{{ old('remarks') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-2">
                    <div class="col text-end">
                        <button type="button" class="btn btn-primary add-product" data-bs-toggle="modal"
                            data-bs-target="#product_modal">
                            Add Product
                        </button>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table table-bordered m-0" id="proShowTable">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Production Order NO</th>
                                        <th>Shift</th>
                                        <th>Process</th>
                                        <th>Machine</th>
                                        <th>Planned Date</th>
                                        <th>Total Planned Qty</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    @if (old('productionorder'))
                                        @foreach (old('productionorder') as $key => $row)
                                            <tr>
                                                <td>{{ $key + 1 }}
                                                    <input type="hidden"
                                                        name="productionorder[{{ $key }}][row_id]" class="row_id"
                                                        value="{{ $row['row_id'] }}">
                                                </td>

                                                <td>
                                                    {{ $row['pro_order_no'] }}
                                                    <input type="hidden"
                                                        name="productionorder[{{ $key }}][pro_order_no]"
                                                        value="{{ $row['pro_order_no'] }}"
                                                        class="pro_order_no form-control">
                                                </td>

                                                <td>
                                                    {{ $row['shift'] ?? '' }}
                                                    <input type="hidden" name="product[{{ $key }}][shift]"
                                                        value="{{ $row['shift'] ?? '' }}" class="shift form-control">
                                                </td>

                                                <td>
                                                    {{ $row['process_name'] }}
                                                    <input type="hidden" name="product[{{ $key }}][process_name]"
                                                        value="{{ $row['process_name'] ?? '' }}"
                                                        class="process_name form-control">
                                                </td>

                                                <td>
                                                    {{ $row['machine_name'] }}
                                                    <input type="hidden"
                                                        name="product[{{ $key }}][machine_name]"
                                                        value="{{ $row['machine_name'] ?? '' }}"
                                                        class="machine_name form-control">
                                                </td>

                                                <td>
                                                    {{ $row['planned_date'] }}
                                                    <input type="hidden"
                                                        name="product[{{ $key }}][planned_date]"
                                                        value="{{ $row['planned_date'] }}"
                                                        class="planned_date form-control">
                                                </td>
                                                <td>
                                                    {{ $row['planned_qty'] }}
                                                    <input type="hidden"
                                                        name="product[{{ $key }}][planned_qty]"
                                                        value="{{ $row['planned_qty'] }}"
                                                        class="planned_qty form-control">
                                                </td>
                                                <td>
                                                    <button @if (is_array(old('product')) && count(old('product')) > 1) disabled @endif min=0
                                                        type="button" class="btn btn-danger btn-sm remove-product2"><i
                                                            class="bi bi-trash"></i></button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>


                <div class="text-end my-3">
                    <button type="button" class="btn btn-success" id="generate-subparts" disabled>
                        Generate
                    </button>
                </div>


                <div class="row">
                    <div id="loading-message" style="margin-bottom: 10px; display: none; font-weight: bold;">
                        Loading data, please wait...
                    </div>
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table table-bordered m-0" id="productTable">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Part No.</th>
                                        <th>Part Name</th>
                                        <th>Type of Product</th>
                                        <th>Model</th>
                                        <th>Variance</th>
                                        <th>UOM</th>
                                        <th>Required Qty(BOM)</th>
                                        <th>Current Inventory</th>
                                        <th>Request Qty</th>
                                        <th>Difference</th>
                                        <th>Remarks</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if (old('product'))
                                        @foreach (old('product') as $key => $material_detail)
                                            <tr>
                                                <td>{{ $key + 1 }}</td>

                                                <td>
                                                    {{ $material_detail['part_no'] }}
                                                    <input type="hidden" name="product[{{ $key }}][part_no]"
                                                        value="{{ $material_detail['part_no'] }}"
                                                        class="part_no form-control">
                                                    <input type="hidden" name="product[{{ $key }}][product_id]"
                                                        value="{{ $material_detail['product_id'] }}"
                                                        class="product_id form-control">
                                                </td>

                                                <td>
                                                    {{ $material_detail['part_name'] ?? '' }}
                                                    <input type="hidden" name="product[{{ $key }}][part_name]"
                                                        value="{{ $material_detail['part_name'] }}"
                                                        class="part_name form-control">
                                                </td>

                                                <td>
                                                    {{ $material_detail['type_of_product'] }}
                                                    <input type="hidden"
                                                        name="product[{{ $key }}][type_of_product]"
                                                        value="{{ $material_detail['type_of_product'] }}"
                                                        class="type_of_product form-control">
                                                </td>

                                                <td>
                                                    {{ $material_detail['model'] }}
                                                    <input type="hidden" name="product[{{ $key }}][model]"
                                                        value="{{ $material_detail['model'] }}"
                                                        class="model form-control">
                                                </td>

                                                <td>
                                                    {{ $material_detail['variance'] }}
                                                    <input type="hidden" name="product[{{ $key }}][variance]"
                                                        value="{{ $material_detail['variance'] }}"
                                                        class="variance form-control">
                                                </td>

                                                <td>
                                                    <input type="text" readonly
                                                        name="product[{{ $key }}][uom]"
                                                        value="{{ $material_detail['uom'] }}" class="uom form-control">
                                                </td>

                                                <td>
                                                    <input type="text" readonly
                                                        name="product[{{ $key }}][bom_qty]"
                                                        value="{{ $material_detail['bom_qty'] ?? '' }}" id="bom_qty"
                                                        class="bom_qty form-control">
                                                </td>

                                                <td>
                                                    <input type="text" readonly
                                                        name="product[{{ $key }}][inventory_qty]"
                                                        value="{{ $material_detail['inventory_qty'] ?? '' }}"
                                                        class="inventory form-control">
                                                </td>

                                                <td>
                                                    <input type="number" min="0" id="request_qty"
                                                        name="product[{{ $key }}][request_qty]"
                                                        value="{{ $material_detail['request_qty'] ?? 0 }}"
                                                        class="request_qty form-control" step="0.001">
                                                </td>

                                                <td>
                                                    <input type="text" readonly
                                                        name="product[{{ $key }}][difference]"
                                                        value="{{ $material_detail['difference'] ?? '' }}"
                                                        class="difference form-control">
                                                </td>

                                                <td>
                                                    <input type="text" name="product[{{ $key }}][remarks]"
                                                        value="{{ $material_detail['remarks'] }}"
                                                        class="remarks form-control">
                                                </td>

                                                <td>
                                                    <button type="button" class="btn btn-danger btn-sm remove-product"><i
                                                            class="bi bi-trash"></i></button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif


                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="d-flex gap-2 justify-content-end col-12">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <div class="modal fade" id="po_modal" tabindex="-1" aria-labelledby="proOrderNoTitle" aria-modal="true"
        role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="proOrderNoTitle">
                        Production Order No
                    </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="proModalTable">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" id="selectAll2" style="width: 22px; height: 22px;">
                                    </th>
                                    <th>Production Order NO</th>
                                    <th>Shift</th>
                                    <th>Process</th>
                                    <th>Machine</th>
                                    <th>Planned Date</th>
                                    <th>Total Planned Qty</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_proOrder()">
                        ADD
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="product_modal" tabindex="-1" aria-labelledby="exampleModalCenterTitle"
        aria-modal="true" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">
                        PRODUCTS
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0 w-100" id="modalTable">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" id="selectAll" style="width: 22px; height: 22px;">
                                    </th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Unit</th>
                                    <th>Model</th>
                                    <th>Variance</th>
                                    <th>Type of Product</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($products as $product)
                                    <tr>
                                        <td>

                                            @if ($inventory)
                                                <input type="hidden" value="{{ $inventory->qty }}"
                                                    class="inventory_product_qty">
                                            @else
                                                <input type="hidden" value="0" class="inventory_product_qty">
                                            @endif
                                            <input type="hidden" value="{{ $product->bom_subparts->qty ?? 0 }}"
                                                class="bom_qty">
                                            <input class="form-check-input 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>

    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
    <script>
        var mrf_limit = @json($mrf_limit);
        var inventoryDataa = @json($inventory_record);
        let productTable;
        let modalTable;
        let proModalTable;
        let proTable;
        var selectedRowsPro = {};
        const addedProIds = new Set();
        const addedProIdQty = new Set();
        $(document).ready(function() {
            $('#request_date').datepicker({
                format: 'dd/mm/yyyy',
                autoclose: true,
                todayHighlight: true,
                orientation: 'bottom'
            }).datepicker("setDate", new Date());

            productTable = $('#productTable').DataTable();
            modalTable = $('#modalTable').DataTable({
                "columnDefs": [{
                    "targets": 0,
                    "orderable": false
                }]
            });

            $('#modalTable tr').each(function() {
                var modalProductId = $(this).find('.product_id').val();
                var existsInMainTable = $('#productTable tr').filter(function() {
                    if (modalProductId == undefined) {
                        return
                    }
                    return $(this).find('.product_id').val() == modalProductId;
                }).length > 0;
                if (existsInMainTable) {
                    $(this).remove();
                }
            });

            proModalTable = $('#proModalTable').DataTable({
                perPageSelect: [5, 10, 15, ["All", -1]],
                processing: true,
                serverSide: true,
                language: {
                    processing: 'Processing'
                },
                ajax: {
                    url: "{{ route('daily-production-planning.get.po') }}",
                    type: 'GET',
                },
                columns: [{
                        data: 'id',
                        name: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row, meta) {
                            return `
                                <input class="form-check-input dpp_id" type="checkbox" id="inlineCheckbox_${row.id}" value="${row.id}">
                            `;
                        }
                    }, {
                        data: 'pro_order_no',
                        name: 'pro_order_no',
                    },
                    {
                        data: 'shift',
                        name: 'shift',
                    },
                    {
                        data: 'pro_order_no',
                        name: 'pro_order_no',
                        render: function(data, type, row, meta) {
                            const parts = data.split('/');
                            const processName = parts.length >= 5 ? parts[4].trim() : '';
                            return processName;
                        }
                    },
                    {
                        data: 'machines.name',
                        name: 'machines.name',
                        defaultContent: '',
                        orderable: false
                    },
                    {
                        data: 'planned_date',
                        name: 'planned_date',
                    },
                    {
                        data: 'planned_qty',
                        name: 'planned_qty',
                    },
                ],
                paging: true,
                pagingType: 'input',
            });

            proTable = $('#proShowTable').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 || item.pro_order_no,
                                        id: item.id,
                                    };
                                }),
                                pagination: {
                                    more: (params.page * 10) < data.total_count
                                }
                            };
                        },
                        cache: true
                    }
                });
            }

            initSelect2WithAjax('#request_from', 'Select Request From', '{{ route('department.search') }}');
            initSelect2WithAjax('#request_to', 'Select Request To', '{{ route('department.search') }}');
            initSelect2WithAjax('#pro_order_no1', 'Select Production Order No',
                '{{ route('daily-production-planning.search.po') }}');

        });

        function processSubParts(subParts) {
            return Get_subPart_inventory_qty(subParts.product_id).then(inv_qty => {

                productTable.row.add([
                    productTable.rows().data().length + 1,
                    subParts.product?.part_no +
                    `<input type="hidden" name="product[${productTable.rows().data().length + 1}][part_no]" class="part_no form-control" value="${subParts.product?.part_no}"><input type="hidden" name="product[${productTable.rows().data().length + 1}][product_id]" class="product_id form-control" value="${subParts.product_id}">`,
                    subParts.product?.part_name +
                    `<input type="hidden" name="product[${productTable.rows().data().length + 1}][part_name]" class="part_name form-control" value="${subParts.product?.part_name}">`,
                    subParts.product?.type_of_products?.type +
                    `<input type="hidden" name="product[${productTable.rows().data().length + 1}][type_of_product]" class="type_of_product form-control" value="${subParts.product?.type_of_products?.type}">`,
                    subParts.product?.model ?? '' +
                    `<input type="hidden" name="product[${productTable.rows().data().length + 1}][model]" class="model form-control" value="${subParts.product?.model}">`,
                    subParts.product?.variance ?? '' +
                    `<input type="hidden" name="product[${productTable.rows().data().length + 1}][variance]" class="variance form-control" value="${subParts.product?.variance}">`,
                    `<input type="text" readonly name="product[${productTable.rows().data().length + 1}][uom]" class="uom form-control" value="${subParts.product?.units?.name}">`,
                    `<input type="text" readonly name="product[${productTable.rows().data().length + 1}][bom_qty]" id="bom_qty" class="bom_qty form-control" value="${parseFloat(plannedQty * subParts.qty).toFixed(4)}">`,
                    `<input type="text" readonly name="product[${productTable.rows().data().length + 1}][inventory_qty]" class="inventory form-control" value="${inv_qty}">`,
                    `<input type="number" min="0" id="request_qty" name="product[${productTable.rows().data().length + 1}][request_qty]" class="request_qty check_qty form-control"  step="0.001" value="0">`,
                    `<input type="text" readonly name="product[${productTable.rows().data().length + 1}][difference]" class="difference form-control" value="${plannedQty * subParts.qty}">`,
                    `<input type="text" name="product[${productTable.rows().data().length + 1}][remarks]" class="remarks form-control">`,
                    `<button type="button" class="btn btn-danger btn-sm remove-product1"><i class="bi bi-trash"></i></button>`
                ]).draw(false);
            }).catch(error => {
                console.error('Error fetching inventory quantity:', error);
            });
        }

        function Get_subPart_inventory_qty(product_id) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: `{{ route('daily-production-planning.get_inventory_qty') }}`,
                    method: 'POST',
                    data: {
                        product_id: product_id,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (Array.isArray(response) && response.length === 0) {
                            resolve(0);

                        } else {
                            resolve(response[0]['qty']);
                        }
                    },
                    error: function(xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }


        function add_product() {
            modalTable.$('input:checked').each(function() {
                var row = $(this).closest('tr');
                var rowData = modalTable.row(row).data();
                var production_orderId = $("#pro_order_no1").val();
                if (!production_orderId) {
                    var bom_qty = '';
                } else {
                    var bom_qty = row.find('.bom_qty').val();
                }
                var productId = $(this).val();
                
                let matchedProduct = inventoryDataa.find(item => item.product_id == productId);
                let inventoryQtyMatched = matchedProduct ? matchedProduct.qty : '0';
                var inventory_product_qty = row.find('.inventory_product_qty').val();

                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}][part_no]" class="part_no form-control" value="${rowData[1]}"><input type="hidden" name="product[${productTable.rows().data().length + 1}][product_id]" class="product_id form-control" value="${productId}">`,
                        rowData[2] +
                        `<input type="hidden" name="product[${productTable.rows().data().length + 1}][part_name]" class="part_name form-control" value="${rowData[2]}">`,
                        rowData[6] +
                        `<input type="hidden" name="product[${productTable.rows().data().length + 1}][type_of_product]" class="type_of_product form-control" value="${rowData[6]}">`,
                        rowData[4] +
                        `<input type="hidden" name="product[${productTable.rows().data().length + 1}][model]" class="model form-control" value="${rowData[4]}">`,
                        rowData[5] +
                        `<input type="hidden" name="product[${productTable.rows().data().length + 1}][variance]" class="variance form-control" value="${rowData[5]}">`,
                        `<input type="text" readonly name="product[${productTable.rows().data().length + 1}][uom]" class="uom form-control" value="${rowData[3]}">`,
                        `<input type="text" readonly name="product[${productTable.rows().data().length + 1}][bom_qty]" id="bom_qty" class="bom_qty form-control" value="${bom_qty}">`,
                        `<input type="text" readonly name="product[${productTable.rows().data().length + 1}][inventory_qty]" class="inventory form-control" value="${inventoryQtyMatched}">`,
                        `<input type="number" min="0" id="request_qty" name="product[${productTable.rows().data().length + 1}][request_qty]" class="request_qty form-control" value="">`,
                        `<input type="text" readonly name="product[${productTable.rows().data().length + 1}][difference]" class="difference form-control" value="">`,
                        `<input type="text" name="product[${productTable.rows().data().length + 1}][remarks]" class="remarks form-control">`,
                        `<button type="button" class="btn btn-danger btn-sm remove-product"><i class="bi bi-trash"></i></button>`
                    ]).draw(false);

                    // Remove the row from the modal table
                    modalTable.row(row).remove().draw(false);
                }
            });

            // Uncheck all checkboxes
            $('#modalTable input:checked').prop('checked', false);

            // Hide the modal
            $('#product_modal').modal('hide');
        }

        $(document).on('click', '.remove-product1', function() {
            var row = $(this).closest('tr');
            productTable.row(row).remove().draw(false);
        });

        $(document).on('click', '.remove-product', function() {
            var row = $(this).closest('tr');
            var rowData = productTable.row(row).data();

            // Add the removed row back to the modal table
            modalTable.row.add([
                `<input class="form-check-input product_id" type="checkbox" value="${$(row).find('.product_id').val()}">`,
                rowData[1].replace(/<input[^>]*>/, ''),
                rowData[2].replace(/<input[^>]*>/, ''),
                rowData[5].replace(/<input[^>]*>/, ''),
                rowData[4].replace(/<input[^>]*>/, ''),
                $(row).find('.variance').val(),
                rowData[3].replace(/<input[^>]*>/, ''),
                $(row).find('.category').val()
            ]).draw(false);

            // Remove the row from the main table
            productTable.row(row).remove().draw(false);
            resetSerialNumbersM(productTable);
        });

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

        $('#productTable').on('input', '.request_qty.check_qty', function() {
            var row = $(this).closest('tr');
            var bom_qty = parseFloat(row.find('.bom_qty').val()) || 0;
            var request_qty = parseFloat($(this).val()) || 0;
            var allowed_qty = bom_qty + (bom_qty * (mrf_limit / 100));
            var difference = bom_qty - request_qty;
            row.find('.difference').val(difference);
            if (request_qty > allowed_qty) {
                alert('Request quantity exceeds the MRF limit value!');
                $(this).val('');
                row.find('.difference').val('')
            }
        });

        $(document).ready(function() {

            $(document).on('click', '.add-pro_order_no', function() {
                $('#shift1').closest('.row').hide();

            });

            $('#selectAll2').on('change', function() {
                var $modal = $(this).closest('.modal');
                $modal.find('.dpp_id').prop('checked', this.checked).trigger('change');
            });

            $(document).on('change', '#proModalTable .dpp_id', function() {
                var $modal = $(this).closest('.modal');
                var allChecked = $modal.find('.dpp_id').length === $modal.find('.dpp_id:checked')
                    .length;
                $modal.find('#selectAll2').prop('checked', allChecked);
                var row = $(this).closest('tr');

                var rowData = proModalTable.row(row).data();
                var proId = $(this).val();

                if ($(this).is(':checked')) {
                    selectedRowsPro[proId] = rowData;
                } else {
                    delete selectedRowsPro[proId];
                }
            });
        });


        let bool = 0;

        function add_proOrder() {
            Object.values(selectedRowsPro).forEach(rowData => {
                var rowId = rowData.id;

                let processName = '';
                if (rowData.pro_order_no) {
                    const parts = rowData.pro_order_no.split('/');
                    processName = parts.length >= 5 ? parts[4].trim() : '';
                }

                if (!addedProIds.has(rowId)) {
                    proTable.row.add([
                        proTable.rows().data().length + 1 +
                        `<input type="hidden" name="productionorder[${bool}][row_id]" class="row_id" value="${rowData.id}">
                        <input type="hidden" name="productionorder[${bool}][planned_qty]" class="planned_qty" value="${rowData.planned_qty ?? 0}">`,
                        `${rowData.pro_order_no ?? ''}<input type="hidden" name="productionorder[${bool}][pro_order_no]" class="pro_order_no" value="${rowData.pro_order_no}">`,
                        `${rowData.shift ?? ''}<input type="hidden" name="productionorder[${bool}][shift]" class="shift" value="${rowData.shift}">`,
                        `${processName}<input type="hidden" name="productionorder[${bool}][process_name]" class="process_name" value="${processName}">`,
                        `${rowData.machines?.name ?? ''}<input type="hidden" name="productionorder[${bool}][machine_name]" class="machine_name" value="${rowData.machines?.name}">`,
                        `${rowData.planned_date ?? ''}<input type="hidden" name="productionorder[${bool}][planned_date]" class="planned_date" value="${rowData.planned_date}">`,
                        `${rowData.planned_qty ?? 0}<input type="hidden" name="productionorder[${bool}][planned_qty]" class="planned_qty" value="${rowData.planned_qty}">`,
                        `<button min=0 type="button" class="btn btn-danger btn-sm remove-product2"><i class="bi bi-trash"></i></button>`
                    ]).draw(true);
                    $('.add-product').closest('.row').hide();
                    addedProIds.add(rowId);
                    addedProIdQty.add({
                        id: rowData.product_id,
                        qty: rowData.planned_qty ?? 0
                    });
                    delete selectedRowsPro[rowId ?? ''];
                }

                bool++;
            });

            $('#proModalTable input:checked').prop('checked', false);
            $('#po_modal').modal('hide');
            if (addedProIds.size > 0) {
                $('#generate-subparts').prop('disabled', false);
            }
        
            
        }



        $(document).on('click', '.remove-product2', function() {
            
            
            var row = $(this).closest('tr');
            var rowId = row.find('.row_id').val();
            addedProIds.delete(+rowId);
            const rowIdToDelete = +rowId;
            for (let item of addedProIdQty) {
                if (item.id === rowIdToDelete) {
                    addedProIdQty.delete(item);
                    break;
                }
            }
            delete selectedRowsPro[rowId ?? ''];
            proTable.row(row).remove().draw();
            var rows = $('#proShowTable tbody tr');

            if (rows.length > 0 && rows.find('td').text().trim() !== 'No data available in table') {
                $('.add-product').closest('.row').hide();
            }else{
                $('.add-product').closest('.row').show();
            }

            if (addedProIds.size > 0) {
                $('#generate-subparts').prop('disabled', false);
            } else {
                $('#generate-subparts').prop('disabled', true);
            }
            resetSerialNumbers(proTable);
        });

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

        $(document).on('click', '#generate-subparts', function() {
            $(document).find('.remove-product2').prop('disabled', true);
            $('#loading-message').html('Loading... <span id="loading-progress">0%</span>').show();
            $('#generate-subparts').prop('disabled', true);
            $('.add-pro_order_no').prop('disabled', true);
            const allProductIds = Array.from(addedProIdQty);

            $.ajax({
                url: `{{ route('daily-production-planning.get_subparts_mrf') }}`,
                method: 'POST',
                data: {
                    ids: allProductIds,
                    _token: '{{ csrf_token() }}'
                },
                success: async function(response) {
                    productTable.clear();

                    const parts = Object.values(response);
                    const total = parts.length;
                    let rowIndex = 1;
                    let chunkSize = 50;
                    let start = 0;

                    function renderChunk() {
                        const chunk = parts.slice(start, start + chunkSize);
                        const rows = [];

                        chunk.forEach((part) => {
                            rows.push([
                                rowIndex,
                                part.part_no +
                                `<input type="hidden" name="product[${rowIndex}][part_no]" class="part_no form-control" value="${part.part_no}"><input type="hidden" name="product[${rowIndex}][product_id]" class="product_id form-control" value="${part.product_id}">`,
                                part.part_name +
                                `<input type="hidden" name="product[${rowIndex}][part_name]" class="part_name form-control" value="${part.part_name}">`,
                                part.type +
                                `<input type="hidden" name="product[${rowIndex}][type_of_product]" class="type_of_product form-control" value="${part.type}">`,
                                part.model +
                                `<input type="hidden" name="product[${rowIndex}][model]" class="model form-control" value="${part.model}">`,
                                part.variance +
                                `<input type="hidden" name="product[${rowIndex}][variance]" class="variance form-control" value="${part.variance}">`,
                                `<input type="text" readonly name="product[${rowIndex}][uom]" class="uom form-control" value="${part.unit}">`,
                                `<input type="text" readonly name="product[${rowIndex}][bom_qty]" id="bom_qty" class="bom_qty form-control" value="${parseFloat(part.qty ?? 0).toFixed(4)}">`,
                                `<input type="text" readonly name="product[${rowIndex}][inventory_qty]" class="inventory form-control" value="${part.inventory_qty}">`,
                                `<input type="number" min="0" id="request_qty" name="product[${rowIndex}][request_qty]" class="request_qty check_qty form-control"  step="0.001" value="0">`,
                                `<input type="text" readonly name="product[${rowIndex}][difference]" class="difference form-control" value="${part.qty ?? 0}">`,
                                `<input type="text" name="product[${rowIndex}][remarks]" class="remarks form-control">`,
                                `<button type="button" class="btn btn-danger btn-sm remove-product1"><i class="bi bi-trash"></i></button>`
                            ]);
                            rowIndex++;
                        });

                        productTable.rows.add(rows).draw(false);

                        start += chunkSize;

                        // Update percentage
                        let percent = Math.min(100, Math.floor((start / total) * 100));
                        $('#loading-progress').text(`${percent}%`);

                        if (start < total) {
                            setTimeout(renderChunk, 5); // Next chunk
                        } else {
                            $('#loading-message').html('Completed ✅').fadeOut(1000);
                        }
                    }

                    renderChunk();
                }
            });
        });
    </script>

@endsection