@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">
                    Username
                </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">
                    Assigned to
                </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">
                    Received on
                </th>
                <th scope="col" class="px-[12px] border-r sticky top-0 bg-[#000] z-10">
                    Elapsed 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   font-semibold ${status == "Expired" ? 'text-red-600' : 'text-green-600'}">
                                        <div class="flex  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 == 'Received' ? 'New' : 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>${Math.floor(differenceInHours / 24)} Days ${differenceInHours % 24} 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>` 
                                    : `${Math.floor(differenceInHours / 24)} Days ${differenceInHours % 24} 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