{% extends "layout/ver_baru/base_admin.html" %}
{% block title %}Log Aktivitas User{% endblock %}

{% block content %}
<div class="container mx-auto px-4">
    <h2 class="text-center text-white p-3 rounded mb-4 mt-2 bg-gray-800">
        Log Aktivitas User
    </h2>

    <!-- Log Aktivitas -->
    <div class="bg-white shadow-md rounded mb-6">
        <div class="p-4 bg-gray-700 text-white rounded-t">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
                <input type="text" id="search-log" class="p-2 rounded w-full text-black" placeholder="Cari aksi / user agent...">
                <input type="date" id="start-date" class="p-2 rounded w-full text-black">
                <input type="date" id="end-date" class="p-2 rounded w-full text-black">
            </div>
        </div>

        <div class="p-4">
            {% if page_obj.object_list %}
            <div class="overflow-x-auto">
                <table class="min-w-full border border-gray-300" id="activity-table">
                    <thead class="bg-gray-800 text-white">
                        <tr>
                            <th class="px-3 py-2 border">No</th>
                            <th class="px-3 py-2 border">Timestamp</th>
                            <th class="px-3 py-2 border">User ID</th>
                            <th class="px-3 py-2 border">Action</th>
                            <th class="px-3 py-2 border">User Agent</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for log in page_obj %}
                        <tr class="cursor-pointer hover:bg-gray-100 clickable-row"
                            data-timestamp="{{ log.0 }}"
                            data-userid="{{ log.1 }}"
                            data-action="{{ log.2 }}"
                            data-ip="{{ log.3 }}"
                            data-useragent="{{ log.4 }}">
                            <td class="px-3 py-2 border">{{ forloop.counter0|add:page_obj.start_index }}</td>
                            <td class="px-3 py-2 border">{{ log.0 }}</td>
                            <td class="px-3 py-2 border">{{ log.1 }}</td>
                            <td class="px-3 py-2 border">{{ log.2 }}</td>
                            <td class="px-3 py-2 border">{{ log.4|truncatechars:40 }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="flex justify-center mt-4 flex-wrap">
                {% if page_obj.has_previous %}
                    <a href="?page={{ page_obj.previous_page_number }}&search={{ search }}&start_date={{ start_date }}&end_date={{ end_date }}" class="px-3 py-1 border rounded-l bg-gray-200 hover:bg-gray-300">&laquo;</a>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                        <span class="px-3 py-1 border bg-gray-800 text-white">{{ num }}</span>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <a href="?page={{ num }}&search={{ search }}&start_date={{ start_date }}&end_date={{ end_date }}" class="px-3 py-1 border bg-gray-200 hover:bg-gray-300">{{ num }}</a>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                    <a href="?page={{ page_obj.next_page_number }}&search={{ search }}&start_date={{ start_date }}&end_date={{ end_date }}" class="px-3 py-1 border rounded-r bg-gray-200 hover:bg-gray-300">&raquo;</a>
                {% endif %}
            </div>

            {% else %}
            <div class="bg-blue-100 text-blue-800 p-4 text-center rounded">
                Tidak ada aktivitas yang ditemukan.
            </div>
            {% endif %}
        </div>
    </div>

    <!-- User Tidak Akses -->
    <h3 class="text-center text-white p-3 rounded mb-4 mt-2 bg-gray-800">User Tidak Akses (14 Hari)</h3>

    <!-- Karyawan -->
    <div class="bg-white shadow-md rounded mb-6">
        <div class="flex justify-between items-center bg-yellow-400 p-3 rounded-t">
            <span>Karyawan Tidak Akses</span>
            <a href="{% url 'export_inactive_activity_excel' 'karyawan' %}" class="bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600">Download Excel</a>
        </div>
        <div class="p-4" id="karyawan-table-wrapper">
            <input type="text" name="search_karyawan" value="{{ request.GET.search_karyawan }}" 
                   class="border p-2 rounded w-full mb-2" placeholder="Cari nama / NIK..." id="search-karyawan">
            <div class="overflow-x-auto">
                {% if karyawan_page.object_list %}
                <table class="min-w-full border border-gray-300">
                    <thead class="bg-gray-800 text-white">
                        <tr>
                            <th class="px-3 py-2 border">No</th>
                            <th class="px-3 py-2 border">NIK</th>
                            <th class="px-3 py-2 border">Nama</th>
                            <th class="px-3 py-2 border">Terakhir Akses</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for nik, nama, last_access in karyawan_page %}
                        <tr class="hover:bg-gray-100">
                            <td class="px-3 py-2 border">{{ forloop.counter0|add:karyawan_page.start_index }}</td>
                            <td class="px-3 py-2 border">{{ nik }}</td>
                            <td class="px-3 py-2 border">{{ nama }}</td>
                            <td class="px-3 py-2 border">
                                {% if last_access %}
                                    {{ last_access|date:"d M Y H:i" }}
                                {% else %}
                                    <span class="text-red-500">Belum Pernah</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <!-- Pagination Karyawan -->
                <div class="flex justify-center mt-4 flex-wrap">
                    {% if karyawan_page.has_previous %}
                        <a href="?page_karyawan={{ karyawan_page.previous_page_number }}&search_karyawan={{ request.GET.search_karyawan }}"
                        class="pagination-link px-3 py-1 border rounded-l bg-gray-200 hover:bg-gray-300">&laquo;</a>
                    {% endif %}

                    {% for num in karyawan_page.paginator.page_range %}
                        {% if karyawan_page.number == num %}
                            <span class="px-3 py-1 border bg-gray-800 text-white">{{ num }}</span>
                        {% elif num > karyawan_page.number|add:'-3' and num < karyawan_page.number|add:'3' %}
                            <a href="?page_karyawan={{ num }}&search_karyawan={{ request.GET.search_karyawan }}"
                            class="pagination-link px-3 py-1 border bg-gray-200 hover:bg-gray-300">{{ num }}</a>
                        {% endif %}
                    {% endfor %}

                    {% if karyawan_page.has_next %}
                        <a href="?page_karyawan={{ karyawan_page.next_page_number }}&search_karyawan={{ request.GET.search_karyawan }}"
                        class="pagination-link px-3 py-1 border rounded-r bg-gray-200 hover:bg-gray-300">&raquo;</a>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Team Leader -->
    <div class="bg-white shadow-md rounded mb-6">
        <div class="flex justify-between items-center bg-yellow-400 p-3 rounded-t">
            <span>Team Leader Tidak Akses</span>
            <a href="{% url 'export_inactive_activity_excel' 'tl' %}" class="bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600">Download Excel</a>
        </div>
        <div class="p-4" id="tl-table-wrapper">
            <input type="text" name="search_tl" value="{{ request.GET.search_tl }}" 
                   class="border p-2 rounded w-full mb-2" placeholder="Cari nama / kode TL..." id="search-tl">
            <div class="overflow-x-auto">
                {% if tl_page.object_list %}
                <table class="min-w-full border border-gray-300">
                    <thead class="bg-gray-800 text-white">
                        <tr>
                            <th class="px-3 py-2 border">No</th>
                            <th class="px-3 py-2 border">Kode TL</th>
                            <th class="px-3 py-2 border">Nama</th>
                            <th class="px-3 py-2 border">Terakhir Akses</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for tl_id, user_name, last_login in tl_page %}
                        <tr class="hover:bg-gray-100">
                            <td class="px-3 py-2 border">{{ forloop.counter0|add:tl_page.start_index }}</td>
                            <td class="px-3 py-2 border">{{ tl_id }}</td>
                            <td class="px-3 py-2 border">{{ user_name }}</td>
                            <td class="px-3 py-2 border">
                                {% if last_login %}
                                    {{ last_login|date:"d M Y H:i" }}
                                {% else %}
                                    <span class="text-red-500">Belum Pernah</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <!-- Pagination TL -->
                <div class="flex justify-center mt-4 flex-wrap">
                    {% if tl_page.has_previous %}
                        <a href="?page_tl={{ tl_page.previous_page_number }}&search_tl={{ request.GET.search_tl }}" 
                        class="pagination-link px-3 py-1 border rounded-l bg-gray-200 hover:bg-gray-300">&laquo;</a>
                    {% endif %}

                    {% for num in tl_page.paginator.page_range %}
                        {% if tl_page.number == num %}
                            <span class="px-3 py-1 border bg-gray-800 text-white">{{ num }}</span>
                        {% elif num > tl_page.number|add:'-3' and num < tl_page.number|add:'3' %}
                            <a href="?page_tl={{ num }}&search_tl={{ request.GET.search_tl }}" 
                            class="pagination-link px-3 py-1 border bg-gray-200 hover:bg-gray-300">{{ num }}</a>
                        {% endif %}
                    {% endfor %}

                    {% if tl_page.has_next %}
                        <a href="?page_tl={{ tl_page.next_page_number }}&search_tl={{ request.GET.search_tl }}" 
                        class="pagination-link px-3 py-1 border rounded-r bg-gray-200 hover:bg-gray-300">&raquo;</a>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Sales Force -->
    <div class="bg-white shadow-md rounded mb-6">
        <div class="flex justify-between items-center bg-yellow-400 p-3 rounded-t">
            <span>Sales Force Tidak Akses</span>
            <a href="{% url 'export_inactive_activity_excel' 'sf' %}" class="bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600">Download Excel</a>
        </div>
        <div class="p-4" id="sf-table-wrapper">
            <input type="text" name="search_sf" value="{{ request.GET.search_sf }}" 
                   class="border p-2 rounded w-full mb-2" placeholder="Cari nama / kode TL..." id="search-sf">
            <div class="overflow-x-auto">
                {% if sf_page.object_list %}
                <table class="min-w-full border border-gray-300">
                    <thead class="bg-gray-800 text-white">
                        <tr>
                            <th class="px-3 py-2 border">No</th>
                            <th class="px-3 py-2 border">Kode SF</th>
                            <th class="px-3 py-2 border">Nama</th>
                            <th class="px-3 py-2 border">Team Leader</th>
                            <th class="px-3 py-2 border">Terakhir Akses</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for sf_id, user_name, _, tl_id__user_name, last_login in sf_page %}
                        <tr class="hover:bg-gray-100">
                            <td class="px-3 py-2 border">{{ forloop.counter0|add:sf_page.start_index }}</td>
                            <td class="px-3 py-2 border">{{ sf_id }}</td>
                            <td class="px-3 py-2 border">{{ user_name }}</td>
                            <td class="px-3 py-2 border">{{ tl_id__user_name }}</td>
                            <td class="px-3 py-2 border">
                                {% if last_login %}
                                    {{ last_login|date:"d M Y H:i" }}
                                {% else %}
                                    <span class="text-red-500">Belum Pernah</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <!-- Pagination SF -->
                <div class="flex justify-center mt-4 flex-wrap">
                    {% if sf_page.has_previous %}
                        <a href="?page_sf={{ sf_page.previous_page_number }}&search_sf={{ request.GET.search_sf }}" 
                        class="pagination-link px-3 py-1 border rounded-l bg-gray-200 hover:bg-gray-300">&laquo;</a>
                    {% endif %}

                    {% for num in sf_page.paginator.page_range %}
                        {% if sf_page.number == num %}
                            <span class="px-3 py-1 border bg-gray-800 text-white">{{ num }}</span>
                        {% elif num > sf_page.number|add:'-3' and num < sf_page.number|add:'3' %}
                            <a href="?page_sf={{ num }}&search_sf={{ request.GET.search_sf }}" 
                            class="pagination-link px-3 py-1 border bg-gray-200 hover:bg-gray-300">{{ num }}</a>
                        {% endif %}
                    {% endfor %}

                    {% if sf_page.has_next %}
                        <a href="?page_sf={{ sf_page.next_page_number }}&search_sf={{ request.GET.search_sf }}" 
                        class="pagination-link px-3 py-1 border rounded-r bg-gray-200 hover:bg-gray-300">&raquo;</a>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div id="logDetailModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-lg w-11/12 md:w-2/3 lg:w-1/2">
            <div class="flex justify-between items-center p-4 border-b">
                <h5 class="text-lg font-semibold">Detail Aktivitas</h5>
                <button class="text-gray-500 hover:text-gray-700" id="close-modal">&times;</button>
            </div>
            <div class="p-4">
                <p><strong>Timestamp:</strong> <span id="detail-timestamp"></span></p>
                <p><strong>User ID:</strong> <span id="detail-userid"></span></p>
                <p><strong>Action:</strong> <span id="detail-action"></span></p>
                <p><strong>IP Address:</strong> <span id="detail-ip"></span></p>
                <p><strong>User Agent:</strong> <span id="detail-useragent"></span></p>
            </div>
            <div class="flex justify-end p-4 border-t">
                <button class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600" id="close-modal-2">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- Tailwind + jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<script>
