{% extends "company/company_dashboard_base.html" %}
{% block title %}
    Add Domain
{% endblock title %}
{% 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="company"
                               class="block text-sm font-medium leading-6 text-gray-900 ">Company</label>
                        <div class="mt-2">
                            <select id="company"
                                    name="company"
                                    autocomplete="company-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 company in companies %}<option value="{{ company.company_id }}">{{ company.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" />
                                    </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>
                </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_email_container()"
                        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 Email
                </button>
                <div class="sm:col-span-4 mt-5" id="email-container">
                    <label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</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="button"
                        onclick="cancelForm()"
                        class="text-md font-semibold leading-6 text-gray-900">Cancel</button>
                <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_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-[50%]">
                    <input name="email" type="email" autocomplete="email" required 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 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-red-600 sm:text-sm sm:leading-6" />
                    <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)
        }

    </script>
    <script>
        function cancelForm(){
            let deleteForm = document.getElementById("deleteForm");
            let confirmDelete = confirm("Are you sure you want to cancel, your progress would be lost.");
            if (confirmDelete === true){
                deleteForm.submit();
            }
        }


        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 = "";
            }
        }

    </script>
{% endblock js %}