{% 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 beneficiary 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 beneficiary'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 Beneficiary</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 Beneficiary</h6>
            <div class="flex flex-col sm:flex-row">
                <div class="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <div>
                        <label for="name">Beneficiary Name</label>
                        <input id="name" name="name" type="text" placeholder="(**Enter beneficiary name**)" class="form-input" x-tooltip="Enter the full name of the beneficiary, e.g., 'John Doe, Entebe primary school, Family childrens home.'" required />
                    </div>
                    <div>
                        <label for="location">Location</label>
                        <input id="location" name="location" type="text" placeholder="(**Enter location**)" class="form-input" x-tooltip="Specify the geographical location of the beneficiaries. Example: 'Nairobi, Kenya, Kiserian, Kiambu, Loitoktok.'" required />
                    </div>
                    <div>
                        <label for="category">Category</label>
                        <select id="category" name="category" class="form-select" x-tooltip="Choose the category that best describes the beneficiary group." required>
                            {% for category in category_choices %}
                                <option value="{{ category.0 }}">{{ category.1 }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="priority">Priority</label>
                        <select id="priority" name="priority" class="form-select" x-tooltip="Choose the priority level assigned to the beneficiary group." required>
                            {% for priority in priority_choices %}
                                <option value="{{ priority.0 }}">{{ priority.1 }}</option>
                            {% endfor %}
                        </select>
                    </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 beneficiary**)" x-tooltip="Provide additional details about the beneficiary. Example: 'A group of 25 young girls from Nunu primary school in Entebe rural area with limited access to education.'" required></textarea>
                    </div>
                    
                    <div class="col-span-2">
                        <label for="strength">Strength</label>
                        <textarea id="strength" name="strength" class="w-full" rows="5" placeholder="(**Describe the strengths of the beneficiary group**)" x-tooltip="Describe the strengths of the beneficiary group. Example: 'Strong community leadership.'" required></textarea>
                    </div>
                    <div class="col-span-2">
                        <label for="weakness">Weakness</label>
                        <textarea id="weakness" name="weakness" class="w-full" rows="5" placeholder="(**Describe the weaknesses or challenges faced by the beneficiary group**)" x-tooltip="Describe the weaknesses or challenges faced by the beneficiary group. Example: 'Limited financial resources.'" required></textarea>
                    </div>
                    <div class="col-span-2">
                        <label for="opportunities">Opportunities</label>
                        <textarea id="opportunities" name="opportunities" class="w-full" rows="5" placeholder="(**List opportunities available to the beneficiary group**)" x-tooltip="List opportunities available to the beneficiary group. Example: 'Access to government grants.'" required></textarea>
                    </div>
                    <div class="col-span-2">
                        <label for="threats">Threats</label>
                        <textarea id="threats" name="threats" class="w-full" rows="5" placeholder="(**List threats or risks faced by the beneficiary group**)" x-tooltip="List threats or risks faced by the beneficiary group. Example: 'Political instability in the region.'" required></textarea>
                    </div>
                    <div class="col-span-2">
                        <label for="needs">Needs</label>
                        <textarea id="needs" name="needs" class="w-full" rows="5" placeholder="(**Outline the needs of the beneficiary group**)" x-tooltip="Outline the needs of the beneficiary group. Example: 'Access to healthcare services.'" required></textarea>
                    </div>
                    <div class="col-span-2">
                        <label for="when_to_engage">When to Engage</label>
                        <textarea id="when_to_engage" name="when_to_engage" class="w-full" rows="5" placeholder="(**Specify when to engage with the beneficiary group**)" x-tooltip="Specify the appropriate times or phases during the project when the beneficiary group should be engaged. Example: 'During the initial planning phase.'" required></textarea>
                    </div>
                    <div class="col-span-2">
                        <label for="how_to_engage">How to Engage</label>
                        <textarea id="how_to_engage" name="how_to_engage" class="w-full" rows="5" placeholder="(**Describe the methods or approaches for engaging with the beneficiary group**)" x-tooltip="Describe the methods or approaches for engaging with the beneficiary group. Example: 'Community meetings and focus group discussions.'" required></textarea>
                    </div>
                    <div class="col-span-2">
                        <label for="engagement_channels">Engagement Channels</label>
                        <textarea id="engagement_channels" name="engagement_channels" class="w-full" rows="5" placeholder="(**List the communication channels to be used**)" x-tooltip="List the communication channels to be used for engaging with the beneficiary group. Example: 'Email, SMS, in-person meetings.'" required></textarea>
                    </div>
                    <div class="col-span-2">
                        <label for="engagement_frequency">Engagement Frequency</label>
                        <textarea id="engagement_frequency" name="engagement_frequency" class="w-full" rows="5" placeholder="(**Specify how often the beneficiary group will be engaged**)" x-tooltip="Specify how often the beneficiary group will be engaged. Example: 'Monthly check-ins.'" required></textarea>
                    </div>
                    <div class="col-span-2">
                        <label for="support_document">Support 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 documents to verify the cash received, e.g., receipt, bank statement, etc." />
                    </div>
                </div>
            </div>
            {% if user.is_superuser %}
            <div class="sm:col-span-2 mt-3">
                <button type="submit" class="btn btn-primary">Submit</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") || "",
            });
        });
    });
</script>

{% endblock %}