{% extends "organization/organization_dashboard_base.html" %}
{% load static %}
{% block title %}
    Add Domain
{% endblock title %}
{% block description %}
    Add a new domain, organization details, URL, and relevant images to set up your Bughunt contest. Ensure all necessary assets are uploaded for a smooth start.
{% endblock description %}
{% block keywords %}
    Add Domain, Organization Details, URL, Upload Image, New Contest, Setup Bughunt, Contest Assets
{% endblock keywords %}
{% block og_title %}
    Add Domain, Organization, URL, Image - Set Up Your Contest
{% endblock og_title %}
{% block og_description %}
    Set up your Bughunt contest by adding domain information, organization details, URLs, and uploading necessary images. Start your competition with all the right assets.
{% endblock og_description %}
{% block body %}
    <div class="bg-[#F3F5F7] flex flex-col items-center">
        <div class="w-full mt-5">
            <p class="text-red-700 font-satoshi font-bold text-[35px] px-8">Add Domain</p>
        </div>
        <form method='post'
              action="#"
              enctype="multipart/form-data"
              class="w-[96%] bg-white rounded-2xl p-10 my-10 shadow-md">
            {% csrf_token %}
            <div class="pb-12">
                <h2 class="text-base font-semibold leading-7 text-gray-900">Domain Information</h2>
                <p class="mt-1 text-sm leading-6 text-gray-600">Use a permanent address where you can receive mail.</p>
                <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <div class="sm:col-span-3">
                        <label for="domain_name"
                               class="block text-sm font-medium leading-6 text-gray-900">Domain Name</label>
                        <div class="mt-2">
                            <input type="text"
                                   name="domain_name"
                                   id="domain_name"
                                   autocomplete="domain_name"
                                   placeholder="domain.xyz"
                                   required
                                   class="block w-full rounded-md border-0 py-1.5 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 sm:text-sm sm:leading-6" />
                        </div>
                    </div>
                    <div class="sm:col-span-3">
                        <label for="domain_url"
                               class="block text-sm font-medium leading-6 text-gray-900">Domain Url</label>
                        <div class="mt-2">
                            <input type="text"
                                   name="domain_url"
                                   id="domain_url"
                                   autocomplete="domain_url"
                                   placeholder="https://domain.xyz"
                                   required
                                   class="block w-full rounded-md border-0 py-1.5 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 sm:text-sm sm:leading-6" />
                        </div>
                    </div>
                    <div class="sm:col-span-3">
                        <label for="organization"
                               class="block text-sm font-medium leading-6 text-gray-900 ">Organization</label>
                        <div class="mt-2">
                            <select id="organization"
                                    name="organization"
                                    autocomplete="organization-name"
                                    class="block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-red-600 sm:max-w-xs sm:text-sm sm:leading-6">
                                {% for organization in organizations %}
                                    <option value="{{ organization.organization_id }}">{{ organization.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="sm:col-span-2 sm:col-start-1">
                        <label for="github_url"
                               class="block text-sm font-medium leading-6 text-gray-900">
                            Github Repo URL (Optional)
                        </label>
                        <div class="mt-2">
                            <input type="text"
                                   name="github_url"
                                   id="github_url"
                                   autocomplete="github"
                                   placeholder="https://github.com/repo"
                                   class="block w-full rounded-md border-0 py-1.5 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 sm:text-sm sm:leading-6" />
                        </div>
                    </div>
                    <div class="sm:col-span-2">
                        <label for="twitter_url"
                               class="block text-sm font-medium leading-6 text-gray-900">
                            Domain Twitter URL (Optional)
                        </label>
                        <div class="mt-2">
                            <input type="text"
                                   name="twitter_url"
                                   id="twitter_url"
                                   autocomplete="twitter"
                                   placeholder="https://twitter.com/handle"
                                   class="block w-full rounded-md border-0 py-1.5 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 sm:text-sm sm:leading-6" />
                        </div>
                    </div>
                    <div class="sm:col-span-2">
                        <label for="facebook_url"
                               class="block text-sm font-medium leading-6 text-gray-900">
                            Domain Facebook URL (Optional)
                        </label>
                        <div class="mt-2">
                            <input type="text"
                                   name="facebook_url"
                                   id="facebook_url"
                                   autocomplete="facebook"
                                   placeholder="https://facebook.com/handle"
                                   class="block w-full rounded-md border-0 py-1.5 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 sm:text-sm sm:leading-6" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="space-y-12">
                <div class="border-b border-gray-900/10 pb-12">
                    <div class="col-span-full mb-5">
                        <label for="domain_logo"
                               class="block text-sm font-medium leading-6 text-gray-900">Domain Logo</label>
                        <div class="mt-2 flex items-center gap-x-3" id="previewLogo">
                            <div id="previewLogoDiv"
                                 class="h-16 w-16 text-gray-300 overflow-hidden rounded-2xl text-red-500">
                                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <label for="logo"
                                   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">Upload logo</span>
                                <input id="logo"
                                       name="logo"
                                       type="file"
                                       class="sr-only"
                                       onchange="displayLogoPreview()" />
                            </label>
                        </div>
                    </div>
                    <div class="col-span-full">
                        <label for="webshot"
                               class="block text-sm font-medium leading-6 text-gray-900">Webshot</label>
                        <div class="mt-2 flex 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-sm leading-6 text-gray-600">
                                    <label for="webshot"
                                           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">Upload a webshot</span>
                                        <input id="webshot"
                                               name="webshot"
                                               type="file"
                                               class="sr-only"
                                               onchange="displayWebshotPreview()" />
                                    </label>
                                    <p class="pl-1">or drag and drop</p>
                                </div>
                                <p class="text-xs leading-5 text-gray-600">PNG, JPG, GIF up to 10MB</p>
                            </div>
                        </div>
                        <div id="webshotPreview" class="mt-4"></div>
                    </div>
                </div>
            </div>
            <div class="border-b border-gray-900/10 pb-12 mt-5">
                <h2 class="text-base font-semibold leading-7 text-gray-900">Domain Managers</h2>
                <p class="mt-1 text-sm leading-6 text-gray-600">
                    Add Emails which will be allowed to start hunts and manage reported bugs.
                    Email should be domain mail and should be registerd user on BLT.
                </p>
                <button onclick="add_user_selection()"
                        type="button"
                        class="w-[120px] h-[40px] bg-red-500 text-white font-bold rounded-md mt-2 hover:bg-red-600 transition-all">
                    Add User
                </button>
                <div class="sm:col-span-4 mt-5" id="user-selection-container">
                    <label for="user" class="block text-sm font-medium leading-6 text-gray-900">Select Domain Manager</label>
                </div>
            </div>
            <div class="border-b border-gray-900/10 pb-12 mt-5">
                <h2 class="text-base font-semibold leading-7 text-gray-900">Notifications</h2>
                <p class="mt-1 text-sm leading-6 text-gray-600">
                    We'll always let you know about important changes, but you pick what
                    else you want to hear about.
                </p>
                <div class="space-y-10">
                    <fieldset>
                        <div class="mt-6 space-y-6">
                            <div class="relative flex gap-x-3">
                                <div class="flex h-6 items-center">
                                    <input id="comments"
                                           name="comments"
                                           type="checkbox"
                                           class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-600" />
                                </div>
                                <div class="text-sm leading-6">
                                    <label for="comments" class="font-medium text-gray-900">On Bug Report</label>
                                    <p class="text-gray-500">Get notified when someones reports a bug on this domain.</p>
                                </div>
                            </div>
                            <div class="relative flex gap-x-3">
                                <div class="flex h-6 items-center">
                                    <input id="candidates"
                                           name="candidates"
                                           type="checkbox"
                                           class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-600" />
                                </div>
                                <div class="text-sm leading-6">
                                    <label for="candidates" class="font-medium text-gray-900">On Bug Closed</label>
                                    <p class="text-gray-500">Get notified when a bug report is marked closed.</p>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
            <div class="mt-6 flex items-center justify-end gap-x-6">
                <button type="submit"
                        class="rounded-md bg-red-600 px-11 py-3 text-md font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
                    Save
                </button>
            </div>
        </form>
    </div>
{% endblock body %}
{% block js %}
    <script>
        function remove_user_selection(event) {
            let user_container = document.getElementById("user-selection-container");
            let parentDiv = event.target.closest('.user-selection');
            user_container.removeChild(parentDiv);
            updateUserSelections();
        }

        function add_user_selection() {
            const user_selection_child_html = document.createElement('div');
            user_selection_child_html.classList.add('mt-2', 'flex', 'flex-row', 'items-center', 'w-[50%]', 'user-selection');
            user_selection_child_html.innerHTML = `
                <select name="user" class="w-[90%] block rounded-md border-0 py-1.5 pl-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-red-600 sm:text-sm sm:leading-6" onchange="updateUserSelections()">
                    ${getUserOptions([])}
                </select>
                <button type="button" onclick="remove_user_selection(event)">
                    <i class="fa-sharp fa-solid fa-trash fa-lg text-[#596780] ml-4 hover:text-black"></i>
                </button>
            `;

            let user_container = document.getElementById("user-selection-container");
            user_container.appendChild(user_selection_child_html);
            updateUserSelections();
        }

        function getUserOptions(excludeList) {
            let optionsHtml = '<option value="" disabled selected>Select a user</option>';
            {% for user in users %}
                if (!excludeList.includes('{{ user.email }}')) {
                    optionsHtml += `<option value="{{ user.email }}">{{ user.username }} ({{ user.email }})</option>`;
                }
            {% endfor %}
            return optionsHtml;
        }

        function updateUserSelections() {
            const selects = document.querySelectorAll('#user-selection-container select');
            const selectedUsers = Array.from(selects).map(select => select.value);

            selects.forEach(select => {
                const currentValue = select.value;
                select.innerHTML = getUserOptions(selectedUsers.filter(user => user !== currentValue));
                select.value = currentValue;  // Preserve the current value after options are updated
            });
        }



        function displayLogoPreview() {
            var fileInput = document.getElementById("logo");
            var previewDiv = document.getElementById("previewLogoDiv");

            if (fileInput.files.length > 0) {
                var file = fileInput.files[0];
                var reader = new FileReader();

                reader.onload = function(event) {
                var preview = document.createElement("img");
                preview.src = event.target.result;
                previewDiv.innerHTML = "";
                previewDiv.appendChild(preview);
                };

                reader.readAsDataURL(file);
            } else {
                previewDiv.innerHTML = "";
            }
        }

        function displayWebshotPreview() {
            var fileInput = document.getElementById("webshot");
            var previewDiv = document.getElementById("webshotPreview");

            if (fileInput.files.length > 0) {
                var file = fileInput.files[0];
                var reader = new FileReader();

                reader.onload = function(event) {
                    var img = new Image();
                    img.src = event.target.result;

                    img.onload = function() {
                        var canvas = document.createElement("canvas");
                        var ctx = canvas.getContext("2d");

                        var maxDim = 300;
                        var scale = Math.min(maxDim / img.width, maxDim / img.height);

                        canvas.width = img.width * scale;
                        canvas.height = img.height * scale;

                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

                        previewDiv.innerHTML = "";
                        previewDiv.style.display = "flex";
                        previewDiv.style.justifyContent = "center";
                        previewDiv.appendChild(canvas);
                    };
                };

                reader.readAsDataURL(file);
            } else {
                previewDiv.innerHTML = "";
            }
        }
    </script>
{% endblock js %}