{% 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>
        <br/>
        {% if not beneficiaries.exists and not resources.exists %}
            <p>No Beneficiaries or Resources found. Please add them before proceeding.</p>
            <br/>
            <div class="mt-6 flex flex-wrap items-center gap-2 sm:mt-0">
                <a href="{% url 'add_beneficiary' %}" class="btn btn-outline-primary">Add Beneficiaries</a> 
            </div>
            <br/>
            <div class="mt-6 flex flex-wrap items-center gap-2 sm:mt-0">
                <a href="{% url 'add_resource' %}" class="btn btn-outline-secondary">Add Resources</a>
            </div>
        {% elif not beneficiaries.exists %}
            <p>No Beneficiaries found. Please add them before proceeding.</p>
            <br/>
            <div class="mt-6 flex flex-wrap items-center gap-2 sm:mt-0">
                <a href="{% url 'add_beneficiary' %}" class="btn btn-outline-primary">Add Beneficiaries</a>
            </div>
        {% elif not resources.exists %}
            <p>No Resources found. Please add them before proceeding.</p>
            <br/>
            <div class="mt-6 flex flex-wrap items-center gap-2 sm:mt-0">
                <a href="{% url 'add_resource' %}" class="btn btn-outline-secondary">Add Resources</a>
            </div>
        
        {% else %}
        <h5 class="text-dark text-lg font-semibold mb-3.5 dark:text-white-light">INSTRUCTIONS:</h5>

        <p class="text-gray-500 dark:text-white-light"><p class="text-white-dark text-[15px] mb-3.5">Please provide accurate and detailed information for the activity. Ensure all fields are completed to the best of your ability.</p>
        <span style="color:red; font-size: small; font-style: italic;">Note: All fields are required unless otherwise stated.</span>

            <p class="text-primary font-semibold hover:underline group">1. Activity Name: Enter the name of the activity.</p>        
            <p class="text-primary font-semibold hover:underline group">2. Status: Select the current status of the activity.</p>
            <p class="text-primary font-semibold hover:underline group">3. Start Date: Specify the start date of the activity.</p>
            <p class="text-primary font-semibold hover:underline group">4. End Date: Specify the end date of the activity.</p>
            <p class="text-primary font-semibold hover:underline group">5. Goals and Objectives: Define the goals and objectives of the activity.</p>
            <p class="text-primary font-semibold hover:underline group">6. User Responsible: Choose the user responsible for overseeing the implementation.</p>
            <p class="text-primary font-semibold hover:underline group">7. Inputs Needed: List the inputs required for this activity.</p>    
            <p class="text-primary font-semibold hover:underline group">8. Outputs Needed to Achieve Outcomes: Specify the outputs needed.</p>    
            <p class="text-primary font-semibold hover:underline group">9. Outcomes to be Achieved: Describe the outcomes aimed for.</p>    
            <p class="text-primary font-semibold hover:underline group">10. Impact: Describe the long-term impact of the activity.</p>
            <p class="text-primary font-semibold hover:underline group">11. Strategy: Outline the strategy for implementation.</p>    
            <p class="text-primary font-semibold hover:underline group">12. How Activity Will Be Carried Out: Explain how the activity will be executed.</p>    
            <p class="text-primary font-semibold hover:underline group">13. Cost: Enter the total cost of the activity.</p>    
            <p class="text-primary font-semibold hover:underline group">14. Resources: Choose resources required for this activity.</p>
            
    </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 Activity</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 Activity</h6>
            <div class="flex flex-col sm:flex-row">
                <div class="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <!-- Activity Name -->
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Activity Name <span style="color:red;">*</span></label>
                        <input id="name" name="name" type="text" placeholder="(**Enter activity name**)" class="form-input" x-tooltip="Enter the name of the activity. Example: Community Training on Health Education." required />
                    </div>

                    <!-- Status -->
                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Status <span style="color:red;">*</span></label>
                        <select id="status" name="status" class="form-select" x-tooltip="Choose the current status of the activity." required>
                            {% for status_choice in status_choices %}
                                <option value="{{ status_choice.0 }}">{{ status_choice.1 }}</option>
                            {% endfor %}
                        </select>
                    </div>
    
                    <!-- User Responsible -->
                    <div>
                        <label for="user_responsible" class="block text-sm font-medium text-gray-700 dark:text-gray-300">User Responsible  <span style="color:red;">*</span></label>
                        <select id="user_responsible" name="user_responsible" class="form-select" x-tooltip="Assign the user responsible for overseeing this activity." required>
                            {% for user in users %}
                                <option value="{{ user.id }}">{{ user.get_full_name }} - {{user.email}}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Cost -->
                    <div>
                        <label for="cost" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Cost  <span style="color:red;">*</span></label>
                        <input id="cost" name="cost" type="number" step="0.01" placeholder="(**Enter the cost**)" class="form-input" x-tooltip="Enter the estimated cost of the activity. Example: '1500.00'." required />
                    </div>
    
                    <!-- Start Date -->
                    <div>
                        <label for="start_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Start Date  <span style="color:red;">*</span></label>
                        <input id="start_date" name="start_date" type="date" placeholder="(**Enter start date**)" class="form-input" x-tooltip="Specify the start date of the activity. Example: '2024-08-01'." required />
                    </div>
    
                    <!-- End Date -->
                    <div>
                        <label for="end_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">End Date  <span style="color:red;">*</span></label>
                        <input id="end_date" name="end_date" type="date" placeholder="(**Enter end date**)" class="form-input" x-tooltip="Specify the end date of the activity. Example: '2024-08-05'." required />
                    </div>

                    <!-- Beneficiaries -->
                    <div>
                        <label for="beneficiaries" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Beneficiaries  <span style="color:red;">*</span></label>
                        <select id="beneficiaries" name="beneficiaries" multiple class="form-select" x-tooltip="Choose beneficiaries of this activity." required>
                            {% 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 Beneficiary</a>

                    </div>
    
                    <!-- Stakeholders -->
                    <div>
                        <label for="stakeholders" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Stakeholders  <span style="color:red;">*</span></label>
                        <select id="stakeholders" name="stakeholders" multiple class="form-select" x-tooltip="Choose stakeholders involved in this activity." required>
                            {% 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 Stakeholder</a>

                    </div>

                    <!-- Resources -->
                    <div class="col-span-2">
                        <label for="resources" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Resources  <span style="color:red;">*</span></label>
                        <select id="resources" name="resources" multiple class="form-select" x-tooltip="Choose and allocate all resources required for this activity." required>
                            {% for resource in resources %}
                                <option value="{{ resource.id }}">{{ resource.name }}</option>
                            {% endfor %}
                        </select>
                    <a href="{% url 'add_resource' %}" target="_blank" class="btn btn-outline-info">Add Resource</a>

                    </div>
    
                    <!-- Goals and Objectives -->
                    <div class="col-span-2">
                        <label for="goals_and_objectives" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Goals and Objectives  <span style="color:red;">*</span></label>
                        <textarea id="goals_and_objectives" name="goals_and_objectives" class="w-full" rows="5" placeholder="(**Define the goals and objectives of this activity" x-tooltip="Define the goals and objectives of this activity. Example: 'To increase awareness about health hygiene practices.**'" required></textarea>
                    </div>
    
                    <!-- Inputs Needed -->
                    <div class="col-span-2">
                        <label for="inputs_needed" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Inputs Needed  <span style="color:red;">*</span></label>
                        <textarea id="inputs_needed" name="inputs_needed" class="w-full" rows="5" placeholder="(**Describe the inputs needed for this activity**)" x-tooltip="Vividly Describe the inputs needed for this activity. Example: 'Training materials, projectors, etc.'" required></textarea>
                    </div>
    
                    <!-- Outputs Needed to Achieve Outcomes -->
                    <div class="col-span-2">
                        <label for="outputs_needed_to_achieve_outcomes" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Outputs Needed to Achieve Outcomes  <span style="color:red;">*</span></label>
                        <textarea id="outputs_needed_to_achieve_outcomes" name="outputs_needed_to_achieve_outcomes" class="w-full" rows="5" placeholder="(**List the outputs needed to achieve the desired outcomes**)" x-tooltip="List the outputs needed to achieve the desired outcomes of this activity. Example: 'Reports, presentations, etc.'" required></textarea>
                    </div>
    
                    <!-- Outcomes to be Achieved -->
                    <div class="col-span-2">
                        <label for="outcomes_to_be_achieved" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Outcomes to be Achieved  <span style="color:red;">*</span></label>
                        <textarea id="outcomes_to_be_achieved" name="outcomes_to_be_achieved" class="w-full" rows="5" placeholder="(**Specify the outcomes to be achieved**)" x-tooltip="Vividly  Specify the outcomes to be achieved. Example: 'Improved health practices in the community.'" required></textarea>
                    </div>
    
                    <!-- Impact -->
                    <div class="col-span-2">
                        <label for="impact" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Impact  <span style="color:red;">*</span></label>
                        <textarea id="impact" name="impact" class="w-full" rows="5" placeholder="(**Describe the expected impact of the activity**)" x-tooltip="Vividly Describe the expected impact of the activity. Example: 'Increased health awareness and improved community health.'" required></textarea>
                    </div>
    
                    <!-- Strategy -->
                    <div class="col-span-2">
                        <label for="strategy" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Strategy  <span style="color:red;">*</span></label>
                        <textarea id="strategy" name="strategy" class="w-full" rows="5" placeholder="(**Outline the strategy for the activity**)" x-tooltip="Vividly Outline the strategy for the activity. Example: 'Conduct workshops, distribute materials, etc.'" required></textarea>
                    </div>
    
                    <!-- How Activity Will be Carried Out -->
                    <div class="col-span-2">
                        <label for="how_activity_will_be_carried_out" class="block text-sm font-medium text-gray-700 dark:text-gray-300">How Activity Will be Carried Out  <span style="color:red;">*</span></label>
                        <textarea id="how_activity_will_be_carried_out" name="how_activity_will_be_carried_out" class="w-full" rows="5" placeholder="(**Vividly Explain how the activity will be carried out**)" x-tooltip="Explain how the activity will be carried out. Example: 'Through a series of community meetings and workshops.'" required></textarea>
                    </div>
    
                    <!-- Supporting Documents -->
                    <div class="col-span-2">
                        <label for="support_document" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Supporting Documents</label>
                        <input id="support_document" name="support_document" type="file" multiple accept=".pdf,.doc,.csv,.docx,.xls,.txt,.xlsx,image/*,.mp4,.mkv" class="form-input" x-tooltip="Upload any supporting documents related to the activity." />
                    </div>
    
                    <!-- Submit Button -->
                    {% if user.is_superuser %}
                    <div class="col-span-2 text-right">
                        <button type="submit" class="btn btn-primary">Add Activity</button>
                    </div>
                    {% endif %}
                </div>
            </div>
        </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 %}