@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')); // Get the days remaining from data attribute

        let showRow = true;

        // Filter by status
        if (statusFilter && statusFilter !== 'all' && status !== statusFilter) {
            showRow = false;
        }

        // Filter by days remaining
        if (daysFilter !== 'all') {
            const daysCondition = parseInt(daysFilter.slice(1)); // Get the number after '>'
            if (daysRemaining <= daysCondition) {
                showRow = false;
            }
        }

        // Show or hide the row based on the conditions
        row.style.display = showRow ? '' : 'none';
    });
}
function searchTable() {
    const searchTerm = document.getElementById('search_box').value.toLowerCase();
    const rows = document.querySelectorAll('tbody tr');

    rows.forEach(row => {
        let showRow = false; // Start by hiding the row

        // Check if any cell in the row contains the search term
        row.querySelectorAll('td').forEach(cell => {
            if (cell.textContent.toLowerCase().includes(searchTerm)) {
                showRow = true;
            }
        });

        // Show or hide the row based on the search
        row.style.display = showRow ? '' : 'none';
    });
}

    
</script>
<div class="full_container_start" style="overflow: scroll; height: 75vh; padding: 24px;">
    <h1 class="text-2xl font-bold mb-4">Moderation Auto Escalation</h1>
    <span class="text-gray-500">Weekly mod velocity = 12 days (System Computed Value)</span>
    
    <div class="mb-4">
    <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="status_filter" class="mr-2">Filter by Status:</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="in_review">In Review</option>
        </select>
    </div>

    <div class="mb-4">
        <label for="days_filter" class="mr-2">Filter by Days Remaining:</label>
        <select id="days_filter" name="days" onchange="filterData()" class="px-2 py-1 border rounded">
            <option value="all">All</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 class="mb-4">
        <label for="items_per_page" class="mr-2">Items per page:</label>
        <select id="items_per_page" name="items_per_page" onchange="updateItemsPerPage()" class="px-2 py-1 border rounded">
            <option value="10" {{ request('items_per_page') == '10' ? 'selected' : '' }}>10</option>
            <option value="25" {{ request('items_per_page') == '25' ? 'selected' : '' }}>25</option>
            <option value="50" {{ request('items_per_page') == '50' ? 'selected' : '' }}>50</option>
        </select>
    </div>

    <table class="table-auto w-full mt-4 border-collapse border border-gray-300">
        <thead>
            <tr class="bg-gray-200">
                <th class="border px-4 py-2">User</th>
                <th class="border px-4 py-2">Type</th>
                <th class="border px-4 py-2">Email</th>
                <th class="border px-4 py-2">UPC</th>
                <th class="border px-4 py-2">UPC Type</th>
                <th class="border px-4 py-2">Created Time</th>
                <th class="border px-4 py-2">Time for Escalation</th>
                <th class="border px-4 py-2">Escalation Level 1</th>
                <th class="border px-4 py-2">Escalation Level 2</th>
            </tr>
        </thead>
        <tbody>
            @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="text-center" data-status="{{ $status }}" data-days="{{ $daysRemaining }}">
                <td class="border px-4 py-2">{{ $item->User }}</td>



        <td class="border 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 px-4 py-2">{{ $item->usertype }}</td> -->
                <td class="border px-4 py-2">{{ $item->Email }}</td>
                <td class="border px-4 py-2">{{ $item->upc }}</td>


                <td class="border 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')
    <!-- If Priority -->
    <span 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="crown" style="object-fit: cover; filter: brightness(10); width: 28px; height: 18px;" />
        <p>Premium</p>
        <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>
    <!-- If Normal -->
    @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 px-4 py-2">{{ $item->upctype }}</td> -->
                <td class="border px-4 py-2">{{ $item->Created_Time }}</td>
                <td class="border px-4 py-2 countdown" style="color: {{$item->status}}" data-days="{{ $daysRemaining }}" data-time="{{ explode(' ', $item->daysRemaining)[2] }}" id="countdown-{{ $item->id }}">{{ $item->daysRemaining }}</td>
                <td class="border px-4 py-2">{{ $item->Level1 ?? '-' }}</td>
                <td class="border px-4 py-2">{{ $item->Level2 ?? '-' }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>

    <!-- Pagination links -->
    <div class="mt-4">
        {{ $moderationData->appends(request()->query())->links() }}
    </div>
</div>

<!-- JavaScript to reload page with selected items per page -->
<script>
    function updateItemsPerPage() {
        const itemsPerPage = document.getElementById('items_per_page').value;
        window.location.href = window.location.pathname + '?items_per_page=' + itemsPerPage;
    }
</script>


<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')}`;
            
            // Get the ID of the item
          //  let id = element.id.split('-')[1]; // Extracts the ID from the element's ID attribute

            // Make an AJAX request to your controller to pass the ID and update necessary data
       // updateEscalationData(id);
        });
    }

    // Function to make AJAX request to the backend
    function updateEscalationData() {
        fetch(`/update-escalation/`)
            .then(response => response.json())
            .then(data => {
                // Handle the response from the backend if needed
                console.log(data);
            })
            .catch(error => {
                console.error('Error updating escalation data:', error);
            });
    }
    setInterval(updateEscalationData, 5000); 
    setInterval(updateCountdown, 1000); // Update every second
});

    // 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')}`;



    //         });
    //     }
       


    //     setInterval(updateCountdown, 1000);
    // });
</script>
@endsection