@extends('layouts.app')
@section('title')
    BOM DUPLICATE
@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.store') }}" 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="{{ (int)$bom->rev_no + 1 }}" 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 name="product_id" onchange="product_change()" id="product_id" class="form-select"
                                    style="width: 100% !importnat;">
                                    <option value="" disabled selected>Please Select</option>
                                    @foreach ($products as $product)
                                        <option readonly value="{{ $product->id }}"
                                            @if ($bom->product_id == $product->id) selected @endif>
                                            {{ $product->part_no }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="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->attachment1 }}"
                                            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 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"><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>
                                        <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>
                                            <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>
                                        @foreach ($products as $product)
                                            @if (!in_array($product->id, $purchase_parts->pluck('product_id')->toArray()) && $product->id != $bom->product_id)
                                                <tr>
                                                    <td>
                                                        <input class="form-check-input product_id" type="checkbox"
                                                            id="inlineCheckbox1" value="{{ $product->id }}">
                                                    </td>
                                                    <td>
                                                        {{ $product->part_no }}
                                                    </td>
                                                    <td>
                                                        {{ $product->part_name }}
                                                    </td>
                                                    <td>
                                                        {{ $product->units->name ?? '' }}
                                                    </td>
                                                    <td>
                                                        {{ $product->model }}
                                                    </td>
                                                    <td>
                                                        {{ $product->variance }}
                                                    </td>
                                                    <td>
                                                        {{ $product->type_of_products->type ?? '' }}
                                                    </td>

                                                </tr>
                                            @endif
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondry" data-bs-dismiss="modal">
                                CANCEL
                            </button>
                            <button type="button" class="btn btn-primary" onclick="add_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>

                                        @foreach ($products as $product)
                                            @if (!in_array($product->id, $sub_parts->pluck('product_id')->toArray()) && $product->id != $bom->product_id)
                                                <tr>
                                                    <td>
                                                        <input class="form-check-input product_id" type="checkbox"
                                                            id="inlineCheckbox1" value="{{ $product->id }}">
                                                    </td>
                                                    <td>
                                                        {{ $product->part_no }}
                                                    </td>
                                                    <td>
                                                        {{ $product->part_name }}
                                                    </td>
                                                    <td>
                                                        {{ $product->units->name ?? '' }}
                                                    </td>
                                                    <td>
                                                        {{ $product->model }}
                                                    </td>
                                                    <td>
                                                        {{ $product->variance }}
                                                    </td>
                                                    <td>
                                                        {{ $product->type_of_products->type ?? '' }}
                                                    </td>
                                                </tr>
                                            @endif
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondry" data-bs-dismiss="modal">
                                CANCEL
                            </button>
                            <button type="button" class="btn btn-primary" onclick="add_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">
                                @foreach ($processes as $process)
                                    <option value="{{ $process->id }}">{{ $process->name }}</option>
                                @endforeach
                            </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>
        var products = @json($products);

        function product_change() {

            var productId = $("#product_id").val();
            var product = products.find(p => p.id == productId);
            console.log(product);
            console.log(product['type_of_products']['type']);
            console.log(product.type_of_products.type);
            if (product) {
                $('#part_name').val(product.part_name);
                $('#model').val(product.model);
                $('#variance').val(product.variance);
                $('#type_of_product').val(product.type_of_products ? product.type_of_products.type : '');
                $('#category').val(product.category);
                $('#unit').val(product.units ? product.units.name : '');
                $('#customer_name').val(product.customers ? product.customers.name : '');
                $('#part_weight').val(product.part_weight);
                $('#customer_product_code').val(product.customer_product_code);

            } else {
                $('#part_name').val('');
                $('#model').val('');
                $('#variance').val('');
                $('#type_of_product').val('');
                $('#category').val('');
                $('#unit').val('');
                $('#customer_name').val('');
                $('#customer_product_code').val('');
                $('#part_weight').val('');
            }
        };
    </script>
    {{-- material_pruchase_part_script --}}
    <script>
        let material_pruchase_part_modalTable;
        let material_pruchase_part_Table;
        $(document).ready(function() {
            material_pruchase_part_modalTable = $('#material_pruchase_part_modalTable').DataTable({
                "columnDefs": [{
                    "targets": 0,
                    "orderable": false
                }]
            });
            material_pruchase_part_Table = $('#material_pruchase_part_Table').DataTable();


            // hide product selected on the select box
            // Event listeners for when the modals are shown
            $('#materialandpruchasepart').on('show.bs.modal', function(e) {
                // Get the selected product id from the select box
                var selectedProductId = $('#product_id').val();

                // Loop through each row in the modal table
                $('#material_pruchase_part_modalTable tbody tr').each(function() {
                    var row = $(this);
                    var productId = row.data('product-id');

                    // If the product id matches the selected product id, hide the row
                    if (productId == selectedProductId) {
                        row.hide();
                    } else {
                        row.show();
                    }
                });
            });
            $('#crushing_material_Modal').on('show.bs.modal', function(e) {
                // Get the selected product id from the select box
                var selectedProductId = $('#product_id').val();

                // Loop through each row in the modal table
                $('#crushing_material_modalTable tbody tr').each(function() {
                    var row = $(this);
                    var productId = row.data('product-id');

                    // If the product id matches the selected product id, hide the row
                    if (productId == selectedProductId) {
                        row.hide();
                    } else {
                        row.show();
                    }
                });
            });
            $('#subpart_Modal').on('show.bs.modal', function(e) {
                // Get the selected product id from the select box
                var selectedProductId = $('#product_id').val();

                // Loop through each row in the modal table
                $('#subpart_modalTable tbody tr').each(function() {
                    var row = $(this);
                    var productId = row.data('product-id');

                    // If the product id matches the selected product id, hide the row
                    if (productId == selectedProductId) {
                        row.hide();
                    } else {
                        row.show();
                    }
                });
            });
        });

        function add_product1() {
            let options = []; // Initialize the array of objects

            material_pruchase_part_modalTable.$('input:checked').each(function() {
                var row = $(this).closest('tr');
                var rowData = material_pruchase_part_modalTable.row(row).data();
                var productId = $(this).val();

                // Add the product_id to the options array
                options.push({
                    product_id: productId,
                    part_name: rowData[2],
                });

                // Add the row data to the main table
                material_pruchase_part_Table.row.add([
                    material_pruchase_part_Table.rows().data().length + 1,
                    rowData[1],
                    rowData[2],
                    rowData[6],
                    rowData[3],
                    `<input type="number" step="0.001" name="material_pruchase_part[${material_pruchase_part_Table.rows().data().length + 1}][qty]" class="qty form-control" >
            <input type="hidden" name="material_pruchase_part[${material_pruchase_part_Table.rows().data().length + 1}][product_id]" value="${productId}">
            <input type="hidden" class="model" value="${rowData[4]}">
            <input type="hidden" class="variance" value="${rowData[5]}">
            <input type="hidden" class="category" value="${rowData[7]}">`,

                    `<button type="button" class="btn btn-danger btn-sm remove-product"><i class="bi bi-trash"></i></button>`
                ]).draw(false);

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

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

            // Hide the modal
            $('#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');
            }



            // console.log(options);
        }

        $('#material_pruchase_part_Table tbody').on('click', 'button.remove-product', function() {
            var row = $(this).closest('tr');
            var rowData = material_pruchase_part_Table.row(row).data();
            $('#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();
                    }
                });
            });
            // Add the removed row back to the modal table
            material_pruchase_part_modalTable.row.add([
                `<input class="form-check-input product_id" type="checkbox" value="${$(row).find('.product_id').val()}">`,
                rowData[1],
                rowData[2],
                rowData[4],
                $(row).find('.model').val(),
                $(row).find('.variance').val(),
                rowData[3],
                $(row).find('.category').val()
            ]).draw(false);

            // Remove the row from the main table
            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;
        $(document).ready(function() {
            crushing_material_modalTable = $('#crushing_material_modalTable').DataTable({
                "columnDefs": [{
                    "targets": 0,
                    "orderable": false
                }]
            });
            crushing_Table = $('#crushing_Table').DataTable();
        });

        function add_product2() {
            let subpartOptions = [];
            crushing_material_modalTable.$('input:checked').each(function() {
                var row = $(this).closest('tr');
                var rowData = crushing_material_modalTable.row(row).data();
                var productId = $(this).val();

                subpartOptions.push({
                    product_id: productId,
                    part_name: rowData[2],
                });

                // Add the row data to the main table
                crushing_Table.row.add([
                    crushing_Table.rows().data().length + 1,
                    rowData[1],
                    rowData[2],
                    rowData[6],
                    rowData[3],
                    `<input type="hidden" class="model" value="${rowData[4]}">
                    <input type="hidden" class="variance" value="${rowData[5]}">
                    <input type="hidden" class="category" value="${rowData[7]}">
                    <input type="hidden" name="sub_part[${crushing_Table.rows().data().length + 1}][product_id]" value="${productId}">
                    <input name="sub_part[${crushing_Table.rows().data().length + 1}][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);

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

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

            // Add event listener to remove buttons
            $('#crushing_Table tbody').on('click', 'button.remove-product', function() {
                var row = $(this).closest('tr');
                var rowData = crushing_Table.row(row).data();

                $('#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();
                        }
                    });
                });
                // Add the removed row back to the modal table
                crushing_material_modalTable.row.add([
                    `<input class="form-check-input product_id" type="checkbox" value="${$(row).find('.product_id').val()}">`,
                    rowData[1],
                    rowData[2],
                    rowData[4],
                    $(row).find('.model').val(),
                    $(row).find('.variance').val(),
                    rowData[3],
                    $(row).find('.category').val()
                ]).draw(false);

                // Remove the row from the main table
                crushing_Table.row(row).remove().draw(false);


                resetSerialNumbersC(crushing_Table);
            });

            // Hide the modal
            $('#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> --}}
    {{-- Sub_part_script --}}
    <script>
        let subpart_modalTable;
        let crushing_Table;
        $(document).ready(function() {
            subpart_modalTable = $('#subpart_modalTable').DataTable();
            crushing_Table = $('#crushing_Table').DataTable();
        });

        function add_product3() {
            let subpartOptions = [];
            subpart_modalTable.$('input:checked').each(function() {
                var row = $(this).closest('tr');
                var rowData = subpart_modalTable.row(row).data();
                var productId = $(this).val();

                subpartOptions.push({
                    product_id: productId,
                    part_name: rowData[2],
                });

                // Add the row data to the main table
                crushing_Table.row.add([
                    crushing_Table.rows().data().length + 1,
                    rowData[1],
                    rowData[2],
                    rowData[6],
                    rowData[3],
                    `<input type="number" step="0.001" name="sub_part[${crushing_Table.rows().data().length + 1}][qty]" class="qty form-control" >
                    <input type="hidden" name="sub_part[${crushing_Table.rows().data().length + 1}][product_id]" value="${productId}">
                    <input type="hidden" class="model" value="${rowData[4]}">
                    <input type="hidden" class="variance" value="${rowData[5]}">
                    <input type="hidden" class="category" value="${rowData[7]}">`,
                    `<button type="button" class="btn btn-danger btn-sm remove-product"><i class="bi bi-trash"></i></button>`

                ]).draw(false);

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

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

            // Hide the modal
            $('#subpart_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 resetSerialNumbersS() {
            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);
                });
            }
        }

        $('#crushing_Table tbody').on('click', 'button.remove-product', function() {
            var row = $(this).closest('tr');
            var rowData = crushing_Table.row(row).data();

            $('#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();
                    }
                });
            });
            // Add the removed row back to the modal table
            subpart_modalTable.row.add([
                `<input class="form-check-input product_id" type="checkbox" value="${$(row).find('.product_id').val()}">`,
                rowData[1],
                rowData[2],
                rowData[4],
                $(row).find('.model').val(),
                $(row).find('.variance').val(),
                rowData[3],
                $(row).find('.category').val()
            ]).draw(false);

            // Remove the row from the main table
            crushing_Table.row(row).remove().draw(false);


            resetSerialNumbersC(crushing_Table);
        });
    </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() {
            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['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));
            });

        });

        $('#addRow').on('click', function() {
            subpartModalTable.clear().draw(false);
            materialModalTable.clear().draw(false);
            subpartProcessModalTable.clear().draw(false);
            materialProcessModalTable.clear().draw(false);
            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 == null || processValue == '') {
                alert('Please Select Process');
                return;
            }
            if (cycleTimeValue == null || cycleTimeValue == '') {
                alert('Please Input Cycle Time');
                return;
            }
            if (processNoValue == null || processNoValue == '') {
                alert('Please Input Process No');
                return;
            }

            $('#processModal').modal('hide');
            $rowId = $('.hiddenRowId').val();
            $actualLength = process_Table.page.len();
            process_Table.page.len(-1).draw(false);
            if ($rowId == '' || $rowId == null) {
                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>
                        <button type="button" class="btn btn-primary btn-sm openModal"><i class="bi bi-plus"></i></button>`
                ]).draw(false);
                $rowId = process_Table.rows().data().length;
            } else {
                $('#process_Table tbody tr').each(function() {
                    let firstCellText = $(this).find('td:first').text().trim();
                    if (firstCellText == $rowId) {
                        $(this).find('td:eq(1)').text($('.process').find('option:selected').text());
                        $(this).find('td:eq(2)').text(processNoValue);
                    }
                });
            }
            process_Table.page.len($actualLength).draw(false);

            let data = {};

            data['process'] = processValue;
            data['cycle_time'] = cycleTimeValue;
            data['process_no'] = processNoValue;
            data['rowId'] = $rowId;

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

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

            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() {
            // $('.process').val('');
            // $('.cycle_time').val('');
            // $('.process_no').val('');
            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('td:eq(0)').text().trim();
            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) {
                    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) {
                    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('td:eq(0)').text().trim("");
                storedData = sessionStorage.getItem(`StoreProcess${$rowId}`);
                array.push(JSON.parse(storedData));
            });
            $('#storedData').val(JSON.stringify(array));
            $(this).closest('form').submit();
        });
    </script>
@endsection