{% 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>
        

            <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</h5>
        </div>
        <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="grid grid-cols-2 gap-4">
                <div class="col-span-2">
                    <label for="title">Project Title <span style="color:red;">*</span></label>
                    <input id="title" name="title" type="text" class="form-input" required placeholder="(**Enter the title of the Project.**)" x-tooltip="Enter the title of the Project." />
                </div>
                
                <div>
                    <label for="donation_needed">Donation Needed <span style="color:red;">*</span></label>
                    <input id="donation_needed" name="donation_needed" type="number" step="0.01" class="form-input" placeholder="(**Enter the amount of donation needed for the Project.**)" x-tooltip="Enter the amount of donation needed for the Project."/>
                </div>
                <div>
                    <label for="donation_raised">Donation Raised <span style="color:red;">*</span></label>
                    <input id="donation_raised" name="donation_raised" type="number" step="0.01" class="form-input" placeholder="(**Enter the amount of donation raised so far.**)" x-tooltip="Enter the amount of donation raised so far."/>
                </div>
                
                <div>
                    <label for="category">Category <span style="color:red;">*</span></label>
                    <select id="category" name="category" class="form-select" placeholder="(**Select the category of the Project.**)" x-tooltip="Select the category of the Project.">
                        {% for category in Category_choices %}
                            <option value="{{ category.0 }}">{{ category.1 }}</option>
                        {% endfor %}
                    </select>
                </div>                
                
                <div>
                    <label for="status">Status <span style="color:red;">*</span></label>
                    <select id="status" name="status" class="form-select" placeholder="(**Select the current status of the Project.**)" x-tooltip="Select the current status of the Project.">
                        {% for choice in status_choices %}
                            <option value="{{ choice.0 }}">{{ choice.1 }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label for="project_cycle">Project Cycle <span style="color:red;">*</span></label>
                    <select id="project_cycle" name="project_cycle" class="form-select" placeholder="(**Select the project cycle stage.**)" x-tooltip="Select the project cycle stage.">
                        {% for choice in project_cycle_choices %}
                            <option value="{{ choice.0 }}">{{ choice.1 }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div>
                    <label for="project_phase">Project Phase <span style="color:red;">*</span></label>
                    <select id="project_phase" name="project_phase" class="form-select" placeholder="(**Select the project phase.**)" x-tooltip="Select the project phase.">
                        {% for choice in project_phase_choices %}
                            <option value="{{ choice.0 }}">{{ choice.1 }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="col-span-2">
                    <label for="stakeholders">Stakeholders </label>
                    <select id="stakeholders" name="stakeholders" class="form-select" multiple x-tooltip="Select the stakeholders involved in the Project.">
                        <option value="">Select Below</option>
                        {% for stakeholder in stakeholders %}
                            <option value="{{ stakeholder.id }}" >{{ stakeholder.name }}</option>
                        {% endfor %}
                    </select>
                    <a href="{% url 'add_stakeholder' %}" target="_blank" class="btn btn-outline-primary">Add Project Stakeholder</a>
                </div>
                <div class="col-span-2">
                    <label for="beneficiaries">Beneficiaries </label>
                    <select id="beneficiaries" name="beneficiaries" class="form-select" multiple x-tooltip="Select the beneficiaries of the Project." >
                        <option value="">Select Below</option>
                        {% for beneficiary in beneficiaries %}
                            <option value="{{ beneficiary.id }}">{{ beneficiary.name }}</option>
                        {% endfor %}
                    </select>
                    <a href="{% url 'add_beneficiary' %}" target="_blank" class="btn btn-outline-secondary">Add Project Beneficiary</a>

                </div>
                
                <div class="col-span-2">
                    <label for="partners">Project Partners </label>
                    <select id="partners" name="partners" class="form-select" multiple x-tooltip="Select the partners in the project ." >
                        <option value="">Select Below</option>
                        {% for partner in partners %}
                            <option value="{{ partner.id }}">{{ partner.name }}</option>
                        {% endfor %}
                    </select>
                    <a href="{% url 'add_partnering_organization' %}" target="_blank" class="btn btn-outline-secondary">Add Project Partners.</a>

                </div>
                <div class="col-span-2">
                    <label for="activities">Activities</label>
                    <select id="activities" name="activities" class="form-select" multiple x-tooltip="Select the activities related to the Project.">
                        <option value="">Select Below</option>
                        {% for activity in activities %}
                            <option value="{{ activity.id }}">{{ activity.name }}</option>
                        {% endfor %}
                    </select>
                    <a href="{% url 'add_activity' %}" target="_blank" class="btn btn-outline-info">Add Project Activity</a>
                </div>
                
                <div class="col-span-2">
                    <label for="solution_trees">Solution Trees</label>
                    <select id="solution_trees" name="solution_trees" class="form-select" multiple x-tooltip="Select the Solution Trees related to the Project.">
                        <option value="">Select Below</option>
                        {% for solution in solution_trees %}
                        <option value="{{ solution.id }}" {% if solution.id in project_solution_trees_ids %} selected {% endif %}>
                            {{ forloop.counter }}. {{ solution.core_problem.name }} -- {{ solution.identified_solution }} 
                        </option>
                        {% endfor %}
                    </select>
                    <a href="{% url 'add_solution_tree' %}" target="_blank" class="btn btn-outline-info">Add Project Solution Trees</a>
                </div>
                <div class="col-span-2">
                    <label for="description">Description <span style="color:red;">*</span></label>
                    <textarea id="description" name="description" class="form-input" required placeholder="(**Describe the project in detail.**)"x-tooltip="Describe the project in detail."></textarea>
                </div>
                
                <div class="col-span-2">
                    <label for="problem_statement">Problem Statement </label>
                    <textarea id="problem_statement" name="problem_statement" class="form-input"placeholder="(**Describe the problem statement for the project.**)" x-tooltip="Describe the problem statement for the project."></textarea>
                </div>
                <div class="col-span-2">
                    <label for="problem_impact">Problem Impact </label>
                    <textarea id="problem_impact" name="problem_impact" class="form-input"  placeholder="(**Describe the impact of the problem.**)" x-tooltip="Describe the impact of the problem."></textarea>
                </div>
                <div class="col-span-2">
                    <label for="project_goals">Project Goals </label>
                    <textarea id="project_goals" name="project_goals" class="form-input" placeholder="(**Describe the goals of the project.**)" x-tooltip="Describe the goals of the project."></textarea>
                </div>
                
                <div class="col-span-2">
                    <label for="project_document">Project Documents</label>
                    <input id="project_document" name="project_document" type="file" class="form-input" multiple accept=".pdf,.doc,.csv,.docx,.xls,.txt,.xlsx,image/*,.mp4,.mkv" x-tooltip="Upload supporting documents related to the Project." />
                    <p class="form-note">Upload any relevant documents related to the Project, such as reports or analysis.</p>
                </div>
                
                
            </div>
            {% if user.is_superuser %}
            <div class="sm:col-span-2 mt-3">
                <button type="submit" class="btn btn-primary">Add Project</button>
            </div>
            {% endif %}
        </form>
    </div>
</div>
<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 %}