{% extends 'backend/components/layouts/default.html' %}
{% load static %}

{% block content %}

    <!-- infobox -->
<div class="border border-gray-500/20 rounded-md shadow-[rgb(31_45_61_/_10%)_0px_2px_10px_1px] dark:shadow-[0_2px_11px_0_rgb(6_8_24_/_39%)] p-6 pt-12 mt-8 relative">
    <div class="border border-gray-500/20 rounded-md shadow-[rgb(31_45_61_/_10%)_0px_2px_10px_1px] dark:shadow-[0_2px_11px_0_rgb(6_8_24_/_39%)] p-6 pt-12 mt-8 relative">
        <div class="bg-primary absolute text-white-light left-6 -top-8 w-16 h-16 rounded-md flex items-center justify-center mb-5 mx-auto">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 22L2 22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path d="M2 11L10.1259 4.49931C11.2216 3.62279 12.7784 3.62279 13.8741 4.49931L22 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path opacity="0.5" d="M15.5 5.5V3.5C15.5 3.22386 15.7239 3 16 3H18.5C18.7761 3 19 3.22386 19 3.5V8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path d="M4 22V9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path d="M20 22V9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path opacity="0.5" d="M15 22V17C15 15.5858 15 14.8787 14.5607 14.4393C14.1213 14 13.4142 14 12 14C10.5858 14 9.87868 14 9.43934 14.4393C9 14.8787 9 15.5858 9 17V22" stroke="currentColor" stroke-width="1.5" />
                <path opacity="0.5" d="M14 9.5C14 10.6046 13.1046 11.5 12 11.5C10.8954 11.5 10 10.6046 10 9.5C10 8.39543 10.8954 7.5 12 7.5C13.1046 7.5 14 8.39543 14 9.5Z" stroke="currentColor" stroke-width="1.5" />
            </svg>
        </div>
        
        {% if not projects.exists and not indicators.exists %}
            <p>You have No project Story and Indicators. Please create a project Story and add a indicator before proceeding.</p>
            <br/>
            <div class="mt-6 flex flex-wrap items-center gap-2 sm:mt-0">
                <a href="{% url 'add_project' %}" class="btn btn-outline-primary">Create Project</a> 
            </div>
            <br/>
            <div class="mt-6 flex flex-wrap items-center gap-2 sm:mt-0">
                <a href="{% url 'add_indicator' %}" class="btn btn-outline-secondary">Add Indicators</a>
            </div>
        {% elif not projects.exists %}
            <p>You have No project Story. Please add before proceeding.</p>
            <br/>
            <div class="mt-6 flex flex-wrap items-center gap-2 sm:mt-0">
                <a href="{% url 'add_project' %}" class="btn btn-outline-primary">Create Project</a>
            </div>
        {% elif not indicators.exists %}
            <p>You have No project Indicator. Please add before proceeding.</p>
            <br/>
            <div class="mt-6 flex flex-wrap items-center gap-2 sm:mt-0">
                <a href="{% url 'add_indicator' %}" class="btn btn-outline-secondary">Add Indicators</a>
            </div>
        {% else %}
            <h<p class="text-white-dark text-[15px] mb-3.5">
                Please ensure all Project Results details are accurately filled in the form. Provide comprehensive information to assist in proper assessment and resource allocation. Double-check for any errors or omissions before submitting the form.
            </p>
            <span style="color: red; font-size: small; font-style: italic;">
                Incomplete or inaccurate information may delay the processing of the Project Result's request.
            </span>
        </div>
        {% include "backend/apps/quicknav.html" %}
    
    <div class="panel h-full w-full">
        <div class="flex items-center justify-between mb-5">
            <h5 class="font-semibold text-lg dark:text-white-light">New Project Result</h5>
        </div>
        <form method="post" enctype="multipart/form-data" class="border border-[#ebedf2] dark:border-[#191e3a] rounded-md p-4 mb-5 bg-white dark:bg-[#0e1726]">
            {% csrf_token %}
            <h6 class="text-lg font-bold mb-5">Add New Result</h6>
            <div class="flex flex-col">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <div>
                        <label for="project">Project</label>
                        <select id="project" name="project" class="form-select" x-tooltip="Select the project associated with this result." required>
                            {% for project in projects %}
                                <option value="{{ project.id }}">{{ project.title }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="output">Output</label>
                        <textarea id="output" name="output" placeholder="(**Describe the specific output**)" class="form-textarea" x-tooltip="Describe the specific output produced by the intervention." required></textarea>
                    </div>
                    <div>
                        <label for="outcome">Outcome</label>
                        <textarea id="outcome" name="outcome" placeholder="(**Describe the outcome**)" class="form-textarea" x-tooltip="Describe what has changed as a result of the intervention." required></textarea>
                    </div>
                    <div>
                        <label for="results_achieved">Results Achieved</label>
                        <textarea id="results_achieved" name="results_achieved" placeholder="(**Specify the results achieved**)" class="form-textarea" x-tooltip="Specify the results that have been achieved." required></textarea>
                    </div>
                    <div>
                        <label for="evidence_of_change">Evidence of Change</label>
                        <select id="evidence_of_change" name="evidence_of_change" multiple class="form-select" x-tooltip="Select indicators that provide evidence of change." required>
                            {% for indicator in indicators %}
                                <option value="{{ indicator.id }}">{{ indicator.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="global_contribution">Global Contribution</label>
                        <textarea id="global_contribution" name="global_contribution" placeholder="(**Describe global contribution**)" class="form-textarea" x-tooltip="Describe how the result contributes to global goals or initiatives." required></textarea>
                    </div>
                    <div>
                        <label for="regional_contribution">Regional Contribution</label>
                        <textarea id="regional_contribution" name="regional_contribution" placeholder="(**Describe regional contribution**)" class="form-textarea" x-tooltip="Describe how the result contributes at a regional level." required></textarea>
                    </div>
                    <div>
                        <label for="national_contribution">National Contribution</label>
                        <textarea id="national_contribution" name="national_contribution" placeholder="(**Describe national contribution**)" class="form-textarea" x-tooltip="Describe how the result contributes at the national level." required></textarea>
                    </div>
                    <div>
                        <label for="local_level_contribution">Local Level Contribution</label>
                        <textarea id="local_level_contribution" name="local_level_contribution" placeholder="(**Describe local level contribution**)" class="form-textarea" x-tooltip="Describe how the result contributes at the local level." required></textarea>
                    </div>
                    <div>
                        <label for="is_achieved">Is Intended results Achieved ?</label>
                        <div class="flex">
                            <input id="is_achieved_input"  type="text" placeholder="Is Intended results Achieved ?" class="form-input ltr:rounded-r-none rtl:rounded-l-none" />
                            <div class="bg-[#eee] flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">
                                <label class="w-7 h-4 relative cursor-pointer mb-0">
                                    <input type="checkbox"  class="peer absolute w-full h-full opacity-0 z-10 focus:ring-0 focus:outline-none cursor-pointer" id="is_achieved_checkbox" name="is_achieved"/>
                                    <span class="rounded-full border border-[#adb5bd] bg-white peer-checked:bg-primary peer-checked:border-primary dark:bg-dark block h-full before:absolute ltr:before:left-0.5 rtl:before:right-0.5 ltr:peer-checked:before:left-3.5 rtl:peer-checked:before:right-3.5 peer-checked:before:bg-white before:bg-[#adb5bd] dark:before:bg-white-dark before:bottom-[2px] before:w-3 before:h-3 before:rounded-full before:transition-all before:duration-300"></span>
                                </label>
                                <div id="is_achieved_label" class="ml-2 text-gray-600"></div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <label for="gender_inequities_addressed">Is Gender Inequities Addressed ?</label>
                        <div class="flex">
                            <input id="gender_inequities_addressed_input"  type="text" placeholder="Is Gender Inequities Addressed ?" class="form-input ltr:rounded-r-none rtl:rounded-l-none" />
                            <div class="bg-[#eee] flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">
                                <label class="w-7 h-4 relative cursor-pointer mb-0">
                                    <input type="checkbox" name="gender_inequities_addressed" class="peer absolute w-full h-full opacity-0 z-10 focus:ring-0 focus:outline-none cursor-pointer" id="gender_inequities_addressed_checkbox"   />
                                    <span class="rounded-full border border-[#adb5bd] bg-white peer-checked:bg-primary peer-checked:border-primary dark:bg-dark block h-full before:absolute ltr:before:left-0.5 rtl:before:right-0.5 ltr:peer-checked:before:left-3.5 rtl:peer-checked:before:right-3.5 peer-checked:before:bg-white before:bg-[#adb5bd] dark:before:bg-white-dark before:bottom-[2px] before:w-3 before:h-3 before:rounded-full before:transition-all before:duration-300"></span>
                                </label>
                                <div id="gender_inequities_addressed_label" class="ml-2 text-gray-600"></div>
                            </div>
                        </div>
                    </div>
                            
                    <div>
                        <label for="climate_change_addressed">Is Climate Change Addressed ?</label>
                        <div class="flex">
                            <input id="climate_change_addressed_input"  type="text" placeholder="Is Climate Change Addressed ?" class="form-input ltr:rounded-r-none rtl:rounded-l-none" />
                            <div class="bg-[#eee] flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">
                                <label class="w-7 h-4 relative cursor-pointer mb-0">
                                    <input type="checkbox" name="climate_change_addressed" class="peer absolute w-full h-full opacity-0 z-10 focus:ring-0 focus:outline-none cursor-pointer" id="climate_change_addressed_checkbox" />
                                    <span class="rounded-full border border-[#adb5bd] bg-white peer-checked:bg-primary peer-checked:border-primary dark:bg-dark block h-full before:absolute ltr:before:left-0.5 rtl:before:right-0.5 ltr:peer-checked:before:left-3.5 rtl:peer-checked:before:right-3.5 peer-checked:before:bg-white before:bg-[#adb5bd] dark:before:bg-white-dark before:bottom-[2px] before:w-3 before:h-3 before:rounded-full before:transition-all before:duration-300"></span>
                                </label>
                                <div id="climate_change_addressed_label" class="ml-2 text-gray-600"></div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <label for="how_gender_inequities_addressed">How Gender Inequities Addressed</label>
                        <textarea id="how_gender_inequities_addressed" name="how_gender_inequities_addressed" placeholder="(**Explain how gender inequities have been addressed**)" class="form-textarea" x-tooltip="Explain how gender inequities have been addressed." ></textarea>
                    </div>
                    <div>
                        <label for="how_climate_change_addressed">How Climate Change Addressed</label>
                        <textarea id="how_climate_change_addressed" name="how_climate_change_addressed" placeholder="(**Explain how climate change has been addressed**)" class="form-textarea" x-tooltip="Explain how climate change has been addressed." ></textarea>
                    </div>
                    <div>
                        <label for="support_document">Supporting Documents</label>
                        <input id="support_document" name="support_document" type="file" multiple accept=".pdf,.doc,.csv,.docx,.xls,.txt,.xlsx,image/*,.mp4,.mkv" x-tooltip="Upload supporting documents that provide evidence of the results achieved." />
                    </div>
                </div>
            </div>
            {% if user.is_superuser %}
            <div class="mt-3">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
            {% endif %}
        </form>
        
    </div>
{% endif%}
<script>
    
    document.addEventListener("alpine:init", () => {
        Alpine.directive("tooltip", (el, {
            expression
        }) => {
            tippy(el, {
                content: expression,
                placement: el.getAttribute("data-placement") || undefined,
                allowHTML: true,
                delay: el.getAttribute("data-delay") || 0,
                animation: el.getAttribute("data-animation") || "fade",
                theme: el.getAttribute("data-theme") || "",
            });
        });
    });
</script>

{% endblock %}