@extends('includes.layout')
@section('content')
<script>
   function filterData() {
    const statusFilter = document.getElementById('status_filter').value;
    const daysFilter = document.getElementById('days_filter').value;
    const rows = document.querySelectorAll('tbody tr');

    rows.forEach(row => {
        const status = row.getAttribute('data-status');
        const daysRemaining = parseInt(row.getAttribute('data-days'));

        let showRow = true;
        if (statusFilter && statusFilter !== 'all' && status !== statusFilter) {
            showRow = false;
        }
        if (daysFilter !== 'all') {
            const daysCondition = parseInt(daysFilter.slice(1)); 
            if (daysRemaining <= daysCondition) {
                showRow = false;
            }
        }
        row.style.display = showRow ? '' : 'none';
    });
}
// function searchTable() {
//     const searchBox = document.getElementById('search_box');
//     const searchTerm = searchBox.value.trim().toLowerCase();
//     const rows = document.querySelectorAll('tbody tr');

//     rows.forEach(row => {
//         if (searchTerm === '') {
//             row.style.display = ''; // Show all rows if search box is empty
//         } else {
//             let showRow = false;
//             row.querySelectorAll('td').forEach(cell => {
//                 if (cell.textContent.toLowerCase().includes(searchTerm)) {
//                     showRow = true;
//                 }
//             });
//             row.style.display = showRow ? '' : 'none';
//         }
//     });
// }
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // $(document).ready(function () {
    //     $("#search_box").on("keyup", function () {
    //         let searchTerm = $(this).val().trim();
            
    //         $.ajax({
    //             url: "{{ route('moderation.index') }}",
    //             type: "GET",
    //             data: { search: searchTerm },
    //             success: function (response) {
    //                 $("tbody").html($(response).find("tbody").html()); // Update table body
    //                 $(".mt-4").html($(response).find(".mt-4").html()); // Update pagination links
    //                 $(".pagination-container").html($(response).find(".pagination-container").html()); 
    //             }
    //         });
    //     });
    // });


    // $(document).ready(function () {
    //     function fetchData() {
    //         let searchTerm = $("#search_box").val().trim();
    //         let statusFilter = $("#status_filter").val();
    //         let daysFilter = $("#days_filter").val();

    //         $.ajax({
    //             url: "{{ route('moderation.index') }}",
    //             type: "GET",
    //             data: { search: searchTerm, status: statusFilter, days: daysFilter },
    //             success: function (response) {
    //                 $("tbody").html($(response).find("tbody").html());
    //                 $(".mt-4").html($(response).find(".mt-4").html());
    //                 $(".pagination-container").html($(response).find(".pagination-container").html());
    //             },
    //             error: function (xhr, status, error) {
    //                 console.error("AJAX Error:", xhr.responseText);
    //             }
    //         });
    //     }

    //     $("#search_box, #status_filter, #days_filter").on("keyup change", fetchData);
    // });



</script>

<div class="p2" style="padding: 24px;">
    <h1 class="text-2xl font-bold" style="line-height:2.0">Moderation Auto Escalation</h1>
    <span class="text-gray-500" style="font-size: 15px;">Weekly mod velocity = 12 days (System Computed Value)</span>

    <div class="flex flex-wrap items-center justify-between mb-4" style="margin-top: 30px;">
    <div class="flex items-center gap-4">
        <div>
            <label for="status_filter" class="mr-2">Type:</label>
            <select id="status_filter" name="status" onchange="filterData()" class="px-2 py-1 border rounded">
                <option value="all">All</option>
                <option value="overdue">Overdue</option>
                <option value="pending">In Review</option>
            </select>
        </div>

        <div>
            <label for="days_filter" class="mr-2"></label>
            <select id="days_filter" name="days" onchange="filterData()" class="px-2 py-1 border rounded">
                <option value="all">Duration</option>
                <option value=">10">> 10 days</option>
                <option value=">20">> 20 days</option>
                <option value=">30">> 30 days</option>
                <option value=">50">> 50 days</option>
                <option value=">100">> 100 days</option>
                <option value=">150">> 150 days</option>
            </select>
        </div>
    </div>

    <!-- <div>
        <label for="search_box" class="mr-2">Search:</label>
        <input type="text" id="search_box" onkeyup="searchTable()" placeholder="Search..." class="px-2 py-1 border rounded">
    </div> -->

    <div class="mb-4">
        <label for="search_box" class="mr-2">Search:</label>
        <input type="text" id="search_box" placeholder="Search..." 
               class="px-2 py-1 border rounded">
    </div>
