{% 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>Funding Opportunity:</strong> {{ funding_opportunity.title }}:</h5>
        <p class="text-white-dark text-[15px]  mb-3.5">You are <strong>Updating/Editing</strong> {{ funding_opportunity.title }}</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>Funding Opportunity:</strong> {{ funding_opportunity.title }}</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">Update Funding Opportunity</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="image" name="image" accept="image/*" style="display: none;" onchange="previewImage(event)" />
                    {% if funding_opportunity.image %}
                        <img id="imagePreview" src="{{ funding_opportunity.image.url }}" alt="image" class="w-20 h-20 md:w-32 md:h-32 object-cover mx-auto cursor-pointer" x-tooltip="Upload Profile Picture" data-theme="info">
                    {% else %}
                        <img id="imagePreview" src="{% static 'assets/images/upload-img.jpg' %}" alt="image" class="w-20 h-20 md:w-32 md:h-32 object-cover mx-auto cursor-pointer" x-tooltip="Upload Profile Picture" data-theme="info">
                    {% endif %}
                    <label for="image" class="text-red-500">Upload Image</label>
                </div>
                
                <div class="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <!-- Funding Source -->
                    <div class="col-span-2">
                        <label for="funding_source" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Funding Source</label>
                        <select id="funding_source" name="funding_source" class="form-select" x-tooltip="Select the source of funding for this opportunity." required>
                            {% for source in Donor %}
                                <option value="{{ source.id }}" {% if source.id == funding_opportunity.funding_source.id %}selected{% endif %}>{{ source.name }}</option>
                            {% endfor %}
                        </select>
                        <a href="{% url 'add_donor' %}" target="_blank" class="btn btn-outline-secondary">Add Funding Source</a>
                    </div>

                    <!-- Title -->
                    <div>
                        <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Title</label>
                        <input id="title" name="title" type="text" placeholder="Enter funding opportunity title" class="form-input" value="{{ funding_opportunity.title }}" x-tooltip="Enter the title of the funding opportunity. Example: 'Community Health Grant 2024'." required />
                    </div>
        
                    <!-- Theme -->
                    <div>
                        <label for="theme" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Theme</label>
                        <input id="theme" name="theme" type="text" placeholder="Enter the theme of the opportunity" class="form-input" value="{{ funding_opportunity.theme }}" x-tooltip="Specify the theme or focus area of the funding opportunity. Example: 'Health, Education'." required />
                    </div>
        
                    <!-- Status -->
                    {% comment %} <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Status</label>
                        <select id="status" name="status" class="form-select" x-tooltip="Choose the current status of the funding opportunity." required>
                            {% for status_choice in status_choices %}
                                <option value="{{ status_choice.0 }}" {% if status_choice.0 == funding_opportunity.status %}selected{% endif %}>{{ status_choice.1 }}</option>
                            {% endfor %}
                        </select>
                    </div> {% endcomment %}

                    <!-- Status -->
                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Status</label>
                        <select id="funding_status" name="funding_status" class="form-select" x-tooltip="Choose the current status of the funding opportunity." required>
                            {% for status_choice in status_choices %}
                                <option value="{{ status_choice.0 }}" {% if status_choice.0 == funding_opportunity.funding_status %}selected{% endif %}>{{ status_choice.1 }}</option>
                            {% endfor %}
                        </select>
                    </div>

        
                    <!-- Amount -->
                    <div>
                        <label for="amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Amount</label>
                        <input id="amount" name="amount" type="number" step="0.01" placeholder="Enter the amount" class="form-input" value="{{ funding_opportunity.amount }}" x-tooltip="Enter the funding amount available. Example: '50000.00'." required />
                    </div>
        
                    <!-- whatsapp_link -->
                    <div>
                        <label for="whatsapp_link" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Whatsapp Channel link</label>
                        <input id="whatsapp_link" name="whatsapp_link" type="url" placeholder="Enter the Whatsapp Channel link" class="form-input" value="{{ funding_opportunity.whatsapp_link }}" x-tooltip="Enter the Whatsapp Channel link." required />
                    </div>
        
                    <!-- application_link -->
                    <div>
                        <label for="application_link" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Application link</label>
                        <input id="application_link" name="application_link" type="url" placeholder="Enter the Application link" class="form-input" value="{{ funding_opportunity.application_link }}" x-tooltip="Enter the Application link." required />
                    </div>
        
                    <!-- funding_cycle -->
                    <div>
                        <label for="funding_cycle" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Funding Cycle</label>
                        <input id="funding_cycle" name="funding_cycle" type="text" placeholder="Enter the application Funding Cycle" class="form-input" value="{{ funding_opportunity.funding_cycle }}" x-tooltip="Specify the application Funding Cycle." required />
                    </div>
        
                    <!-- Deadline -->
                    <div>
                        <label for="deadline" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Deadline</label>
                        <input id="deadline" name="deadline" type="date" placeholder="Enter the application deadline" class="form-input" value="{{ funding_opportunity.deadline|date:'Y-m-d' }}" x-tooltip="Specify the application deadline. Example: '2024-09-30'." required />
                    </div>

                    <!-- Applicants -->
                    <div class="col-span-2">
                        <label for="applicants" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Funding Applicants</label>
                        <select id="applicants" name="applicants" multiple class="form-select" x-tooltip="Select the Applicants for this opportunity." required>
                            {% for applicant_org in OrganizationType %}
                                <option value="{{ applicant_org.id }}" {% if applicant_org.id in funding_opportunity_applicants_ids %}selected{% endif %}>{{ applicant_org.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
        
                    <!-- Tags -->
                    <div class="col-span-2">
                        <label for="tags" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tags</label>
                        <select id="tags" name="tags" multiple class="form-select" x-tooltip="Select tags relevant to this funding opportunity." required>
                            {% for tag in tags %}
                                <option value="{{ tag.id }}" {% if tag.id in funding_opportunity_tags_ids %}selected{% endif %}>{{ tag.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    
                    <!-- Description -->
                    <div class="col-span-2">
                        <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
                        <textarea id="description" name="description" placeholder="Provide a brief description of the funding opportunity" class="form-input" x-tooltip="Enter a brief description of the funding opportunity." rows="4" required>{{ funding_opportunity.description }}</textarea>
                    </div>
        
                    <!-- grantor_expectations -->
                    <div class="col-span-2">
                        <label for="grantor_expectations" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Grantor Expectations</label>
                        <textarea id="grantor_expectations" name="grantor_expectations" placeholder="Provide the Grantor Expectations" class="form-input" x-tooltip="Enter the Grantor Expectations." rows="4" required>{{ funding_opportunity.grantor_expectations }}</textarea>
                    </div>
        
                    <!-- grantor_goals -->
                    <div class="col-span-2">
                        <label for="grantor_goals" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Grantor Goals</label>
                        <textarea id="grantor_goals" name="grantor_goals" placeholder="Provide the Grantor Goals" class="form-input" x-tooltip="Enter the Grantor Goals." rows="4" required>{{ funding_opportunity.grantor_goals }}</textarea>
                    </div>
        
                    <!-- grantor_priorities -->
                    <div class="col-span-2">
                        <label for="grantor_priorities" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Grantor Priorities</label>
                        <textarea id="grantor_priorities" name="grantor_priorities" placeholder="Provide the Grantor Priorities" class="form-input" x-tooltip="Enter the Grantor Priorities." rows="4" required>{{ funding_opportunity.grantor_priorities }}</textarea>
                    </div>
        
                    <!-- geographic_focus -->
                    <div class="col-span-2">
                        <label for="geographic_focus" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Geographic Focus</label>
                        <textarea id="geographic_focus" name="geographic_focus" placeholder="Provide the Geographic Focus" class="form-input" x-tooltip="Enter the Geographic Focus." rows="4" required>{{ funding_opportunity.geographic_focus }}</textarea>
                    </div>
        
                    <!-- eligibility_criteria -->
                    <div class="col-span-2">
                        <label for="eligibility_criteria" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Eligibility Criteria</label>
                        <textarea id="eligibility_criteria" name="eligibility_criteria" placeholder="Provide the Eligibility Criteria" class="form-input" x-tooltip="Enter the Eligibility Criteria." rows="4" required>{{ funding_opportunity.eligibility_criteria }}</textarea>
                    </div>
        
                    <!-- Submit Button -->
                    {% if user.is_superuser %}
                    <div class="col-span-2 text-right">
                        <button type="submit" class="btn btn-primary">Update Funding Opportunity</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") || "",
            });
        });
    });
    document.querySelector('.w-20').addEventListener('click', function() {
        document.getElementById('image').click();
    });

    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 = "{% static 'assets/images/upload-img.jpg' %}"; 
        }
    }

    document.querySelector('form').addEventListener('submit', function(event) {
        var imageInput = document.getElementById('image');
        if (imageInput.files.length === 0) {
            event.preventDefault(); 
            alert('Please upload an image.');
            imageInput.click(); 
        }
    });
</script>

{% endblock %}