@extends('layouts.app')
@section('title')
    BOM UPDATE
@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;
        }

        .read-only {
            background-color: #e9ecef;
            /* Light gray background */
            color: #495057;
            /* Text color */
            border: 1px solid #ced4da;
            /* Border color */
            cursor: not-allowed;
            /* Change cursor to indicate no action */
        }
    </style>
    <link rel="stylesheet" href="{{ asset('assets/vendor/daterange/daterange.css') }}" />
    @php
        $process_bom = $process;
    @endphp
    <div class="card">
        <form method="post" action="{{ route('bom.update', $bom->id) }}" enctype="multipart/form-data">
            @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">

                            <label for="rev_no" class="form-label col-4">Rev No.</label>
                            <div class="col-6">
                                <input type="text" readonly name="rev_no" value="{{ $bom->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="{{ $bom->created_date }}" class="form-control datepicker ">
                                </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="product_id" class="form-label col-4">Part No.</label>
                            <div class="col-6">
                                <select class="form-select" name="product_id" id="part_no">
                                    <option value="{{ $bom->product_id }}" selected style="color: black;">
                                        {{ $bom->products->part_no }}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="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="{{ $bom->products->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="{{ $bom->products->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="{{ optional($bom->products->customers)->name ?? optional($bom->products->suppliers)->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="{{ $bom->products->type_of_products->type ?? '' }}">
                            </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">
                                @if (isset($bom->attachment1))
                                    <div class="d-flex align-items-center">
                                        <!-- Download link with file name -->
                                        <a href="{{ asset('/bom-attachments/') }}/{{ $bom->attachment1 }}"
                                            target="_blank" class="btn btn-outline-secondary me-2"
                                            id="inputGroupFileAddon03">
                                            <i class="bi bi-file-text"></i> {{ substr($bom->attachment1, 14) }}
                                        </a>
                                        <!-- Optionally display the file name next to the download link -->
                                    </div>
                                @endif
                                <!-- Input field for uploading new file -->
                                <input type="file" class="form-control rounded-4 mt-2" 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="{{ $bom->products->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">
                                @if (isset($bom->attachment2))
                                    <div class="d-flex align-items-center">
                                        <!-- Download link with file name -->
                                        <a href="{{ asset('/bom-attachments/') }}/{{ $bom->attachment2 }}"
                                            target="_blank" class="btn btn-outline-secondary me-2"
                                            id="inputGroupFileAddon03">
                                            <i class="bi bi-file-text"></i> {{ substr($bom->attachment2, 14) }}
                                        </a>
                                        <!-- Optionally display the file name next to the download link -->
                                    </div>
                                @endif
                                <!-- Input field for uploading new file -->
                                <input type="file" class="form-control rounded-4 mt-2" 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="{{ $bom->products->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">
                                @if (isset($bom->attachment3))
                                    <div class="d-flex align-items-center">
                                        <!-- Download link with file name -->
                                        <a href="{{ asset('/bom-attachments/') }}/{{ $bom->attachment3 }}"
                                            target="_blank" class="btn btn-outline-secondary me-2"
                                            id="inputGroupFileAddon03">
                                            <i class="bi bi-file-text"></i> {{ substr($bom->attachment3, 14) }}
                                        </a>
                                        <!-- Optionally display the file name next to the download link -->
                                    </div>
                                @endif
                                <!-- Input field for uploading new file -->
                                <input type="file" class="form-control rounded-4 mt-2" 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="{{ $bom->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">
                                @if (isset($bom->kanbon_card))
                                    <div class="d-flex align-items-center">

                                        <a href="{{ asset('/bom-attachments/') }}/{{ $bom->kanbon_card }}"
                                            target="_blank" class="btn btn-outline-secondary" type="button"
                                            id="inputGroupFileAddon03">
                                            <i class="bi bi-file-text"></i>{{ substr($bom->kanbon_card, 14) }}
                                        </a>
                                    </div>
                                @endif
                                <input type="file" class="form-control rounded-4 mt-2" 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 and Purchase Part</h5>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#materialandpruchasepart" id="additem1">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 No</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>
                                @php
                                    $array = [];
                                @endphp
                                @foreach ($purchase_parts as $purchase_part)
                                    @php
                                        $array[] = $purchase_part->product_id;
                                    @endphp


                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $purchase_part->product->part_no }}</td>
                                        <td>{{ $purchase_part->product->part_name }}</td>
                                        <td>{{ $purchase_part->product->type_of_products->type ?? '' }}</td>
                                        <td>{{ $purchase_part->product->units->name ?? '' }}</td>
                                        <td>
                                            <input step="0.001"
                                                name="material_pruchase_part[{{ $loop->iteration }}][qty]"
                                                class="qty form-control" value="{{ $purchase_part->qty }}">
                                            <input class="product_id" type="hidden"
                                                name="material_pruchase_part[{{ $loop->iteration }}][product_id]"
                                                value="{{ $purchase_part->product_id }}">
                                            <input type="hidden" class="model"
                                                value="{{ $purchase_part->product->model }}">
                                            <input type="hidden" class="variance"
                                                value="{{ $purchase_part->product->variance }}">
                                            <input type="hidden" class="category"
                                                value="{{ $purchase_part->product->category }}">
                                        </td>

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


                {{-- Circuit / Kanban --}}
                <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="#subpart_Modal" id="additem3">Add Subpart</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 No</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>
                                @php
                                    $Subarray = [];
                                @endphp
                                @foreach ($sub_parts as $sub_part)
                                    @php
                                        $Subarray[] = $sub_part->product_id;
                                    @endphp
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $sub_part->product->part_no }}</td>
                                        <td>{{ $sub_part->product->part_name }}</td>
                                        <td>{{ $sub_part->product->type_of_products->type ?? '' }}</td>
                                        <td>{{ $sub_part->product->units->name ?? '' }}</td>
                                        <td>
                                            <input type="number" step="0.001"
                                                name="sub_part[{{ $loop->iteration }}][qty]"
                                                value="{{ $sub_part->qty }}" class="qty form-control">
                                            <input type="hidden" name="sub_part[{{ $loop->iteration }}][product_id]"
                                                class="product_id" value="{{ $sub_part->product_id }}">
                                            <input type="hidden" class="model"
                                                value="{{ $sub_part->product->model ?? '' }}">
                                            <input type="hidden" class="variance"
                                                value="{{ $sub_part->product->variance ?? '' }}">
                                        </td>

                                        <td><button type="button" class="btn btn-danger btn-sm remove-product"
                                                id=""><i class="bi bi-trash"></i></button></td>
                                    </tr>
                                @endforeach
                            </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>
                                @foreach ($process as $sub_process)
                                    <tr data-rowId="{{ $loop->iteration }}">
                                        <td>
                                            {{ $loop->iteration }}
                                        </td>
                                        <td>
                                            {{ $sub_process->process->name ?? '' }}
                                        </td>
                                        <td>
                                            {{ $sub_process->process_no }}
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-danger btn-sm remove-process"><i
                                                    class="bi bi-trash"></i></button>
                                            <input type="hidden" value="{{ $sub_process->cavity }}" class="rowId">
                                            <button type="button" class="btn btn-primary btn-sm openModal"><i
                                                    class="bi bi-plus"></i></button>
                                        </td>
                                    </tr>
                                @endforeach
                            </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">Update</button>
                        </div>
                    </div>
                </div>
            </div>
            {{-- PRODUCTS 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 Pruchase Part
                            </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="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">
                                CANCEL
                            </button>
                            <button type="button" class="btn btn-primary" onclick="add_product1()">
                                ADD
                            </button>
                        </div>
                    </div>
                </div>
            </div>



            {{-- SUBPART MODAL --}}
            <div class="modal fade" id="subpart_Modal" tabindex="-1" aria-labelledby="subpart_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="subpart_ModalTitle">
                                Crushing Material
                            </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="subpart_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">
                                CANCEL
                            </button>
                            <button type="button" class="btn btn-primary" onclick="add_product3()">
                                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-control process" id="process">
                            </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"></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">
                        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"></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">
                        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(@json(collect($purchase_parts)->pluck('product_id')));
        $(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) {
                            return `
                                    <input class="form-check-input purchase_product_id" type="checkbox" id="inlineCheckbox_${row.id}" value="${row.id}">
                                `;
                        }
                    }, {
                        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>
    {{-- Sub_part_script --}}
    <script>
        let subpart_modalTable;
        let crushing_Table;
        var selectedRowsProductsForCrushing = {};
        const addedProductIdsForCrushing = new Set(@json(collect($sub_parts)->pluck('product_id')));
        $(document).ready(function() {
            subpart_modalTable = $('#subpart_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) {
                            return `
                                <input class="form-check-input crushing_product_id" type="checkbox" id="inlineCheckbox_${row.id}" value="${row.id}">
                            `;
                        }
                    }, {
                        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 = subpart_modalTable.row(row).data();

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

        function add_product3() {
            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);



            $('#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');
            }
        }

        $(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);
        });

        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
        var products = @json($products);
        $(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
                    }
                });
            }
            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
            });

            sessionStorage.clear();

            var process = @json($process_bom);
            process.forEach(element => {
                let data = {};

                data['process'] = element.process_id;
                data['process_name'] = element.process.name ?? '';
                data['cycle_time'] = element.ct;
                data['process_no'] = element.process_no;
                data['rowId'] = element.cavity;

                data['circuit'] = [];
                let subPartIds = JSON.parse(element.sub_part_ids);
                if (subPartIds != null) {
                    subPartIds.forEach(function(element) {
                        let productFound = products.filter(p => p.id == element);
                        let rowData = {};
                        rowData['product_id'] = element;
                        rowData['part_no'] = productFound[0]?.part_no ?? '';
                        rowData['part_name'] = productFound[0]?.part_name ?? '';
                        data['circuit'].push(rowData);
                    });
                }

                data['raw'] = [];
                let rawPartIds = JSON.parse(element.raw_part_ids);
                if (rawPartIds != null) {
                    rawPartIds.forEach(function(element) {
                        let productFound = products.filter(p => p.id == element);
                        let rowData = {};
                        rowData['product_id'] = element;
                        rowData['part_no'] = productFound[0]?.part_no ?? '';
                        rowData['part_name'] = productFound[0]?.part_name ?? '';
                        data['raw'].push(rowData);
                    });
                }

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

            $('#process').empty().append('<option value="" disabled selected>Select Process</option>');

            let lastProcessId = null;

            for (let i = 0; i < sessionStorage.length; i++) {
                let key = sessionStorage.key(i);
                if (key.startsWith('StoreProcess')) {
                    let data = JSON.parse(sessionStorage.getItem(key));
                    let optionText = `${data.process_name}`;
                    $('#process').append(
                        $('<option>', {
                            value: data.process,
                            text: optionText
                        })
                    );

                    lastProcessId = data.process;
                }
            }

            initSelect2WithAjax('#process', 'Select Process', '{{ route('process.search') }}', $("#processModal"));

            if (lastProcessId) {
                $('#process').val(lastProcessId).trigger('change');
            }


        });

        $('#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($('.process option').filter(function () {
                return $(this).text().trim() === 'Select Process';
            }).val()).trigger('change');
            $('.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 = $('#process_Table tbody tr').not('tr:has(td.dt-empty)').length +
                    1; // 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()
                });
            });
            console.log(data)
            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);
        });

        function addEditProductsToModal() {
            subpartProcessModalTable.clear().draw(false);
            materialProcessModalTable.clear().draw(false);
            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();
                    var productExists = $('#subpartModalTable tbody tr').filter(function() {
                        return $(this).find('input.product_id').val() === $value;
                    }).length > 0;

                    if (!productExists) {
                        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();

                    var productExists = $('#materialModalTable tbody tr').filter(function() {
                        return $(this).find('input.product_id').val() === $value;
                    }).length > 0;

                    if (!productExists) {
                        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);

        }
        var SelectedRow = '';
        $(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}`);
            SelectedRow = $(this).closest('tr');
            // Clear the input fields
            $('.modal-body .process').val('');
            $('.modal-body .cycle_time').val('');
            $('.modal-body .process_no').val('');

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

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

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

                console.log('Parsed Data:', data);
                setTimeout(function() {
                    $('.modal-body .process').val(data.process).trigger('change');
                    $('.modal-body .cycle_time').val(+data.cycle_time).trigger('input');
                    $('.modal-body .process_no').val(data.process_no).trigger('input');
                }, 100);

                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);
                    }
                });
            }
            addEditProductsToModal();
        });


        $(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);
        });

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

        $('#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() {
            let array = [];
            $('.card-body').find('.table').DataTable().page.len(-1).draw(false);
            $('#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