@extends('layouts.app')
@section('title')
    BOM Registration
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('bom') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <style>
        #mainTable input {
            width: 100px;
        }
    </style>

    <!-- Date Range CSS -->
    <link rel="stylesheet" href="{{ asset('assets/vendor/daterange/daterange.css') }}" />

    <div class="card">
        <form method="post" action="{{ route('bom.store') }}" enctype="multipart/form-data" id="myForm">
            @csrf
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-12">

                        <div class="col-lg-3 col-sm-4 col-12">
                            <h5>Product Detail</h5>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12">
                        <div class="row align-items-center">
                            @php
                                $rev_no = 1;
                                if ($prev_bom) {
                                    $rev_no = $prev_bom->rev_no;
                                }
                            @endphp
                            <label for="rev_no" class="form-label col-4">Rev No.</label>
                            <div class="col-6">
                                <input type="text" readonly name="rev_no" value="{{ $rev_no }}" id="rev_no"
                                    class="form-control rounded-4">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12">
                        <div class="row align-items-center">
                            <label for="abc3" class="form-label col-4">Created Date</label>
                            <div class="col-6">
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-calendar4"></i>
                                    </span>
                                    <input type="text" id="abc3" name="created_date"
                                        value="{{ old('created_date') }}" class="form-control datepicker-current-date ">
                                </div>
                            </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 name="ref_no" id="ref_no" class="form-control rounded-4"
                                    value="{{ $bom_ref_no }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="created_by" class="form-label col-4">Created By</label>
                            <div class="col-6">
                                <input type="text" readonly name="created_by" id="created_by"
                                    class="form-control rounded-4" value="{{ Auth::user()->user_name }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="part_no" class="form-label col-4">Part No.</label>
                            <div class="col-6">
                                <select class="form-select" name="product_id" id="part_no">
                                    @if (old('product_id') != null)
                                        @php
                                            $product = App\Models\Product::find(old('product_id'));
                                        @endphp
                                        @if ($product)
                                            <option value="{{ $product->id }}" selected style="color: black;">
                                                {{ $product->part_no }}
                                            </option>
                                        @else
                                            <option value="" selected disabled>Invalid Product Selected</option>
                                        @endif
                                    @else
                                        <option value="" selected disabled>Select part no</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="part_weight" class="form-label col-4">Part Weight:</label>
                            <div class="col-6">
                                <input type="text" readonly name="part_weight" id="part_weight"
                                    class="form-control rounded-4" value="{{ old('part_weight') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="part_name" class="form-label col-4">Part Name:</label>
                            <div class="col-6">
                                <input type="text" readonly id="part_name" class="form-control rounded-4"
                                    value="{{ old('part_name') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="customer_name" class="form-label col-4">Customer:</label>
                            <div class="col-6">
                                <input type="text" readonly id="customer_name" class="form-control rounded-4"
                                    value="{{ old('customer_name') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="customer_product_code" class="form-label col-4">Type of Product:</label>
                            <div class="col-6">
                                <input type="text" readonly id="type_of_product" class="form-control rounded-4"
                                    value="{{ old('customer_product_code') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="inputGroupFile02" class="form-label col-4">Attachment 1:</label>
                            <div class="col-6">
                                <input type="file" class="form-control rounded-4" name="attachment1"
                                    id="inputGroupFile02">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="model" class="form-label col-4">Model:</label>
                            <div class="col-6">
                                <input type="text" readonly name="model" id="model"
                                    class="form-control rounded-4" value="{{ old('model') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="inputGroupFile02" class="form-label col-4">Attachment 2:</label>
                            <div class="col-6">
                                <input type="file" class="form-control rounded-4" name="attachment2"
                                    id="inputGroupFile02">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="variance" class="form-label col-4">Variance:</label>
                            <div class="col-6">
                                <input type="text" readonly name="variance" id="variance"
                                    class="form-control rounded-4" value="{{ old('variance') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="inputGroupFile02" class="form-label col-4">Attachment 3:</label>
                            <div class="col-6">
                                <input type="file" class="form-control rounded-4" name="attachment3"
                                    id="inputGroupFile02">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="kanban_no" class="form-label col-4">Kanban No:</label>
                            <div class="col-6">
                                <input type="text" name="kanban_no" id="kanban_no" class="form-control rounded-4"
                                    value="{{ old('kanban_no') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="inputGroupFile02" class="form-label col-4">Kanban Card:</label>
                            <div class="col-6">
                                <input type="file" class="form-control rounded-4" name="kanbon_card"
                                    id="inputGroupFile02">
                            </div>
                        </div>
                    </div>



                </div>
                <br>
                {{-- Material and Purchase Part --}}
                <div class="row">
                    <div class="col-12 d-flex justify-content-between">
                        <h5>Material & Purchase Part</h5>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#materialandpruchasepart">Add Material</button>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0" id="material_pruchase_part_Table">
                            <thead>
                                <tr>
                                    <th>Sr.</th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Type of Product</th>
                                    <th>UOM</th>
                                    <th>Qty / Length Required</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <br>
                {{-- Crushing Material --}}
                <div class="row">
                    <div class="col-12 d-flex justify-content-between">
                        <h5>Circuit / Kanban</h5>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#crushing_material_Modal">Add Material</button>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0" id="crushing_Table">
                            <thead>
                                <tr>
                                    <th>Sr.</th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Type of Product</th>
                                    <th>UOM</th>
                                    <th>Qty Required</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <br>
                {{-- Process --}}
                <div class="row">
                    <div class="col-12 d-flex justify-content-between">
                        <h5>Process</h5>
                        <button type="button" class="btn btn-primary" id="addRow">+ Add Row</button>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0" id="process_Table">
                            <thead>
                                <tr>
                                    <th>Sr No</th>
                                    <th>Process</th>
                                    <th>Process No</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <br>
                <div class="card-footer">
                    <div class="row">
                        <div class="d-flex gap-2 justify-content-end col-12">
                            <input type="hidden" id="storedData" name="details">
                            <button type="button" class="btn btn-primary saveBtn">Save</button>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Material and Purchase MODAL --}}
            <div class="modal fade" id="materialandpruchasepart" tabindex="-1"
                aria-labelledby="materialandpruchasepartTitle" 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="materialandpruchasepartTitle">
                                Material and Purchase Part
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close" onclick="selectedRowsProducts = {};$('#material_pruchase_part_modalTable input:checked').prop('checked', false);material_pruchase_part_modalTable.ajax.reload();"></button>
                        </div>
                        <div class="modal-body">
                            <div class="table-responsive">
                                <table class="table table-bordered m-0 w-100" id="material_pruchase_part_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>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondry" data-bs-dismiss="modal" onclick="selectedRowsProducts = {};$('#material_pruchase_part_modalTable input:checked').prop('checked', false);material_pruchase_part_modalTable.ajax.reload();">
                                CANCEL
                            </button>
                            <button type="button" class="btn btn-primary" onclick="add_product1()">
                                ADD
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- CRUSHING MODAL --}}
            <div class="modal fade" id="crushing_material_Modal" tabindex="-1"
                aria-labelledby="crushing_material_ModalTitle" 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="crushing_material_ModalTitle">
                                Circuit / Kanban
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close" onclick="selectedRowsProducts = {};$('#crushing_material_modalTable input:checked').prop('checked', false);crushing_material_modalTable.ajax.reload();"></button>
                        </div>
                        <div class="modal-body">
                            <div class="table-responsive">
                                <table class="table table-bordered m-0 w-100" id="crushing_material_modalTable">
                                    <thead>
                                        <tr>
                                            <th>
                                                <input type="checkbox" id="selectAll1"
                                                    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>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondry" data-bs-dismiss="modal" onclick="selectedRowsProducts = {};$('#crushing_material_modalTable input:checked').prop('checked', false);crushing_material_modalTable.ajax.reload();">
                                CANCEL
                            </button>
                            <button type="button" class="btn btn-primary" onclick="add_product2()">
                                ADD
                            </button>
                        </div>
                    </div>
                </div>
            </div>       
        </form>
    </div>

    {{-- PROCESS MODAL --}}
    <div class="modal fade" id="processModal" tabindex="-1" aria-labelledby="processModalTitle" aria-modal="true"
        role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="processModalTitle">
                        Process
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6">
                            <label>Process:</label>
                            <input type="hidden" class="hiddenRowId">
                            <select class="form-select process" id="process">    
                                    <option value="" selected disabled>Select Process</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label>Cycle Time (s):</label>
                            <input type="number" step="0.001" class="form-control cycle_time">
                        </div>
                        <br>
                        <div class="col-6 mt-3">
                            <label>Process No:</label>
                            <input type="text" class="form-control process_no">
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-12 d-flex justify-content-between">
                            <label>Material & Purhase Part</label>
                            <div>
                                <button class="btn btn-sm btn-primary add_process_materials">Add</button>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table class="table table-bordered m-0 w-100" id="materialModalTable">
                            <thead>
                                <tr>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-12 d-flex justify-content-between">
                            <label>Circuit / Kanban</label>
                            <div>
                                <button class="btn btn-sm btn-primary add_process_subparts">Add</button>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table class="table table-bordered m-0 w-100" id="subpartModalTable">
                            <thead>
                                <tr>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Action</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_process()">
                        ADD
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- SUBPART PROCESS MODAL --}}
    <div class="modal fade" id="subpartProcessModal" tabindex="-1" aria-labelledby="subpartProcessModalTitle"
        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="subpartProcessModalTitle">
                        Circuit / Kanban
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="selectedRowsProducts = {};$('#subpartProcessModalTable input:checked').prop('checked', false);subpartProcessModalTable.ajax.reload();"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0 w-100" id="subpartProcessModalTable">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" id="selectAll2" /></th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondry" data-bs-dismiss="modal" onclick="selectedRowsProducts = {};$('#subpartProcessModalTable input:checked').prop('checked', false);subpartProcessModalTable.ajax.reload();">
                        CANCEL
                    </button>
                    <button type="button" class="btn btn-primary" onclick="add_process_subparts()">
                        ADD
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- MATERIAL PROCESS MODAL --}}
    <div class="modal fade" id="materialProcessModal" tabindex="-1" aria-labelledby="materialProcessModalTitle"
        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="materialProcessModalTitle">
                        Material & Purchase Parts
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="selectedRowsProducts = {};$('#materialProcessModalTable input:checked').prop('checked', false);materialProcessModalTable.ajax.reload();"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0 w-100" id="materialProcessModalTable">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" id="selectAll3" /></th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondry" data-bs-dismiss="modal" onclick="selectedRowsProducts = {};$('#materialProcessModalTable input:checked').prop('checked', false);materialProcessModalTable.ajax.reload();">
                        CANCEL
                    </button>
                    <button type="button" class="btn btn-primary" onclick="add_process_materials()">
                        ADD
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script src="{{ asset('assets/js/modernizr.js') }}"></script>
    <script src="{{ asset('assets/js/moment.min.js') }}"></script>

    <!-- Date Range JS -->
    <script src="{{ asset('assets/vendor/daterange/daterange.js') }}"></script>
    <script src="{{ asset('assets/vendor/daterange/custom-daterange.js') }}"></script>
    <script>

        $(document).ready(function() {
            $('#part_no').select2({
                placeholder: 'Select Part No',
                ajax: {
                    url: '{{ route('product.search') }}',
                    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.part_no,
                                    id: item.id,
                                    data: {
                                        part_name: item.part_name,
                                        part_weight: item.part_weight,
                                        customer_name: item.customers?.name ?? '',
                                        variance: item.variance,
                                        model: item.model,
                                        type_of_products: item.type_of_products?.type ?? '',
                                    }
                                };
                            }),
                            pagination: {
                                more: (params.page * 10) < data
                                    .total_count
                            }
                        };
                    },
                    cache: true
                }
            });

            $('#part_no').on('select2:select', function(e) {
                var selectedData = e.params.data;

                $('#part_name').val(selectedData.data.part_name);
                $('#part_weight').val(selectedData.data.part_weight);
                $('#customer_name').val(selectedData.data.customer_name);
                $('#variance').val(selectedData.data.variance);
                $('#model').val(selectedData.data.model);
                $('#type_of_product').val(selectedData.data.type_of_products);
            });
        });
    </script>
    {{-- material_pruchase_part_script --}}
    <script>
        let material_pruchase_part_modalTable;
        let material_pruchase_part_Table;
        var selectedRowsProducts = {};
        const addedProductIds = new Set();
        $(document).ready(function() {
            material_pruchase_part_modalTable = $('#material_pruchase_part_modalTable').DataTable({
                perPageSelect: [5, 10, 15, ["All", -1]],
                processing: true,
                serverSide: true,
                language: {
                    processing: 'Processing'
                },
                ajax: {
                    url: "{{ route('product.data') }}",
                    type: 'GET',
                },
                columns: [{
                        data: 'id',
                        name: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row, meta) {
                            let checked = selectedRowsProducts[row.id] ? 'checked' : '';
                            return `
                                    <input class="form-check-input purchase_product_id" type="checkbox" id="inlineCheckbox_${row.id}" value="${row.id}" ${checked}>
                                `;
                        }
                    }, {
                        data: 'part_no',
                        name: 'part_no',
                    },
                    {
                        data: 'part_name',
                        name: 'part_name',
                    },
                    {
                        data: 'units.name',
                        name: 'units.name',
                        defaultContent: ''
                    },
                    {
                        data: 'model',
                        name: 'model',
                    },
                    {
                        data: 'variance',
                        name: 'variance',
                    },
                    {
                        data: 'type_of_products.type',
                        name: 'type_of_products.type',
                        defaultContent: ''
                    },
                ],
                paging: true,
                pagingType: 'input',
            });
            material_pruchase_part_Table = $('#material_pruchase_part_Table').DataTable();

            $(document).on('change', '.purchase_product_id', function () {
                const row = $(this).closest('tr');
                const rowData = material_pruchase_part_modalTable.row(row).data();

                if (rowData) {
                    if (this.checked) {
                        selectedRowsProducts[rowData.id] = rowData;
                    } else {
                        delete selectedRowsProducts[rowData.id];
                    }
                }
            });




        });

        let bool = 0;
        function add_product1() {
            let options = [];
            Object.values(selectedRowsProducts).forEach(rowData => {
                var productId = rowData.id;
                options.push({
                    product_id: productId,
                    part_name: rowData[2],
                });
                if (!addedProductIds.has(productId)) {
                    material_pruchase_part_Table.row.add([
                        material_pruchase_part_Table.rows().data().length + 1,
                        rowData.part_no,
                        rowData.part_name,
                        rowData.type_of_product,
                        rowData.unit,
                        `<input type="number" step="0.001" name="material_pruchase_part[${bool}][qty]" class="qty form-control" >
                        <input type="hidden" name="material_pruchase_part[${bool}][product_id]" value="${productId}">`,
                        `<button type="button" class="btn btn-danger btn-sm remove-product"><i class="bi bi-trash"></i></button>`
                        ]).draw(false);
                        addedProductIds.add(productId);
                        delete selectedRowsProducts[productId ?? ''];
                        resetSerialNumbersM();
                }
                bool++;
            });

            $('#material_pruchase_part_modalTable input:checked').prop('checked', false);

            $('#materialandpruchasepart').modal('hide');

            if ($('#process_Table').find('tr').length > 0) {
                options.forEach(function(option, index) {
                    $('#process_Table').find('tr').each(function(trIndex, element) {
                        if ($(`.raw_part_ids option[value="${option.product_id}"]`).length === 0) {
                            $('.raw_part_ids').append(
                                `<option value="${option.product_id}">${option.part_name}</option>`);
                        }
                    });
                });
                $('.raw_part_ids').trigger('change');
            }

            $(document).on('click', '.remove-product', function() {
                var row = $(this).closest('tr');
                var productId = row.find('.product_id').val();

                $('#process_Table tbody').find('tr').each(function(trIndex, element) {
                    $(element).find('.raw_part_ids option').each(function(optionIndex, optionElement) {
                        var optionValue = $(optionElement).val();
                        if (optionValue === $(row).find(
                                'input[name^="material_pruchase_part["][name$="[product_id]"]').val()) {
                            $(optionElement).remove();
                        }
                    });
                });
                addedProductIds.delete(+productId);
                delete selectedRowsProducts[productId ?? ''];
                material_pruchase_part_Table.row(row).remove().draw(false);
                resetSerialNumbersM(material_pruchase_part_Table);
            });
        }

        function resetSerialNumbersM() {
            if ($('#material_pruchase_part_Table tbody tr:first').find('td:first').text() != 'No data available in table') {
                $('#material_pruchase_part_Table tbody tr').each(function(index) {
                    $(this).find('td:first').text(index + 1);
                });
            }
        }
    </script>
    {{-- crushing_material_script --}}
    <script>
        let crushing_material_modalTable;
        let crushing_Table;
        var selectedRowsProductsForCrushing = {};
        const addedProductIdsForCrushing = new Set();
        $(document).ready(function() {
            crushing_material_modalTable = $('#crushing_material_modalTable').DataTable({
                perPageSelect: [5, 10, 15, ["All", -1]],
                processing: true,
                serverSide: true,
                language: {
                    processing: 'Processing'
                },
                ajax: {
                    url: "{{ route('product.data') }}",
                    type: 'GET',
                },
                columns: [{
                        data: 'id',
                        name: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row, meta) {
                            let checked = selectedRowsProducts[row.id] ? 'checked' : '';
                            return `
                                <input class="form-check-input crushing_product_id" type="checkbox" id="inlineCheckbox_${row.id}" value="${row.id}" ${checked}>
                            `;
                        }
                    }, {
                        data: 'part_no',
                        name: 'part_no',
                    },
                    {
                        data: 'part_name',
                        name: 'part_name',
                    },
                    {
                        data: 'units.name',
                        name: 'units.name',
                        defaultContent: ''
                    },
                    {
                        data: 'model',
                        name: 'model',
                    },
                    {
                        data: 'variance',
                        name: 'variance',
                    },
                    {
                        data: 'type_of_products.type',
                        name: 'type_of_products.type',
                        defaultContent: ''
                    },
                ],
                paging: true,
                pagingType: 'input',
            });
            crushing_Table = $('#crushing_Table').DataTable();


            $(document).on('change', '.crushing_product_id', function () {
                const row = $(this).closest('tr');
                const rowData = crushing_material_modalTable.row(row).data();

                if (this.checked) {
                    selectedRowsProductsForCrushing[rowData.id] = rowData;
                } else {
                    delete selectedRowsProductsForCrushing[rowData.id];
                }
            });
        });

        function add_product2() {
            let subpartOptions = [];
            Object.values(selectedRowsProductsForCrushing).forEach(rowData => {
                var productId = rowData.id;
                subpartOptions.push({
                    product_id: productId,
                    part_name: rowData[2],
                });
                if (!addedProductIdsForCrushing.has(productId)) {
                    crushing_Table.row.add([
                        crushing_Table.rows().data().length + 1,
                        rowData.part_no,
                        rowData.part_name,
                        rowData.type_of_product,
                        rowData.unit,
                        `<input type="hidden" name="sub_part[${bool}][product_id]" value="${productId}">
                            <input name="sub_part[${bool}][qty]" class="remarks form-control">`,
                        `<button type="button" class="btn btn-danger btn-sm remove-product"><i class="bi bi-trash"></i></button>`
                    ]).draw(false);
                    addedProductIdsForCrushing.add(productId);
                    delete selectedRowsProductsForCrushing[productId ?? ''];
                    resetSerialNumbersC();
                }
                bool++;
            });

            $('#crushing_material_modalTable input:checked').prop('checked', false);

            $(document).on('click', '.remove-product', function() {
                var row = $(this).closest('tr');
                var productId = row.find('.product_id').val();

                $('#process_Table tbody').find('tr').each(function(trIndex, element) {
                    $(element).find('.sub_part_ids option').each(function(optionIndex, optionElement) {
                        var optionValue = $(optionElement).val();
                        if (optionValue === $(row).find(
                                'input[name^="sub_part["][name$="[product_id]"]').val()) {
                            $(optionElement).remove();
                        }
                    });
                })
                addedProductIdsForCrushing.delete(+productId);
                delete selectedRowsProductsForCrushing[productId ?? ''];
                crushing_Table.row(row).remove().draw(false);
                resetSerialNumbersC(crushing_Table);
            });


            $('#crushing_material_Modal').modal('hide');

            if ($('#process_Table').find('tr').length > 0) {
                subpartOptions.forEach(function(option, index) {
                    $('#process_Table').find('tr').each(function(trIndex, element) {
                        if ($(`.sub_part_ids option[value="${option.product_id}"]`).length === 0) {
                            $('.sub_part_ids').append(
                                `<option value="${option.product_id}">${option.part_name}</option>`);
                        }
                    });
                });
                $('.sub_part_ids').trigger('change');
            }
        }

        function resetSerialNumbersC() {
            if ($('#crushing_Table tbody tr:first').find('td:first').text() != 'No data available in table') {
                $('#crushing_Table tbody tr').each(function(index) {
                    $(this).find('td:first').text(index + 1);
                });
            }
        }
    </script>
    {{-- Add_row_script --}}
    <script>
        var process_Table; //Process
        var subpartModalTable; //Process Product Table
        var materialModalTable; //Process Product Table
        var subpartProcessModalTable; //Product Table
        var materialProcessModalTable; //Product Table
        $(document).ready(function() {
            function initSelect2WithAjax(selector, placeholder, route, parent = $('body')) {
                $(selector).select2({
                    placeholder: placeholder,
                    dropdownParent: parent,
                    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.name,
                                        id: item.id,
                                    };
                                }),
                                pagination: {
                                    more: (params.page * 10) < data.total_count
                                }
                            };
                        },
                        cache: true
                    }
                });
            }
            initSelect2WithAjax('#process', 'Select Process', '{{ route('process.search') }}', $("#processModal"));
            process_Table = $('#process_Table').DataTable({
                paging: false,
                searching: false,
                lengthChange: false,
                ordering: true
            });
            subpartModalTable = $('#subpartModalTable').DataTable({
                paging: false,
                searching: false,
                lengthChange: false,
                ordering: true
            });
            materialModalTable = $('#materialModalTable').DataTable({
                paging: false,
                searching: false,
                lengthChange: false,
                ordering: true
            });
            subpartProcessModalTable = $('#subpartProcessModalTable').DataTable({
                "columnDefs": [{
                    "targets": 0,
                    "orderable": false
                }],
                paging: false,
                searching: false,
                lengthChange: false,
                ordering: true
            });
            materialProcessModalTable = $('#materialProcessModalTable').DataTable({
                "columnDefs": [{
                    "targets": 0,
                    "orderable": false
                }],
                paging: false,
                searching: false,
                lengthChange: false,
                ordering: true
            });
        });

        $('#addRow').on('click', function() {
            subpartModalTable.clear().draw(false);
            materialModalTable.clear().draw(false);
            subpartProcessModalTable.clear().draw(false);
            materialProcessModalTable.clear().draw(false);
            $('.hiddenRowId').val('');
            addProductsToModal();
            $('#processModal').modal('show');
        });

        function addProductsToModal() {
            $('.process').val('');
            $('.cycle_time').val('');
            $('.process_no').val('');

            var tableCrushing = $('#crushing_Table').DataTable();
            var originalPageLengths = tableCrushing.page.len();

            tableCrushing.page.len(-1).draw(false);

            tableCrushing.rows().every(function(rowIdx, tableLoop, rowLoop) {
                var row = $(this.node());
                if (row.find('td:first').text() != 'No data available in table') {
                    var $value = row.find('input[name^="sub_part["][name$="][product_id]"]').val();
                    subpartProcessModalTable.row.add([
                        `<input type="checkbox" class="product_id" value="${$value}"/>`,
                        row.find('td:eq(1)').text(),
                        row.find('td:eq(2)').text()
                    ]).draw(false);
                }
            });

            tableCrushing.page.len(originalPageLengths).draw(false);


            var table = $('#material_pruchase_part_Table').DataTable();
            var originalPageLength = table.page.len();

            table.page.len(-1).draw(false);

            table.rows().every(function(rowIdx, tableLoop, rowLoop) {
                var row = $(this.node());
                if (row.find('td:first').text() != 'No data available in table') {
                    var $value = row.find('input[name^="material_pruchase_part["][name$="][product_id]"]').val();
                    materialProcessModalTable.row.add([
                        `<input type="checkbox" class="product_id" value="${$value}"/>`,
                        row.find('td:eq(1)').text(),
                        row.find('td:eq(2)').text()
                    ]).draw(false);
                }
            });

            table.page.len(originalPageLength).draw(false);

        }

        $('.add_process_subparts').click(function() {
            $('#subpartProcessModal').modal('show');
        });

        $('.add_process_materials').click(function() {
            $('#materialProcessModal').modal('show');
        });

        function add_process_subparts() {
            $('#subpartProcessModalTable').find('.product_id:checked').each(function() {
                var productId = $(this).val();
                var productExists = $('#subpartModalTable tbody tr').filter(function() {
                    return $(this).find('input.product_id').val() === productId;
                }).length > 0;
                if (!productExists) {
                    subpartModalTable.row.add([
                        `<input type="hidden" class="product_id" value="${productId}"/>
                        ${$(this).closest('tr').find('td:eq(1)').text()}`,
                        $(this).closest('tr').find('td:eq(2)').text(),
                        `<button type="button" class="btn btn-danger btn-sm remove-child-circuit"><i class="bi bi-trash"></i></button>`
                    ]).draw(false);
                    subpartProcessModalTable.row($(this).closest('tr')).remove().draw(false);

                }
                $('#selectAll2').prop('checked', false).trigger('change');
            });
            $('#subpartProcessModal').modal('hide');
        }

        function add_process_materials() {
            $('#materialProcessModalTable').find('.product_id:checked').each(function() {
                var productId = $(this).val();
                var productExists = $('#materialModalTable tbody tr').filter(function() {
                    return $(this).find('input.product_id').val() === productId;
                }).length > 0;
                if (!productExists) {
                    materialModalTable.row.add([
                        `<input type="hidden" class="product_id" value="${productId}"/>
                        ${$(this).closest('tr').find('td:eq(1)').text()}`,
                        $(this).closest('tr').find('td:eq(2)').text(),
                        `<button type="button" class="btn btn-danger btn-sm remove-child-material"><i class="bi bi-trash"></i></button>`
                    ]).draw(false);
                    materialProcessModalTable.row($(this).closest('tr')).remove().draw(false);

                }
                $('#selectAll3').prop('checked', false).trigger('change');
            });
            $('#materialProcessModal').modal('hide');
        }

        function add_process() {
            let processValue = $('.process').val();
            let cycleTimeValue = $('.cycle_time').val();
            let processNoValue = $('.process_no').val();

            if (!processValue) {
                alert('Please Select Process');
                return;
            }
            if (!cycleTimeValue) {
                alert('Please Input Cycle Time');
                return;
            }
            if (!processNoValue) {
                alert('Please Input Process No');
                return;
            }

            $('#processModal').modal('hide');

            // Get unique row identifier or generate new one
            let rowId = $('.hiddenRowId').val(); // Check if editing an existing row
            if (!rowId) {
                rowId = `row-${Date.now()}`; // Generate unique ID for a new row
            }

            let rowExists = false;

            // Check if the row exists and update it
            $('#process_Table tbody tr').each(function() {
                if ($(this).find('.rowId').val() === rowId) {
                    $(this).find('td:eq(1)').text($('.process').find('option:selected').text());
                    $(this).find('td:eq(2)').text(processNoValue);
                    rowExists = true;
                }
            });

            // If row doesn't exist, add a new one
            if (!rowExists) {
                process_Table.row.add([
                    process_Table.rows().data().length + 1,
                    $('.process').find('option:selected').text(),
                    processNoValue,
                    `<button type="button" class="btn btn-danger btn-sm remove-process"><i class="bi bi-trash"></i></button> <input type="hidden" class="rowId" value="${rowId}">
                    <button type="button" class="btn btn-primary btn-sm openModal"><i class="bi bi-plus"></i></button>`
                ]).draw(false);

                // Add unique identifier to the new row
                let newRow = $('#process_Table tbody tr:last');
                newRow.data('rowId', rowId);
            }

            // Store data in session storage
            let data = {
                process: processValue,
                cycle_time: cycleTimeValue,
                process_no: processNoValue,
                rowId: rowId,
                circuit: [],
                raw: []
            };

            $('#subpartModalTable tbody tr').each(function() {
                data.circuit.push({
                    product_id: $(this).find('.product_id').val(),
                    part_no: $(this).find('td:eq(0)').text().trim(),
                    part_name: $(this).find('td:eq(1)').text().trim()
                });
            });

            $('#materialModalTable tbody tr').each(function() {
                data.raw.push({
                    product_id: $(this).find('.product_id').val(),
                    part_no: $(this).find('td:eq(0)').text().trim(),
                    part_name: $(this).find('td:eq(1)').text().trim()
                });
            });

            sessionStorage.setItem(`StoreProcess${rowId}`, JSON.stringify(data));
        }

        $(document).on('click', '.remove-child-material', function() {
            const table = $('#materialProcessModalTable').DataTable();
            const $row = $(this).closest('tr');
            const product = $row.find('.product_id').val();
            const td1Text = $row.find('td').eq(0).text().trim();
            const td2Text = $row.find('td').eq(1).text().trim();

            let rowExists = false;
            table.rows().every(function() {
                const data = this.data();
                const existingTd1Text = data[1];
                const existingTd2Text = data[2];

                if (existingTd1Text === td1Text && existingTd2Text === td2Text) {
                    rowExists = true;
                    // this.remove(); 
                    return false;
                }
            });

            if (!rowExists) {
                table.row.add([
                    `<input type="checkbox" class="product_id" value="${product}">`,
                    td1Text,
                    td2Text
                ]).draw(false);
            }

            materialModalTable.row($row).remove().draw(false);
        });

        $(document).on('click', '.remove-child-circuit', function() {
            const table = $('#subpartProcessModalTable').DataTable();
            const $row = $(this).closest('tr');
            const product = $row.find('.product_id').val();
            const td1Text = $row.find('td').eq(0).text().trim();
            const td2Text = $row.find('td').eq(1).text().trim();

            let rowExists = false;
            table.rows().every(function() {
                const data = this.data();
                const existingTd1Text = data[1];
                const existingTd2Text = data[2];

                if (existingTd1Text === td1Text && existingTd2Text === td2Text) {
                    rowExists = true;
                    // this.remove(); 
                    return false;
                }
            });

            if (!rowExists) {
                table.row.add([
                    `<input type="checkbox" class="product_id" value="${product}">`,
                    td1Text,
                    td2Text
                ]).draw(false);
            }

            subpartModalTable.row($row).remove().draw(false);
        });



        $(document).on('click', '.openModal', function() {
            $rowId = $(this).closest('tr').find('.rowId').val();
            if ($rowId) {
                $('.hiddenRowId').val($rowId);
            } else {
                $('.hiddenRowId').val('');
            }
            storedData = sessionStorage.getItem(`StoreProcess${$rowId}`);

            $('.process').val('');
            $('.cycle_time').val('');
            $('.process_no').val('');

            subpartModalTable.clear().draw(false);
            materialModalTable.clear().draw(false);

            if (storedData) {
                let data = JSON.parse(storedData);

                $('.process').val(data.process);
                $('.cycle_time').val(data.cycle_time);
                $('.process_no').val(data.process_no);


                data.circuit.forEach(function(item) {
                    if (item.part_no != "No data available in table") {
                        subpartModalTable.row.add([
                            `<input type="hidden" class="product_id" value="${item.product_id}"/>
                        ${item.part_no}`,
                            item.part_name,
                            `<button type="button" class="btn btn-danger btn-sm remove-child-circuit"><i class="bi bi-trash"></i></button>`
                        ]).draw(false);
                    }
                });

                data.raw.forEach(function(item) {
                    if (item.part_no != "No data available in table") {
                        materialModalTable.row.add([
                            `<input type="hidden" class="product_id" value="${item.product_id}"/>
                        ${item.part_no}`,
                            item.part_name,
                            `<button type="button" class="btn btn-danger btn-sm remove-child-material"><i class="bi bi-trash"></i></button>`
                        ]).draw(false);
                    }
                });
            }

            $('#processModal').modal('show');
        });

        $(document).on('click', '.remove-process', function() {
            $row = $(this).closest('tr');
            let rowId = $row.find('td:eq(0)').text();
            sessionStorage.removeItem(`StoreProcess${rowId}`);
            process_Table.row($row).remove().draw(false);
            resetSerialNumbersP();
        });

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

        $('#selectAll').on('change', function() {
            var closestTable = $(this).closest('table');
            var checkboxes = closestTable.find('.product_id');
            checkboxes.prop('checked', this.checked);
        });

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

        $('#selectAll2').on('change', function() {
            var closestTable = $(this).closest('table');
            var checkboxes = closestTable.find('.product_id');
            checkboxes.prop('checked', this.checked);
        });

        $('#selectAll3').on('change', function() {
            var closestTable = $(this).closest('table');
            var checkboxes = closestTable.find('.product_id');
            checkboxes.prop('checked', this.checked);
        });


        $('.saveBtn').click(function() {
            $('.card-body').find('.table').DataTable().page.len(-1).draw(false);
            let array = [];
            $('#process_Table tbody tr').each(function() {
                $rowId = $(this).closest('tr').find('.rowId').val();
                storedData = sessionStorage.getItem(`StoreProcess${$rowId}`);
                array.push(JSON.parse(storedData));
            });
            $('#storedData').val(JSON.stringify(array));
            $(this).closest('form').submit();
        });
    </script>
@endsection