@extends('layouts.app')
@section('title')
    Final Checking Create
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('final-checking.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <div class="card">
        <form method="post" action="{{ route('final-checking.store') }}" 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="{{ $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="{{ date('d/m/Y') }}">
                            </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;">
                                </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;">


                                </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="">
                            </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" 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" 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 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 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>
                                <!-- Rows will be added dynamically -->
                            </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>
                            </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 = rowNumber++;

            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="${rowatc}" 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="${rowatc}">
                    <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++;

            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 = rowNumber++;

            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="${rowatc}" 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="${rowatc}">
                    <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);



        });

        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] = [];
        });
     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');
            $('#doneBtn').data('id', rowId);

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

            const savedData = sessionStorage.getItem(`rejectionData_${rowId}`);
            if (savedData) {
                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;
        }


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

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

        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>

    <!-- Include Bootstrap Datepicker CSS and JS -->
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></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