{% 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">INSTRUCTIONS AND ABOUT INDICATORS:</h5>
<p class="text-white-dark text-[15px] mb-3.5">To ensure that your indicators are clear, measurable, and effective, please follow these guidelines when filling out the form:</p>

<p class="text-white-dark text-[15px] mb-3.5">
    <strong>Indicator Name:</strong> Provide a concise and descriptive name for your indicator. This name should clearly reflect what the indicator measures, such as "Increase in literacy rate" or "Reduction in malnutrition levels". A precise name helps in easily identifying and communicating the purpose of the indicator.
</p>

<p class="text-white-dark text-[15px] mb-3.5">
    <strong>Measure Type:</strong> Select whether the indicator is quantitative (measurable in numbers) or qualitative (descriptive). Quantitative indicators provide numeric data, while qualitative indicators provide descriptive insights. This choice will help in determining the appropriate methods for data collection and analysis.
</p>

<p class="text-white-dark text-[15px] mb-3.5">
    <strong>Measure Unit:</strong> Choose the unit of measure that best fits your indicator, such as "%", "Ratio", or "Level of Satisfaction". This unit will standardize the measurement and make it easier to compare and interpret data.
</p>

<p class="text-white-dark text-[15px] mb-3.5">
    <strong>Baseline Value:</strong> Enter the value recorded before the implementation of your intervention. This baseline value is crucial as it serves as a reference point against which future changes will be measured.
</p>

<p class="text-white-dark text-[15px] mb-3.5">
    <strong>Target Value:</strong> Specify the value you aim to achieve with your intervention. This target value helps in setting clear goals and assessing the success of the intervention.
</p>

<p class="text-white-dark text-[15px] mb-3.5">
    <strong>Description:</strong> Provide a detailed description of the indicator, including its purpose and how it will be measured. This description offers context and helps ensure that all stakeholders understand the indicator's role.
</p>

<p class="text-white-dark text-[15px] mb-3.5">
    <strong>Relevance:</strong> Explain how the indicator is relevant to your project or program. This explanation should demonstrate why the indicator is important and how it aligns with your overall goals.
</p>

<p class="text-white-dark text-[15px] mb-3.5">
    <strong>Adequacy:</strong> Describe how the indicator provides sufficient information on performance. This section should explain why the indicator is effective in measuring progress towards your goals.
</p>

<p class="text-white-dark text-[15px] mb-3.5">
    <strong>Economic:</strong> Indicate whether the indicator can be measured at a reasonable cost. Economic indicators are crucial for ensuring that measurement efforts are financially sustainable.
</p>

<p class="text-white-dark text-[15px] mb-3.5">
    <strong>Monitorable:</strong> Confirm if the indicator is easily monitored and amenable to independent validation. This ensures that the indicator can be tracked reliably and its results can be independently verified.
</p>
<span style="color:red; font-size: small; font-style: italic;">Please ensure that all fields are filled out accurately and completely to facilitate effective monitoring and evaluation.</span>
</div>
{% include "backend/apps/quicknav.html" %}

<br/>
    <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 Indicator</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 Indicator</h6>
            <div class="flex flex-col sm:flex-row">
                <div class="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <div class="col-span-2">
                        <label for="name">Indicator Name</label>
                        <input id="name" name="name" type="text" placeholder="(**Enter indicator name**)" class="form-input" x-tooltip="Enter the name of the indicator. Example: 'Increase in literacy rate'." required />
                    </div>
                    <div>
                        <label for="measure_type">Measure Type</label>
                        <select id="measure_type" name="measure_type" class="form-select" x-tooltip="Choose whether the measure is quantitative or qualitative." required>
                            {% for type in measure_type_choices %}
                                <option value="{{ type.0 }}">{{ type.1 }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="measure_unit">Measure Unit</label>
                        <select id="measure_unit" name="measure_unit" class="form-select" x-tooltip="Choose the unit of measure for this indicator. Example: '%', 'Ratio', 'Level of Satisfaction', etc." required>
                            {% for unit in measure_unit_choices %}
                                <option value="{{ unit.0 }}">{{ unit.1 }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="data_source">Data Source</label>
                        <select id="data_source" name="data_source" class="form-select" x-tooltip="Specify the source of data used for this indicator. Example: 'Survey', 'Administrative Data'." required>
                            {% for unit in data_source_choices %}
                                <option value="{{ unit.0 }}">{{ unit.1 }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="baseline">Baseline Value (Optional)</label>
                        <input id="baseline" name="baseline" type="text"  placeholder="(**Enter baseline value**)" class="form-input" x-tooltip="Enter the baseline value before the intervention. Example: '50%' for a literacy rate."  />
                    </div>
                    <div>
                        <label for="target">Target Value (Optional)</label>
                        <input id="target" name="target" type="text"  placeholder="(**Enter target value**)" class="form-input" x-tooltip="Enter the target value that is hoped to be achieved. Example: '75%' for a literacy rate."  />
                    </div>

                    <div>
                        <label for="is_target_achieved">Is Target Achieved</label>
                        <div class="flex">
                            <input id="is_target_achieved" name="economic_text" type="text" placeholder="Indicate whether the target for this indicator has been achieved. Example: 'True' if the target value has been met or exceeded. →" class="form-input ltr:rounded-r-none rtl:rounded-l-none" x-tooltip="Indicate whether the target for this indicator has been achieved. Example: 'True' if the target value has been met or exceeded." readonly/>
                            <div class="bg-[#f1f2f3] dark:bg-[#1b2e4b] flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-[#e0e6ed] dark:border-[#17263c]">
                                <input id="economic_checkbox" name="is_target_achieved" type="checkbox" value="true" class="form-checkbox text-warning border-[#e0e6ed] dark:border-white-dark ltr:mr-0 rtl:ml-0"/>
                            </div>
                        </div>
                    </div>
                    <div>
                        <label for="achieved_value">Target Value Achieved (Optional)</label>
                        <input id="achieved_value" name="achieved_value" type="text"  placeholder="(**Enter target value**)" class="form-input" x-tooltip="Enter the target value that is achieved. Example: '75%' for a literacy rate."  />
                    </div>
                    <div>
                        <label for="economic">Economic</label>
                        <div class="flex">
                            <input id="economic" name="economic_text" type="text" placeholder="Can it be measured at a reasonable cost? Check this box if yes. →" class="form-input ltr:rounded-r-none rtl:rounded-l-none" x-tooltip="Indicate whether this indicator can be measured at a reasonable cost." readonly/>
                            <div class="bg-[#f1f2f3] dark:bg-[#1b2e4b] flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-[#e0e6ed] dark:border-[#17263c]">
                                <input id="economic_checkbox" name="economic" type="checkbox" value="true" class="form-checkbox text-warning border-[#e0e6ed] dark:border-white-dark ltr:mr-0 rtl:ml-0"/>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <label for="monitorable">Monitorable</label>
                        <div class="flex">
                            <input id="monitorable" name="monitorable_text" type="text" placeholder="Is it easy to monitor and verify independently? Check this box if yes. →" class="form-input ltr:rounded-r-none rtl:rounded-l-none" x-tooltip="Indicate whether this indicator is easily monitored and amenable to independent validation." readonly/>
                            <div class="bg-[#f1f2f3] dark:bg-[#1b2e4b] flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-[#e0e6ed] dark:border-[#17263c]">
                                <input id="monitorable_checkbox" name="monitorable" type="checkbox" value="true" class="form-checkbox text-warning border-[#e0e6ed] dark:border-white-dark ltr:mr-0 rtl:ml-0"/>
                            </div>
                        </div>
                    </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 indicator**)" x-tooltip="Provide a detailed description of the indicator. Example: 'This indicator measures the percentage increase in literacy among adults.'" required></textarea>
                    </div>
                    <div class="col-span-2">
                        <label for="notes">Notes</label>
                        <textarea id="notes" name="notes" class="w-full" rows="5" placeholder="(**Describe any lessons learned from the process of achieving (or not achieving) this indicator. Example: 'Need to increase community engagement for better outcomes.'**)" x-tooltip="Describe any lessons learned from the process of achieving (or not achieving) this indicator. Example: 'Need to increase community engagement for better outcomes.'"></textarea>
                    </div>
                    <div class="col-span-2">
                        <label for="relevance">Relevance</label>
                        <textarea id="relevance" name="relevance" class="w-full" rows="5" placeholder="(**Explain how this indicator is relevant to the subject and evaluation**)" x-tooltip="Explain how this indicator is relevant to the subject and evaluation. Example: 'Relevant to assessing the impact of education programs on literacy.'" required></textarea>
                    </div>
                    <div class="col-span-2">
                        <label for="adequacy">Adequacy</label>
                        <textarea id="adequacy" name="adequacy" class="w-full" rows="5" placeholder="(**Describe how this indicator provides sufficient information on performance**)" x-tooltip="Describe how this indicator provides sufficient information on performance. Example: 'Adequate to determine the effectiveness of the literacy program.'" required></textarea>
                    </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 %}