{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>{% block title %}Dashboard{% endblock %}</title>
        <link href="{% static 'admincss/vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700,800,900" rel="stylesheet">
        <link href="{% static 'admincss/css/sb-admin-2.min.css' %}" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
        <link href="{% static 'admincss/img/logocwn/iconcwn.ico' %}" rel="icon">
        <link href="{%static 'admincss/img/logocwn/Logo_CWN.png'  %}" rel="apple-touch-icon">
        
        <!-- WhatsApp Floating Button -->
        
    </head>

    <body id="page-top">
        <button id="sidebarToggleTop" class="btn btn-link d-md-none custom-bg mr-3">
            <i class="fa fa-bars text-white"></i>
        </button>
        <div id="wrapper">
            <!-- Sidebar -->
            <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

                <!-- Brand -->
                <a class="sidebar-brand d-flex align-items-center justify-content-center">
                    <!--<div class="sidebar-brand-icon rotate-n-15">-->
                    <!--    <img src="{% static 'ProfileCompany/img/CWN_putih.png' %}" style="width:50px">-->
                    <!--</div>-->
                    <div class="sidebar-brand-text mx-3">CWN Admin</div>
                </a>

                <hr class="sidebar-divider my-0">

                <div class="sidebar-heading">CWN Dashboard</div>

                {% comment %} <!-- KPI -->
                {% if request.session.role != 'Sales Force' %}
                <li class="nav-item {% if request.resolver_match.url_name in 'tampilan_kpi_tl' or request.resolver_match.url_name == 'tampilan_kpi_agency' %}active{% endif %}">
                    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseKPI">
                        <i class="fas fa-bullseye"></i>
                        <span>KPI</span>
                    </a>
                    <div id="collapseKPI" class="collapse {% if request.resolver_match.url_name == 'tampilan_kpi_tl' or request.resolver_match.url_name == 'tampilan_kpi_agency' %}show{% endif %}">
                        <div class="bg-white py-2 collapse-inner rounded">
                            {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader'  %}
                            <a class="collapse-item {% if request.resolver_match.url_name == 'tampilan_kpi_agency' %}active{% endif %}" href="{% url 'tampilan_kpi_agency' %}">KPI Agency</a>
                            {% endif %}
                            {% if request.session.role != 'Sales Force' %}
                            <a class="collapse-item {% if request.resolver_match.url_name == 'tampilan_kpi_tl' %}active{% endif %}" href="{% url 'tampilan_kpi_tl' %}">KPI Team Leader</a>
                            {% endif %}
                        </div>
                    </div>
                </li>
                {% endif %} {% endcomment %}

                {% comment %} <!-- MoM -->
                {% if request.session.role != 'Sales Force'%}
                <li class="nav-item {% if request.resolver_match.url_name == 'data_mom' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'data_mom' %}">
                        <i class="fas fa-chart-line"></i>
                        <span>Month Over Month</span>
                    </a>
                </li>
                {% endif %} {% endcomment %}

                {% comment %} <!-- Rekap Data -->
                {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader' and request.session.role != 'Mitra'%}
                <li class="nav-item {% if request.resolver_match.url_name == 'rekap_data' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'rekap_data' %}">
                        <i class="fas fa-chart-bar"></i>
                        <span>Rekap Data PS</span>
                    </a>
                </li>
                {% endif %} {% endcomment %}

                <!-- Monitoring -->
                {% if request.session.role != 'Sales Force'%}
                <li class="nav-item {% if request.resolver_match.url_name == 'dailyagent' or request.resolver_match.url_name == 'get_psb_mom' %}active{% endif %}">
                    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseMonitoring">
                        <i class="fas fa-desktop"></i>
                        <span>Monitoring PS</span>
                    </a>
                    <div id="collapseMonitoring" class="collapse {% if request.resolver_match.url_name == 'dailyagent' or request.resolver_match.url_name == 'get_psb_mom' %}show{% endif %}">
                        <div class="bg-white py-2 collapse-inner rounded">
                            <a class="collapse-item {% if request.resolver_match.url_name == 'dailyagent' %}active{% endif %}" href="{% url 'dailyagent' %}">Agent</a>
                            <a class="collapse-item {% if request.resolver_match.url_name == 'get_psb_mom' %}active{% endif %}" href="{% url 'get_psb_mom' %}">MoM Agent</a>
                        </div>
                    </div>
                </li>
                {% endif %}

                <!-- Data PS -->
                <li class="nav-item {% if request.resolver_match.url_name == 'datadigital' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'datadigital' %}">
                        <i class="fas fa-chart-bar"></i>
                        <span>Data Digital</span>
                    </a>
                </li>

                <!-- Data PS -->
                <li class="nav-item {% if request.resolver_match.url_name == 'data_ps_arpu' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'data_ps_arpu' %}">
                        <i class="fas fa-file-alt"></i>
                        <span>Penjualan Paket</span>
                    </a>
                </li>

                <!-- Data PS -->
                <li class="nav-item {% if request.resolver_match.url_name == 'kpi' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'kpi' %}">
                        <i class="fas fa-bullseye"></i>
                        <span>Data KPI</span>
                    </a>
                </li>

                {% comment %} {% if request.session.role != 'Sales Force' and request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'list_sf_per_tl' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'list_sf_per_tl' %}">
                        <i class="fas fa-users"></i>
                        <span>Daftar Sales Force</span>
                    </a>
                </li>
                {% endif %} {% endcomment %}

                {% comment %} {% if request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'view_clockin' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'view_clockin' %}">
                        <i class="fas fa-user-check"></i>
                        <span>Clock In DJP</span>
                    </a>
                </li>
                {% endif %} {% endcomment %}

                {% comment %} {% if request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'viewodp' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'viewodp' %}">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>Daftar ODP</span>
                    </a>
                </li>
                {% endif %} {% endcomment %}

                {% comment %}
                <!-- {% if request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'viewodp' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'viewodp' %}">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>Visitasi ODP</span>
                    </a>
                </li>
                {% endif %} -->
                {% endcomment %}

                {% comment %} Manajemen data {% endcomment %}

                {% if request.session.role != 'Sales Force' and request.session.role != 'Mitra' %}
                <hr class="sidebar-divider">
                <div class="sidebar-heading">Manajemen Data</div>
                {% endif %}

                <!-- Manage Data Digital -->
                {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader' and request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'managedigital' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'managedigital' %}">
                        <i class="fas fa-edit"></i>
                        <span>Manage Data Digital</span>
                    </a>
                </li>
                {% endif %}

                <!-- Manage Data Digital -->
                {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader' and request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'manage_kpi' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'manage_kpi' %}">
                        <i class="fas fa-rocket"></i>
                        <span>Manage Data KPI</span>
                    </a>
                </li>
                {% endif %}

                <!-- Manage Data tl -->
                {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader' and request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'managetl' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'managetl' %}">
                        <i class="fas fa-user-tie"></i>
                        <span>Manage Team Leader</span>
                    </a>
                </li>
                {% endif %}

                <!-- Manage Data sales -->
                {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader' and request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'managesf' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'managesf' %}">
                        <i class="fas fa-users"></i>
                        <span>Manage Sales Force</span>
                    </a>
                </li>
                {% endif %}

                <!-- Manage Data paket -->
                {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader' and request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'managepaket' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'managepaket' %}">
                        <i class="fas fa-file-alt"></i>
                        <span>Manage Paket</span>
                    </a>
                </li>
                {% endif %}

                <!-- Manage Branch -->
                {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader' and request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'managebranch' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'managebranch' %}">
                        <i class="fas fa-store"></i>
                        <span>Manage Branch</span>
                    </a>
                </li>
                {% endif %}

                <!-- Manage Area -->
                {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader' and request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'managearea' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'managearea' %}">
                        <i class="fas fa-map"></i>
                        <span>Manage Area</span>
                    </a>
                </li>
                {% endif %}
                
                {% comment %} <!-- KPI CWN -->
                {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader' and request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'kpi_manage_tl' %}active{% endif %}">
                    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities">
                        <i class="fas fa-crosshairs"></i>
                        <span>KPI CWN</span>
                    </a>
                    <div id="collapseUtilities" class="collapse {% if request.resolver_match.url_name == 'kpi_manage_tl' or request.resolver_match.url_name == 'kpi_manage_agency' %}show{% endif %}">
                        <div class="bg-white py-2 collapse-inner rounded">
                            <a class="collapse-item {% if request.resolver_match.url_name == 'kpi_manage_agency' %}active{% endif %}" href="{% url 'kpi_manage_agency' %}">KPI Agency</a>
                            <a class="collapse-item {% if request.resolver_match.url_name == 'kpi_manage_tl' %}active{% endif %}" href="{% url 'kpi_manage_tl' %}">KPI Team Leader</a>
                        </div>
                    </div>
                </li>
                {% endif %} {% endcomment %}

                {% comment %} {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader' and request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'manage_team_leader' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'manage_team_leader' %}">
                        <i class="fas fa-user-tie"></i>
                        <span>Team Leader</span>
                    </a>
                </li>
                {% endif %} {% endcomment %}

                {% comment %} {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader' and request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'managemontargetsf' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'managemontargetsf' %}">
                        <i class="fas fa-crosshairs"></i>
                        <span>Monitoring Target Sales</span>
                    </a>
                </li>
                {% endif %} {% endcomment %}
                
                {% comment %} <!-- Sales Force -->
                {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader' and request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'input_sf' or request.resolver_match.url_name == 'updatesf_list' or request.resolver_match.url_name == 'deletesf' %}active{% endif %}">
                    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages">
                        <i class="fas fa-address-card"></i>
                        <span>Sales Force</span>
                    </a>
                    <div id="collapsePages" class="collapse {% if request.resolver_match.url_name == 'input_sf' or request.resolver_match.url_name == 'updatesf_list' or request.resolver_match.url_name == 'deletesf' %}show{% endif %}">
                        <div class="bg-white py-2 collapse-inner rounded">
                            <a class="collapse-item {% if request.resolver_match.url_name == 'input_sf' %}active{% endif %}" href="{% url 'input_sf' %}">Input Sales Force</a>
                            <a class="collapse-item {% if request.resolver_match.url_name == 'updatesf_list' %}active{% endif %}" href="{% url 'updatesf_list' %}">Update Sales Force</a>
                            <a class="collapse-item {% if request.resolver_match.url_name == 'deletesf' %}active{% endif %}" href="{% url 'deletesf' %}">Delete Sales Force</a>
                        </div>
                    </div>
                </li>
                {% endif %} {% endcomment %}

                {% comment %} <!-- ODP -->
                {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader' and request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'manage_odp'%}active{% endif %}">
                    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseODP">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>Manajemen ODP</span>
                    </a>
                    <div id="collapseODP" class="collapse {% if request.resolver_match.url_name == 'manage_odp' %}show{% endif %}">
                        <div class="bg-white py-2 collapse-inner rounded">
                            <a class="collapse-item {% if request.resolver_match.url_name == 'manage_odp' %}active{% endif %}" href="{% url 'manage_odp' %}">ODP</a>
                        </div>
                    </div>
                </li>
                {% endif %}  {% endcomment %}

                {% comment %} <!-- USULAN PT 2 PT 3 -->
                {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader' and request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'manage_pt'%}active{% endif %}">
                    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePT">
                        <i class="fas fa-paper-plane"></i>
                        <span>Usulan PT2 PT3</span>
                    </a>
                    <div id="collapsePT" class="collapse {% if request.resolver_match.url_name == 'manage_pt' %}show{% endif %}">
                        <div class="bg-white py-2 collapse-inner rounded">
                            <a class="collapse-item {% if request.resolver_match.url_name == 'manage_pt' %}active{% endif %}" href="{% url 'manage_pt' %}">Usulan PT2 PT3</a>
                        </div>
                    </div>
                </li>
                {% endif %} {% endcomment %}

                {% comment %} <!-- CLOCKIN DJP -->
                {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader' and request.session.role != 'Mitra' %}
                <li class="nav-item {% if request.resolver_match.url_name == 'manage_clockin_djp'%}active{% endif %}">
                    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseDJP">
                        <i class="fas fa-clipboard-list"></i>
                        <span>Clock In DJP</span>
                    </a>
                    <div id="collapseDJP" class="collapse {% if request.resolver_match.url_name == 'manage_clockin_djp' %}show{% endif %}">
                        <div class="bg-white py-2 collapse-inner rounded">
                            <a class="collapse-item {% if request.resolver_match.url_name == 'manage_clockin_djp' %}active{% endif %}" href="{% url 'manage_clockin_djp' %}">Clockin DJP</a>
                        </div>
                    </div>
                </li>
                {% endif %} {% endcomment %}
                

                <hr class="sidebar-divider">
                <div class="sidebar-heading">More</div>

                {% comment %} {% if request.session.role != 'Sales Force' and request.session.role != 'Team Leader' and request.session.role != 'Mitra' %}
                <li class="nav-item">
                    <a class="nav-link" href="https://alatcwn.streamlit.app/" target="_blank">
                        <i class="fas fa-tools"></i>
                        <span>Tools</span>
                    </a>
                </li>
                {% endif %} {% endcomment %}

                <li class="nav-item">
                    <a class="nav-link" href="{% url 'logout' %}">
                        <i class="fas fa-sign-out-alt"></i>
                        <span>LogOut</span>
                    </a>
                </li>

                <!-- <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="fas fa-table"></i>
                        <span>Tables</span>
                    </a>
                </li> -->

                <hr class="sidebar-divider d-none d-md-block">
                <div class="text-center d-none d-md-inline">
                    <button class="rounded-circle border-0" id="sidebarToggle"></button>
                </div>
            </ul>
            <!-- End Sidebar -->

            {% block content %}
            {% endblock %}
        </div>
        
        <style>
            .custom-bg {
                background-color: #be2222;
            }
            .table-responsive {
                overflow-x: auto;
            }
            .wa-float {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 999;
        }

        .wa-button {
            background-color: #25D366;
            color: white;
            padding: 12px 18px;
            border-radius: 30px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            font-size: 16px;
            display: flex;
            align-items: center;
            cursor: pointer;
            border: none;
        }

        .wa-popup {
            display: none;
            position: fixed;
            bottom: 70px;
            right: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            padding: 10px;
            z-index: 1000;
        }

        .wa-popup a {
            display: block;
            padding: 8px 10px;
            color: #25D366;
            text-decoration: none;
            font-weight: bold;
            border-bottom: 1px solid #ddd;
        }

        .wa-popup a:last-child {
            border-bottom: none;
        }

        .wa-popup a:hover {
            background-color: #f2f2f2;
        }
        </style>
        <div class="wa-float">
            <button class="wa-button" onclick="toggleWAPopup()">
                <i class="fab fa-whatsapp"></i>&nbsp; Hubungi Admin IT
            </button>
            <div class="wa-popup" id="waPopup">
                <a href="https://wa.me/6281210164780?text=Halo%20Admin%20IT%2C%0ASaya%20ingin%20melaporkan%20kendala%20sebagai%20berikut%3A%0A%0ANama%3A%20%5BTulis%20nama%20Anda%5D%0AKendala%3A%20%5BJelaskan%20kendala%20yang%20dialami%5D%0AFile%20terkait%20%28jika%20ada%29%3A%20%5BUpdate%20file%2Fattachment%5D%0A%0AMohon%20bantuannya%2C%20terima%20kasih." target="_blank">Hubungi Coco</a>
                <a href="https://wa.me/6281227744566?text=Halo%20Admin%20IT%2C%0ASaya%20ingin%20melaporkan%20kendala%20sebagai%20berikut%3A%0A%0ANama%3A%20%5BTulis%20nama%20Anda%5D%0AKendala%3A%20%5BJelaskan%20kendala%20yang%20dialami%5D%0AFile%20terkait%20%28jika%20ada%29%3A%20%5BUpdate%20file%2Fattachment%5D%0A%0AMohon%20bantuannya%2C%20terima%20kasih." target="_blank">Hubungi Dzaki</a>
            </div>
        </div>

        <!-- Scripts -->
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
        <script src="{% static 'admincss/vendor/jquery/jquery.min.js' %}"></script>
        <script src="{% static 'admincss/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
        <script src="{% static 'admincss/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
        <script src="{% static 'admincss/js/sb-admin-2.min.js' %}"></script>
        <script src="{% static 'admincss/vendor/chart.js/Chart.min.js' %}"></script>
        <script src="{% static 'admincss/js/demo/chart-area-demo.js' %}"></script>
        <script src="{% static 'admincss/js/demo/chart-pie-demo.js' %}"></script>
       <script>
            function toggleWAPopup() {
                var popup = document.getElementById("waPopup");
                popup.style.display = popup.style.display === "block" ? "none" : "block";
            }

            // Optional: close popup if click outside
            document.addEventListener("click", function(event) {
                var popup = document.getElementById("waPopup");
                var button = document.querySelector(".wa-button");
                if (!popup.contains(event.target) && !button.contains(event.target)) {
                    popup.style.display = "none";
                }
            });
        </script>
    </body>
</html>
