{% extends 'adminpanel/base/base.html' %}
{% block title %} Dashboard {% endblock %}
{% block stylesheets %}
{% endblock stylesheets %}
{% block content %}




<!-- Page Loader -->

<!-- Overlay For Sidebars -->

<div id="main-content">
    
   

    <div class="container-fluid">


       

<br>
       


        



        

        
</div>

</div>




{% block javascripts %}
<!-- <script>
    document.addEventListener("DOMContentLoaded", function () {
        const dateRangeSelector = document.getElementById("dataViewSelection");
        const customFields = document.getElementById("customFields");
    
        dateRangeSelector.addEventListener("change", function () {
            if (dateRangeSelector.value === "custom") {
                customFields.style.display = "block";
            } else {
                customFields.style.display = "none";
            }
        });
    });
    </script> -->
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const dateRangeSelector = document.getElementById("dataViewSelection");
            const customFields = document.getElementById("customFields");
    
            // Function to toggle visibility of custom date fields
            function toggleCustomFields() {
                if (dateRangeSelector.value === "custom") {
                    customFields.style.display = "block";
                } else {
                    customFields.style.display = "none";
                }
            }
    
            // Initial call to toggle custom fields visibility
            toggleCustomFields();
    
            // Event listener for dropdown change
            dateRangeSelector.addEventListener("change", toggleCustomFields);
    
            // Populate date fields with selected dates from URL parameters
            const urlParams = new URLSearchParams(window.location.search);
            const startDate = urlParams.get("startDate");
            const endDate = urlParams.get("endDate");
            document.getElementById("startDate").value = startDate || "";
            document.getElementById("endDate").value = endDate || "";
        });
    </script>

<script>
    const dateRangeSelector = document.getElementById("dataViewSelection");
    const customDateRange = document.getElementById("customFields");
    const startDateInput = document.getElementById("startDate");
    const endDateInput = document.getElementById("endDate");
    const dateRangeError = document.getElementById("dateRangeError");
    
    dateRangeSelector.addEventListener("change", function () {
        if (dateRangeSelector.value === "Custom") {
            customDateRange.style.display = "block";
        } else {
            customDateRange.style.display = "none";
            dateRangeError.textContent = "";
        }
    });
    
    startDateInput.addEventListener("change", validateDateRange);
    endDateInput.addEventListener("change", validateDateRange);
    
    function validateDateRange() {
        const startDate = new Date(startDateInput.value);
        const endDate = new Date(endDateInput.value);
    
        if (startDate > endDate) {
            dateRangeError.textContent = "Invalid Date";
            endDateInput.value = ""; // Clear the "To" date input
        } else {
            dateRangeError.textContent = "";
        }
    }
    </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<script>
    var xValues = ["Interested", "Not Interested", "Close Deal", "Power Off", "Detail Shared", "Schedule Visit", "Not Responding", "Call Again"];
    var yValues = [
        {{ interested_count }},
        {{ not_interested_count }},
        {{ close_deal_count }},
        {{ power_off_count }},
        {{ detail_shared_count }},
        {{ schedule_time_count }},
        {{ not_responding_count }},
        {{ call_again_count }}
    ];
    var barColors = [
        "#b91d47", // Red
        "#00aba9", // Teal
        "#2b5797", // Blue
        "#e8c3b9", // Pink
        "#1e7145", // Green
        "#f4c542", // Yellow
        "#ff7f50", // Coral
        "#8a2be2"  // BlueViolet
    ];
    
    new Chart("myChart", {
      type: "pie",
      data: {
        labels: xValues,
        datasets: [{
          backgroundColor: barColors,
          data: yValues
        }]
      },
      options: {
        title: {
          display: true,
          text: "Lead Responses"
        }
      }
    });
    </script>
    

    <script>
        // Use Django template variables to set the agent names and lead counts dynamically
        var xValues = {{ agent_usernames|safe }};  // Safe filter ensures the data is passed as a valid JavaScript array
        var yValues = {{ assigned_leads_counts|safe }};
    
        // Generate distinct bar colors for each agent (you can customize these as needed)
        var barColors = xValues.map(() => {
            // Random color generator for each bar
            return '#' + Math.floor(Math.random()*16777215).toString(16);
        });
    
        // Create the bar chart
        new Chart("myChartBar", {
            type: "bar",
            data: {
                labels: xValues,
                datasets: [{
                    backgroundColor: barColors,
                    data: yValues
                }]
            },
            options: {
                legend: { display: false },
                title: {
                    display: true,
                    text: "Assigned Leads to Agents"
                }
            }
        });
    </script>

{% endblock javascripts %}
{% endblock content %}