{% extends "base_dashboard.html" %}
{% load static %}
{% load custom_tags %}
{% load gravatar %}
{% load socialaccount %}
{% load humanize %}
{% providers_media_js %}
{% block style %}
    <style>
  .duplicates {
    border-radius: 0px;
  }

  table {
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
  }

  table caption {
    font-size: 1.5em;
    margin: .5em 0 .75em;
    text-align: center;
  }

  table tr {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: .35em;
  }

  table th,
  table td {
    padding: .625em;
    text-align: center;
  }

  table th {
    font-size: .85em;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  @media screen and (max-width: 600px) {
    table {
      border: 0;
    }

    table caption {
      font-size: 1.3em;
    }

    table thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }

    table tr {
      border-bottom: 3px solid #ddd;
      display: block;
      margin-bottom: .625em;
    }

    table td {
      border-bottom: 1px solid #ddd;
      display: block;
      font-size: .8em;
      text-align: right;
    }

    table td::before {
      /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
    }

    table td:last-child {
      border-bottom: 0;
    }
  }
    </style>
    <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>
    <form action="{% url 'submit_bug' hunt.pk %}"
          method="post"
          enctype="multipart/form-data">
        {% csrf_token %}
        <div class="row main">
            <div class="panel-heading">
                <div class="panel-title text-center">
                    <h1 class="title">Report a bug</h1>
                    <hr />
                </div>
            </div>
            <section>
                {% include "includes/user_sidenav.html" %}
            </section>
            <div class="main-issue-form main-center">
                <form class="form-horizontal" method="post" action="#">
                    <div class="form-group{% if form.url.errors %} has-error{% endif %}">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-external-link" aria-hidden="true"></i></span>
                            {% if request.GET.url %}
                                <input class="form-control required"
                                       type="url"
                                       data-intro="Enter the website's complete url where you found the bug."
                                       data-step="1"
                                       placeholder="https://testsite.com/bug-found"
                                       name="url"
                                       value="{{ request.GET.url }}">
                            {% else %}
                                <input class="form-control required"
                                       data-intro="Enter the website's complete url where you found the bug."
                                       data-step="1"
                                       placeholder="https://testsite.com/bug-found"
                                       name="url"
                                       value="{{ form.url.value|default:"" }}">
                            {% endif %}
                            <a class="btn btn-info form-control duplicates">Check for Duplicates</a>
                        </div>
                        <span class="message"></span>
                        <span class="help-block">{{ form.url.errors }}</span>
                    </div>
                    <div class="form-group{% if form.description.errors %} has-error{% endif %}">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></span>
                            <textarea data-required="true"
                                      name="description"
                                      id="description"
                                      data-intro="Describe the nature of bug."
                                      data-step="2"
                                      class="form-control required"
                                      rows="3"
                                      placeholder="Describe bug issue">{{ form.description.value|default:"" }}</textarea>
                        </div>
                        <span class="help-block">{{ form.description.errors }}</span>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-list" aria-hidden="true"></i>
                        </span>
                        <select required
                                data-intro="Categorize the bug."
                                data-step="3"
                                name="label"
                                class="form-control">
                            <option value="0" selected="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>
                    <div class="form-group{% if form.screenshot.errors %} has-error{% endif %}">
                        {% if request.GET.hash %}
                        </br>
                        <img src="{{ MEDIA_URL }}uploads/{{ request.GET.hash }}.png"
                             class="img-responsive img-thumbnail screenshot-hash"
                             width="100%"
                             height="100%"
                             alt="screenshot">
                        <input type="hidden"
                               class="required"
                               name="screenshot-hash"
                               value="{{ request.GET.hash }}">
                    {% else %}
                        <br>
                        <span>
                            <input type="file"
                                   class="required"
                                   id="${multipartFilePath}"
                                   name="screenshot" />
                            <button class="btn btn-primary btn-block"
                                    data-intro="Upload a screenshot of the concerned page."
                                    data-step="4"
                                    name="test_files"
                                    type="button">
                                <i class="fa fa-upload" aria-hidden="true"></i> Upload Screenshot
                            </button>
                            <span class="help-block{% if form.screenshot.errors %} has-error{% endif %}">{{ form.screenshot.errors }}</span>
                            <span class="badge badge-important"></span>
                        </span>
                    {% endif %}
                </div>
            </form>
            <button type="submit"
                    name="reportbug_button"
                    id="btn"
                    class="btn btn-default btn-block"
                    data-intro="Click here to report the bug."
                    data-step="5">
                Report Bug <i class="fa fa-trophy" aria-hidden="true">+3</i>
            </button>
        </div>
    </div>
</form>
<table>
    {% if issue_list %}
        <caption>Report Summary</caption>
        <thead>
            <tr>
                <th scope="col">id</th>
                <th scope="col">URL</th>
                <th scope="col">Description</th>
                <th scope="col">Type</th>
            </tr>
        </thead>
        <tbody>
            {% for issue in issue_list %}
                <tr>
                    <td data-label="id">{{ forloop.counter }}</td>
                    <td data-label="url">{{ issue.url }}</td>
                    <td data-label="desc">{{ issue.description }}</td>
                    <td data-label="type">{{ issue.get_label_display }}</td>
                </tr>
            {% endfor %}
        </tbody>
    {% endif %}
</table>
<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 %}