@extends('includes.layout')
@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">
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-bold">Aging Report</h1>
        <div class="flex items-center gap-2">
            <button type="button" onclick="TBallmail('ref')" class="cursor-pointer p-1 bg-black text-white rounded-md flex items-center gap-1 px-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" id="refresh-in" fill="currentColor">
                    <path d="M10 11H7.101l.001-.009a4.956 4.956 0 0 1 .752-1.787 5.054 5.054 0 0 1 2.2-1.811c.302-.128.617-.226.938-.291a5.078 5.078 0 0 1 2.018 0 4.978 4.978 0 0 1 2.525 1.361l1.416-1.412a7.036 7.036 0 0 0-2.224-1.501 6.921 6.921 0 0 0-1.315-.408 7.079 7.079 0 0 0-2.819 0 6.94 6.94 0 0 0-1.316.409 7.04 7.04 0 0 0-3.08 2.534 6.978 6.978 0 0 0-1.054 2.505c-.028.135-.043.273-.063.41H2l4 4 4-4zm4 2h2.899l-.001.008a4.976 4.976 0 0 1-2.103 3.138 4.943 4.943 0 0 1-1.787.752 5.073 5.073 0 0 1-2.017 0 4.956 4.956 0 0 1-1.787-.752 5.072 5.072 0 0 1-.74-.61L7.05 16.95a7.032 7.032 0 0 0 2.225 1.5c.424.18.867.317 1.315.408a7.07 7.07 0 0 0 2.818 0 7.031 7.031 0 0 0 4.395-2.945 6.974 6.974 0 0 0 1.053-2.503c.027-.135.043-.273.063-.41H22l-4-4-4 4z"></path>
                </svg>  
                <span class="text-sm font-medium">Refresh</span>  
            </button>
            <div class="w-72">
                <div class="relative h-10 w-full min-w-[200px] ">
                    <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                        <svg class="w-4 h-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 20 20">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"></path>
                        </svg>
                    </div>
                    <input type="text" id="myInput" onkeyup="myFunction(this)" placeholder="Search"
                        class="ps-10 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> 
    </div>
    <br>
   

<div class="relative overflow-x-auto shadow-md sm:rounded-lg h-[31rem]">
    <table id="myTable" class="w-full !text-sm text-center rtl:text-right text-gray-500">
        <thead class="text-xs text-gray-700 uppercase bg-[#000] text-[#fff]">
            <tr style="text-align: center;border-bottom: 1px solid #e1e1e1;">
                <th scope="col" class="p-4 border-r sticky top-0 bg-[#000] z-10">
                    Ticket#
                </th>
                <th scope="col" class="p-4 border-r sticky top-0 bg-[#000] z-10">
                    From
                </th>
                <th scope="col" class="p-4 px-[12px] border-r sticky top-0 bg-[#000] z-10">
                    Subject
                </th>
                <th scope="col" class="p-4 px-[12px] border-r sticky top-0 bg-[#000] z-10">
                    Assignee
                </th>
                <th scope="col" class="p-4 px-[12px] border-r sticky top-0 bg-[#000] z-10">
                    Status
                </th>
                <th style="min-width:   100px;" scope="col" class="px-[12px] border-r sticky top-0 bg-[#000] z-10">
                    Ticket Received
                </th>
                <th scope="col" class="px-[12px] border-r sticky top-0 bg-[#000] z-10">
                    Elapse Time
                </th>
            </tr>
        </thead>
        <tbody class="" id="ddddd">
        </tbody>
    </table>