$(document).ready(function(){
    // Modal
    $(".clickable-row").click(function(){
        $("#detail-timestamp").text($(this).data("timestamp"));
        $("#detail-userid").text($(this).data("userid"));
        $("#detail-action").text($(this).data("action"));
        $("#detail-ip").text($(this).data("ip"));
        $("#detail-useragent").text($(this).data("useragent"));

        $("#logDetailModal").removeClass("hidden").addClass("flex");
    });

    $("#close-modal, #close-modal-2").click(function(){
        $("#logDetailModal").removeClass("flex").addClass("hidden");
    });

    // Filter Log
    function filterTable() {
        const searchValue = $("#search-log").val().toLowerCase();
        const startDate = $("#start-date").val();
        const endDate = $("#end-date").val();

        $("#activity-table tbody tr").each(function () {
            const timestamp = $(this).data("timestamp");
            const action = $(this).data("action").toLowerCase();
            const userAgent = $(this).data("useragent").toLowerCase();

            let visible = true;

            if (searchValue && !(action.includes(searchValue) || userAgent.includes(searchValue))) {
                visible = false;
            }

            if (startDate && timestamp < startDate) visible = false;
            if (endDate && timestamp > endDate) visible = false;

            $(this).toggle(visible);
        });
    }

    $("#search-log").on("input", filterTable);
    $("#start-date, #end-date").on("change", filterTable);
});
</script>

