{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load gravatar %}
{% load socialaccount %}
{% load humanize %}
{% providers_media_js %}
{% load custom_tags %}
{% block title %}
    Report an issue | OWASP BLT
{% endblock title %}
{% block style %}
    <style>
    .captcha-form img{
        width: 100px;
        margin-right: 10px;
    }
    .captcha-form input{
        width: 100%;
        border-width: 1px;
        border-color: black;
        padding: 10px;
        font-size: 1.4rem;
    }

    @media (max-width:1130px) {
        #bug-description-container{
            flex-direction: column;
        }
        #bug-description-container div{
            width: 100%;
        }
    }

    @media (max-width: 1514px) {
        #files_manage{
            width: 100%;
            height: max-content;
            justify-content: space-around;
            
        }
        #files_manage div{
            margin-top: 20px;
        }
        #screenshot-container{
            width: 73vw
        }
    }

    .bottom-right {
            position: absolute;
            bottom: 10px;
            right: 15px;
    }

    #generateLabel{
        margin-left: 37%;
    }
    </style>
{% endblock style %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div id="duplicate-container"
         class="fixed w-full h-full top-0 left-0 overflow-y-auto z-10"
         hidden>
        <div class="flex flex-col w-full h-full bg-white items-center">
            <div class="w-full h-[60px] flex bg-red-500 items-center">
                <button id="close-duplicate-container"
                        class="flex top-[100px] w-[30px] h-[30px] bg-white justify-center item-center rounded-[50px] hover:bg-red-100 hover:shadow-md no-underline ml-5">
                    <i class="text-red-500 scale-150 m-3 fa-sharp fa-solid fa-xmark cursor-pointer transition duration-200"></i>
                </button>
                <div class="w-[90%] flex items-center justify-center">
                    <p class="text-5xl font-extrabold text-white">DUPLICATE ISSUES</p>
                </div>
            </div>
            <div class="w-[100%] flex justify-center mx-auto">
                <div class="p-4 w-[50%] mt-10 bg-white rounded-lg border shadow-md sm:p-8 border-gray-700">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-xl font-bold leading-none text-red-500">Latest Issues</h3>
                        <a href=""
                           id="view_all"
                           class="text-xl font-medium text-blue-600 hover:underline dark:text-blue-500">View all</a>
                    </div>
                    <div class="flow-root">
                        <ul role="list"
                            id="duplicate-list"
                            class="max-h-[70vh] overflow-y-scroll">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-[#F3F5F7] flex flex-col items-center">
        <form id="createIssueForm"
              method='post'
              action="#"
              enctype="multipart/form-data"
              class="w-[96%] bg-white rounded-2xl p-10 my-10 shadow-md"
              onsubmit="return validateCVE()">
            {% csrf_token %}
            <div class="w-full pb-12">
                <p class="text-5xl font-semibold leading-7 text-gray-900">{% trans "REPORT A BUG" %}</p>
                <div class="mt-12 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <div class="sm:col-span-5 flex items-center">
                        <div>
                            <label for="url"
                                   class="block text-2xl font-semibold leading-6 text-gray-900">
                                {% trans "DOMAIN URL" %}
                            </label>
                            <div class="mt-2">
                                <input id="url"
                                       type="text"
                                       name="url"
                                       value="{{ request.GET.url }}{{ form.url.value|default:'' }}"
                                       autocomplete="domain_name"
                                       placeholder="https://blt.owasp.org/search"
                                       required
                                       data-intro="Enter the website's complete url where you found the bug."
                                       data-step="1"
                                       class="block w-full placeholder:text-xl rounded-md border-0 py-5 pl-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300  sm:leading-6" />
                            </div>
                        </div>
                        <!-- Top Domains List -->
                        <div class="overflow-hidden mt-14 ml-10">
                            <div class="flex ml-4 space-x-3">
                                {% for domain in top_domains %}
                                    <img src="https://www.google.com/s2/favicons?sz=32&domain_url={{ domain.domain__name }}"
                                         alt="{{ domain.domain__name }}"
                                         class="cursor-pointer rounded-lg p-1 bg-gray-200 hover:bg-gray-300 hover:scale-110 transition duration-300 ease-in-out w-16 h-16"
                                         onclick="fillUrl('{{ domain.domain__name }}')"
                                         width="64px"
                                         height="64px">
                                    <!-- JavaScript function to fill URL -->
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <div class="h-full flex items-end w-full min-w-[150px]">
                        <a class="duplicates w-full h-[60%] min-h-[40px] rounded-md hover:text-white cursor-pointer hover:no-underline hover:shadow-form bg-red-500 hover:bg-red-700 items-center justify-center flex text-2xl font-semibold text-white outline-none">
                            {% trans "Check for Duplicates" %}
                        </a>
                    </div>
                </div>
                <script>
                    // JavaScript function to fill the URL input field
                    function fillUrl(url) {
                        document.getElementById('url').value = url;
                    }
                </script>
                <div class="mt-12 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <div class="sm:col-span-5">
                        <label for="description"
                               class="block text-2xl font-semibold leading-6 text-gray-900">
                            {% trans "BUG TITLE" %}
                        </label>
                        <div class="mt-2">
                            <input type="text"
                                   name="description"
                                   value="{{ request.GET.description }}{{ form.description.value|default:'' }}"
                                   id="description"
                                   autocomplete="domain_url"
                                   placeholder="Xss Vulnerability in bug editor"
                                   required
                                   data-intro="Enter Bug report title"
                                   data-step="1"
                                   class="block w-full placeholder:text-xl rounded-md border-0 py-5 pl-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300  sm:leading-6" />
                        </div>
                    </div>
                    <div class="sm:col-span-1 w-full min-w-[150px]">
                        <label for="label"
                               class="block text-2xl font-semibold leading-6 text-gray-900 hidden">
                            {% trans "BUG TYPE" %}
                        </label>
                        <div class="mt-2">
                            <select name="label"
                                    required
                                    id="labelSelect"
                                    data-intro="Categorize the bug."
                                    data-step="3"
                                    class="flex w-full placeholder:text-xl rounded-md border-0 py-4 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset">
                                <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>
                                <option value="7">Server down</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="space-y-12 mt-10">
                    <div class="sm:col-span-1 w-full min-w-[150px]">
                        <label for="hunt"
                               class="block text-2xl font-semibold leading-6 text-gray-900">
                            {% trans "BUG HUNT" %}
                        </label>
                        <div class="mt-2">
                            <select name="hunt"
                                    required
                                    data-intro="Categorize the bug."
                                    data-step="3"
                                    class="flex w-full placeholder:text-xl rounded-md border-0 py-4 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset">
                                {% if not report_on_hunt %}
                                    <option value="None">{% trans "REPORT INDEPENDENTLY" %}</option>
                                {% endif %}
                                {% for hunt in hunts %}<option value="{{ hunt.id }}">{{ hunt.name }}</option>{% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="space-y-12 mt-10">
                    <div class="w-full max-h-max flex justify-between flex-wrap border-b border-gray-900/10 pb-[50px]">
                        {% 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"
                               required
                               class="required"
                               name="screenshot-hash"
                               value="{{ request.GET.hash }}">
                    {% else %}
                        <div class="col-span-full">
                            <label for="file" class="block text-2xl font-medium leading-6 text-gray-900">{% trans "SCREENSHOTS" %}</label>
                            <div id="screenshot-container"
                                 class="mt-2 flex w-[350px] h-full items-center justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10 text-red-500">
                                <div class="text-center">
                                    <svg class="mx-auto h-12 w-12"
                                         viewBox="0 0 24 24"
                                         fill="currentColor"
                                         aria-hidden="true">
                                        <path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z" clip-rule="evenodd" />
                                    </svg>
                                    <div class="mt-4 flex text-2xl leading-6 text-gray-600">
                                        <label for="screenshots"
                                               class="relative cursor-pointer rounded-md bg-white font-semibold text-red-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-red-600 focus-within:ring-offset-2 hover:text-red-500">
                                            <span class="text-red-600">{% trans "Upload screenshots" %}</span>
                                            <input id="screenshots"
                                                   name="screenshots"
                                                   type="file"
                                                   class="sr-only"
                                                   multiple
                                                   required
                                                   max="4" />
                                            <textarea id="pasteArea" placeholder="Paste images here"></textarea>
                                        </label>
                                        <p class="pl-1">{% trans "or drag and drop" %}</p>
                                    </div>
                                    <script>
                                        document.getElementById('pasteArea').addEventListener('paste', function (e) {
                                            var items = (event.clipboardData || event.originalEvent.clipboardData).items;
                                            for (var index in items) {
                                                var item = items[index];
                                                if (item.kind === 'file') {
                                                    var blob = item.getAsFile();
                                                    var reader = new FileReader();
                                                    reader.onload = function(event){
                                                        var img = new Image();
                                                        img.src = event.target.result;

                                                        
                                                        var file = new File([blob], "pasted-image.png", {type: blob.type});

                                                        var dt = new DataTransfer();
                                                        var file_input = document.getElementById('screenshots');

                                                        // Add the existing files to the DataTransfer
                                                        for (var i = 0; i < file_input.files.length; i++) {
                                                            dt.items.add(file_input.files[i]);
                                                        }

                                                        // Add the new file to the DataTransfer
                                                        dt.items.add(file);

                                                        // Replace the file input's FileList with the new one
                                                        file_input.files = dt.files;
                                                        file_input.dispatchEvent(new Event('change'));
                                                        
                                                    };
                                                    reader.readAsDataURL(blob);
                                                }
                                            }
                                        });
                                    </script>
                                    <p class="text-lg leading-5 text-gray-600">PNG, JPG, GIF up to 5 images</p>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    <div id="files_manage"
                         multiple
                         class="w-[75%] ml-6 md:ml-0 flex items-end mt-6 flex-wrap min-h-[180px]"></div>
                </div>
            </div>
            <div>
                <div class="cve_id">
                    <label for="cve_id">CVE ID</label>
                    <input class="mt-4  ml-2 w-100 rounded border-2"
                           type="text"
                           placeholder="CVE-XXXX-XXXX..."
                           id="cve_id_input"
                           name="cve_id"
                           min="13"
                           max="16">
                </div>
                <button type="button" onclick="validateCVE()">Validate</button>
            </div>
            <div id="bug-description-container"
                 class="w-[100%] flex justify-between md:pr-10 flex-wrap border-b border-gray-900/10 pb-10 my-10">
                <div class="w-1/2">
                    {% include "includes/md_editor.html" %}
                    <button id="generateLabel"
                            onclick="Submit(event)"
                            class="rounded-md bg-red-600 px-11 py-3 text-md font-semibold text-white shadow-sm hover:bg-red-500">
                        Generate Label
                    </button>
                </div>
                <div class="w-1/2 pl-10 mt-5">
                    <div class="flex w-full items-center justify-between">
                        <h2 class="text-2xl font-semibold leading-7 text-gray-900">{% trans "ADD TEAM MEMBERS" %}</h2>
                        <button onclick="add_email_container()"
                                type="button"
                                class="w-[70px] h-[30px] mt-5 text-lg md:text-2xl md:w-[120px] md:h-[40px] md:mt-10 bg-red-500 text-white font-bold rounded-md hover:bg-red-600 transition-all">
                            {% trans "Add Email" %}
                        </button>
                    </div>
                    <p class="mt-4 text-xl leading-6 text-gray-600">{% trans "Team members should be bughunts users" %}.</p>
                    <div class="mt-10 overflow-y-scroll" id="email-container">
                        <label for="team_members"
                               class="block text-2l font-medium leading-6 text-gray-900">
                            {% trans "Email address" %}
                        </label>
                    </div>
                </div>
            </div>
            <div class="w-full mt-6 flex flex-col md:flex-row items-center justify-between gap-x-6 ">
                <div class="flex h-full justify-between items-center flex-col my-16 md:flex-row md:mt-0">
                    <!--
                    <label class="w-full ml-5 flex items-center text-2xl border-2 border-gray-200 rounded px-10">
                        <input id="default-checkbox" type="checkbox" name="private" value="true" class="w-7 h-7 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="default-checkbox" class="w-full text-center  ml-4 mt-6 text-3xl  font-medium text-gray-900">
                            {% trans "Report Privately" %}
                        </label>
                    </label>
                -->
                    <div class="captcha-form flex ml-10 flex-col w-full md:flex-row items-center">{{ captcha_form.captcha }}</div>
                </div>
                <div class="w-full flex justify-evenly md:justify-end">
                    <button type="button"
                            onclick="cancelForm()"
                            class="text-md font-semibold leading-6 mr-10 text-gray-900">{% trans "Cancel" %}</button>
                    <button type="submit"
                            name="reportbug_button"
                            class="rounded-md bg-red-600 px-11 py-3 text-md font-semibold text-white shadow-sm hover:bg-red-500">
                        {% trans "Report" %}
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="image-preview-wrapper"
     class="justify-center items-center w-[100vw] h-[100vh] z-30 fixed bg-gray-500 bg-opacity-50"
     hidden>
    <div class="bg-red-500 fixed w-[60%] h-[60%]">
        <img src=""
             alt="image"
             class="w-full h-full"
             id="image-preview"
             width="100%"
             height="100%">
    </div>
</div>
<div class="bottom-right">
    <a href="https://github.com/OWASP-BLT/BLT/blob/main/website/templates/report.html">
        <i class="fab fa-github"></i>
    </a>
    <a href="https://www.figma.com/file/s0xuxeU6O2guoWEfA9OElZ/Design?node-id=421%3A5&t=pqxWpF3hcYxjEDrs-1">
        <i class="fab fa-figma"></i>
    </a>
</div>
{% endblock content %}
{% block after_js %}
    <script type="text/javascript">
    function isCVEValid(cveNumber) {
        const cveRegex = /^CVE-\d{4}-\d{4,7}$/;
        return cveRegex.test(cveNumber);
    }

    function validateCVE() {
        const cveInput = document.getElementById('cve_id_input').value;
        const validationResult = document.getElementById('cve_id_input');
        //check for empty submission(allow form submission)
        if (!cveInput.trim()) {
            validationResult.style.borderColor = '';
            return true;
        }

        if (isCVEValid(cveInput)) {
            validationResult.style.borderColor = 'green';
        } else {
            validationResult.style.borderColor = 'red';
            return false;
        }
    }
    const screenshots = document.getElementById('screenshots');
    let manage_div = document.getElementById("files_manage");

    function escapeHtml(str) {return str.replace(/[&<>"']/g, function (s) {var entityMap = {"&": "&amp;","<": "&lt;",">": "&gt;",'"': '&quot;',"'": '&#39;',};return entityMap[s];});}
    function previewFile(file_name) {
        event.preventDefault();
        Array.from(screenshots.files).map(file => {
            if (file.name === file_name) {
                let src = URL.createObjectURL(file);
                if (src.startsWith('blob:')) {
                    let escapedSrc = escapeHtml(src);
                    $("#image-preview").attr("src", escapedSrc);
                    $("#image-preview-wrapper").show();
                }else {$("#image-preview-wrapper").hide();}
            }
        });
    }

    $("#image-preview-wrapper").on("click", () => {
        event.preventDefault();
        $("#image-preview-wrapper").hide();
    })

    function removeFile(fileName) {
        event.preventDefault();

    }

    screenshots.addEventListener('change', (event) => {

        const fileList = Array.from(event.target.files);

        fileList.map(file => {
            let src = URL.createObjectURL(file);
            let safeName = $("<div>").text(file.name).html();
            let safeNameDisplay = safeName.slice(0, 20) + (safeName.length > 20 ? "..." : "");
            // Use the safe name for display and in the onclick handler
            let fileDiv = $("<div>").addClass("w-full md:w-[300px] h-[180px] overflow-hidden rounded-lg").attr("onclick", `previewFile('${safeName}')`);
            let titleDiv = $("<div>").addClass("w-full h-10 flex justify-center rounded-t-lg p-2 bg-gray-500");
            let titleP = $("<p>").addClass("text-xl text-white font-bold").text(safeNameDisplay);
            let img = $("<img>").addClass("object-cover").attr("src", escapeHtml(src));
    
            titleDiv.append(titleP);
            fileDiv.append(titleDiv).append(img);
            $("#files_manage").append(fileDiv);
        })

    });


    $(function () {
        $(".duplicates").click(async () => {
            var uri = $("input[name='url']").val();

            $("#view_all").attr("href", `/search/?query=${encodeURIComponent(uri)}`);

            let resp = await fetch("/api/v1/urlcheck/", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    "domain_url": uri
                })
            });

            let resp_json = await resp.json()

            $("#duplicate-list").html("")
            resp_json.map(issue => add_duplicates(issue));

            $("#duplicate-container").show()

        });

        $("#close-duplicate-container").click(() => {
            $("#duplicate-container").hide()
        })


        let add_duplicates = (issue) => {
            $("#duplicate-list").append(
                `
                    <li class="py-3 sm:py-4 border-x-gray-500 border-t-2 cursor-pointer hover:shadow-lg transition-all">
                        <div class="flex items-center space-x-4 p-2">
                            <div class="flex-shrink-0">
                                <img class="w-[60px] h-[60px] rounded-full" src="{% media_url %}${issue.user__userprofile__user_avatar}" alt="Neil image" width="60px" height="60px">
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-3xl font-medium text-gray-900 text-black">
                                    ${issue.description.substring(0, 50)}...
                                </p>
                                <a href="/issue/${issue.id}" class="text-2xl text-gray-500 truncate dark:text-gray-400">
                                    /issue/${issue.id}
                                </a>
                            </div>
                            <div class="inline-flex items-center text-base text-xl font-semibold text-gray-900 dark:text-white">
                                    ${issue.created__day}/${issue.created__month}/${issue.created__year}
                                </div>
                        </div>
                    </li>
                `
            )
        }

    });


    function removeErrors(){
        var errors = document.getElementsByClassName('popup-errors');
        var errorsArray = Array.from(errors);

        // Remove each element from the DOM
        errorsArray.forEach(function(error) {
            error.remove();
        });
    }


    function remove_email_container(){
        let email_container = document.getElementById("email-container");
        let lst_child = email_container.lastElementChild;
        email_container.removeChild(lst_child);
    }

    function add_email_container(){
        const email_container_child_html = document.createElement('div');
        email_container_child_html.innerHTML = `
            <div class="mt-2 flex flex-row items-center w-[70%]">
                <input name="team_members" type="email" autocomplete="email" required class="w-[90%] mt-2 text-xl block rounded-md border-0 py-3 pl-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-red-600" />
                <button type="button" onclick="remove_email_container()">
                    <i class="fa-sharp fa-solid fa-trash fa-lg text-[#596780] ml-4 hover:text-black"></i>   
                </button>
            </div>
        `;

        let email_container = document.getElementById("email-container");
        email_container.appendChild(email_container_child_html)
    }

    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    function Submit() {
    event.preventDefault();
    const BugDescription = document.getElementById('markdownInput').value;
    const csrftoken = getCookie('csrftoken');
    fetch(`/issue-auto-label/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrftoken
        },
        body: JSON.stringify({ BugDescription: BugDescription }),
    })
    .then(response => response.json())
    .then(data => {
        if ('label' in data) {
            console.log('Received label:', data.label);

            const labelSelect = document.getElementById("labelSelect");
            console.log('Current labelSelect value:', labelSelect.value);
            labelSelect.selectedIndex = parseInt(data.label);
            console.log('Selected label:', labelSelect.options[labelSelect.selectedIndex].text);
            console.log('Updated labelSelect value:', labelSelect.selectedIndex);
        }
        else {
            console.log('No label found');
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
    return true;
}

    </script>
{% endblock after_js %}