{% 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>
        <h5 class="text-dark text-lg font-semibold mb-3.5 dark:text-white-light"><strong>ACTIVITY:</strong> {{ activity.name }}:</h5>
        <p class="text-white-dark text-[15px]  mb-3.5">You are <strong>Updating/Editing</strong> {{ activity.name }}</p>
        <span style="color:red; font-size: small; font-style: italic;"> Proceed </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"><strong>ACTIVITY:</strong> {{ activity.name }}</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">Edit 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" >Activity Name  <span style="color:red;">*</span></label>
                        <input id="name" name="name" type="text" placeholder="Enter activity name" class="form-input" value="{{ activity.name }}" x-tooltip="Enter the name of the activity. Example: Community Training on Health Education." required />
                    </div>

                    <!-- Status -->
                    <div>
                        <label for="status" >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 }}" {% if status_choice.0 == activity.status %}selected{% endif %}>{{ status_choice.1 }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- User Responsible -->
                    <div>
                        <label for="user_responsible" >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 }}" {% if user.id == activity.user_responsible.id %}selected{% endif %}>{{ user.get_full_name }} - {{user.email}}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Cost -->
                    <div>
                        <label for="cost" >Cost  <span style="color:red;">*</span></label>
                        <input id="cost" name="cost" type="number" step="0.01" placeholder="Enter the cost" class="form-input" value="{{ activity.cost }}" x-tooltip="Enter the estimated cost of the activity. Example: '1500.00'." required />
                    </div>
    
                    <!-- Start Date -->
                    <div>
                        <label for="start_date" >Start Date  <span style="color:red;">*</span></label>
                        <input id="start_date" name="start_date" type="date" placeholder="Enter start date" class="form-input" value="{{ activity.start_date|date:'Y-m-d' }}" x-tooltip="Specify the start date of the activity. Example: '2024-08-01'." required />
                    </div>
    
                    <!-- End Date -->
                    <div>
                        <label for="end_date" >End Date  <span style="color:red;">*</span></label>
                        <input id="end_date" name="end_date" type="date" placeholder="Enter end date" class="form-input" value="{{ activity.end_date|date:'Y-m-d' }}" x-tooltip="Specify the end date of the activity. Example: '2024-08-05'." required />
                    </div>

                    <!-- Stakeholders -->
                    <div>
                        <label for="stakeholders" >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 }}" {% if stakeholder in activity.stakeholders.all %}selected{% endif %}>{{ stakeholder.name }}</option>
                            {% endfor %}
                        </select>
                        
                    </div>
    
                    <!-- Beneficiaries -->
                    <div>
                        <label for="beneficiaries" >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 }}" {% if beneficiary in activity.beneficiaries.all %}selected{% endif %} >{{ beneficiary.name }}</option>
                            {% endfor %}
                        </select>
                        
                    </div>

                    <!-- Resources -->
                    <div class="col-span-2">
                        <label for="resources" >Resources <span style="color:red;">*</span></label>
                        <select name="resources" multiple class="form-select" required>
                            {% for resource in resources %}
                            <option value="{{ resource.id }}" {% if resource in activity.resources.all %}selected{% endif %}>{{ resource.name }}</option>
                            {% endfor %}
                        </select>

                    </div>
    
                    <!-- Goals and Objectives -->
                    <div class="col-span-2">
                        <label for="goals_and_objectives" >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>{{ activity.goals_and_objectives }}</textarea>
                    </div>
    
                    
    
                    <!-- Inputs Needed -->
                    <div class="col-span-2">
                        <label for="inputs_needed" >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="Describe the inputs needed for this activity. Example: 'Training materials, projectors, etc.'" required>{{ activity.inputs_needed }}</textarea>
                    </div>
    
                    <!-- Outputs Needed to Achieve Outcomes -->
                    <div class="col-span-2">
                        <label for="outputs_needed_to_achieve_outcomes" >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>{{ activity.outputs_needed_to_achieve_outcomes }}</textarea>
                    </div>
    
                    <!-- Outcomes to be Achieved -->
                    <div class="col-span-2">
                        <label for="outcomes_to_be_achieved" >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="Specify the outcomes to be achieved. Example: 'Improved health practices in the community.'" required>{{ activity.outcomes_to_be_achieved }}</textarea>
                    </div>
    
                    <!-- Impact -->
                    <div class="col-span-2">
                        <label for="impact" >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="Describe the expected impact of the activity. Example: 'Increased health awareness and improved community health.'" required>{{ activity.impact }}</textarea>
                    </div>
    
                    <!-- Strategy -->
                    <div class="col-span-2">
                        <label for="strategy" >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="Outline the strategy for the activity. Example: 'Conduct workshops, distribute materials, etc.'" required>{{ activity.strategy }}</textarea>
                    </div>
    
                    <!-- How Activity Will be Carried Out -->
                    <div class="col-span-2">
                        <label for="how_activity_will_be_carried_out" >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="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>{{ activity.how_activity_will_be_carried_out }}</textarea>
                    </div>
                    
                    <!-- Supporting Documents -->
                    
                    <div class="col-span-2">
                        <label for="support_document">
                            Click here to<span style="color:blue;" x-tooltip="Upload new Support Document" data-theme="info"> Upload New</span> Support Document 
                        </label>
                        {% if activity.support_document.exists %}
                        <ul>
                            {% for document in activity.support_document.all %}
                            <li>
                        <br/>
                                <a class="text-success flex items-center mt-2" href="{{ document.file.url }}" target="_blank">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" x-tooltip="View {{ document.file.name }}" data-theme="info">
                                        <path opacity="0.5" d="M3.27489 15.2957C2.42496 14.1915 2 13.6394 2 12C2 10.3606 2.42496 9.80853 3.27489 8.70433C4.97196 6.49956 7.81811 4 12 4C16.1819 4 19.028 6.49956 20.7251 8.70433C21.575 9.80853 22 10.3606 22 12C22 13.6394 21.575 14.1915 20.7251 15.2957C19.028 17.5004 16.1819 20 12 20C7.81811 20 4.97196 17.5004 3.27489 15.2957Z" stroke="currentColor" stroke-width="1.5"></path>
                                        <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="1.5"></path>
                                    </svg>
                                    <span class="ml-2">{{ document.file.name }}</span>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                        {% else %}
                        <p>No support documents available.</p>
                        {% endif %}
                        <br/>
                        <input id="support_document" name="support_document" type="file" style="display: none;" class="form-input" multiple accept=".pdf,.doc,.csv,.docx,.xls,.txt,.xlsx,image/*,.mp4,.mkv" />
                        
                        <div class="text-success" id="support_document_file_name"></div>
                        <br/>
                        <p class="form-note">Kindly upload original/scanned documents supporting the information above.</p>
                    </div>
    
                    <!-- Submit Button -->
                     {% if user.is_superuser %}
                    <div class="col-span-2 text-right">
                        <button type="submit" class="btn btn-primary">Update Activity</button>
                    </div>
                    {% endif %}
                </div>
            </div>
        </form>
    </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") || "",
            });
        });
    });
    function showUploadedFileName(inputId) {
        const input = document.getElementById(inputId);
        const fileNameDisplay = document.getElementById(inputId + '_file_name');
    
        input.addEventListener('change', function() {
            const files = input.files;
            if (files.length > 0) {
                const fileNames = Array.from(files).map(file => file.name).join(', and ');
                fileNameDisplay.textContent = 'You have Uploaded: ' + fileNames;
            } else {
                fileNameDisplay.textContent = '';
            }
        });
    }
    
    showUploadedFileName('support_document');
</script>

{% endblock %}