@extends('layouts.app')
@section('title')
    Visual Checking 1 Edit
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('checking.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <style>
        /* table thead th,
            table tbody td {
                width: 350px !important;

            }

            .modal-body {
                width: 100%;
            } */
    </style>
    <!-- @php
        $options = '<option value="" disabled selected>Please Select</option>';

        foreach ($rejectiontypes as $type) {
            $options .= '<option value="' . $type->id . '">' . $type->type . '</option>';
        }
    @endphp -->
    <div class="card">
        <form method="post" action="{{ route('checking.update', $checking->id) }}"
            enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <input type="hidden" name="electrical_id" class="electrical_id" id="electrical_id">

                <div class="row">
                    <h5> Production Detail</h5>
                </div>
                <br>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="ref_no" class="form-label col-4">Ref No :</label>
                            <div class="col-6">
                                <input type="text" name="ref_no" id="ref_no" class="form-control rounded-4 ref_no"
                                    value="{{ $checking->ref_no }}" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12">
                        <div class="row align-items-center">
                            <label for="date" class="form-label col-4">Date :</label>
                            <div class="col-6">
                                <input type="text" name="date" id="date"
                                    class="form-control datepicker-current-date rounded-4"
                                    value="{{ $checking->date }}">
                            </div>
                        </div>
                    </div>



                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="product_select" class="form-label col-4">Part No :</label>
                            <div class="col-6">
                                <select name="product_id" id="product_select" onchange="product_change()"
                                    class="form-select rounded-4 part_no" style="width: 100% !important;">
                                    <option value="{{ $checking->product_id ?? '' }}" selected>
                                        {{ $checking->products->part_no ?? '' }}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="insepector" class="form-label col-4">Inspector :</label>
                            <div class="col-6">
                                <select name="user_id" id="insepector" class="form-select rounded-4 insepector"
                                    style="width: 100% !important;">
                                    <option value="{{ $checking->user_id ?? '' }}" selected>
                                        {{ $checking->user->user_name ?? '' }}/{{ $checking->user->employee_no ?? '' }}
                                    </option>

                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="part_name" class="form-label col-4">Part Name</label>
                            <div class="col-6">
                                <input type="text" readonly name="part_name" id="part_name"
                                    placeholder="auto based on database" class="form-control rounded-4 part_name"
                                    value="{{ $checking->products->part_name }}">
                            </div>
                        </div>
                    </div>


                </div>

                <hr class="mt-3">
                <h5 class="mt-3">QC Output</h5>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="qty_qc" class="form-label col-4">Qty QC:</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4 qty_qc"
                                    value="{{ $checking->qty_qc }}" readonly id="qty_qc" name="qty_qc">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="qty_rejected" class="form-label col-4">Qty Rejected:</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4 qty_rejected"
                                    value="{{ $checking->qty_reject }}" readonly id="qty_rejected"
                                    name="qty_rejected">
                            </div>
                        </div>
                    </div>
                </div>


                <div class="container mt-5">
                    <div class="row">
                        <div class="col d-flex justify-content-end">
                        <button type="button" @disabled($checking->product_id == null) id="addBtn"
                                class="btn btn-primary d-flex justify-content-between align-items-center mx-2">
                                <span>Add</span>
                                <i class="fas fa-plus ms-2"></i>
                            </button>
                            <button type="button" @disabled($checking->product_id == null) 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="fas fa-barcode ms-2"></i>
                            </button>
                        </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>



                <div class="row mt-3">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0" id="productTable">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Time</th>
                                    <th>Serial No</th>
                                    <th>Status</th>
                                    <th>Reject Detail</th>
                                    <th>Interval (s)</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (isset($checking_details))
                                    @foreach ($checking_details as $key => $data)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>

                                            <td>
                                                <input type="text" readonly name="details[{{ $key }}][time]"
                                                    class="form-control form-control-sm time"
                                                    value="{{ $data->time }}" />
                                            </td>

                                            <td>
                                                <input type="text" readonly
                                                    name="details[{{ $key }}][serial_no]"
                                                    class="form-control form-control-sm decode_text"
                                                    value="{{ $data->serial_no }}" />
                                            </td>

                                            <td>
                                                <select name="details[{{ $key }}][status]"
                                                    class="form-select status" required>
                                                    <option value="pass" @selected($data->status == 'pass')>pass</option>
                                                    <option value="reject" @selected($data->status == 'reject')>reject</option>
                                                </select>
                                            </td>

                                            <td>
                                                <button @disabled($data->status == 'pass') type="button"
                                                    class="btn btn-info btn-sm openRejectionModal" data-bs-toggle="modal"
                                                    data-id="{{ $loop->iteration }}" data-bs-target="#rejectionModal">
                                                    <i class="bi bi-plus"></i>
                                                </button>
                                                <input type="hidden" class="jsonData"
                                                    name="details[{{ $key }}][json_data]"
                                                    value="{{ $data->json_data }}">
                                            </td>

                                            <td>
                                                <input type="text" readonly
                                                    name="details[{{ $key }}][interval]"
                                                    class="form-control form-control-sm interval"
                                                    value="{{ $data->interval }}" />
                                            </td>

                                            <td>
                                                <button type="button" class="btn btn-danger delete-row-btn deleteBtn"
                                                    data-id="{{ $loop->iteration }}">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif


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

                <div class="modal fade" id="rejectionModal" tabindex="-1" aria-labelledby="rejectionModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="rejectionModalLabel">Rejection</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                                    id="closeModalBtn"></button>
                            </div>
                            <div class="modal-body">
                                <h5>Time:</h5>
                                <table class="table table-bordered w-100" id="rejectionDetailsTable">
                                    <thead>
                                        <tr>
                                            <th>Rejection Type</th>
                                            <th>Comments</th>

                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="rejectiontype">
                                                <select name="rejectionType" class=" form-control form-control-sm">
                                                    <option value="" disabled selected>Please Select</option>
                                                    <option value="qc" selected>QC</option>

                                                    @foreach ($rejectiontypes as $type)
                                                        <option value="{{ $type->id }}">
                                                            {{ $type->type }}
                                                        </option>
                                                    @endforeach
                                                    <!-- Add more options as needed -->
                                                </select>
                                            </td>
                                            <td>
                                                <input type="text" name="comments"
                                                    class="form-control form-control-sm comments"
                                                    value="{{ old('comments') }}" />
                                            </td>

                                            <td>
                                                <button type="button" id="addRow" class="btn btn-success btn-sm"
                                                    onclick="addRowreject()">
                                                    <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>
                                            </td>
                                        </tr>
                                        <!-- Additional rows will be added dynamically -->
                                    </tbody>
                                </table>
                            </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="doneBtn"
                                    data-bs-dismiss="modal">Done</button>
                            </div>
                        </div>
                    </div>
                </div>



                <br>
                <div class="row">
                    <h5>Summary</h5>
                </div>
                <br>
                <div class="row">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0" id="rejectedItemsTable">
                            <thead>
                                <tr>
                                    <th>Reject Type</th>
                                    <th>Remarks</th>

                                </tr>
                            </thead>
                            <tbody>
                                @if (isset($checking_details_summary))
                                    @foreach ($checking_details_summary as $key => $data)
                                        @php
                                            if ($data->rejection_type == 'qc') {
                                                $reject_type = 'QC';
                                            } else {
                                                $reject = \App\Models\TypeOfRejection::find($data->rejection_type);
                                                $reject_type = $reject ? $reject->type : ''; // Handle case where the rejection type is not found
                                            }
                                        @endphp
                                        <tr>
                                            <td><input type="hidden" class="row_id" value="{{ $data->row_id ?? '' }}"><input type="hidden" class="detail_row_id" value="{{ $data->detail_row_id ?? '' }}">{{ $reject_type ?? '' }}</td>
                                            <td>{{ $data->comment }}</td>
                                        </tr>
                                    @endforeach
                                @endif

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="col-12 d-flex justify-content-end mt-2">
                        <input type="hidden" id="storedData" name="summaryDetails">
                        <button type="button" id="saveForm" class="btn btn-primary"></i> Save</button>
                    </div>
                </div>
            </div>
        </form>
    </div>


    <script src="{{ asset('assets/js/html5-qrcode.min.js') }}"></script>
    <link rel="stylesheet" src="{{ asset('assets/css/bootstrap-datepicker.min.css') }}" />
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>

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

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

        const tbody = document.querySelector("#productTable 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;

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

        var currentRow = $('#productTable tbody tr').length + 1;

        const cells = [
            currentRow,

            `<input type="text" readonly name="details[${currentRow}][time]" class="form-control form-control-sm time" value="${currentFormattedTime}" />`,

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

            `<select name="details[${currentRow}][status]" class="form-select status" required>
        <option value="pass">pass</option>
        <option value="reject">reject</option>
    </select>`,

            `<button disabled type="button" class="btn btn-info btn-sm openRejectionModal"  data-bs-toggle="modal" data-id="${currentRow}" data-bs-target="#rejectionModal">
        <i class="bi bi-plus"></i>
    </button> <input type="hidden" class="jsonData" name="details[${currentRow}][json_data]">`,

            `<input type="text" readonly name="details[${currentRow}][interval]" class="form-control form-control-sm interval" value="${interval}" />`,

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


        $('#qty_qc').val(rowatc);

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

        tbody.appendChild(newRow);
    }


    $('#addBtn').on('click',function(){
            rowatc++;
            rowdel++;
            var currentQcQty = +$('.qty_qc').val();
var rowCount = 0;
            const tbody = document.querySelector("#productTable tbody");
            if (!tbody) {
                console.error("Table body not found");
                return;
            }

                rowCount = document.querySelectorAll("#productTable tbody tr").length;

            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;

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

            var currentRow = $('#productTable tbody tr').length + 1;
            rowCount++;


            const cells = [
                currentRow,

                `<input type="text" readonly name="details[${currentRow}][time]" class="form-control form-control-sm time" value="${currentFormattedTime}" />`,

                `<input type="text" name="details[${currentRow}][serial_no]" class="form-control form-control-sm decode_text" value="" />`,

                `<select name="details[${currentRow}][status]" class="form-select status" required>
                    <option value="pass">pass</option>
                    <option value="reject">reject</option>
                </select>`,

                `<button disabled type="button" class="btn btn-info btn-sm openRejectionModal"  data-bs-toggle="modal" data-id="${rowCount}" data-bs-target="#rejectionModal">
                    <i class="bi bi-plus"></i>
                </button> <input type="hidden" class="jsonData" name="details[${currentRow}][json_data]">`,

                `<input type="text" readonly name="details[${currentRow}][interval]" class="form-control form-control-sm interval" value="${interval}" />`,

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

            var newQcQty = currentQcQty + 1;

            $('#qty_qc').val(newQcQty);

            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';

        addRow(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>
      function addRowreject(button,rowId) {

            
            var newRow = `
        <tr>
            <td class="rejectiontype">
                <select name="rejectionType" class="form-control form-control-sm ">
                  <option value="" disabled selected>Please Select</option>
                <option value="qc" selected>QC</option>
                    @foreach ($rejectiontypes as $type)


                                            <option value="{{ $type->id }}">
                                            {{ $type->type }}</option>

                                            @endforeach
                </select>
            </td>
            <td><input type="text" name="comments" class="form-control form-control-sm comments" value="{{ old('comments') }}" /><input type="hidden" class="detail_row_id" value="${detail_row_id}"/></td>

            <td>
                <button type="button" class="btn btn-success btn-sm" onclick="addRowreject()">
                    <i class="bi bi-plus"></i>
                </button>
                <button type="button" class="btn btn-danger btn-sm" data-row_id="${rowId}" onclick="removeRow(this)">
                    <i class="bi bi-dash"></i>
                </button>
            </td>
        </tr>
    `;
            $('#rejectionDetailsTable tbody').append(newRow);
            detail_row_id++;
            toggleRemoveButtons();
        }

    function removeRow(button) {
            detail_row_id--;
           var rowId = $(button).data('row_id');
           var detail_row_id = $(button).closest('tr').find('.detail_row_id').val();
            const existingRow = $('#rejectedItemsTable tbody tr').filter(function() {
                    const currentRowId = $(this).find('td:eq(0) .row_id').val();
                    const currentDetailRowId = $(this).find('td:eq(0) .detail_row_id').val();
                    return +currentRowId === rowId && currentDetailRowId === detail_row_id;
                });
                existingRow.remove();
            var row = $(button).closest('tr');
            row.remove();
            toggleRemoveButtons();
        }

    let rejectionData = {};

    $(document).on('click', '.rejection-btn', function() {
        const rowId = $(this).data('id');
        $('#doneBtn').data('id', rowId);

        $('#rejectionModal').show();
        rejectionData[rowId] = [];
    });


    $(document).on('click', '.deleteBtn', function () {
        var QtyQC = +$('.qty_qc').val();
        $(this).closest('tr').remove();
        QtyQC--;
        $('.qty_qc').val(QtyQC);
    });

    function toggleRemoveButtons() {
    const rows = $('#rejectionDetailsTable tbody tr');
    if (rows.length <= 1) {
        rows.find('.btn-remove').hide();
    } else {
        rows.find('.btn-remove').show();
         rows.find('.btn-remove').removeClass('d-none');
    }
}


  $('#doneBtn').on('click', function() {
            const rowId = $(this).data('id');
            let table = [];

            $('#rejectionDetailsTable tbody tr').each(function() {
                const rejectiontype = $(this).find('.rejectiontype option:selected').val();
                const rejectiontypeName = $(this).find('.rejectiontype option:selected').text().trim("");
                const comments = $(this).find('.comments').val();
                const detail_row_id = $(this).find('.detail_row_id').val();
                

                table.push({
                    rejectiontype: rejectiontype,
                    rejectiontypeName: rejectiontypeName,
                    comments: comments,
                    rowId:rowId,
                    detail_row_id:detail_row_id,
                });
            });

            const acceptedQty = parseFloat($('.qty_qc').val());
            const qty_rejected = parseFloat($('#qty_rejected').val());

            sessionStorage.setItem(`rejectionData_${rowId}`, JSON.stringify(table));






            table.forEach(item => {
                const rowId = item.rowId; 
                const detail_row_id = item.detail_row_id; 

                const existingRow = $('#rejectedItemsTable tbody tr').filter(function() {
                    const currentRowId = $(this).find('td:eq(0) .row_id').val();
                    const currentDetailRowId = $(this).find('td:eq(0) .detail_row_id').val();
                    return +currentRowId === rowId && currentDetailRowId === detail_row_id;
                });

                if (existingRow.length > 0) {
                    existingRow.find('td:eq(0)').html(`${item.rejectiontypeName}<input type="hidden" class="row_id" value="${rowId}"><input type="hidden" class="detail_row_id" value="${detail_row_id}">`);
                    existingRow.find('td:eq(1)').html(item.comments);
                } else {
                    $('#rejectedItemsTable tbody').append(`
                        <tr>
                            <td><input type="hidden" class="row_id" value="${rowId}"><input type="hidden" class="detail_row_id" value="${detail_row_id}">${item.rejectiontypeName}</td>
                            <td>${item.comments}</td>
                        </tr>
                    `);
                }
            });

            const matchingRow = $('#productTable tbody tr').filter(function() {
                return $(this).find('td:eq(0)').text().trim("") == rowId;
            });
            var Jsondata = JSON.stringify(table);
            if (matchingRow.length > 0) {
                matchingRow.find('.jsonData').val(Jsondata);
            }
            // Close modal
            $('#rejectionModal').modal('hide');
            $('.modal-backdrop').remove();
        });


    const rejectionTypes = @json($rejectiontypes);


        $(document).on('click', '.openRejectionModal', function() {
            detail_row_id = 1;
            const rowId = $(this).data('id');
           const jsonData = $(this).closest('td').find('.jsonData').val();
        $('#doneBtn').data('id', rowId);
        if (!sessionStorage.getItem(`rejectionData_${rowId}`)) {
            sessionStorage.setItem(`rejectionData_${rowId}`, jsonData);
        }

            $('#rejectionDetailsTable tbody').empty();

            const savedData = sessionStorage.getItem(`rejectionData_${rowId}`);
            if (savedData && savedData != "0") {
                const table = JSON.parse(savedData);
                table.forEach(item => {
                    if (table.length == 1) {
                       var classD = "d-none";    
                    }else{
                        classD = "";
                    }
                    $('#rejectionDetailsTable tbody').append(`
                <tr>
                    <td class="rejectiontype">
                        <select name="rejectionType" class="form-control rejectionType form-control-sm">
                            ${generateOptions(item.rejectiontype)}
                        </select>
                    </td>
                    <td><input type="text" name="comments" class="form-control form-control-sm comments" value="${item.comments}" /><input type="hidden" class="detail_row_id" value="${item.detail_row_id}"/></td>
                    <td>
                        <button type="button" class="btn btn-success btn-sm" onclick="addRowreject(${rowId})">
                            <i class="bi bi-plus"></i>
                        </button>
                        <button type="button" class="btn btn-danger btn-sm btn-remove ${classD}" data-row_id="${rowId}" onclick="removeRow(this)">
                            <i class="bi bi-dash"></i>
                        </button>
                    </td>
                </tr>
            `);
                });
            } else {
                // Add one empty row
                $('#rejectionDetailsTable tbody').append(`
            <tr>
                <td class="rejectiontype">
                    <select name="rejectionType" class="form-control rejectionType form-control-sm">
                        ${generateOptions('')}
                    </select>
                </td>
                <td><input type="text" name="comments" class="form-control form-control-sm comments" /><input type="hidden" class="detail_row_id" value="${detail_row_id}"/></td>
                <td>
                    <button type="button" class="btn btn-success btn-sm" onclick="addRowreject(this,${rowId})">
                        <i class="bi bi-plus"></i>
                    </button>
                    <button type="button" class="btn btn-danger btn-sm btn-remove d-none" data-row_id="${rowId}" onclick="removeRow(this)">
                        <i class="bi bi-dash"></i>
                    </button>
                        </td>
                    </tr>
                `);
                $('.comments').val('');
            }
    
    
            detail_row_id++;
            $('#rejectionModal').modal('show');
        });

    function generateOptions(selectedId) {
        let options = `<option value="" disabled ${selectedId ? '' : 'selected'}>Please Select</option>`;
        options += `<option value="qc" ${selectedId == 'qc' ? 'selected' : ''}>QC</option>`;
        rejectionTypes.forEach(type => {
            const selected = type.id == selectedId ? 'selected' : '';
            options += `<option value="${type.id}" ${selected}>${type.type}</option>`;
        });
        return options;
    }

    $(document).on('click', '.deleteBtn', function () {
            $(this).closest('tr').remove();
        });


    $('#saveForm').on('click', function() {
        let array = [];
        $('#productTable tbody tr').each(function() {
            var rowID = $(this).find('td:eq(0)').text().trim();
            let storedData = sessionStorage.getItem(`rejectionData_${rowID}`);
            // if (storedData == null) {
            //     storedData = `{"hiddenId":"${$(this).val()}"}`;
            // }
            array.push(JSON.parse(storedData));
        });
        $('#storedData').val(JSON.stringify(array));
        sessionStorage.clear();
        $(this).closest('form').submit();
    });



    // Listen for changes on any status select box
    $(document).on('change', '.status', function() {
        // Update the total count of rejected rows
        updateRejectedCount();
    });

    // Function to update the total number of rows marked as "reject"
    function updateRejectedCount() {
        let rejectedCount = 0;

        // Loop through all status select boxes to count how many are "reject"
        $('.status').each(function() {
            const summaryBtn = $(this).closest('tr').find('.openRejectionModal');
            if ($(this).val() === 'reject') {
                rejectedCount++;
                summaryBtn.prop('disabled', false); // Enable
            } else {
                summaryBtn.prop('disabled', true); // Disable
            }
        });

        // Update the qty_rejected field with the count
        $('#qty_rejected').val(rejectedCount);
    }


    function product_change() {

        var productId = $("#product_select").val();
        var part_name = $("#product_select option:selected").data('part-name');


        if (productId != "" || productId != null) {
            $('#scanBtn').prop('disabled', false);
            $('#addBtn').prop('disabled', false);
            $('#part_name').val(part_name);


        } else {
            $('#scanBtn').prop('disabled', true);
            $('#addBtn').prop('disabled', true);
            $('#part_name').val('');

        }
    };
</script>

<script>
    $(document).ready(function() {

sessionStorage.clear();

        $('#product_select').select2({
            placeholder: 'Select Part No',
            ajax: {
                url: '{{ route('product.search') }}',
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term,
                        page: params.page || 1
                    };
                },
                processResults: function(data, params) {

                    params.page = params.page || 1;

                    return {
                        results: $.map(data.items, function(item) {
                            return {
                                text: item.part_no,
                                id: item.id,
                                part_name: item.part_name
                            };
                        }),
                        pagination: {
                            more: (params.page * 10) < data
                                .total_count
                        }
                    };
                },
                cache: true
            },
            templateResult: function(item) {
                if (!item.id) return item.text;

                const $option = $('<span></span>')
                    .text(item.text)
                    .attr('data-part-name', item.part_name);

                return $option;
            },

            templateSelection: function(item) {
                if (!item.id) return item.text;

                $('#product_select option:selected').attr('data-part-name', item.part_name);

                return item.text;
            }
        });


        $('#insepector').select2({
            placeholder: 'Select User Name ',
            ajax: {
                url: '{{ route('users.searchQC') }}',
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term,
                        page: params.page || 1
                    };
                },
                processResults: function(data, params) {

                    params.page = params.page || 1;

                    return {
                        results: $.map(data.items, function(item) {
                            return {
                                text: `${item.user_name}/${item.employee_no}`,
                                id: item.id,

                            };
                        }),
                        pagination: {
                            more: (params.page * 10) < data
                                .total_count
                        }
                    };
                },
                cache: true
            },
        });


        // Initialize Bootstrap Datepicker
        $('#date').datepicker({
            format: 'dd/mm/yyyy', // Date format
            autoclose: true,
            todayHighlight: true,
            orientation: 'bottom' // Ensures the date picker opens below the input
        });
    });
</script>
@endsection