@extends('header.topnav')

@section('title', 'Welcome')

@section('content')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    function auto_suggest(event) {
        var checkbox = $(event).prop('checked');
        console.log('checkbox',checkbox)
        $.ajax({
            type: "post",
            url: "{{ route('autonomous-level') }}",
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            data: {
                ref: 'Suggest',
                checkbox: checkbox == true ? 1 : 0,
            }
        })
    }
</script>

<div class="p-8 overflow-y-auto" style="height: 40rem;">
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-bold">AgeDetails</h1>
        <div class="w-72">
            <div class="relative h-10 w-full min-w-[200px] ">
                <input type="email" placeholder="Serach" id="myInput" onkeyup="myFunction()"
                class="peer h-full w-full rounded-[7px]  !border  !border-gray-300 border-t-transparent bg-transparent bg-white px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700  shadow-lg shadow-gray-900/5 outline outline-0 ring-4 ring-transparent transition-all placeholder:text-gray-500 placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2  focus:!border-gray-900 focus:border-t-transparent focus:!border-t-gray-900 focus:outline-0 focus:ring-gray-900/10 disabled:border-0 disabled:bg-blue-gray-50" />
            </div>
        </div>
    </div>
    <br>
   

<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <table id="myTable" class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 sticky top-0">
            <tr>
                <th scope="col" class="px-6 py-3">
                    From
                </th>
                <th scope="col" class="px-6 py-3">
                    Subject
                </th>
                <th scope="col" class="px-6 py-3">
                    Ticket Received
                </th>
                <th scope="col" class="px-6 py-3">
                    Elapse Time
                </th>
                <th scope="col" class="px-6 py-3">
                    Status
                </th>
            </tr>
        </thead>
        <tbody class="overflow-y-auto" id="ddddd"></tbody>
    </table>
</div>
<div class="w-full text-end">
    <div id="pagination" class="mt-2"></div>
</div>


<script>
    var data = @json($report);
    const rowsPerPage = 8; 
    let currentPage = 1; 
    $(document).ready(function() {
    function displayTable(page) { 
        const table = document.getElementById("myTable"); 
        const startIndex = (page - 1) * rowsPerPage; 
        const endIndex = startIndex + rowsPerPage; 
        const slicedData = data.slice(startIndex, endIndex); 


        const tbody = document.getElementById("ddddd");
        tbody.innerHTML = '';
        if(data.length > 0) {
            slicedData.forEach((item, index) => {
                // Create a new table row
                const newRow = document.createElement("tr");
                newRow.classList.add("odd:bg-white", "odd:dark:bg-gray-900", "even:bg-gray-50", "even:dark:bg-gray-800", "border-b", "dark:border-gray-700");

                var currentDateTime = new Date();
                var givenDateTime = new Date(item.tickets_received);
                var differenceInMillis = currentDateTime - givenDateTime;
                var differenceInHours = differenceInMillis / (1000 * 60 * 60);
// console.log('ddddddddd',Number(differenceInHours) > 48 ?  Number(differenceInHours) > 72 ? 'text-red-500' : 'text-orange-600' : 'text-green-700')
                // Construct the inner HTML of the row
                newRow.innerHTML = `
                        <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                            <td scope="row" class="px-6 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white ${Number(differenceInHours) > 48 ?  Number(differenceInHours) > 72 ? 'text-red-600' : 'text-orange-600' : 'text-green-700'} ">
                                ${item.uname}
                            </td>
                            <td class="px-6 py-3 ${Number(differenceInHours) > 48 ?  Number(differenceInHours) > 72 ? 'text-red-600' : 'text-orange-600' : 'text-green-700'}">
                                ${item.action_name}
                            </td>
                            <td class="px-6 py-3 cursor-pointer ${Number(differenceInHours) > 48 ?  Number(differenceInHours) > 72 ? 'text-red-600' : 'text-orange-600' : 'text-green-700'}">
                                ${item.tickets_received}
                            </td>
                            <td class="px-6 py-3 cursor-pointer ${Number(differenceInHours) > 48 ?  Number(differenceInHours) > 72 ? 'text-red-600' : 'text-orange-600' : 'text-green-700'}">
                                ${Math.round(differenceInHours)} Hrs
                            </td>
                            <td class="px-6 py-3 cursor-pointer ${Number(differenceInHours) > 48 ?  Number(differenceInHours) > 72 ? 'text-red-600' : 'text-orange-600' : 'text-green-700'}">
                                Auto Escalated 
                            </td>
                        </tr>
                `;

                // Append the new row to the tbody
                tbody.appendChild(newRow);
            });
        }else {
            const newRow = document.createElement("tr");
                newRow.classList.add("odd:bg-white", "odd:dark:bg-gray-900", "even:bg-gray-50", "even:dark:bg-gray-800", "border-b", "dark:border-gray-700");

                // Construct the inner HTML of the row
                newRow.innerHTML = `
                <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                    <th colspan="5" scope="row" class="text-center text-zinc-400 px-6 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                        No data available in table
                    </th>
                </tr>
                `;
                tbody.appendChild(newRow);
        }


        

        // Update pagination 
        updatePagination(page); 
    }
    function updatePagination(currentPage) {
        const pageCount = Math.ceil(data.length / rowsPerPage);
        const paginationContainer = $("#pagination");
        paginationContainer.empty();

        for (let i = 1; i <= pageCount; i++) {
            const pageLink = $(`<button
                class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg bg-gray-900 text-center align-middle font-sans text-xs font-medium uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
                type="button">
                <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
                `+i+`
                </span>
                </button>`);
            pageLink.on("click", function() {
                displayTable(i);
            });
            if (i === currentPage) {
                pageLink.css("font-weight", "bold");
            }
            paginationContainer.append(pageLink);
            paginationContainer.append(" ");
        }
    }
    displayTable(currentPage);
});

function myFunction() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[1];
        if (td) {
        txtValue = td.textContent || td.innerText;
        
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
        }       
    }
}
</script>

</div>

@endsection