@extends('layouts.app')
@section('title')
    @if ($production->machine && $production->machine->for_assembly == '1')
        PRODUCTION CHECK SHEET - ASSEMBLY
    @else
        DAILY PRODUCTION OUTPUT EDIT
    @endif
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('production_output_traceability.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <form action="{{ route('production_output_traceability.update', $production->id) }}" method="POST"
        enctype="multipart/form-data">
        @csrf
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <h5>PRODUCTION BUTTONS</h5>
                </div>
                <br>
                <div class="row">
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="mt-4 d-flex">
                            <button id="play" type="button" class="btn btn-success w-100"><i
                                    class="bi bi-play-circle me-2"></i>START</button>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="mt-4 d-flex">
                            <button id="pause" type="button" data-machine-id="{{ $production->id }}"  onclick="machineStarter(2,  this.dataset.machineId)"
                                class="btn btn-warning w-100"><i class="bi bi-pause-circle me-2"></i>PAUSE</button>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="mt-4 d-flex">
                            <button id="stop" type="button" class="btn btn-danger w-100"><i
                                    class="bi bi-stop-circle me-2"></i>STOP</button>
                        </div>
                    </div>
                </div>
                <div class="row d-flex justify-content-center">
                    @if ($production->machine && $production->machine->for_assembly == '1')
                    @else
                        <div class="col-lg-4 col-sm-4 col-12">
                            <div class="mt-4 d-flex">
                                <button id="machinePreparation" disabled type="button" class="btn btn-success w-100"
                                    style="background: orange"><i class="bi bi-gear me-2"></i>MACHINE PREPARATION</button>
                            </div>
                        </div>
                    @endif
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="mt-4 d-flex">
                            <button id="callForAssistance" type="button" class="btn btn-warning w-100" disabled
                                style="background:#1c1cfb "><i class="bi bi-tools me-2"></i>CALL FOR ASSISTANCE</button>
                        </div>
                    </div>

                </div>

                <div class="row mt-2">
                    <div id="msg" class="col-12 text-center"></div>
                </div>
                <hr>
                <br>
                <!-- Accordion One -->
                <div class="accordion" id="accordionExample">
                    <!-- According one  -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingOne">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                <h5>DAILY PRODUCTION OUTPUT DETAILS</h5>
                            </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <div class="row">
                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <div class="mb-3">
                                            <label for="po_no" class="form-label">Production Order No</label>
                                            <input type="text" readonly value="{{ $production->po_no }}" name="po_no"
                                                id="po_no" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <div class="mb-3">
                                            <label for="process" class="form-label">Process</label>
                                            <input type="text" readonly value="{{ $production->processes->name ?? '' }}"
                                                name="process" id="process" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <div class="mb-3">
                                            <label for="po_date" class="form-label">Production Date</label>
                                            <input type="text" readonly value="{{ $production->planned_date }}"
                                                name="po_date" id="po_date" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <div class="mb-3">
                                            <label for="part_no" class="form-label">Part No</label>
                                            <input type="text" readonly value="{{ $production->product->part_no ?? '' }}"
                                                name="part_no" id="part_no" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <div class="mb-3">
                                            <label for="part_name" class="form-label">Part Name</label>
                                            <input type="text" readonly value="{{ $production->product->part_name ?? '' }}"
                                                name="part_name" id="part_name" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <div class="mb-3">
                                            <label for="shift" class="form-label">Shift</label>
                                            <input type="text" readonly value="{{ $production->shift }}"
                                                name="shift" id="shift" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <div class="mb-3">
                                            <label for="user" class="form-label">Line Leader</label>
                                            <select name="line_leader[]" id="line_leader" class="form-select" multiple
                                                style="width: 100% !important;">
                                                @php
                                                    $item = json_decode($production->line_leader);
                                                @endphp
                                                @foreach ($users as $user)
                                                    <option value="{{ $user->id }}"
                                                        @if ($item) {{ in_array($user->id, $item) ? 'selected' : '' }} @endif>
                                                        {{ $user->user_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    @if ($production->machine && $production->machine->for_assembly == '1')
                                        <div class="col-lg-3 col-sm-4 col-12">
                                            <div class="mb-3">
                                                <label for="machine" class="form-label">Line</label>
                                                <input type="text" readonly
                                                    value="{{ $production->machine->name ?? '' }}" class="form-control">
                                                <input type="hidden" name="machine" id="machine"
                                                    value="{{ $production->machine_id }}">
                                            </div>
                                        </div>
                                    @else
                                        <div class="col-lg-3 col-sm-4 col-12">
                                            <div class="mb-3">
                                                <label for="machine" class="form-label">Machine</label>
                                                <select name="machine" id="machine" class="form-select"
                                                    style="width: 100% !important;">
                                                    <option value="" selected disabled>Please Select</option>
                                                    @foreach ($machines as $machine)
                                                        @if ($machine->name != 'Assembly')
                                                            <option value="{{ $machine->id }}"
                                                                @selected($production->machine_id == $machine->id)>
                                                                {{ $machine->name }}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <div class="mb-3">
                                            <label for="user" class="form-label">Operator</label>
                                            <select name="user[]" id="user" class="form-select" multiple
                                                style="width: 100% !important;">
                                                @php
                                                    $item = json_decode($production->operator);
                                                @endphp
                                                @foreach ($users as $user)
                                                    <option value="{{ $user->id }}"
                                                        @if ($item) {{ in_array($user->id, $item) ? 'selected' : '' }} @endif>
                                                        {{ $user->user_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <div class="mb-3">
                                            <label for="shift_length" class="form-label">Shift Length (hr)</label>
                                            <input type="number" value="{{ $production->shift_length ?? 9 }}"
                                                name="shift_length" id="shift_length" class="form-control">
                                        </div>
                                    </div>
                                    {{-- <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="purging_weight" class="form-label">Purging weight (g)</label>
                            <input type="number" value="{{ $production->purging_weight }}" name="purging_weight"
                                id="purging_weight" class="form-control">
                        </div>
                    </div> --}}
                                </div>
                                <div class="row">
                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <div class="mb-3">
                                            <label for="planned_qty" class="form-label">Planned Qty</label>
                                            <input type="text" readonly value="{{ $production->planned_qty }}"
                                                name="planned_qty" id="planned_qty" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <div class="mb-3">
                                            <label for="report_qty" class="form-label">Report Qty</label>
                                            <input type="text" readonly
                                                @if ($production->machine && $production->machine->for_assembly == '1') value="{{ isset($scans) ? $scans->count() : 0 }}" @else value="{{ $count }}" @endif
                                                name="report_qty" id="report_qty" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <div class="mb-3">
                                            <label for="remaining_qty" class="form-label">Remaining Qty</label>
                                            <input type="text" readonly
                                                @if ($production->machine && $production->machine->for_assembly == '1') value="{{ isset($scans) ? $production->planned_qty - $scans->count() : 0 }}" @else value="{{ $production->planned_qty - $count }}" @endif
                                                name="remaining_qty" id="remaining_qty" class="form-control">
                                        </div>
                                    </div>
                                    {{-- <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3 mt-4">
                            <button class="btn btn-primary btn-sm" type="button" id="materialList">Material
                                List</button>
                        </div>
                    </div> --}}

                                </div>
                                <div class="row">
                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <div class="mb-3">
                                            <label for="planned_cycle_time" class="form-label">Planned Cycle
                                                Time(s)</label>
                                            <input type="text" value="{{ $production->planned_cycle_time }}" readonly
                                                name="planned_cycle_time" id="planned_cycle_time" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <div class="mb-3">
                                            @php
                                                $plannedCycleTimeInHours = $production->planned_cycle_time / 3600;

                                                $totalHours = $plannedCycleTimeInHours * $production->planned_qty;
                                            @endphp
                                            <label for="planned_qty_hr" class="form-label">Planned Lead Time(hr)</label>
                                            <input type="text"
                                                value="{{ $totalHoursFormatted = number_format($totalHours, 2) }}"
                                                readonly name="planned_qty_hr" id="planned_qty_hr" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <div class="mb-3">
                                            <label for="actual_cycle_time" class="form-label">Actual Lead Time(hr)</label>
                                            <input type="text"
                                                value="{{ $actual_lead_time->production_apis ?? $durations }}" readonly
                                                name="actual_cycle_time" id="actual_cycle_time" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <div class="mb-3">
                                            <label for="actual_qty_hr" class="form-label">Actual Cycle Time(s)</label>
                                            @php
                                                if ($actual_lead_time->production_apis > 0) {
                                                    $actualQtyHr = number_format(
                                                        $count / max($actual_lead_time->production_apis * 60, 1),
                                                        2,
                                                    );
                                                } elseif ($scans->count() > 0 && $durations > 0) {
                                                    $actualQtyHr = number_format(
                                                        $scans->count() / max($durations * 60, 1),
                                                        2,
                                                    );
                                                } else {
                                                    $actualQtyHr = 0;
                                                }
                                            @endphp
                                            <input type="text" value="{{ $actualQtyHr }}" readonly
                                                name="actual_qty_hr" id="actual_qty_hr" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <hr>
                <br>
                <!-- According two  -->
                @if ($production->machine && $production->machine->for_assembly == '1')
                    <div class="accordion" id="accordionExample1">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    <h5>PRODUCTION OUTPUT</h5>
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    <div class="row">
                                        <div class="col-lg-3 col-sm-4 col-12">
                                            <label for="" class="form-label">Total Output / Produce Qty</label>
                                            <input type="text" value="{{ isset($scans) ? $scans->count() : 0 }}"
                                                readonly name="scan_qty" id="scan_qty" class="form-control">
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col d-flex justify-content-end">
                                            <button type="button" id="manualAddBtn"
                                                class="btn btn-primary d-flex justify-content-between align-items-center me-2">
                                                <span>Manual Add</span>
                                                <i class="bi bi-plus ms-2"></i>
                                            </button>

                                            <button type="button" id="scanBtn"
                                                class="btn btn-primary d-flex justify-content-between align-items-center"
                                                data-bs-toggle="modal" data-bs-target="#scanModal">
                                                <span>Scan</span>
                                                <i class="bi bi-upc-scan ms-2"></i>
                                            </button>
                                        </div>
                                    </div>




                                    <div class="row mt-3">
                                        <div class="table-responsive">
                                            <table class="table table-bordered m-0" id="ScanTable">
                                                <thead>
                                                    <tr>
                                                        <th>No</th>
                                                        <th>Time</th>
                                                        <th>Serial No</th>
                                                        <th>Remarks</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @if (isset($scans))
                                                        @foreach ($scans as $key => $scan)
                                                            <tr>
                                                                <td><input type="text" class="form-control sr_no" readonly
                                                                        value="{{ $loop->iteration }}"></td>
                                                                <td><input type="text" readonly 
                                                                        class="form-control form-control-sm time"
                                                                        value="{{ $scan->time }}"
                                                                        name="detailScan[{{ $loop->iteration }}][time]" />
                                                                </td>
                                                                <td><input type="text" readonly 
                                                                        class="form-control form-control-sm decode_text"
                                                                        value="{{ $scan->serial_no }}"
                                                                        name="detailScan[{{ $loop->iteration }}][serial_no]" />
                                                                </td>
                                                                <td><input type="text"
                                                                        class="form-control form-control-sm interval"
                                                                        name="detailScan[{{ $loop->iteration }}][remarks]"
                                                                        value="{{ $scan->remarks }}" /></td>
                                                                <td><button type="button" id="deleteBtn"
                                                                        class="btn btn-danger delete-row-btn deleteBtn">
                                                                        <i class="bi bi-trash"></i></td>
                                                            </tr>
                                                        @endforeach
                                                    @endif
                                                    <!-- Rows will be added dynamically -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <hr>
                    <br>
                @else
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingThree">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    <h5>KANBAN DETAIL</h5>
                                </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    <div class="row d-flex flex-row-reverse">
                                        <div class="col-md-4 d-flex flex-row-reverse">
                                            <a id="kanban-link" class="btn btn-primary" target="_blank" type="button"
                                                href="{{ asset('/bom-attachments/') }}/{{ $kanban_attachment->kanbon_card ?? '' }}">Kanban</a>
                                            <span
                                                class="fs-5 mx-2">{{ substr($kanban_attachment->kanbon_card ?? '', 14) }}</span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <h5>MATERIAL INFORMATION</h5>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="table-responsive">
                                                <table class="table table-bordered m-0" id="productTable">
                                                    <thead>
                                                        <tr>
                                                            <th>Sr No</th>
                                                            <th>Part No</th>
                                                            <th>Part Name</th>
                                                            <th>Type</th>
                                                            <th>Variance</th>
                                                            <th>Model</th>
                                                            <th>Kanban</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @if ($raw_materials)
                                                            @foreach ($raw_materials as $raw_material)
                                                                @php
                                                                    $product_ids = json_decode(
                                                                        $raw_material->raw_part_ids,
                                                                    );
                                                                    $bom_kanban = App\Models\Bom::find(
                                                                        $raw_material->bom_id,
                                                                    );
                                                                @endphp
                                                                @if ($product_ids)
                                                                    @foreach ($product_ids as $product_id)
                                                                        @php
                                                                            $product = App\Models\Product::where(
                                                                                'id',
                                                                                $product_id,
                                                                            )
                                                                                ->with('type_of_products')
                                                                                ->first();
                                                                        @endphp
                                                                        @if (isset($product))
                                                                        <tr>
                                                                            <td>{{ $loop->iteration }}</td>
                                                                            <td>{{ $product->part_no }}</td>
                                                                            <td>{{ $product->part_name }}</td>
                                                                            <td>{{ $product->type_of_products->type ?? '' }}
                                                                            </td>
                                                                            <td>{{ $product->variance }}</td>
                                                                            <td>{{ $product->model }}</td>
                                                                            <td>
                                                                                @if (isset($bom_kanban) && isset($bom_kanban->kanbon_card) && $bom_kanban->kanbon_card != null)
                                                                                    <div class="d-flex align-items-center">
                                                                                        <a id="kanban-link1"
                                                                                            href="{{ asset('/bom-attachments/') }}/{{ $bom_kanban->kanbon_card }}"
                                                                                            target="_blank"
                                                                                            class="btn btn-outline-secondary">
                                                                                            <i
                                                                                                class="bi bi-file-text"></i>{{ substr($bom_kanban->kanbon_card, 14) }}
                                                                                        </a>
                                                                                    </div>
                                                                                @else
                                                                                    N/A
                                                                                @endif
                                                                            </td>
                                                                        </tr>
                                                                          @endif
                                                                    @endforeach
                                                                @endif
                                                                @php
                                                                    $product_ids = json_decode(
                                                                        $raw_material->sub_part_ids,
                                                                    );
                                                                    $bom_kanban = App\Models\Bom::find(
                                                                        $raw_material->bom_id,
                                                                    );
                                                                @endphp
                                                                @if ($product_ids)
                                                                    @foreach ($product_ids as $product_id)
                                                                        @php
                                                                            $product = App\Models\Product::where(
                                                                                'id',
                                                                                $product_id,
                                                                            )
                                                                                ->with('type_of_products')
                                                                                ->first();
                                                                        @endphp
                                                                         @if ($product)
                                                                        <tr>
                                                                            <td>{{ $loop->iteration }}</td>
                                                                            <td>{{ $product->part_no }}</td>
                                                                            <td>{{ $product->part_name }}</td>
                                                                            <td>{{ $product->type_of_products->type ?? '' }}
                                                                            </td>
                                                                            <td>{{ $product->variance }}</td>
                                                                            <td>{{ $product->model }}</td>
                                                                            <td>
                                                                                @if (isset($bom_kanban) && isset($bom_kanban->kanbon_card) && $bom_kanban->kanbon_card != null)
                                                                                    <div class="d-flex align-items-center">
                                                                                        <a id="kanban-link1"
                                                                                            href="{{ asset('/bom-attachments/') }}/{{ $bom_kanban->kanbon_card }}"
                                                                                            target="_blank"
                                                                                            class="btn btn-outline-secondary">
                                                                                            <i
                                                                                                class="bi bi-file-text"></i>{{ substr($bom_kanban->kanbon_card, 14) }}
                                                                                        </a>
                                                                                    </div>
                                                                                @else
                                                                                    N/A
                                                                                @endif
                                                                            </td>
                                                                        </tr>
                                                                           @endif
                                                                    @endforeach
                                                                @endif
                                                            @endforeach
                                                        @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <br>

                    <hr>

                    <br>
                @endif

                <!-- According four -->

                @if ($production->machine && $production->machine->for_assembly == '1')
                @else
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingFour">
                                <button class="accordion-button " type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                    <h5>PRODUCTION OUTPUT</h5>
                                </button>
                            </h2>
                            <div id="collapseFour" class="accordion-collapse collapse show" aria-labelledby="headingFour"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    <div class="row">
                                        <div class="col-md-3">
                                            @php
                                                $plannedCycleTime = (int) $production->planned_cycle_time * 3600;
                                                $actual_unit = 0;
                                                if (
                                                    (float) $count != 0 &&
                                                    (float) $actual_lead_time->production_apis != 0 &&
                                                    ((float) $count > 0 ||
                                                        (float) $actual_lead_time->production_apis > 0)
                                                ) {
                                                    $actual_unit =
                                                        (float) $count / (float) $actual_lead_time->production_apis;
                                                }
                                            @endphp
                                            <label for="" class="form-label">Planned Unit per hour (UPH)</label>
                                            <input type="text" readonly name="planned_unit_hour"
                                                id="planned_unit_hour" class="form-control"
                                                value="{{ $plannedCycleTime }}">
                                        </div>
                                        <div class="col-md-3">
                                            <label for="" class="form-label">Actual Unit per hour (UPH)</label>
                                            <input type="text" readonly name="actual_unit_hour" id="actual_unit_hour"
                                                class="form-control" value="{{ $actual_unit }}">
                                        </div>
                                    </div>
                                    <br>


                                    <div class="row">
                                        <div class="col-12">
                                            <div class="table-responsive">
                                                <table class="table table-bordered m-0" id="shiftTable">
                                                    <thead>
                                                        <tr>
                                                            <th>Time</th>
                                                            <th>Machine Count</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @php
                                                            $totalMachineCount = 0;
                                                            $totalRejectCount = 0;
                                                        @endphp
                                                        @foreach ($hourlyCounts as $time => $count)
                                                            @php
                                                                $totalMachineCount += $count['machine_count'];
                                                                $totalRejectCount += $count['reject_count'];
                                                            @endphp
                                                            <tr>
                                                                <td><input type="text" readonly
                                                                        name="hour_{{ $loop->index + 1 }}"
                                                                        id="hour_{{ $loop->index + 1 }}"
                                                                        class="form-control time"
                                                                        value="{{ $time }}"></td>
                                                                <td><input type="text" readonly
                                                                        name="good_{{ $loop->index + 1 }}"
                                                                        id="good_{{ $loop->index + 1 }}"
                                                                        class="form-control machine_count"
                                                                        value="{{ $count['machine_count'] }}"></td>
                                                            </tr>
                                                        @endforeach
                                                        <tr>
                                                            <td>Total</td>
                                                            <td><input type="text" readonly name="total_total"
                                                                    id="total_total" class="form-control"
                                                                    value="{{ $totalMachineCount }}"></td>

                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <br>

                                    <div class="row">
                                        <div class="col-12">
                                            <div class="table-responsive">
                                                <table class="table table-bordered m-0" id="shiftTable2">
                                                    <thead>
                                                        <tr>
                                                            <th>Machine Count</th>
                                                            <th>Reject Qty</th>
                                                            <th>Good Qty</th>
                                                            <th>Adjust Qty</th>
                                                            <th>Total Good Qty</th>
                                                            <th>Rejection Type</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @php
                                                            $totalMachineCount = 0;
                                                            $totalRejectCount = 0;
                                                        @endphp
                                                        <tr>
                                                            <td><input type="text" readonly
                                                                    class="form-control total_count" name="machine_count"
                                                                    value="{{ $machine_count }}"></td>
                                                            <td><input type="hidden" class="time"
                                                                    value="{{ $production->id }}"><input type="text"
                                                                    readonly name="reject_count" id="reject_count"
                                                                    class="form-control reject_count"
                                                                    value="{{ $production->total_rejected_qty }}"></td>
                                                            <td><input type="text" readonly name="good_count"
                                                                    id="good_count" class="form-control good_count"
                                                                    value="{{ $machine_count - $production->total_rejected_qty }}">
                                                            </td>
                                                            <td><input type="text" name="adjust_qty" id="adjust_qty"
                                                                    class="form-control adjust_qty"
                                                                    value="{{ $production->total_adjust_qty ?? 0 }}">
                                                            </td>
                                                            <td><input type="text" readonly name="total_good_qty"
                                                                    id="total_good_qty"
                                                                    class="form-control total_good_qty"
                                                                    value="{{ $machine_count - $production->total_rejected_qty - $production->total_adjust_qty ?? 0 }}">
                                                            </td>
                                                            <td><button type="button"
                                                                    class="btn btn-danger btn-sm openModal"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#exampleModal"><i
                                                                        class="bi bi-plus-circle"></i></button></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <hr>
                    <br>
                @endif

                <!-- According Five -->

                <div class="accordion" id="accordionExample">
                    <div class="accordion-item">
                        <h2 class="accordion-header " id="headingFive">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                <h5>PRODUCTION STATUS DETAILS</h5>
                            </button>
                        </h2>
                        <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <br>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="table-responsive">
                                            <table class="table table-bordered m-0" id="timeTable">
                                                <thead>
                                                    <tr>
                                                        <th>Start DateTime</th>
                                                        <th>End DateTime</th>
                                                        <th>Total Time (min)</th>
                                                        @if ($production->machine && $production->machine->for_assembly == '1')
                                                        @else
                                                            <th>Machine</th>
                                                            <th>Remarks</th>
                                                        @endif
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($details as $detail)
                                                        <tr>
                                                            <td>{{ $detail->start_time }}</td>
                                                            <td>{{ $detail->end_time }}</td>
                                                            <td>{{ $detail->duration ?? 0 }}</td>
                                                            @if ($production->machine && $production->machine->for_assembly == '1')
                                                            @else
                                                                <td>{{ $detail->machine->name ?? '' }}</td>
                                                                <td>{{ $detail->remarks }}</td>
                                                            @endif
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <hr>
                <br>

                <!-- According Six -->
                @if ($production->machine && $production->machine->for_assembly == '1')
                @else
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingSix">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                                    <h5>PRODUCTION MACHINE DETAILS</h5>
                                </button>
                            </h2>
                            <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body">

                                    <div class="row">
                                        <div class="col-12">
                                            <div class="table-responsive">
                                                <table class="table table-bordered m-0" id="machineTable">
                                                    <thead>
                                                        <tr>
                                                            <th>Production Status</th>
                                                            <th>Machine</th>
                                                            <th>Start DateTime</th>
                                                            <th>End DateTime</th>
                                                            <th>Total Time (min)</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($sorted_details as $key => $sorted_detail)
                                                            <tr>
                                                                <td>

                                                                    <span class="badge"
                                                                        style="background: {{ $sorted_detail->color }};{{ $sorted_detail->status == 'Preparation' ? 'color: black;' : '' }}">{{ $sorted_detail->status }}</span>
                                                                </td>
                                                                <td>{{ $sorted_detail->mc_no }}</td>
                                                                <td>{{ $sorted_detail->start_time }}</td>
                                                                <td>{{ $sorted_detail->end_time }}</td>
                                                                <td>
                                                                    @php
                                                                        $duration = null;
                                                                        if ($sorted_detail->end_time) {
                                                                            $start = \Carbon\Carbon::parse(
                                                                                $sorted_detail->start_time,
                                                                            );
                                                                            $end = \Carbon\Carbon::parse(
                                                                                $sorted_detail->end_time,
                                                                            );

                                                                            $duration = $start->diffInMinutes($end);
                                                                        }
                                                                    @endphp
                                                                    @if ($duration)
                                                                        {{ round($duration, 0) }}
                                                                    @else
                                                                        0
                                                                    @endif
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            <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" id="saveForm"
                            data-value="{{ $production->id }}">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    {{-- REJECTION MODAL --}}
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">REJECTION</h5>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 d-flex justify-content-between">
                            <div>Rejected Quantity: <span class="rejected_qty_text"></span></div>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive" id="popUp">
                        <table class="table table-bordered m-0 w-100" id="rejectionTable">
                            <thead>
                                <tr>
                                    <th>Rejected Qty</th>
                                    <th>Rejection Type</th>
                                    <th>Comments</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="saveModal">Done</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="scanModal" tabindex="-1" aria-labelledby="scanModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="scanModalLabel">Scan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="success-message"></div>
                    <!-- Computer Screen with Icons -->
                    <div class="computer-screen">
                        <div class="icon-container">
                            <!-- Camera Icon -->
                            <i class="fas fa-camera"></i>
                            <span>Camera</span>
                        </div>
                    </div>
                    <div id="reader" style="width: 100%;"></div>
                    <div id="result"></div>
                    <!-- Buttons for Camera and Scanner -->

                </div>
                <div class="modal-footer">
                    <button type="button" style="z-index:99;" class="btn btn-secondary"
                        data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


    {{-- MATERIAL MODAL --}}
    {{-- <div class="modal fade" id="exampleModalMaterial" tabindex="-1" aria-labelledby="exampleModalMaterialLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalMaterialLabel">Material List</h5>
                </div>
                <div class="modal-body">
                    <div class="table-responsive" id="popUp">
                        <table class="table table-bordered m-0 w-100" id="materialModalTable">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Unit</th>
                                    <th>Unit Qty</th>
                                    <th>Total Qty Required</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div> --}}
    {{-- // Kanban Modal --}}
    <div class="modal fade" id="exampleModalCard" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">

                <div class="modal-body">
                    <img style="width: 100%; height: 100%; object-fit: cover;" src="" alt="">
                </div>

            </div>
        </div>
    </div>
    {{-- STOP REMARKS MODAL --}}
    <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModal1Label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModal1Label">REMARKS</h5>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <textarea id="stopRemarks" rows="5" class="form-control"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger" onclick="stopMesin()">Stop</button>
                </div>
            </div>
        </div>
    </div>
    <script src="{{ asset('assets/js/html5-qrcode.min.js') }}"></script>
    <script src="https://unpkg.com/@zxing/browser@latest"></script>

    <script>
        let rowNumber = 1;
        let rowatc = 0;
        let rowdel = 0;
        let previousScanTime = null;

        $(document).on('click', '.deleteBtn', function() {
            $(this).closest('tr').remove();
            var prevRowsCount = document.querySelectorAll("#ScanTable tbody tr").length;
            $('#scan_qty').val(prevRowsCount);
        });

        function addRowScan(decodedText, decodedResult) {
            rowatc++;
            rowdel++;

            const tbody = document.querySelector("#ScanTable tbody");
            if (!tbody) {
                console.error("Table body not found");
                return;
            }

            const currentTime = new Date();
            const options = {
                timeZone: 'Asia/Kuala_Lumpur',
                hour12: true,
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            };
            const currentFormattedTime = currentTime.toLocaleTimeString('en-US', options);

            let interval = "N/A";
            if (previousScanTime !== null) {
                const timeDifference = Math.abs(currentTime - previousScanTime);
                interval = Math.floor(timeDifference / 1000) + " seconds";
            }

            previousScanTime = currentTime;
            var prevRowsCount = document.querySelectorAll("#ScanTable tbody tr").length +1 ;

            const newRow = document.createElement("tr");

            const cells = [
                `<input type="hidden"  name="scan_id" class="form-control form-control-sm scan_id" />
                    <input type="text" readonly name="serial_row" class="form-control form-control-sm serial_row sr_no" value="${prevRowsCount}" />`,
                `<input type="text" readonly class="form-control form-control-sm time" value="${currentFormattedTime}" name="detailScan[${prevRowsCount}][time]" />`,


                `<input type="text" readonly class="form-control form-control-sm decode_text" value="${JSON.stringify(decodedText).replace(/"/g, '&quot;')}" name="detailScan[${prevRowsCount}][serial_no]" />`,



                `<input type="text" class="form-control form-control-sm interval" name="detailScan[${prevRowsCount}][remarks]" />`,

                `<button type="button" id="deleteBtn" class="btn btn-danger delete-row-btn deleteBtn" data-id="${prevRowsCount}">
                    <i class="bi bi-trash"></i>
                </button>`
            ];

            $('#scan_qty').val(prevRowsCount);

            cells.forEach(cellContent => {
                const cell = document.createElement("td");
                cell.innerHTML = cellContent;
                newRow.appendChild(cell);
            });

            tbody.appendChild(newRow);
        }

        function onScanSuccess(decodedText, decodedResult) {
            const messageElement = document.getElementById('success-message');
            messageElement.textContent = `Scan successful: ${decodedText}`;
            messageElement.style.color = 'green';
            messageElement.style.display = 'block';

            addRowScan(decodedText, decodedResult);

            html5QrcodeScanner.clear();
            setTimeout(() => {
                messageElement.style.display = 'none';
                html5QrcodeScanner.render(onScanSuccess, onScanError);
            }, 1000);
        }

        function onScanError(errorMessage) {

        }

        var html5QrcodeScanner = new Html5QrcodeScanner(
            "reader", {
                fps: 10,
                qrbox: 250
            });
        html5QrcodeScanner.render(onScanSuccess);
    </script>
    <script>
        let timeTable;
        let productTable;
        let machineTable;
        let rejectionTable;
        let materialModalTable;
        let rejections = [];
        $(document).ready(function() {
            timeTable = $('#timeTable').DataTable({
                order: [
                    [0, 'asc']
                ],

                columnDefs: [{
                    orderable: false,
                    targets: '_all'
                }]
            });
            productTable = $('#productTable').DataTable();
            materialModalTable = $('#materialModalTable').DataTable();
            machineTable = $('#machineTable').DataTable({
                order: [
                    [2, 'asc']
                ],

                columnDefs: [{
                    orderable: false,
                    targets: '_all'
                }]
            });
            rejectionTable = $('#rejectionTable').DataTable();
            sessionStorage.clear();
            check_machines(@json($check_machines));
            var shift_rejection = @json($shift_rejection);
            shift_rejection.forEach(element => {
                let data = sessionStorage.getItem(`modalData${element.pot_id}`);
                if (!data) {
                    data = [];
                } else {
                    data = JSON.parse(data);
                }
                let rowData = {};
                rowData['rejection'] = `${element.rt_id}`;
                rowData['comments'] = element.comments ?? '';
                rowData['qty'] = element.qty;
                rowData['time'] = element.time;
                data.push(rowData);
                sessionStorage.setItem(`modalData${element.pot_id}`, JSON.stringify(data));
            });
            rejections = @json($type_of_rejections);


            let rowCount = {{ isset($scans) ? count($scans) : 0 }};

            $('#manualAddBtn').on('click', function () {
                const currentTime = new Date();
            const options = {
                timeZone: 'Asia/Kuala_Lumpur',
                hour12: true,
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            };

           $qty = $('#scan_qty').val();
            $newQty = +$qty +1;
            $('#scan_qty').val($newQty);
            const currentFormattedTime = currentTime.toLocaleTimeString('en-US', options);
                rowCount++;

                const newRow = `
                    <tr>
                        <td><input type="text" class="form-control sr_no" readonly value="${$newQty}"></td>
                        <td><input type="text" name="detailScan[${$newQty}][time]" class="form-control form-control-sm time" readonly value="${currentFormattedTime}" /></td>
                        <td><input type="text" name="detailScan[${$newQty}][serial_no]" class="form-control form-control-sm decode_text" value="" /></td>
                        <td><input type="text" name="detailScan[${$newQty}][remarks]" class="form-control form-control-sm interval" value="" /></td>
                        <td><button type="button" class="btn btn-danger delete-row-btn">
                            <i class="bi bi-trash"></i>
                        </button></td>
                    </tr>
                `;

                $('#ScanTable tbody').append(newRow);
            });

            // Optional: Add delete functionality
            $('#ScanTable').on('click', '.delete-row-btn', function () {
                $qty = $('#scan_qty').val();
                $newQty = +$qty - 1;
                $('#scan_qty').val($newQty);
                $(this).closest('tr').remove();
                $('#ScanTable tbody tr').each(function (index) {
                    $(this).find('.sr_no').val(index + 1);
                });
            });
        });


        function addRow(button) {
            var row = button.parentNode.parentNode.cloneNode(true);
            var rowData = $(row).find('td').map(function() {
                return $(this).html();
            }).get();

            rejectionTable.row.add(rowData).draw(false);

            $('.qty').trigger('keyup');
        }

        function removeRow(button) {
            if ($('#rejectionTable tr').length > 2) {
                rejectionTable.row($(button).closest('tr')).remove().draw(false);
            } else {
                $('#popUp').prepend(`
                    <div class="alert border-warning alert-dismissible fade show text-warning" role="alert">
                    <b>Warning!</b> Can't remove Row!.
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `);
            }

            $('.qty').trigger('keyup');
        }

        var productIdHidden = 0;

        $(document).on('click', '.openModal', function() {
            let hiddenId = $(this).closest('tr').find('.time').val();
            productIdHidden = hiddenId;
            let storedData = sessionStorage.getItem(`modalData${hiddenId}`);

            rejectionTable.clear().draw(false);

            if (storedData) {
                storedData = JSON.parse(storedData);
                storedData.forEach(element => {
                    let optionsHtml = '';
                    rejections.forEach(rejection => {
                        let selected = '';
                        if (element.rejection === rejection.id) {
                            selected = 'selected';
                        }
                        optionsHtml +=
                            `<option value="${rejection.id}" ${selected}>${rejection.type}</option>`;
                    });

                    rejectionTable.row.add([
                        `<input type="number" class="form-control qty" value="${element.qty}">`,
                        `<select class="form-control rejection_type">${optionsHtml}</select>`,
                        `<input type="text" class="form-control comments" value="${element.comments}">`,
                        `<button type="button" class="btn btn-success btn-sm me-2" onclick="addRow(this)"><i class="bi bi-plus"></i></button><button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)"><i class="bi bi-dash"></i></button>`
                    ]).draw(false);
                });
            } else {
                let optionsHtml = '';
                rejections.forEach(rejection => {
                    optionsHtml +=
                        `<option value="${rejection.id}">${rejection.type}</option>`;
                });

                rejectionTable.row.add([
                    `<input type="number" class="form-control qty" value="">`,
                    `<select class="form-control rejection_type">${optionsHtml}</select>`,
                    `<input type="text" class="form-control comments" value="">`,
                    `<button type="button" class="btn btn-success btn-sm me-2" onclick="addRow(this)"><i class="bi bi-plus"></i></button><button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)"><i class="bi bi-dash"></i></button>`
                ]).draw(false);
            }

            $('.qty').trigger('keyup');
        });

        $('#saveModal').on('click', function() {
            $('#exampleModal').modal('hide');
            let data = [];
            $('#rejectionTable tbody tr').each(function() {
                let rowData = {};
                rowData['rejection'] = $(this).find('.rejection_type').val();
                rowData['comments'] = $(this).find('.comments').val();
                rowData['qty'] = $(this).find('.qty').val();
                rowData['time'] = productIdHidden;
                data.push(rowData);
            });
            sessionStorage.setItem(`modalData${productIdHidden}`, JSON.stringify(data));
            $('#shiftTable2 tbody tr').each(function() {
                let total_qty = $('.rejected_qty_text').text();
                $(this).closest('tr').find('.reject_count').val(total_qty).trigger('change');
            });
        });

        $(document).on('keyup change', '.qty', function() {
            let total = 0;
            $('#rejectionTable .qty').each(function() {
                total += +$(this).val();
            });
            $('.rejected_qty_text').text(total);
        });

        function updateShiftTable2() {
            let rejectQty = parseInt($('#shiftTable2 .reject_count').val()) || 0;
            let adjustQty = parseInt($('#shiftTable2 .adjust_qty').val()) || 0;

            let goodQty = parseInt($('#shiftTable2 .total_count').val()) - rejectQty;
            $('#shiftTable2 .good_count').val(goodQty);

            let totalGoodQty = goodQty + adjustQty;
            $('#shiftTable2 .total_good_qty').val(totalGoodQty);
        }

        $(document).on('input change', '#shiftTable2 .reject_count, #shiftTable2 .adjust_qty', function() {
            updateShiftTable2();
        });


        $('#saveForm').on('click', function() {
            let array = [];
            let storedData = sessionStorage.getItem(`modalData${$(this).data('value')}`);
            if (storedData == null) {
                storedData = `{"time":"${$(this).val()}"}`;
            }
            $('#storedData').val(storedData);
            $(this).closest('form').submit();
        });

        $('#play').on('click', function() {
            let operator = $('#user').val();
            if (operator.length > 0) {
                machineStarter(1, @json($production->id));
            } else {
                alert("Can`t Start Without Operator(s)!");
        }
    });

    $('#machinePreparation').on('click', function() {
        let operator = $('#user').val();
        if (operator.length > 0) {
            machinePrep(1, @json($production->id));
        } else {
            alert("Can`t Start Without Operator(s)!");
            }
        });

        $('#callForAssistance').on('click', function() {
            let operator = $('#user').val();
            if (operator.length > 0) {
                machineCallForAssistance(1, @json($production->id));
            } else {
                alert("Can`t Start Without Operator(s)!");
        }
    });

    $('#stop').on('click', function() {
        $('#exampleModal1').modal('show');
    });

    function stopMesin() {
        var remarks = $('#stopRemarks').val();
        if (!remarks || remarks.trim() === '') {
            alert("Can't Stop Without Remarks!");
        } else if (remarks.length > 50) {
            alert("Remarks must be 50 characters or less.");
        } else {
            $('#exampleModal1').modal('hide');
            machineStarter(3, @json($production->id));
        }
    }


    MachineCount();

    if ($('#process').val() != 'ASSEMBLY') {
        setTimeout(() => {
            MachineCount();
        }, 15000);
    }

    function MachineCount() {
        const $machine_no = $('#machine option:selected').text();

        $.ajax({
            url: "{{ route('production_output_traceability.machine_count') }}",
            method: 'GET',
            data: {
                mc_no: $machine_no,
                production_id: @json($production->id)
            },
            success: function(response) {
                const timeIntervals = [{
                        range: "8AM-9AM",
                        start: "08:00:00",
                        end: "09:00:00"
                    },
                    {
                        range: "9AM-10AM",
                        start: "09:00:00",
                        end: "10:00:00"
                    },
                    {
                        range: "10AM-11AM",
                        start: "10:00:00",
                        end: "11:00:00"
                    },
                    {
                        range: "11AM-12PM",
                        start: "11:00:00",
                        end: "12:00:00"
                    },
                    {
                        range: "12PM-1PM",
                        start: "12:00:00",
                        end: "13:00:00"
                    },
                    {
                        range: "1PM-2PM",
                        start: "13:00:00",
                        end: "14:00:00"
                    },
                    {
                        range: "2PM-3PM",
                        start: "14:00:00",
                        end: "15:00:00"
                    },
                    {
                        range: "3PM-4PM",
                        start: "15:00:00",
                        end: "16:00:00"
                    },
                    {
                        range: "4PM-5PM",
                        start: "16:00:00",
                        end: "17:00:00"
                    },
                    {
                        range: "5PM-6PM",
                        start: "17:00:00",
                        end: "18:00:00"
                    },
                    {
                        range: "6PM-7PM",
                        start: "18:00:00",
                        end: "19:00:00"
                    },
                    {
                        range: "7PM-8PM",
                        start: "19:00:00",
                        end: "20:00:00"
                    },
                ];

                const totals = {};
                timeIntervals.forEach((interval) => {
                    totals[interval.range] = 0;
                });

                response.machineCount.forEach((entry) => {
                    const datetimeParts = entry.datetime.split(" ");
                    const time = datetimeParts[1];
                    const period = datetimeParts[2];

                    const fullTime = convertTo24Hour(time, period);

                    timeIntervals.forEach((interval) => {
                        if (fullTime >= interval.start && fullTime < interval.end) {
                            totals[interval.range] += +entry.count;
                        }
                    });
                });
                $grandTotal = 0;
                $("#shiftTable tr").each(function() {
                    const timeRange = $(this).find(".time").val();
                    if (totals[timeRange] !== undefined) {
                        $(this).find(".total_count").val(totals[timeRange]);
                        $(this).find(".machine_count").val(totals[timeRange]);
                        $grandTotal += totals[timeRange];
                    }
                });
                $('#total_total').val($grandTotal);
                updateShiftTable2();
            }
        });
    }

    function convertTo24Hour(time, period) {
        const [hours, minutes, seconds] = time.split(":");
        let hour = parseInt(hours);

        if (period === "PM" && hour !== 12) {
            hour += 12;
        } else if (period === "AM" && hour === 12) {
            hour = 0;
        }

        return `${hour.toString().padStart(2, "0")}:${minutes}:${seconds}`;
    }

    function check_machines(check_machines) {
        if (check_machines != null) {
            if (check_machines.status == 1) {
                $('#play').attr('disabled', 'disabled');
                $('#pause').removeAttr('disabled');
                $('#machinePreparation').removeAttr('disabled');
                $('#callForAssistance').removeAttr('disabled');
                $('#stop').removeAttr('disabled');
            } else if (check_machines.status == 2) {
                $('#pause').attr('disabled', 'disabled');
                $('#machinePreparation').attr('disabled', 'disabled');
                $('#callForAssistance').removeAttr('disabled');
                $('#play').removeAttr('disabled');
                $('#stop').removeAttr('disabled');
            } else if (check_machines.status == 3) {
                $('#stop').attr('disabled', 'disabled');
                $('#callForAssistance').removeAttr('disabled');
                $('#machinePreparation').attr('disabled', 'disabled');
                $('#pause').attr('disabled', 'disabled');
                $('#play').attr('disabled', 'disabled');
            }
        } else {
            $('#play').removeAttr('disabled');
            $('#pause').attr('disabled', 'disabled');
            $('#stop').attr('disabled', 'disabled');
        }
    }


    function machinePrep(status, production_id) {
        var machine = $("#machine").val();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: 'POST',
            url: '{{ route('machinePrep') }}',
            data: {
                "production_id": production_id,
                "machine": machine,
                "status": status,
                "remarks": $('#stopRemarks').val(),
                "operator": $('#user').val(),
            },
            success: function(data) {
                $("#msg").html(data.message);
            }
        });
    }

    function machineCallForAssistance(status, production_id) {
        var machine = $("#machine").val();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: 'POST',
            url: '{{ route('machineCallForAssistance') }}',
            data: {
                "production_id": production_id,
                "machine": machine,
                "status": status,
                "remarks": $('#stopRemarks').val(),
                "operator": $('#user').val(),
            },
            success: function(data) {
                $("#msg").html(data.msg);
            }
        });
    }

        function machineStarter(status, production_id) {
            $("#play, #pause, #stop, #machinePreparation, #callForAssistance").prop('disabled', true);
            var machine = $("#machine").val();
            if (!machine) {
                alert('Can`t Start or Stop without Machine!');
                    return;
            }

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'POST',
                url: '{{ route('production_output_traceability.starter') }}',
                data: {
                    "production_id": production_id,
                    "machine": machine,
                    "status": status,
                    "remarks": $('#stopRemarks').val(),
                    "operator": $('#user').val(),
                },
                success: function(data) {
                    $("#msg").html(data.message);
                    check_machines(data.check_machine);
                    timeTable.clear().draw(false);
                    machineTable.clear().draw(false);
                    data?.details?.forEach(function(detail, index) {
                        var statusBadge;
                        if (detail.status == 1) {
                            statusBadge =
                                '<span class="badge border border-success text-success">Started</span>';
                        } else if (detail.status == 2) {
                            statusBadge =
                                '<span class="badge border border-warning text-warning">Paused</span>';
                        } else if (detail.status == 3) {
                            statusBadge =
                                '<span class="badge border border-danger text-danger">Stopped</span>';
                        } else {
                            statusBadge =
                                '<span class="badge border border-secondary text-secondary">Not-initiated</span>';
                        }

                        var start_time = detail.start_time;
                        var end_time = (detail.end_time != null) ? detail.end_time : '';
                        var duration = (detail.duration != null) ? detail.duration : '';
                        var machine = detail.machine.name;
                        var count = detail.machine_count;

                        if (machine == 'Assembly') {
                            timeTable.row.add([
                                start_time,
                                end_time,
                                duration
                            ]).draw(false);
                        } else {
                            timeTable.row.add([
                                start_time,
                                end_time,
                                duration,
                                machine,
                                count
                            ]).draw(false);
                        }
                    });
                    if (data.status == '200') {
                        window.location.href = '';
                    }
                }
            });
        }

        document.getElementById('kanban-link').addEventListener('click', function(event) {
            const kanbanCard = "{{ $kanban_attachment->kanbon_card ?? '' }}";

            if (!kanbanCard || kanbanCard.trim() === "") {
                event.preventDefault();
                alert("No Kanban attachment available.");
            }
        });

        document.getElementById('kanban-link1').addEventListener('click', function(event) {
            const kanbanCard = "{{ $kanban_attachment->kanbon_card ?? '' }}";

            if (!kanbanCard || kanbanCard.trim() === "") {
                event.preventDefault();
                alert("No Kanban attachment available.");
            }
        });
    </script>
@endsection