</div>
<input type="hidden" id="fffff" value="">
<script>
    function TBallmail(e) {
        if(e == "ref") {
            jQuery('#refresh-in').addClass('animate-spin');
        }
        $.ajax({
            type: "GET",
            url: "{{ route('showage') }}",
            success: function(result) {
                var data = result;
                console.log('item', data);
                if(e == "ref") {
                    jQuery('#refresh-in').removeClass('animate-spin');
                }
                const tbody = document.getElementById("ddddd");
                tbody.innerHTML = '';
                const redRows = new Set();
                if(data.length > 0) {
                    if(data.length > 0) {
                        data.forEach((item, index) => {
                        const newRow = document.createElement("tr");
                        const formatted = new Date(item.tickets_received).toLocaleDateString('en-GB', {
                            day: '2-digit',
                            month: 'short',
                            year: '2-digit',
                        }).replace(/ /g, '-');
                        // // console.log('item', item.assigned_to);
                        const firstTwoChars = item.name.slice(0, 2);

                        var currentDateTime = new Date();
                        var givenDateTime = new Date(item.tickets_received);
                        var differenceInMillis = currentDateTime - givenDateTime;
                        var differenceInHours = Math.round(differenceInMillis / (1000 * 60 * 60));
                       
                        differenceInHours=  parseInt(differenceInHours, 10);
                        console.log('differenceInHours', differenceInHours);
                        const currentdate = new Date();
                        const createdate = new Date(item.tickets_received);
                        const scheduleHours = item.elapetime;
                        const scheduleMilliseconds = scheduleHours * 60 * 60 * 1000;
                        const timeDifference = currentdate - createdate; 
                        let status = "";

                        if (timeDifference >= scheduleMilliseconds) {
                            status = "Expired";
                        } else {
                            const remainingTime = scheduleMilliseconds - timeDifference;
                            const remainingHours = Math.floor(remainingTime / (60 * 60 * 1000));
                            const remainingMinutes = Math.floor((remainingTime % (60 * 60 * 1000)) / (60 * 1000));
                            status = "Not";
                        }
                        

                        newRow.innerHTML = `
                                <tr key="${index}" class="border-b">
                                    <td scope="row" id="intd${index}" class="border border-slate-300 px-6 py-3 font-semibold text-start whitespace-nowrap ${status == "Expired" ? 'text-red-600' : 'text-green-600'}">
                                        ${item.id}
                                    </td>
                                    <td scope="row" id="intd${index}" class="border border-slate-300 px-6 py-3 font-semibold text-start whitespace-nowrap ${status == "Expired" ? 'text-red-600' : 'text-green-600'}">
                                        ${item.uname ? item.uname : ''}
                                    </td>
                                    <td id="intd${index}" class="border border-slate-300 px-6 py-3 text-start font-semibold ${status == "Expired" ? 'text-red-600' : 'text-green-600'}">
                                        ${item.action_name}
                                    </td>
                                    <td id="intd${index}" class="border-b border-slate-300 px-6 py-3  place-items-center font-semibold ${status == "Expired" ? 'text-red-600' : 'text-green-600'}">
                                        <div class="flex items-center gap-2">
                                            <div class="bg-yellow-400 rounded-full h-8 w-8 grid place-items-center text-xs">${firstTwoChars}</div>
                                            <span>${item.name}</span>    
                                        </div>
                                    </td>
                                    <td scope="row" id="intd${index}" class="border border-slate-300 px-6 py-3 font-semibold text-start whitespace-nowrap ${status == "Expired" ? 'text-red-600' : 'text-green-600'}">
                                        ${item.status}
                                    </td>
                                    <td id="intd${index}" class="border border-slate-300 px-6 py-3 font-semibold cursor-pointer ${status == "Expired" ? 'text-red-600' : 'text-green-600'}">
                                        ${formatted} 
                                    </td>
                                    <td id="intd${index}" class="group relative border border-slate-300 px-6 py-3 font-semibold cursor-pointer ${status == "Expired" ? 'text-red-600' : 'text-green-600'}">
                                        <div id="alarm-status${index}">${status == "Expired" ? '<span>'+differenceInHours+'Hrs</span><div class="group-hover:block hidden bg-white w-max shadow rounded-md border absolute z-[999]  left-1 -top-7 p-2">Auto Escalated</div>' : differenceInHours + "Hrs"}</div>
                                    </td>
                                </tr>
                        `;
                        tbody.appendChild(newRow);
                        // if (status == "Expired") {
                        //     $.ajax({
                        //         type: "post",
                        //         url: "{{ route('overdue') }}",
                        //         headers: {

                        //             'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        //         },
                        //         data: {
                        //             ids: item.id,
                        //             hours: Number(differenceInHours),
                        //             hour: item.elapetime
                        //         },
                        //         success: function(result) {
                        //             console.log('result', result);
                        //         }
                        //     })
                        // }
                        // console.log(`IDs of text-red-600 rows:`, $('#fffff').val());
                        // const countdownInterval = setInterval(() => {
                        //     var groupid = sessionStorage.getItem("rows").split(',');
                        //     const numberArray = groupid.map(Number);
                        //     if(numberArray.includes(item.id)) {
                        //         $.ajax({
                        //             type: "post",
                        //             url: "{{ route('overdue') }}",
                        //             headers: {

                        //                 'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        //             },
                        //             data: {
                        //                 ids: item.id,
                        //                 hours: Number(differenceInHours),
                        //             },
                        //             success: function(result) {
                        //                 console.log('result', result);
                        //             }
                        //         })
                        //     }
                        //     console.log('ff', sessionStorage.getItem("rows").split(','), item.id);
                        //     clearInterval(countdownInterval);
                        // }, 4000);
                    });
                    }else {
                        const newRow = document.createElement("tr");
                        newRow.innerHTML = `
                        <tr class="border-b">
                            <th colspan="7" scope="row" class="text-center text-zinc-400 px-6 py-3 font-medium text-gray-900 whitespace-nowrap">
                                No data available in table
                            </th>
                        </tr>
                        `;
                        tbody.appendChild(newRow);
                    }
                }else {
                    const newRow = document.createElement("tr");
                    newRow.innerHTML = `
                    <tr class="border-b" id="noDataRow">
                        <th colspan="7" scope="row" class="text-center text-zinc-400 px-6 py-3 font-medium text-gray-900 whitespace-nowrap">
                            No data available in table
                        </th>
                    </tr>
                    `;
                    tbody.appendChild(newRow);
                }
                
            }
        })
    };
    TBallmail();
    function myFunction(event) {
        var filter, table, tr, td, i, txtValue;
        filter = event.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        for (i = 1; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[2];
            if (td) {
                txtValue = td.textContent.trim() || td.innerText.trim();
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>
</div>
@endsection