<script>
// 🔹 Debounce function
function debounce(func, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, args), delay);
    };
}

// 🔹 Load table via AJAX
function loadTable(wrapperId, url) {
    $.get(url, function (html) {
        let newContent = $(html).find("#" + wrapperId).html();
        $("#" + wrapperId).html(newContent);
    });
}

// 🔹 Helper untuk update query string
function updateUrlParam(url, key, value) {
    let baseUrl = url.split("?")[0];
    let params = new URLSearchParams(url.split("?")[1] || "");
    if (value) {
        params.set(key, value);
    } else {
        params.delete(key);
    }
    return baseUrl + "?" + params.toString();
}

// ===============================
// Karyawan
// ===============================
$(document).on("click", "#karyawan-table-wrapper .pagination-link", function (e) {
    e.preventDefault();
    loadTable("karyawan-table-wrapper", $(this).attr("href"));
});

$(document).on("input", "#search-karyawan", debounce(function () {
    let search = $(this).val();
    let url = updateUrlParam(window.location.href, "search_karyawan", search);
    url = updateUrlParam(url, "page_karyawan", 1);
    loadTable("karyawan-table-wrapper", url);
}, 2000)); // 2000 ms = 2 detik

// ===============================
// Team Leader
// ===============================
$(document).on("click", "#tl-table-wrapper .pagination-link", function (e) {
    e.preventDefault();
    loadTable("tl-table-wrapper", $(this).attr("href"));
});

$(document).on("input", "#search-tl", debounce(function () {
    let search = $(this).val();
    let url = updateUrlParam(window.location.href, "search_tl", search);
    url = updateUrlParam(url, "page_tl", 1); 
    loadTable("tl-table-wrapper", url);
}, 2000));

// ===============================
// Sales Force
// ===============================
$(document).on("click", "#sf-table-wrapper .pagination-link", function (e) {
    e.preventDefault();
    loadTable("sf-table-wrapper", $(this).attr("href"));
});

$(document).on("input", "#search-sf", debounce(function () {
    let search = $(this).val();
    let url = updateUrlParam(window.location.href, "search_sf", search);
    url = updateUrlParam(url, "page_sf", 1);
    loadTable("sf-table-wrapper", url);
}, 2000));
</script>

{% endblock %}