{% extends "company/company_dashboard_base.html" %}
{% load static %}
{% block title %}
    Add Bughunt
{% 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 Bughunt</p>
        </div>
        <form method='post'
              action="#"
              id="add_bughunt_form"
              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">Create new online Bughunt</h2>
                <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="bughunt_name"
                               class="block text-sm font-medium leading-6 text-gray-900">Bughunt Name</label>
                        <div class="mt-2">
                            <input type="text"
                                   name="bughunt_name"
                                   id="bughunt_name"
                                   autocomplete="bughunt_name"
                                   placeholder="Hunt 1.0"
                                   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="domain"
                               class="block text-sm font-medium leading-6 text-gray-900 ">Domain</label>
                        <div class="mt-2">
                            <select id="domain"
                                    name="domain"
                                    autocomplete="domain-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 domain in domains %}<option value="{{ domain.id }}">{{ domain.name }}</option>{% endfor %}
                            </select>
                        </div>
                    </div>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/datepicker.min.js"
                            integrity="sha384-sMp3hQy59Ay78X8c2o+5dDPZUFdUdYUKT8tbVKVfeyA735e1vIlRsH5vsjbHMDLX"
                            crossorigin="anonymous"></script>
                    <div class="sm:col-span-3">
                        <label for="domain_url"
                               class="block text-sm font-medium leading-6 text-gray-900">Bughunt Timeline</label>
                        <div date-rangepicker class="flex items-center">
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500"
                                         aria-hidden="true"
                                         xmlns="http://www.w3.org/2000/svg"
                                         fill="currentColor"
                                         viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input name="start_date"
                                       required
                                       type="text"
                                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  "
                                       placeholder="Select date start">
                            </div>
                            <span class="mx-4 text-gray-500">to</span>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500"
                                         aria-hidden="true"
                                         xmlns="http://www.w3.org/2000/svg"
                                         fill="currentColor"
                                         viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input name="end_date"
                                       required
                                       type="text"
                                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  "
                                       placeholder="Select date end">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="space-y-12">
                    <div class="border-b border-gray-900/10 pb-12">
                        <div class="col-span-full my-5">
                            <label for="bughunt_logo"
                                   class="block text-sm font-medium leading-6 text-gray-900">Bughunt 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">Banner</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 Banner</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="w-full ">{% include "company/company_includes/md_editor.html" %}</div>
                <div class="border-b border-gray-900/10 pb-12 mt-5">
                    <h2 class="text-base font-semibold leading-7 text-gray-900">Bughunt Prizes</h2>
                    <div class="bg-gray-100 w-full p-7">
                        <div>
                            <label for="prize_name" class="font-bold">
                                <span class="text-red-500 mr-1">*</span>Prize Name
                            </label>
                            <input type="text"
                                   name="prize_name"
                                   id="prize_name"
                                   placeholder="1st Prize"
                                   class="w-full mt-2 px-2 py-2 mb-2 border-[1px] border-gray-200 outline-none">
                        </div>
                        <div class="mt-3">
                            <label for="cash_value" class="font-bold">
                                <span class="text-red-500 mr-1">*</span>Cash Value (USD)
                            </label>
                            <input type="number"
                                   min="0"
                                   placeholder="1000"
                                   name="cash_value"
                                   id="cash_value"
                                   class="w-full mt-2 px-2 py-2 mb-2 border-[1px] border-gray-200 outline-none">
                        </div>
                        <div class="mt-3">
                            <label for="number_of_winning_projects" class="font-bold">Number of Winning Projects</label>
                            <input type="number"
                                   min="1"
                                   id="number_of_winning_projects"
                                   name="number_of_winning_projects"
                                   class="w-full mt-2 px-2 py-2 mb-2 border-[1px] border-gray-200 outline-none">
                        </div>
                        <div class="mt-2 flex items-center">
                            <input type="checkbox"
                                   name="every_valid_submissions"
                                   id="every_valid_submissions"
                                   class="w-4 h-4">
                            <label for="every_valid_submissions" class="ml-2">
                                Every Valid Submissions are eligible for this prize (Cash Value Per Accepted Bug)
                            </label>
                        </div>
                        <script>
                        let valid_s = document.getElementById("every_valid_submissions");
                        let winning_projects = document.getElementById("number_of_winning_projects");
                        valid_s.addEventListener('click',()=>{
                            if (valid_s.checked) {
                                winning_projects.disabled = true;
                                winning_projects.value = 1;
                            } else {
                                winning_projects.disabled = false;
                                winning_projects.value = 1;
                            }
                        })
                        </script>
                        <div class="mt-3">
                            <label for="prize_description" class="font-bold">
                                <span class="text-red-500 mr-1">*</span>Prize Description
                            </label>
                            <textarea type="text"
                                      name="prize_description"
                                      id="prize_description"
                                      class="w-full mt-2 px-2 py-2 mb-2 border border-[1px] border-gray-200 outline-none"></textarea>
                        </div>
                        <div class="mt-3 flex flex-col">
                            <label class="font-bold">Will this prize will be paid in cryptocurrency?</label>
                            <p class="text-[12px] text-gray-700 ml-1">
                                Check below if your prize is paid in cryptocurrency, and list the cash value of the cryptocurrenty and specify the crypto name in Hunt description eg: $100 USD in ETH
                            </p>
                            <div class="mt-2 flex items-center">
                                <input type="checkbox"
                                       name="paid_in_cryptocurrency"
                                       id="paid_in_cryptocurrency"
                                       class="w-4 h-4">
                                <label for="paid_in_cryptocurrency" class="ml-2">The prize will be paid in cryptocurrency</label>
                            </div>
                        </div>
                        <button onclick="add_prize()"
                                type="button"
                                class="w-[120px] h-[40px] mt-8 bg-red-500 text-white font-bold rounded-md hover:bg-red-600 transition-all">
                            Add Prize
                        </button>
                    </div>
                    <div class="sm:col-span-4 flex overflow-x-scroll"
                         id="list-prize-container"></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"
                            onclick="PublishBughunt('false')"
                            class="rounded-md bg-gray-600 px-11 py-3 text-md font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">
                        Draft
                    </button>
                    <button type="button"
                            onclick="PublishBughunt('true')"
                            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">
                        Publish
                    </button>
                </div>
            </div>
        </form>
    </div>
{% endblock content %}
{% block js %}
    <script src="{% static 'company/js/hunt_controller.js' %}"></script>
{% endblock js %}