{% 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>Partnering Organization:</strong> {{ partnering_organization.name }}:</h5>
        <p class="text-white-dark text-[15px]  mb-3.5">You are <strong>Updating/Editing</strong> {{ partnering_organization.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>Partnering Organization:</strong> {{ partnering_organization.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 Partnering Organization</h6>
            <div class="flex flex-col sm:flex-row">
                <div class="ltr:sm:mr-4 rtl:sm:ml-4 w-full sm:w-2/12 mb-5">
                    <input type="file" id="logo" name="logo" accept="image/*" style="display: none;" onchange="previewImage(event)" {% if not partnering_organization.logo %}required{% endif %}/>
                    <img id="imagePreview" src="{% if partnering_organization.logo %}{{ partnering_organization.logo.url }}{% else %}{% static 'assets/images/upload-logo.jpg' %}{% endif %}" alt="image" class="w-20 h-20 md:w-32 md:h-32 rounded-full object-cover mx-auto cursor-pointer" x-tooltip="Upload logo/Image" data-theme="info">
                    <label for="logo" {% if not partnering_organization.logo %}class="text-red-500"{% endif %}>
                        Upload  logo
                        {% if not partnering_organization.logo %}{% endif %}
                    </label>
                        
                    </div>
                <div class="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <div>
                        <label for="name">Organization Name</label>
                        <input id="name" name="name" type="text" value="{{ partnering_organization.name }}" placeholder="Enter organization name" class="form-input" x-tooltip="Enter the name of the partnering organization. Example: 'Health for All'." required />
                    </div>
                    
                    <div>
                        <label for="type">Organization Type</label>
                        <select id="type" name="type" class="form-select" x-tooltip="Select the type of the organization." required>
                            {% for type in organization_types %}
                            <option value="{{ type.id }}" {% if type.id == partnering_organization.type.id %}selected{% endif %}>{{ type.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="contact_person_name">Contact Person Name</label>
                        <input id="contact_person_name" name="contact_person_name" type="text" value="{% if partnering_organization.contact_person_name %}{{ partnering_organization.contact_person_name }}{% endif %}" placeholder="Enter Contact Person Name" class="form-input" required />
                    </div>
                    
                    <div>
                        <label for="contact_person_phone">Contact Person Phone Number</label>
                        <input id="contact_person_phone" name="contact_person_phone" type="phone" value="{% if partnering_organization.contact_person_phone %}{{ partnering_organization.contact_person_phone }}{% endif %}" placeholder="Enter Contact Person Phone" class="form-input" required/>
                    </div>
                    <div>
                        <label for="contact_person_email">Contact Person Email</label>
                        <input id="contact_person_email" name="contact_person_email" type="email" value="{% if partnering_organization.contact_person_email %}{{ partnering_organization.contact_person_email }}{% endif %}" placeholder="Enter Contact Person Email" class="form-input" required />
                    </div>
                    <div>
                        <label for="website_link">Website Link</label>
                        <input id="website_link" name="website_link" type="url" value="{{ partnering_organization.website_link }}" placeholder="Enter website URL" class="form-input" x-tooltip="Enter the website link for the organization." />
                    </div>
                    
                    <div class="col-span-2">
                        <label for="role_in_project">Role in Project</label>
                        <input id="role_in_project" name="role_in_project" type="text" value="{{ partnering_organization.role_in_project }}" placeholder="Describe the role of the organization in the project" class="form-input" x-tooltip="Describe the role of the organization in the associated project." />
                    </div>
                    <div class="col-span-2">
                        <label for="strategic_importance">Strategic Importance</label>
                        <textarea id="strategic_importance" name="strategic_importance" class="w-full" rows="3" placeholder="Describe the strategic importance of the organization" x-tooltip="Describe the strategic importance of the organization in the context of the project." required>{{ partnering_organization.strategic_importance }}</textarea>
                    </div>
                    <div class="col-span-2">
                        <label for="resource_and_contribution">Resource and Contribution</label>
                        <textarea id="resource_and_contribution" name="resource_and_contribution" class="w-full" rows="3" placeholder="Describe the resources and contributions of the organization" x-tooltip="Describe the resources and contributions of the organization to the project or initiative." required>{{ partnering_organization.resource_and_contribution }}</textarea>
                    </div>
                    
                    
                    <div class="col-span-2">
                        <label for="description">Description</label>
                        <textarea id="description" name="description" class="w-full" rows="5" placeholder="Provide a detailed description of the organization" x-tooltip="Provide a detailed description of the partnering organization." required>{{ partnering_organization.description }}</textarea>
                    </div>
                    
                    <div class="col-span-2">
                        <label for="letter_of_support">Letter of Support</label>
                        <input id="letter_of_support" name="letter_of_support" type="file" class="form-input" multiple accept=".pdf" x-tooltip="Upload any letters of support associated with the organization." />
                        <p class="form-note">Upload any relevant letters of support in PDF format.</p>
                        <p class="text-success" id="letter_of_support_file_name" class="form-note"></p>
                        {% if partnering_organization.letter_of_support.all %}
                            <ul class="mt-2">
                                {% for document in partnering_organization.letter_of_support.all %}
                                    <li><a href="{{ document.file.url }}" target="_blank">{{ document.file.name }}</a></li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </div>
                    
                    <div class="col-span-2">
                        <label for="partnership_document">Partnership Document</label>
                        <input id="partnership_document" name="partnership_document" type="file" class="form-input" multiple accept=".pdf" x-tooltip="Upload any partnership documents associated with the organization." />
                        <p class="form-note">Upload any relevant partnership documents in PDF format.</p>
                        <p class="text-success" id="partnership_document_file_name" class="form-note"></p>
                        {% if partnering_organization.partnership_document.all %}
                            <ul class="mt-2">
                                {% for document in partnering_organization.partnership_document.all %}
                                    <li><a href="{{ document.file.url }}" target="_blank">{{ document.file.name }}</a></li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </div>
                    
                </div>
            </div>
            {% if user.is_superuser %}
            <div class="sm:col-span-2 mt-3">
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
            {% endif %}
        </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") || "",
            });
        });
    });
    // JavaScript to trigger file input click event when image is clicked
    document.querySelector('.w-20').addEventListener('click', function() {
        document.getElementById('logo').click();
    });
    // Function to preview the selected image logo
    function previewImage(event) {
        const preview = document.getElementById('imagePreview');
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
        }

        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = "{{webdata.cover_logo.url}}";
        }
    }
    
    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('letter_of_support');
    showUploadedFileName('partnership_document');
</script>

{% endblock %}