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

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

    <!-- Karyawan -->
    <div class="bg-white shadow-md rounded mb-6">
        <div class="flex justify-between items-center p-3 bg-red-800 rounded-t">
            <span class="text-white font-semibold">Karyawan</span>
            <a href="{% url 'export_user_sessions_tele_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" id="search-karyawan" name="search_karyawan" value="{{ request.GET.search_karyawan }}"
                   class="border p-2 rounded w-full mb-2" placeholder="Cari NIK / Nama...">

            <div class="overflow-x-auto">
                <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">Tele UID</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">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for tele, nik, nama, is_login 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">{{ tele }}</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 tele == "Belum Regist Bot" %}
                                    <span class="bg-red-500 text-white px-2 py-1 rounded text-sm">Belum Regist Bot</span>
                                {% else %}
                                    {% if is_login %}
                                        <span class="bg-green-500 text-white px-2 py-1 rounded text-sm">Online</span>
                                    {% else %}
                                        <span class="bg-red-500 text-white px-2 py-1 rounded text-sm">Offline</span>
                                    {% endif %}
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="flex justify-center mt-4 flex-wrap">
                {% if karyawan_page.has_previous %}
                    <a href="#" data-page="{{ karyawan_page.previous_page_number }}" class="px-3 py-1 border rounded-l bg-gray-200 hover:bg-gray-300">«</a>
                {% endif %}
                {% for num in karyawan_page.paginator.page_range %}
                    {% if num >= karyawan_page.number|add:'-2' and num <= karyawan_page.number|add:'2' %}
                        {% if karyawan_page.number == num %}
                            <span class="px-3 py-1 border bg-gray-800 text-white">{{ num }}</span>
                        {% else %}
                            <a href="#" data-page="{{ num }}" class="px-3 py-1 border bg-gray-200 hover:bg-gray-300">{{ num }}</a>
                        {% endif %}
                    {% endif %}
                {% endfor %}
                {% if karyawan_page.has_next %}
                    <a href="#" data-page="{{ karyawan_page.next_page_number }}" class="px-3 py-1 border rounded-r bg-gray-200 hover:bg-gray-300">»</a>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Team Leader -->
    <div class="bg-white shadow-md rounded mb-6">
        <div class="flex justify-between items-center p-3 bg-red-600 rounded-t">
            <span class="text-white font-semibold">Team Leader</span>
            <a href="{% url 'export_user_sessions_tele_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" id="search-tl" name="search_tl" value="{{ request.GET.search_tl }}"
                   class="border p-2 rounded w-full mb-2" placeholder="Cari TL ID / Nama...">

            <div class="overflow-x-auto">
                <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">Tele UID</th>
                            <th class="px-3 py-2 border">TL ID</th>
                            <th class="px-3 py-2 border">Nama</th>
                            <th class="px-3 py-2 border">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for tele, tl_id, tl_nama, is_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">{{ tele }}</td>
                            <td class="px-3 py-2 border">{{ tl_id }}</td>
                            <td class="px-3 py-2 border">{{ tl_nama }}</td>
                            <td class="px-3 py-2 border">
                                {% if tele == "Belum Regist Bot" %}
                                    <span class="bg-red-500 text-white px-2 py-1 rounded text-sm">Belum Regist Bot</span>
                                {% else %}
                                    {% if is_login %}
                                        <span class="bg-green-500 text-white px-2 py-1 rounded text-sm">Online</span>
                                    {% else %}
                                        <span class="bg-red-500 text-white px-2 py-1 rounded text-sm">Offline</span>
                                    {% endif %}
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Pagination sama seperti Karyawan -->
            <div class="flex justify-center mt-4 flex-wrap">
                {% if tl_page.has_previous %}
                    <a href="#" data-page="{{ tl_page.previous_page_number }}" class="px-3 py-1 border rounded-l bg-gray-200 hover:bg-gray-300">«</a>
                {% endif %}
                {% for num in tl_page.paginator.page_range %}
                    {% if num >= tl_page.number|add:'-2' and num <= tl_page.number|add:'2' %}
                        {% if tl_page.number == num %}
                            <span class="px-3 py-1 border bg-gray-800 text-white">{{ num }}</span>
                        {% else %}
                            <a href="#" data-page="{{ num }}" class="px-3 py-1 border bg-gray-200 hover:bg-gray-300">{{ num }}</a>
                        {% endif %}
                    {% endif %}
                {% endfor %}
                {% if tl_page.has_next %}
                    <a href="#" data-page="{{ tl_page.next_page_number }}" class="px-3 py-1 border rounded-r bg-gray-200 hover:bg-gray-300">»</a>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Sales Force -->
    <div class="bg-white shadow-md rounded mb-6">
        <div class="flex justify-between items-center p-3 bg-red-400 rounded-t">
            <span class="text-white font-semibold">Sales Force</span>
            <a href="{% url 'export_user_sessions_tele_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">
            <div class="flex flex-col md:flex-row gap-2 mb-2">
                <input type="text" id="search-sf" name="search_sf" value="{{ request.GET.search_sf }}"
                       class="border p-2 rounded w-full md:w-auto" placeholder="Cari SF ID / Nama...">

                <select id="filter-tl" name="filter_tl" class="border p-2 rounded w-full md:w-auto">
                    <option value="">-- Semua TL --</option>
                    {% for tl in tl_list %}
                        <option value="{{ tl.tl_id }}" {% if request.GET.filter_tl == tl.tl_id|stringformat:"s" %}selected{% endif %}>
                            {{ tl.user_name }}
                        </option>
                    {% endfor %}
                </select>
            </div>

            <div class="overflow-x-auto">
                <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">Tele UID</th>
                            <th class="px-3 py-2 border">SF ID</th>
                            <th class="px-3 py-2 border">Nama SF</th>
                            <th class="px-3 py-2 border">TL ID</th>
                            <th class="px-3 py-2 border">Nama TL</th>
                            <th class="px-3 py-2 border">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for tele, sf_id, sf_nama, is_login, tl_id, tl_nama 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">{{ tele }}</td>
                            <td class="px-3 py-2 border">{{ sf_id }}</td>
                            <td class="px-3 py-2 border">{{ sf_nama }}</td>
                            <td class="px-3 py-2 border">{{ tl_id }}</td>
                            <td class="px-3 py-2 border">{{ tl_nama }}</td>
                            <td class="px-3 py-2 border">
                                {% if tele == "Belum Regist Bot" %}
                                    <span class="bg-red-500 text-white px-2 py-1 rounded text-sm">Belum Regist Bot</span>
                                {% else %}
                                    {% if is_login %}
                                        <span class="bg-green-500 text-white px-2 py-1 rounded text-sm">Online</span>
                                    {% else %}
                                        <span class="bg-red-500 text-white px-2 py-1 rounded text-sm">Offline</span>
                                    {% endif %}
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Pagination SF -->
            <div class="flex justify-center mt-4 flex-wrap">
                {% if sf_page.has_previous %}
                    <a href="#" data-page="{{ sf_page.previous_page_number }}" class="px-3 py-1 border rounded-l bg-gray-200 hover:bg-gray-300">«</a>
                {% endif %}
                {% for num in sf_page.paginator.page_range %}
                    {% if num >= sf_page.number|add:'-2' and num <= sf_page.number|add:'2' %}
                        {% if sf_page.number == num %}
                            <span class="px-3 py-1 border bg-gray-800 text-white">{{ num }}</span>
                        {% else %}
                            <a href="#" data-page="{{ num }}" class="px-3 py-1 border bg-gray-200 hover:bg-gray-300">{{ num }}</a>
                        {% endif %}
                    {% endif %}
                {% endfor %}
                {% if sf_page.has_next %}
                    <a href="#" data-page="{{ sf_page.next_page_number }}" class="px-3 py-1 border rounded-r bg-gray-200 hover:bg-gray-300">»</a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Modal Tailwind -->
<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 id="close-modal" class="text-gray-500 hover:text-gray-700">&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 id="close-modal-2" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">Tutup</button>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(document).ready(function(){

    // Modal
    $(document).on("click", ".clickable-row", 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");
    });

    // AJAX SF search & filter
    function loadSfData(page=1){
        let search = $("#search-sf").val();
        let filterTl = $("#filter-tl").val();
        $.get(window.location.pathname, { search_sf: search, filter_tl: filterTl, page_sf: page }, function(data){
            let newTable = $(data).find("#sf-table-wrapper").html();
            $("#sf-table-wrapper").html(newTable);
        });
    }

    let searchSfTimeout;
    $(document).on("input", "#search-sf", function(){
        clearTimeout(searchSfTimeout);
        searchSfTimeout = setTimeout(loadSfData, 1500);
    });
    $(document).on("change", "#filter-tl", function(){ loadSfData(); });
    $(document).on("click", "#pagination-sf a", function(e){
        e.preventDefault();
        let page = $(this).data("page");
        if(page) loadSfData(page);
    });

});
</script>

{% endblock %}