{% 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>INDICATOR:</strong> {{ indicator.name }}:</h5>
        <p class="text-white-dark text-[15px]  mb-3.5">You are <strong>Updating/Editing</strong> {{ indicator.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>INDICATOR:</strong> {{ indicator.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 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" value="{{ indicator.name }}" placeholder="Indicator name: {{ 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 }}" {% if indicator.measure_type == type.0 %}selected{% endif %}>{{ 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 }}" {% if indicator.measure_unit == unit.0 %}selected{% endif %}>{{ 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="Choose the unit of measure for this indicator. Example: '%', 'Ratio', 'Level of Satisfaction', etc." required>
                            {% for unit in data_source_choices %}
                                <option value="{{ unit.0 }}" {% if indicator.data_source == unit.0 %}selected{% endif %}>{{ unit.1 }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="baseline">Baseline Value (Optional)</label>
                        <input id="baseline" name="baseline" type="text" {% if indicator.baseline %} value="{{ indicator.baseline }}"{% endif %} placeholder="Baseline value{% if indicator.baseline %} : {{ indicator.baseline }}{% endif %}" 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" value="{{ indicator.target }}" 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="achieved_value">Target Value Achieved (Optional)</label>
                        <input id="achieved_value" name="achieved_value" type="text"  value="{{ indicator.achieved_value }}" placeholder="(**Target value**)" class="form-input" x-tooltip="Enter the target value that is 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" value="{{ indicator.is_target_achieved_text }}" placeholder="Indicate whether the target for this indicator has been achieved." class="form-input ltr:rounded-r-none rtl:rounded-l-none" x-tooltip="Indicate whether the target for this indicator has been achieved." />
                            <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" class="form-checkbox text-warning border-[#e0e6ed] dark:border-white-dark ltr:mr-0 rtl:ml-0" {% if indicator.is_target_achieved %}checked{% endif %} />
                            </div>
                        </div>
                    </div>
                    <div>
                        <label for="economic">Economic</label>
                        <div class="flex">
                            <input id="economic" name="economic_text" type="text" value="{{ indicator.economic_text }}" placeholder="Can be Measured at a reasonable cost?" class="form-input ltr:rounded-r-none rtl:rounded-l-none" x-tooltip="Indicate whether this indicator can be measured at a reasonable cost." />
                            <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" class="form-checkbox text-warning border-[#e0e6ed] dark:border-white-dark ltr:mr-0 rtl:ml-0" {% if indicator.economic %}checked{% endif %} />
                            </div>
                        </div>
                    </div>
                    <div>
                        <label for="monitorable">Monitorable</label>
                        <div class="flex">
                            <input id="monitorable" name="monitorable_text" type="text" value="{{ indicator.monitorable_text }}" placeholder="Is easily monitored and amenable to independent validation?" 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." />
                            <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" class="form-checkbox text-warning border-[#e0e6ed] dark:border-white-dark ltr:mr-0 rtl:ml-0" {% if indicator.monitorable %}checked{% endif %} />
                            </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="Detailed description of the indicator. Example: 'This indicator measures the percentage increase in literacy among adults.'" required>{{ indicator.description }}</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." x-tooltip="Lessons learned from the process of achieving (or not achieving) this indicator." required>{{ indicator.notes }}</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>{{ indicator.relevance }}</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>{{ indicator.adequacy }}</textarea>
                    </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") || "",
            });
        });
    });
</script>

{% endblock %}