{% extends "base.html" %}
{% load static %}
{% load gravatar %}
{% load socialaccount %}
{% load humanize %}
{% providers_media_js %}
{% load custom_tags %}

{% block style %}
<style>
    .duplicates {
        border-radius: 0px;
    }

    .panel-text {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
        text-align:center;
    }
    .panel-text div{
        width: 44%;
        width: 500px;
    }
    .title{
        color: white; 
        font-weight: 700;
        font-size: 3rem;
    }
    .captcha-form input{
        border: 1px solid rgb(64, 64, 64);
    }

</style>
{% endblock %}

{% block content %}
<script src="{% static 'js/jquery.validate.js' %}"></script>
<script src="{% static 'js/activity.js' %}"></script>

<form action="/issue/" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="row main">
        <div class="panel-title panel-text">
            <div class="bg-red-500">
                <h1 class="title">REPORT A BUG</h1>
            </div>
        </div>
        <div class="main-issue-form main-center">
            
                <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"
                            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" 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 bg-red-500 border-0">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" required
                            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>
                        <option value="7">Server down</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">
                    <input type="hidden" required class="required" name="screenshot-hash" value="{{ request.GET.hash }}">
                    {% else %}
                    <br>
                    <span>
                        <input type="file" required class="required" id='screenshot' multiple name="screenshots" />
                       <!-- <button class="btn btn-primary btn-block"
                            data-intro="Upload a screenshot of the concerned page." data-step="4" name="test_files"
                            type="button" style="background-color: rgb(255, 0, 0); border:none;">
                            <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>
                {% csrf_token %}
                <div class="captcha-form">
                    {{ captcha_form.captcha }}
                </div>
                <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>
<script type="text/javascript">
    $(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\\', '');
        //    $(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 %}