</div>


    <div class="relative overflow-x-auto shadow-md sm:rounded-lg max-h-[64vh] w-full">
    <table 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="px-[12px] py-4 h-[60px] border-r sticky top-0 bg-[#000] z-10">User</th>
             <th scope="col" class="px-[12px] py-4 h-[60px] border-r sticky top-0 bg-[#000] z-10">User Type</th>
                <th scope="col" class="px-[12px] border-r sticky top-0 bg-[#000] z-10">Email</th>
                <th scope="col" class="px-[12px] border-r sticky top-0 bg-[#000] z-10">UPC</th>
                <th scope="col" class="px-[12px] border-r sticky top-0 bg-[#000] z-10">UPC Type</th>
                <th scope="col" class="px-[12px] border-r sticky top-0 bg-[#000] z-10">Created Time</th>
                <th scope="col" class="px-[12px] border-r sticky top-0 bg-[#000] z-10">Time for Escalation</th>
                <th scope="col" class="px-[12px] border-r sticky top-0 bg-[#000] z-10">Escalation &nbsp; Level 1 (Asana)</th>
                <th scope="col" class="px-[12px] border-r sticky top-0 bg-[#000] z-10">Escalation Level 2 (Slack)</th>
            </tr>
        </thead>
        <tbody>
    @if(count($moderationData) > 0)
      @foreach($moderationData as $item)
            @php
                $status = ($item->status == 'red') ? 'Overdue' : 'In_Review';
                $daysRemaining = (int)explode(' ', $item->daysRemaining)[0]; // Extract the number of days
            @endphp
            <tr class="border-b" data-status="{{ $status }}" data-days="{{ $daysRemaining }}">
                <td class="border ">{{ $item->User }}</td>



        <td class="border-r border-slate-300 px-2 py-5 text-center" style="width: 10%;">
            @if($item->usertype === 'Enterprise')
                <span class="w-max"
                    style="
                        font-weight: 600;
                        position: relative;
                        display: flex;
                        gap: 2px;
                        background: linear-gradient(344deg, #e6b94340, #ddae38);
                        padding: 5px 10px;
                        border-radius: 20px;
                        color: black;
                        cursor: pointer;
                        letter-spacing: 1px;
                    ">
                    <img src="images/crown1 (1).png" alt="crown" style="height: 19px;" />
                    {{ $item->usertype }}
                    <span
                        style="
                            visibility: hidden;
                            width: 120px; /* Adjust width as needed */
                            background-color: #333;
                            color: #fff;
                            text-align: center;
                            border-radius: 5px;
                            padding: 5px;
                            position: absolute;
                            z-index: 1;
                            bottom: 125%; /* Position above the span */
                            left: 50%;
                            margin-left: -60px; /* Center the tooltip */
                            opacity: 0;
                            transition: opacity 0.3s;
                            white-space: nowrap;
                        "
                        class="tooltiptext"
                    >
                        Enterprise User
                    </span>
                </span>
            @elseif($item->usertype === 'Priority')
                <span
                    class="w-max"
                    style="
                        font-weight: 600;
                        letter-spacing: 3px;
                        position: relative;
                        display: flex;
                        gap: 5px;
                        background: linear-gradient(335deg, #e6b94305, green);
                        padding: 5px 10px;
                        border-radius: 20px;
                        color: #fff;
                        cursor: pointer;
                    "
                >
                    <img src="images/priority.png" alt="priority" style="object-fit: cover; filter: brightness(10); width: 28px; height: 18px;" />
                    <p>{{ $item->usertype }}</p>
                    <span
                        style="
                            visibility: hidden;
                            width: 120px; /* Adjust width as needed */
                            background-color: #333;
                            color: #fff;
                            text-align: center;
                            border-radius: 5px;
                            padding: 5px;
                            position: absolute;
                            z-index: 1;
                            bottom: 125%; /* Position above the span */
                            left: 50%;
                            margin-left: -60px; /* Center the tooltip */
                            opacity: 0;
                            transition: opacity 0.3s;
                            white-space: nowrap;
                        "
                        class="tooltiptext"
                    >
                        Priority User
                    </span>
                </span>
            @else
                <span class="w-max" style="
                    font-weight: 600;
                    letter-spacing: 1px;
                    position: relative;
                    display: flex;
                    gap: 10px;
                    background: rgb(203, 201, 210);
                    padding: 5px 10px;
                    border-radius: 20px;
                    color: #000;
                ">
                    <img src="images/user_icon.jpg" style="object-fit: cover; width: 28px; height: 17px;" />
                    {{ $item->usertype === "Normal" ? "Free" : $item->usertype }}
                    <span
                        style="
                            visibility: hidden;
                            background-color: #333;
                            color: #fff;
                            text-align: center;
                            border-radius: 5px;
                            padding: 5px;
                            position: absolute;
                            z-index: 1;
                            bottom: 125%; /* Position above the span */
                            left: 50%;
                            margin-left: -60px; /* Center the tooltip */
                            opacity: 0;
                            transition: opacity 0.3s;
                            white-space: nowrap;
                        "
                        class="tooltiptext"
                    >
                            Normal User
                        </span>
                    </span>
                @endif
            </td>

                <td class="border-r ">{{ $item->Email }}</td>
                <td class="border-r ">{{ $item->upc }}</td>


                <td class="border-r border-slate-300 px-2 py-5">
                @if($item->upctype === 'Enterprise')
                <span class="w-max" style="font-weight: 600; position: relative; display: flex; gap: 2px; background: linear-gradient(344deg, #e6b94340, #ddae38); padding: 5px 10px; border-radius: 20px; color: black; cursor: pointer; letter-spacing: 1px;">
                    <img src="images/crown1 (1).png" alt="crown" style="height: 19px;" />
                    Enterprise
                    <span style="visibility: hidden; width: 120px; background-color: #333; color: #fff; text-align: center; border-radius: 5px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; white-space: nowrap;" class="tooltiptext">
                    Enterprise User
                    </span>
                </span>
                @elseif($item->upctype === 'Premium')
            
                <span class="w-max" style="font-weight: 600; position: relative; display: flex; gap: 2px; background: linear-gradient(344deg, #e6b94340, #ddae38); padding: 5px 10px; border-radius: 20px; color: black; cursor: pointer; letter-spacing: 1px;">
                    <img src="images/crown1 (1).png" alt="crown" style="height: 19px;" />
                    Premium
                    <span style="visibility: hidden; width: 120px; background-color: #333; color: #fff; text-align: center; border-radius: 5px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; white-space: nowrap;" class="tooltiptext">
                    Premium User
                    </span>
                </span>

                @else
                <span class="w-max" style="font-weight: 600; letter-spacing: 1px; position: relative; display: flex; gap: 10px; background: rgb(203, 201, 210); padding: 5px 10px; border-radius: 20px; color: #000;">
                    <img src="images/user_icon.jpg" style="object-fit: cover; width: 28px; height: 17px;" />
                    Free
                    <span style="visibility: hidden; background-color: #333; color: #fff; text-align: center; border-radius: 5px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; white-space: nowrap;" class="tooltiptext w-max">
                        Free User
                    </span>
                </span>
                @endif
            </td>

                <td class="border-r">{{ $item->Created_Time }}</td>
                <td style="color: {{$item->status}}"> <div style="display:grid">  <span >{{$status}}</span>    <span  class="border-r  countdown" style="color: {{$item->status}}" data-days="{{ $daysRemaining }}" data-time="{{ explode(' ', $item->daysRemaining)[2] }}" id="countdown-{{ $item->id }}">{{ $item->daysRemaining }}</span></div></td>
                <td class="border-r break-words max-w-[150px]">
                    @if($item->Level2)
                        <a href="{{$item->Level2}}"><button class="bg-blue-500 text-white px-2 py-2 rounded w-[120px] h-[40px] text- font-medium">
                            View in Asana
                        </button></a>
                    @else
                        -
                    @endif
                </td>

                <td class="border-r break-words text-blue-500 max-w-[150px]">
                    @if($item->Level1 == '1')
                
                {{ 'Escalated on ' . $item->level1_at }}</td>
                @else
                -
                @endif
                        </tr>
            @endforeach
            @else
                       <tr class="odd:bg-white odd:darks:bg-gray-900 even:bg-gray-50 even:darks:bg-gray-800 border-b darks:border-gray-700">
                       <th colspan="12" scope="row" class="text-center text-zinc-400 px-6 py-3 font-medium text-gray-900 whitespace-nowrap darks:text-white">
                                            No data available in table
                       </th>
                       </tr>
                    @endif
        </tbody>
    </table>
    <style>
    #All_mail_cont tr:hover td {
        background: #d2d2d2cf !important;
        color: #000 !important;
    }
    .pagination-container {
        margin: 20px;
        text-align: right;
        display: flex;
        justify-content: end;
        gap: 30px;
        place-items: center;
    }
    .pagination-container select {
        padding: 5px;
        background: #fff0;
        border: 1px solid #bbb;
        border-radius: 10px;
    }
    .pagination-container button {
        padding: 5px;
        margin: 0 5px;
        cursor: pointer;
        background: #000;
        color: #fff;
        border: 0;
        border-radius: 50px;
    }
    .pagination-container button:disabled {
        cursor: not-allowed;
        opacity: 0.5;
        background: #000;
        color: #fff;
        border: 0;
        border-radius: 50px;
    }
</style>

<div class="pagination-container"> 
    <span>Items per page:</span>
    <select id="itemsPerPage" style="cursor: pointer">
        <option value="10" {{ request('items_per_page', 10) == 10 ? 'selected' : '' }}>10</option>
        <option value="20" {{ request('items_per_page', 10) == 20 ? 'selected' : '' }}>20</option>
        <option value="50" {{ request('items_per_page', 10) == 50 ? 'selected' : '' }}>50</option>
    </select>

    <div>
    <span id="pageInfo">
    {{ $moderationData->currentPage() }}  -  {{ $moderationData->total() }} of {{ $moderationData->lastPage() }}
    </span>
    <!-- <span id="pageInfo">Page {{ $moderationData->currentPage() }} of {{ $moderationData->lastPage() }}</span> -->

    <button onclick="navigatePage(1)" {{ $moderationData->onFirstPage() ? 'disabled' : '' }}>
            <svg style="rotate: 180deg;" fill="#fff" width="12" height="12" viewBox="0 0 1024 1024">
                <path d="M676.4 528.95L293.2 829.97c-14.25 11.2-35.2 1.1-35.2-16.95V210.97c0-18.05 20.95-28.14 35.2-16.94l383.2 301.02a21.53 21.53 0 0 1 0 33.9M694 864h64a8 8 0 0 0 8-8V168a8 8 0 0 0-8-8h-64a8 8 0 0 0-8 8v688a8 8 0 0 0 8 8"></path>
            </svg>
    </button>
    <button onclick="navigatePage({{ $moderationData->currentPage() - 1 }})" {{ $moderationData->onFirstPage() ? 'disabled' : '' }}>
        <svg width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
        <path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/>
        </svg>
    </button>
    <button onclick="navigatePage({{ $moderationData->currentPage() + 1 }})" {{ $moderationData->hasMorePages() ? '' : 'disabled' }}>
        <svg width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
        <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
        </svg>    
    </button>
    <button onclick="navigatePage({{ $moderationData->lastPage() }})" {{ $moderationData->hasMorePages() ? '' : 'disabled' }}>
        <svg fill="#fff" width="12" height="12" viewBox="0 0 1024 1024">
            <path d="M676.4 528.95L293.2 829.97c-14.25 11.2-35.2 1.1-35.2-16.95V210.97c0-18.05 20.95-28.14 35.2-16.94l383.2 301.02a21.53 21.53 0 0 1 0 33.9M694 864h64a8 8 0 0 0 8-8V168a8 8 0 0 0-8-8h-64a8 8 0 0 0-8 8v688a8 8 0 0 0 8 8"></path>
            </svg>
    </button>
    <div>
</div>
<script>

        $("#itemsPerPage").on("change", function () {
            let itemsPerPage = $(this).val();
            
            $.ajax({
                url: "{{ route('moderation.index') }}",
                type: "GET",
                data: { items_per_page: itemsPerPage },  
                success: function (response) {
                    $("tbody").html($(response).find("tbody").html());
                    $(".pagination-container").html($(response).find(".pagination-container").html()); 
                }
            });
        });


        function navigatePage(page) {
        let itemsPerPage = $("#itemsPerPage").val();
        $.ajax({
            url: "{{ route('moderation.index') }}",
            type: "GET",
            data: { page: page, items_per_page: itemsPerPage },
            success: function (response) {
                $("tbody").html($(response).find("tbody").html());
                $(".pagination-container").html($(response).find(".pagination-container").html()); 
            }
        });
    }
</script>

</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    function updateCountdown() {
        document.querySelectorAll(".countdown").forEach(function (element) {
            let days = parseInt(element.getAttribute("data-days"));
            let timeParts = element.getAttribute("data-time").split(":").map(Number);
            let [hours, minutes, seconds] = timeParts;
                
            let totalSeconds = days * 86400 + hours * 3600 + minutes * 60 + seconds;
            if (totalSeconds > 0) {
                totalSeconds--;
            }
                
            let newDays = Math.floor(totalSeconds / 86400);
            let newHours = Math.floor((totalSeconds % 86400) / 3600);
            let newMinutes = Math.floor((totalSeconds % 3600) / 60);
            let newSeconds = totalSeconds % 60;
                
            element.setAttribute("data-days", newDays);
            element.setAttribute("data-time", `${newHours}:${newMinutes}:${newSeconds}`);
            element.textContent = `${newDays} days ${newHours.toString().padStart(2, '0')}:${newMinutes.toString().padStart(2, '0')}:${newSeconds.toString().padStart(2, '0')}`;
            
        });





    }




    // function updateEscalationData() {
    //     fetch(`/update-escalation/`)
    //         .then(response => response.json())
    //         .then(data => {
    //             console.log(data);
    //         })
    //         .catch(error => {
    //             console.error('Error updating escalation data:', error);
    //         });
    // }
    // setInterval(updateEscalationData, 5000); 
    setInterval(updateCountdown, 1000); 
});

</script>
@endsection