{% extends "organization/organization_dashboard_base.html" %}
{% load static %}
{% load custom_tags %}
{% block title %}
    Organization Analytics | {% env 'PROJECT_NAME' %}
{% endblock title %}
{% block body %}
    {% block edit_link %}
        <div class="bottom-right">
            <a href="https://github.com/OWASP-BLT/BLT/blob/main/website/templates/organization/organization_analytics.html">
                <i class="fab fa-github"></i>
            </a>
            <a href="https://www.figma.com/file/s0xuxeU6O2guoWEfA9OElZ/Design?node-id=3%3A76&t=pqxWpF3hcYxjEDrs-1">
                <i class="fab fa-figma"></i>
            </a>
        </div>
    {% endblock edit_link %}
    <div class="bg-[#F3F5F7] pb-10">
        <div class="w-full mt-5">
            <p class="text-red-700 font-satoshi font-bold text-[35px] px-8">Dashboard</p>
        </div>
        <div class="flex flex-col lg:flex-row gap-5 justify-center lg:justify-between w-full gap-y-4 px-8 mt-4 items-center">
            <div class="flex justify-center items-center bg-white w-[340px] h-[172px] rounded-xl hover:scale-110 transition-all">
                <div class="flex justify-evenly items-center w-[100%] h-[70%]">
                    <div class="flex justify-center items-center w-[90px] h-[90px] bg-red-200 rounded-[50px]">
                        <i class="fa-solid fa-bug fa-2x text-black"></i>
                    </div>
                    <div>
                        <a href="{% url 'organization_manage_bugs' organization %}">
                            <p class="text-black text-3xl font-bold">{{ total_info.total_organization_bugs }}</p>
                            <p class="text-black text-md font-extralight">Total Bugs</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap justify-center items-center bg-white w-[340px] h-[172px] rounded-xl hover:scale-110 transition-all">
                <div class="flex justify-evenly items-center w-[100%] h-[70%]">
                    <div class="flex justify-center items-center w-[90px] h-[90px] bg-red-200 rounded-[50px]">
                        <i class="fa-sharp fa-solid fa-flag fa-2x text-black"></i>
                    </div>
                    <div>
                        <a href="{% url 'organization_manage_bughunts' organization %}">
                            <p class="text-black text-3xl font-bold">{{ total_info.total_bug_hunts }}</p>
                            <p class="text-black text-md font-extralight">Bug Bounties</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap justify-center items-center bg-white w-[340px] h-[172px] rounded-xl hover:scale-110 transition-all">
                <div class="flex justify-evenly items-center w-[100%] h-[70%]">
                    <div class="flex justify-center items-center w-[90px] h-[90px] bg-red-200 rounded-[50px]">
                        <i class="fa-sharp fa-solid fa-globe fa-2x text-black"></i>
                    </div>
                    <div>
                        <a href="{% url 'organization_manage_domains' organization %}">
                            <p class="text-black text-3xl font-bold">{{ total_info.total_domains }}</p>
                            <p class="text-black text-md font-extralight">Domains</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap justify-center items-center bg-white w-[340px] h-[172px] rounded-xl hover:scale-110 transition-all">
                <div class="flex justify-evenly items-center w-[100%] h-[70%]">
                    <div class="flex justify-center items-center w-[90px] h-[90px] bg-red-200 rounded-[50px]">
                        <i class="fa-sharp fa-solid fa-dollar-sign fa-2x text-black"></i>
                    </div>
                    <div>
                        <p class="text-black text-3xl font-bold">$ {{ total_info.total_money_distributed }}</p>
                        <p class="text-black text-md font-extralight">Money Distributed</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-col lg:flex-row gap-y-5 mt-4">
            <div class="flex flex-col ps-8 gap-5 ">
                <div class="flex flex-col lg:flex-row gap-5 bg-[#F3F5F7]">
                    <div class="bg-white p-5 rounded-xl lg:w-[56vh]">
                        <div class="header-container">
                            <h3 class="section-header">Bug Reported Type</h3>
                        </div>
                        <div class="pie-chart w-full h-[90%]">
                            <canvas id="bugTypePie" height="220px" width="660px"></canvas>
                        </div>
                    </div>
                    <div class="bg-white p-5 rounded-xl lg:w-[56vh]">
                        <div class="header-container">
                            <h3 class="section-header">Reported on Domains</h3>
                        </div>
                        <div class="pie-chart w-full h-[90%]">
                            <canvas id="domainPie" height="220px" width="660px"></canvas>
                        </div>
                    </div>
                </div>
                <div class="bg-white p-5 rounded-xl w-full lg:w-[115vh]">
                    <h3 class="section-header">Monthly Reports of {{ get_current_year_monthly_reported_bar_data.current_year }}</h3>
                    <div class="bar-chart">
                        <canvas id="myChart" height="220px" width="660px"></canvas>
                    </div>
                </div>
                <div class="p-5 bg-white rounded-xl flex lg:flex-row lg:w-[115vh]">
                    <div class="w-full">
                        <div class="header-container">
                            <h3 class="section-header">Total Reported</h3>
                            {% if bug_rate_increase_descrease_weekly.is_increasing %}
                                <svg class="up-arrow"
                                     width="42"
                                     height="42"
                                     viewBox="0 0 42 42"
                                     fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <rect width="42" height="42" rx="8" fill="#F6F7F9" />
                                    <path d="M27.0702 18.57L21.0002 12.5L14.9302 18.57" stroke="#7FB519" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M21 29.5V12.67" stroke="#7FB519" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            {% else %}
                                <svg width="42"
                                     height="42"
                                     viewBox="0 0 42 42"
                                     fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <rect width="42" height="42" rx="8" fill="#F6F7F9" />
                                    <path d="M27.0702 23.43L21.0002 29.5L14.9302 23.43" stroke="#FF4423" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M21 12.5V29.33" stroke="#FF4423" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            {% endif %}
                        </div>
                        <h1 class="price">
                            {{ bug_rate_increase_descrease_weekly.this_week_issue_count }}<span class="price-currency">Bugs</span>
                        </h1>
                        <p>
                            <span class="{% if bug_rate_increase_descrease_weekly.is_increasing %}percentage-increase{% else %}percentage-decrease{% endif %}">
                                {{ bug_rate_increase_descrease_weekly.percent_increase }}%
                            </span>
                            {% if bug_rate_increase_descrease_weekly.is_increasing %}
                                Increasing
                            {% else %}
                                Decreasing
                            {% endif %}
                            compared to last week
                        </p>
                    </div>
                    <div class="w-full">
                        <div class="header-container">
                            <h3 class="section-header">Accepted Bugs</h3>
                            {% if accepted_bug_rate_increase_descrease_weekly.is_increasing %}
                                <svg class="up-arrow"
                                     width="42"
                                     height="42"
                                     viewBox="0 0 42 42"
                                     fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <rect width="42" height="42" rx="8" fill="#F6F7F9" />
                                    <path d="M27.0702 18.57L21.0002 12.5L14.9302 18.57" stroke="#7FB519" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M21 29.5V12.67" stroke="#7FB519" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            {% else %}
                                <svg width="42"
                                     height="42"
                                     viewBox="0 0 42 42"
                                     fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <rect width="42" height="42" rx="8" fill="#F6F7F9" />
                                    <path d="M27.0702 23.43L21.0002 29.5L14.9302 23.43" stroke="#FF4423" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M21 12.5V29.33" stroke="#FF4423" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            {% endif %}
                        </div>
                        <h1 class="price">
                            {{ accepted_bug_rate_increase_descrease_weekly.this_week_issue_count }}<span class="price-currency">Accepted
                        Bugs</span>
                    </h1>
                    <p>
                        <span class="{% if accepted_bug_rate_increase_descrease_weekly.is_increasing %}percentage-increase{% else %}percentage-decrease{% endif %}">
                            {{ accepted_bug_rate_increase_descrease_weekly.percent_increase }}
                        </span>
                        {% if accepted_bug_rate_increase_descrease_weekly.is_increasing %}
                            Increasing
                        {% else %}
                            Decreasing
                        {% endif %}
                        compared to last week
                    </p>
                </div>
            </div>
        </div>
        <div class="mx-5 flex flex-col gap-5 lg:w-[60vh]">
            <div class="rounded-xl bg-white p-5">
                <div class="header-container">
                    <h3 class="section-header">Your balance</h3>
                    <svg width="24"
                         height="25"
                         viewBox="0 0 24 25"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg">
                        <path d="M5 10.4166C3.9 10.4166 3 11.3541 3 12.5C3 13.6458 3.9 14.5833 5 14.5833C6.1 14.5833 7 13.6458 7 12.5C7 11.3541 6.1 10.4166 5 10.4166Z" stroke="#1A202C" stroke-width="1.5" />
                        <path d="M19 10.4166C17.9 10.4166 17 11.3541 17 12.5C17 13.6458 17.9 14.5833 19 14.5833C20.1 14.5833 21 13.6458 21 12.5C21 11.3541 20.1 10.4166 19 10.4166Z" stroke="#1A202C" stroke-width="1.5" />
                        <path d="M12 10.4166C10.9 10.4166 10 11.3541 10 12.5C10 13.6458 10.9 14.5833 12 14.5833C13.1 14.5833 14 13.6458 14 12.5C14 11.3541 13.1 10.4166 12 10.4166Z" stroke="#1A202C" stroke-width="1.5" />
                    </svg>
                </div>
                <h1 class="price">
                    $120,435.00<span class="price-currency">(USD)</span>
                </h1>
                <p>From Jan 01, 2022 to Jan 31, 2022</p>
                <div class="button-box">
                    <button class="btn btn-purple">
                        <svg width="23"
                             height="23"
                             viewBox="0 0 23 23"
                             fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.104 13.1771C9.104 14.1066 9.82277 14.8541 10.7044 14.8541H12.5061C13.2727 14.8541 13.8957 14.2025 13.8957 13.3879C13.8957 12.5158 13.5123 12.1996 12.9469 11.9983L10.0623 10.9921C9.49692 10.7908 9.1136 10.4841 9.1136 9.60248C9.1136 8.79748 9.7365 8.13623 10.5032 8.13623H12.3048C13.1865 8.13623 13.9053 8.88373 13.9053 9.81331" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M11.5 7.1875V15.8125" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M21.0832 11.5C21.0832 16.79 16.7898 21.0833 11.4998 21.0833C6.20984 21.0833 1.9165 16.79 1.9165 11.5C1.9165 6.20996 6.20984 1.91663 11.4998 1.91663" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M16.2915 2.875V6.70833H20.1248" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M21.0832 1.91663L16.2915 6.70829" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <span>Top Up</span>
                    </button>
                    <button class="btn btn-white">
                        <svg width="23"
                             height="23"
                             viewBox="0 0 23 23"
                             fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.104 13.1771C9.104 14.1066 9.82277 14.8541 10.7044 14.8541H12.5061C13.2727 14.8541 13.8957 14.2025 13.8957 13.3879C13.8957 12.5158 13.5123 12.1996 12.9469 11.9983L10.0623 10.9921C9.49692 10.7908 9.1136 10.4841 9.1136 9.60248C9.1136 8.79748 9.7365 8.13623 10.5032 8.13623H12.3048C13.1865 8.13623 13.9053 8.88373 13.9053 9.81331" stroke="#1A202C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M11.5 7.1875V15.8125" stroke="#1A202C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M21.0832 11.5C21.0832 16.79 16.7898 21.0833 11.4998 21.0833C6.20984 21.0833 1.9165 16.79 1.9165 11.5C1.9165 6.20996 6.20984 1.91663 11.4998 1.91663" stroke="#1A202C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M21.0833 5.74996V1.91663H17.25" stroke="#1A202C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M16.2915 6.70829L21.0832 1.91663" stroke="#1A202C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <span>Transfer</span>
                    </button>
                </div>
            </div>
            <div class="box spending-box">
                <div class="header-container">
                    <h3 class="section-header">Spent On Bug Types</h3>
                    <svg width="24"
                         height="25"
                         viewBox="0 0 24 25"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg">
                        <path d="M5 10.4166C3.9 10.4166 3 11.3541 3 12.5C3 13.6458 3.9 14.5833 5 14.5833C6.1 14.5833 7 13.6458 7 12.5C7 11.3541 6.1 10.4166 5 10.4166Z" stroke="#1A202C" stroke-width="1.5" />
                        <path d="M19 10.4166C17.9 10.4166 17 11.3541 17 12.5C17 13.6458 17.9 14.5833 19 14.5833C20.1 14.5833 21 13.6458 21 12.5C21 11.3541 20.1 10.4166 19 10.4166Z" stroke="#1A202C" stroke-width="1.5" />
                        <path d="M12 10.4166C10.9 10.4166 10 11.3541 10 12.5C10 13.6458 10.9 14.5833 12 14.5833C13.1 14.5833 14 13.6458 14 12.5C14 11.3541 13.1 10.4166 12 10.4166Z" stroke="#1A202C" stroke-width="1.5" />
                    </svg>
                </div>
                <div class="pie-chart">
                    <canvas id="spentOnBugTypes" height="220px" width="220px"></canvas>
                </div>
                <div class="overall-spending">
                    <h4>Total Spent</h4>
                    <span>${{ total_info.total_money_distributed }}</span>
                </div>
                <div class="pie-chart__labels">
                    {% for bugtype, money_spent in spent_on_bugtypes.zipped_data %}
                        <div class="pie-chart__labels-item">
                            <div class="label">
                                <div class="label__color first"></div>
                                {{ bugtype }}
                            </div>
                            ${{ money_spent }}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock body %}
{% block js %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.min.js"
            integrity="sha384-+94tm/qgImqyuSRr1vU2PjQIoot8h3qdaFB/xTawzWLRkcCWPricrBj5Xr45hCP1"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="{% static 'organization/js/index.js' %}"></script>
    <script>
  // populate Chart (PIE): Bug Report  Type
  function populateBugTypePie() {
    var bugTypePie = document.getElementById("bugTypePie").getContext("2d");

    // Create the pie chart
    new Chart(bugTypePie, {
      type: "pie",
      data: {
        labels: JSON.parse(
          '{{ bug_report_type_piechart_data.bug_report_type_labels | safe }}'
        ),
        datasets: [
          {
            label: "Pie Chart",
            data: JSON.parse(
              '{{ bug_report_type_piechart_data.bug_report_type_data | safe }}'
            ),
            backgroundColor: [
              "rgb(255, 99, 132)",
              "rgb(54, 162, 235)",
              "rgb(255, 205, 86)",
            ],
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
      },
    });
  }

  function populateReportOnDomainsPie() {
    var domainPie = document.getElementById("domainPie").getContext("2d");

    // Create the pie chart
    new Chart(domainPie, {
      type: "pie",
      data: {
        labels: JSON.parse(
          '{{ reports_on_domain_piechart_data.bug_report_on_domains_labels | safe }}'
        ),
        datasets: [
          {
            label: "Pie Chart",
            data: JSON.parse(
              '{{ reports_on_domain_piechart_data.bug_report_on_domains_data | safe }}'
            ),
            backgroundColor: [
              "rgb(255, 99, 132)",
              "rgb(54, 162, 235)",
              "rgb(255, 205, 86)",
            ],
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
      },
    });
  }

  function populateMonthlyReportBarChart() {
    const ctx = document.getElementById("myChart");

    new Chart(ctx, {
      type: "bar",
      data: {
        labels: JSON.parse(
          '{{ get_current_year_monthly_reported_bar_data.bug_monthly_report_labels | safe }}'
        ),
        datasets: [
          {
            label: "Expense",
            data: JSON.parse(
              '{{ get_current_year_monthly_reported_bar_data.bug_monthly_report_data | safe }}'
            ),
            borderWidth: 1,
            borderRadius: 30,
            barThickness: 12,
            backgroundColor: ["rgba(114, 92, 255, 1)"],
            borderColor: ["rgba(114, 92, 255, 1)"],
            hoverBackgroundColor: ["rgba(28, 30, 35, 1)"],
            hoverBorderColor: ["rgba(28, 30, 35, 1)"],
          },
        ],
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true,
            ticks: {
              // Include a dollar sign in the ticks
              callback: function (value, index, ticks) {
                return value + " Bugs";
              },
              stepSize: JSON.parse(
                '{{ get_current_year_monthly_reported_bar_data.max_count | safe }}'
              ),
            },
          },
          x: {
            grid: {
              display: false,
            },
          },
        },
        plugins: {
          legend: {
            display: false,
            labels: {
              font: {
                size: 12,
                family: "'Plus Jakarta Sans', sans-serif",
                lineHeight: 18,
                weight: 600,
              },
            },
          },
        },
      },
    });
  }

  function populateSpentOnBugTypes() {
    const ctx2 = document.getElementById("spentOnBugTypes");

    new Chart(ctx2, {
      type: "doughnut",
      data: {
        labels: JSON.parse('{{ spent_on_bugtypes.labels | safe }}'),
        datasets: [
          {
            data: JSON.parse('{{ spent_on_bugtypes.data | safe }}'),
            borderRadius: 5,
            cutout: 80,
            backgroundColor: [
              "rgb(235, 124, 166)",
              "rgb(255, 172, 200)",
              "rgb(204, 111, 248)",
              "rgb(124, 92, 252)",
              "rgb(92, 175, 252)",
              "rgb(161, 169, 254)",
              "rgb(161, 169, 254)",
              "rgb(161, 169, 254)",
            ],
            hoverOffset: 4,
            spacing: 8,
          },
        ],
      },
      options: {
        plugins: {
          legend: {
            display: false,
          },
        },
      },
    });
  }

  populateSpentOnBugTypes();
  populateMonthlyReportBarChart();
  populateReportOnDomainsPie();
  populateBugTypePie();
    </script>
{% endblock js %}