{% extends "base_dashboard.html" %}
{% load static %}
{% block title %}
    Report a Bug
{% endblock title %}
{% block description %}
    Report a bug by providing the website URL, detailed description, and category. Upload a screenshot to help with the bug resolution process.
{% endblock description %}
{% block keywords %}
    Report a Bug, Bug Reporting, Website URL, Bug Description, Bug Category, Upload Screenshot
{% endblock keywords %}
{% block og_title %}
    Report a Bug - Help Improve Software Quality
{% endblock og_title %}
{% block og_description %}
    Report a bug by providing the necessary details such as website URL, description, and category. Upload a screenshot to aid in the bug resolution process.
{% endblock og_description %}
{% load custom_tags %}
{% load gravatar %}
{% load socialaccount %}
{% load humanize %}
{% providers_media_js %}
<section>
    {% include "includes/user_sidenav.html" %}
</section>
{% endblock style %}
{% block content %}
    <script src="{% static "js/jquery.validate.js" %}"></script>
    <script src="{% static 'js/activity.js' %}"></script>
    {% block content %}
        <form action="{% url 'submit_bug' hunt.pk %}"
              method="post"
              enctype="multipart/form-data"
              class="bg-white p-6 rounded-lg shadow-md">
            {% csrf_token %}
            <div class="text-center mb-6">
                <h1 class="text-2xl font-bold">Report a Bug</h1>
                <hr class="my-4">
            </div>
            <section>
                {% include "includes/user_sidenav.html" %}
            </section>
            <div class="space-y-4">
                <!-- URL Input -->
                <div class="form-group{% if form.url.errors %} has-error{% endif %}">
                    <div class="flex items-center">
                        <span class="bg-gray-200 p-3 rounded-l-lg">
                            <i class="fa fa-external-link" aria-hidden="true"></i>
                        </span>
                        <input class="flex-1 p-3 border border-gray-300 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                               type="url"
                               placeholder="https://testsite.com/bug-found"
                               name="url"
                               value="{{ request.GET.url|default:form.url.value|default:'' }}">
                        <button class="ml-2 bg-blue-500 text-white p-3 rounded-lg hover:bg-blue-600 transition duration-200">
                            Check for Duplicates
                        </button>
                    </div>
                    {% if form.url.errors %}<span class="text-red-500 text-sm">{{ form.url.errors }}</span>{% endif %}
                </div>
                <!-- Description Textarea -->
                <div class="form-group{% if form.description.errors %} has-error{% endif %}">
                    <div class="flex items-center">
                        <span class="bg-gray-200 p-3 rounded-l-lg">
                            <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                        </span>
                        <textarea class="flex-1 p-3 border border-gray-300 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                  name="description"
                                  rows="3"
                                  placeholder="Describe bug issue">{{ form.description.value|default:'' }}</textarea>
                    </div>
                    {% if form.description.errors %}<span class="text-red-500 text-sm">{{ form.description.errors }}</span>{% endif %}
                </div>
                <!-- Bug Type Dropdown -->
                <div class="flex items-center">
                    <span class="bg-gray-200 p-3 rounded-l-lg">
                        <i class="fa fa-list" aria-hidden="true"></i>
                    </span>
                    <select class="flex-1 p-3 border border-gray-300 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                            name="label"
                            required>
                        <option value="0" selected>General</option>
                        <option value="1">Number error</option>
                        <option value="2">Functional</option>
                        <option value="3">Performance</option>
                        <option value="4">Security</option>
                        <option value="5">Typo</option>
                        <option value="6">Design</option>
                    </select>
                </div>
                <!-- Screenshot Upload -->
                <div class="form-group{% if form.screenshot.errors %} has-error{% endif %}">
                    {% if request.GET.hash %}
                        <img src="{{ MEDIA_URL }}uploads/{{ request.GET.hash }}.png"
                             class="w-full h-auto rounded-lg mb-4"
                             alt="screenshot"
                             width="1200"
                             height="630">
                        <input type="hidden" name="screenshot-hash" value="{{ request.GET.hash }}">
                    {% else %}
                        <div class="flex items-center">
                            <input type="file" class="hidden" id="screenshot" name="screenshot" />
                            <label for="screenshot"
                                   class="bg-blue-500 text-white p-3 rounded-lg hover:bg-blue-600 transition duration-200 cursor-pointer">
                                <i class="fa fa-upload" aria-hidden="true"></i> Upload Screenshot
                            </label>
                        </div>
                        {% if form.screenshot.errors %}<span class="text-red-500 text-sm">{{ form.screenshot.errors }}</span>{% endif %}
                    {% endif %}
                </div>
                <!-- Submit Button -->
                <button type="submit"
                        class="w-full bg-green-500 text-white p-3 rounded-lg hover:bg-green-600 transition duration-200">
                    Report Bug <i class="fa fa-trophy" aria-hidden="true">+3</i>
                </button>
            </div>
        </form>
        <!-- Report Summary Table -->
        {% if issue_list %}
            <div class="mt-8 overflow-x-auto">
                <table class="w-full border-collapse border border-gray-300">
                    <caption class="text-xl font-bold mb-4">Report Summary</caption>
                    <thead>
                        <tr class="bg-gray-100">
                            <th class="p-3 border border-gray-300">ID</th>
                            <th class="p-3 border border-gray-300">URL</th>
                            <th class="p-3 border border-gray-300">Description</th>
                            <th class="p-3 border border-gray-300">Type</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for issue in issue_list %}
                            <tr class="bg-white even:bg-gray-50">
                                <td class="p-3 border border-gray-300 text-center" data-label="ID">{{ forloop.counter }}</td>
                                <td class="p-3 border border-gray-300" data-label="URL">{{ issue.url }}</td>
                                <td class="p-3 border border-gray-300" data-label="Description">{{ issue.description }}</td>
                                <td class="p-3 border border-gray-300" data-label="Type">{{ issue.get_label_display }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    {% endblock content %}
    <script type="text/javascript">
  function sanitizeInput(input) {
    var div = document.createElement('div');
    div.appendChild(document.createTextNode(input));
    return div.innerHTML;
  }
  $(function () {
    $('button[name="test_files"]').on('click', function () {
      $(this).parent().find('input[type=file]').click();
    });
    $('input[name="screenshot"]').on('change', function () {
      var file = $(this).val().replace('C:\\fakepath\\', '');
      file = sanitizeInput(file);
      $(this).parent().find('.badge').html(file);
    });
    $(".duplicates").click(function () {
      var uri = $("input[name='url']").val();
      $.ajax({
        type: "POST",
        data: {
          dom_url: uri
        },
        url: "/domain_check/",
        dataType: 'json',
        success: function (response) {
          var trint = response;
          if (trint.number == 3) {
            $('.message').html("<br>Sweet! We haven't got any bug from this domain till now");
          } else if (trint.number == 2) {
            var link = "{% env 'FQDN' %}/domain/" + trint.domain;
            $('.message').html(
              "<br>Multiple bugs already exist on this domain, ensure you are not submitting a duplicate bug by going here:<br> " +
              link);
          } else if (trint.number == 1) {
            var link = "{% env 'FQDN' %}/issue/" + trint.id;
            $('.message').html(
              "<br><div class='row'>A bug with same URL already exists <br>Description: " + trint
              .description + "<br>Created on: " + trint.date + "/" + trint.month + "/" + trint.year +
              "<br>Ensure you are not submitting a duplicate bug by checking here</div>: " + link);
          }
        },
        error: function (response) {
          $('.message').text('Something went wrong!');
        },
      });
    });
  });
    </script>
{% endblock body %}