{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% load gravatar %}
{% load email_obfuscator %}
{% load socialaccount %}
{% providers_media_js %}
{% block head %}
    <link href="https://fonts.googleapis.com/css2?family=Poppins"
          rel="stylesheet">
{% endblock head %}
{% block title %}{{ domain.name }} - Domain Dashboard{% endblock %}
{% block description %}
    View detailed stats, activities, and the latest information about {{ domain.name }}. Track issues, reports, and see top hunters for this domain.
{% endblock %}
{% block keywords %}domain, dashboard, stats, activities, issues, bugs, top hunters{% endblock %}
{% block og_title %}{{ domain.name }} - Domain Dashboard{% endblock %}
{% block og_description %}
    Explore the latest stats, activities, and issues for {{ domain.name }}. Discover top hunters and more.
{% endblock %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="border lg:w-[1800px] w-full lg:mx-auto rounded-lg flex mt-[4vh] max-sm:mt-[5vh] max-sm:items-center justify-between max-sm:flex-col font-ubuntu">
        <!-- Left Section -->
        <div class="lg:w-[25%] w-full border-r border-gray-300/80 flex p-4 flex-col">
            <!-- Logo or Gravatar -->
            <div class="inline-block relative h-[400px] w-full rounded-lg">
                {% if domain.get_logo %}
                    <img src="{{ domain.get_logo }}"
                         class="object-cover w-full h-full rounded-lg"
                         alt="avatar"
                         width="200"
                         height="200">
                {% else %}
                    <img src="{% gravatar_url user.email 200 %}"
                         class="object-cover w-full h-full rounded-lg"
                         alt="avatar"
                         width="200"
                         height="200">
                {% endif %}
            </div>
            <!-- Recent Activity -->
            <div class="mt-4">
                <div class="font-semibold text-lg mb-3">Recent Activity</div>
                <ul class="flex gap-3 p-1 bg-blue-gray-50/60 rounded-xl">
                    <li class="flex-auto text-center">
                        <a class="flex items-center justify-center w-full px-4 py-2 text-red-500 border-2 border-red-500 hover:bg-red-600 hover:text-white rounded-lg transition duration-200"
                           data-tab-target=""
                           active=""
                           role="tab">
                            <span>Open [{{ opened_net.count }}]</span>
                        </a>
                    </li>
                    <li class="flex-auto text-center">
                        <a class="flex items-center justify-center w-full px-4 py-2 text-red-500 border-2 border-red-500 hover:bg-red-600 hover:text-white rounded-lg transition duration-200"
                           data-tab-target=""
                           role="tab">
                            <span>Closed [{{ closed_net.count }}]</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- Activity Content -->
            <div data-tab-content="" class="w-full my-5">
                <div class="block opacity-100" id="app" role="tabpanel">
                    <div class="space-y-4">
                        {% for activity in opened %}
                            {% include "includes/_new_activity.html" %}
                        {% endfor %}
                        <div class="flex items-center justify-center gap-4 mt-6">
                            {% if opened.has_previous %}
                                <a href="?open={{ opened.previous_page_number }}"
                                   class="px-4 py-2 text-white bg-red-500 rounded-lg hover:bg-red-600 transition duration-200">Previous</a>
                            {% endif %}
                            <span class="text-gray-700 font-medium">Page {{ opened.number }} of {{ opened.paginator.num_pages }}</span>
                            {% if opened.has_next %}
                                <a href="?open={{ opened.next_page_number }}"
                                   class="px-4 py-2 text-white bg-red-500 rounded-lg hover:bg-red-600 transition duration-200">Next</a>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="hidden opacity-0" id="message" role="tabpanel">
                    <div class="space-y-4">
                        {% if closed %}
                            {% for activity in closed %}
                                {% include "includes/_new_activity.html" %}
                            {% endfor %}
                        {% else %}
                            <div class="text-center py-8 text-gray-500">{% trans "No Activity Yet!" %}</div>
                        {% endif %}
                        <div class="flex items-center justify-center gap-4 mt-6">
                            {% if closed.has_previous %}
                                <a href="?close={{ closed.previous_page_number }}"
                                   class="px-4 py-2 text-white bg-red-500 rounded-lg hover:bg-red-600 transition duration-200">Previous</a>
                            {% endif %}
                            <span class="text-gray-700 font-medium">Page {{ closed.number }} of {{ closed.paginator.num_pages }}</span>
                            {% if closed.has_next %}
                                <a href="?close={{ closed.next_page_number }}"
                                   class="px-4 py-2 text-white bg-red-500 rounded-lg hover:bg-red-600 transition duration-200">Next</a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Right Section -->
        <div class="lg:w-[75%] w-full p-4">
            <div class="flex flex-col gap-5">
                <!-- Domain Header -->
                <div class="bg-white border-b border-gray-300 p-6">
                    <div class="flex flex-col gap-2">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-4">
                                <a href="{{ domain.url }}"
                                   class="text-2xl font-bold hover:text-[#e74c3c] transition duration-200"
                                   target="_blank">{{ name }}</a>
                                {% if request.user.is_superuser %}
                                    <div class="flex items-center gap-3">
                                        <a href="{% url 'admin:website_domain_change' domain.id %}"
                                           class="text-[#e74c3c] hover:text-[#c0392b] transition duration-200"
                                           title="Edit Domain">
                                            <i class="fas fa-edit text-lg"></i>
                                        </a>
                                        <a href="{% url 'admin:website_domain_delete' domain.id %}"
                                           class="text-[#e74c3c] hover:text-[#c0392b] transition duration-200"
                                           title="Delete Domain">
                                            <i class="fas fa-trash text-lg"></i>
                                        </a>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        {% if organization %}
                            <div class="text-sm text-gray-600">
                                <span class="font-medium">{{ organization.name }}</span>
                            </div>
                        {% endif %}
                        {% if domain.email %}
                            <div class="flex flex-col gap-1 text-sm">
                                <span class="text-[#e74c3c]">{{ domain.email|obfuscate_mailto }}</span>
                                {% if domain.email_event %}
                                    <div class="text-gray-600">Last email {{ domain.email_event|default:"" }} {{ domain.modified|timesince }} ago</div>
                                    <div class="text-gray-600">Clicks {{ domain.clicks|default:"0" }}</div>
                                {% endif %}
                            </div>
                        {% endif %}
                    </div>
                </div>
                <!-- Issue Stats -->
                <div class="flex flex-col gap-3">
                    <h1 class="text-xl font-semibold text-black/90">{% trans "Issue Stats" %}</h1>
                    <div class="w-full flex flex-wrap gap-3">
                        {% for bug_type, count in bug_types.items %}
                            <button class="bg-gray-100 hover:bg-red-400 hover:text-white transition duration-200 text-black/90 font-medium py-2 px-4 rounded-lg">
                                {{ bug_type.icon }} {% trans bug_type.name %} {{ count }}
                            </button>
                        {% endfor %}
                    </div>
                </div>
                <!-- Domain Stats -->
                <div class="flex flex-col gap-3">
                    <h1 class="text-xl font-semibold text-black/90">{% trans "Domain Stats" %}</h1>
                    <div class="w-full flex flex-wrap gap-3">
                        <button class="bg-gray-100 hover:bg-red-400 hover:text-white transition duration-200 text-black/90 font-medium py-2 px-4 rounded-lg">
                            🏆 {% trans "Bugs Reported" %} {{ total_bugs }}
                        </button>
                        <button class="bg-gray-100 hover:bg-red-400 hover:text-white transition duration-200 text-black/90 font-medium py-2 px-4 rounded-lg">
                            🐞 {% trans "Open Issues" %} {{ open_issues }}
                        </button>
                        <button class="bg-gray-100 hover:bg-red-400 hover:text-white transition duration-200 text-black/90 font-medium py-2 px-4 rounded-lg">
                            ⌨️ {% trans "Closed Issues" %} {{ closed_issues }}
                        </button>
                        <button class="bg-gray-100 hover:bg-red-400 hover:text-white transition duration-200 text-black/90 font-medium py-2 px-4 rounded-lg">
                            👀 {% trans "Views" %} {{ view_count }}
                        </button>
                    </div>
                </div>
                <!-- Trademark Results -->
                <div class="p-6 w-full border rounded-lg border-gray-300">
                    <div class="flex items-center justify-between mb-6">
                        <h2 class="text-2xl font-bold flex items-center gap-2">
                            <i class="fas fa-gavel text-[#e74c3c]"></i>
                            Trademark Results For {{ name }}
                        </h2>
                        <span class="px-4 py-2 rounded-full text-sm font-semibold {% if trademarks|length > 0 %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
                            {{ trademarks|length }} Matches Found
                        </span>
                    </div>
                    <div class="space-y-6 overflow-auto max-h-[600px] pr-2">
                        {% if trademarks|length > 0 %}
                            {% for trademark in trademarks %}
                                <div class="bg-gray-50 rounded-xl p-6 hover:shadow-md transition duration-200">
                                    <h3 class="text-xl font-semibold flex items-center gap-2 mb-4">
                                        <i class="fas fa-search text-[#e74c3c]"></i>
                                        {{ trademark.keyword }}
                                    </h3>
                                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
                                        <div class="flex items-center gap-2">
                                            <i class="fas fa-id-card text-[#e74c3c]"></i>
                                            <span class="font-medium">Reg No:</span> {{ trademark.registration_number | default:"N/A" }}
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <i class="fas fa-hashtag text-[#e74c3c]"></i>
                                            <span class="font-medium">Serial Number:</span> {{ trademark.serial_number }}
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <i class="fas fa-calendar-alt text-[#e74c3c]"></i>
                                            <span class="font-medium">Filing Date:</span> {{ trademark.filing_date | default:"N/A" }}
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <i class="fas fa-calendar-check text-[#e74c3c]"></i>
                                            <span class="font-medium">Reg Date:</span> {{ trademark.registration_date | default:"N/A" }}
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <i class="fas fa-history text-[#e74c3c]"></i>
                                            <span class="font-medium">Status Date:</span> {{ trademark.status_date | default:"N/A" }}
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <i class="fas fa-tag text-[#e74c3c]"></i>
                                            <span class="font-medium">Status:</span>
                                            <span class="px-3 py-1 rounded-full text-sm {% if 'Live' in trademark.status_label %}bg-green-100 text-green-800{% elif 'Dead' in trademark.status_label %}bg-red-100 text-red-800{% endif %}">
                                                {{ trademark.status_label }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="bg-white rounded-lg p-4 mb-4">
                                        <p class="flex items-start gap-2">
                                            <i class="fas fa-info-circle text-[#e74c3c] mt-1"></i>
                                            <span>
                                                <span class="font-medium">Description:</span>
                                                {{ trademark.description }}
                                            </span>
                                        </p>
                                    </div>
                                    {% if trademark.owners %}
                                        <div class="bg-white rounded-lg p-4">
                                            <h4 class="font-semibold flex items-center gap-2 mb-2">
                                                <i class="fas fa-users text-[#e74c3c]"></i>
                                                Owners:
                                            </h4>
                                            <ul class="space-y-2">
                                                {% for owner in trademark.owners.all %}
                                                    <li class="flex items-center gap-2">
                                                        <i class="fas fa-user-circle text-gray-400"></i>
                                                        {% if owner.name %}{{ owner.name }}{% endif %}
                                                        {% if owner.city %}, {{ owner.city }}{% endif %}
                                                        {% if owner.state %}, {{ owner.state }}{% endif %}
                                                        {% if owner.country %}, {{ owner.country }}{% endif %}
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        {% else %}
                            <div class="text-center py-12">
                                <i class="fas fa-search text-[#e74c3c] text-5xl mb-4"></i>
                                <p class="text-gray-600 mb-6">No trademark results found for {{ name }}</p>
                                <a href="{% url 'trademark_search' %}"
                                   class="inline-flex items-center px-6 py-3 bg-[#e74c3c] text-white hover:bg-red-600 hover:text-white rounded-lg hover:bg-opacity-90 transition-colors">
                                    <i class="fas fa-search mr-2"></i>
                                    Search Trademarks
                                </a>
                            </div>
                        {% endif %}
                        {% if trademarks|length > 0 %}
                            <div class="bg-green-50 rounded-lg p-4 mt-6">
                                <p class="text-green-700 flex items-center gap-2">
                                    <i class="fas fa-check-circle"></i>
                                    Found {{ trademarks|length }} trademark
                                    {% if trademarks|length != 1 %}s{% endif %}
                                    for {{ name }}
                                </p>
                            </div>
                        {% endif %}
                    </div>
                </div>
                <!-- Top Hunters -->
                <div class="flex flex-col gap-4">
                    <h1 class="text-xl font-semibold text-black/90">{% trans "Top Hunters" %}</h1>
                    <div class="top-findings w-[20vw] max-sm:w-full max-h-[40vh]">
                        <ul class="select-none w-full flex flex-col gap-4">
                            {% if leaderboard %}
                                {% for leader in leaderboard %}
                                    <li class="flex gap-3 justify-between items-center border border-blue-500 bg-blue-100/20 py-2 px-4 rounded-lg">
                                        <div class="flex items-center gap-2 w-full">
                                            <a href="{% url 'profile' slug=leader.username %}">
                                                {% if leader.socialaccount_set.all.0.get_avatar_url %}
                                                    <img src="{{ leader.socialaccount_set.all.0.get_avatar_url }}"
                                                         height="20"
                                                         width="20"
                                                         class="size-11 rounded-full"
                                                         alt="{{ leader.username }}"
                                                         onerror="this.onerror=null; this.src='{% static 'images/dummy-user.png' %}';">
                                                {% else %}
                                                    <img src="{% gravatar_url leader.email 50 %}"
                                                         height="20"
                                                         width="20"
                                                         class="size-11 rounded-full"
                                                         alt="{{ leader.username }}"
                                                         onerror="this.onerror=null; this.src='{% static 'images/dummy-user.png' %}';">
                                                {% endif %}
                                            </a>
                                            <a class="hover:text-red-600"
                                               href="{% url 'profile' slug=leader.username %}">{{ leader.username }}</a>
                                        </div>
                                        <div class="px-3 py-2 bg-blue-400 text-white rounded-lg flex items-center gap-2"
                                             name="{{ user }}">
                                            <p>{{ leader.total }}</p>
                                            <p>Bug{{ leader.total|pluralize }}</p>
                                        </div>
                                    </li>
                                {% endfor %}
                            {% else %}
                                <li>
                                    <div class="text-start text-red-500">{% trans "Nothing Found" %}</div>
                                </li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        var all_months = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
        var months = [],
        data = [];
        var all_data = new Array(12).fill(0);
        var current_month = {{ current_month }};
        {% for i in domain_graph %}all_data['{{i.month}}' - 1] = {{ i.c }};{% endfor %}

        if (current_month - 6 < 0) {
            months = all_months.slice(current_month - 6);
            months = months.concat(all_months.slice(0, current_month));
            data = all_data.slice(current_month - 6);
            data = data.concat(all_data.slice(0, current_month));
        } else {
            months = all_months.slice(current_month - 6, current_month);
            data = all_data.slice(current_month - 6, current_month);
        }
        var options = {
            series: [{
            name: 'Monthly Activity',
            data: data
          }],
            chart: {
            height: 350,
            type: 'area'
          },
          dataLabels: {
            enabled: false
          },
          stroke: {
            curve: 'smooth'
          },
          xaxis: {
            type: 'String',
            categories: months
          },
          };
  
          var chart = new ApexCharts(document.querySelector("#chart"), options);
          chart.render();
    </script>
    <script src="https://unpkg.com/@material-tailwind/html@latest/scripts/tabs.js"></script>
{% endblock content %}