{% 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:</h5>
            <!-- General instructions -->
            <p class="text-white-dark text-[15px] mb-3.5"> Please provide accurate and detailed information for each resource. This ensures that the project has all necessary resources accounted for and helps in budget planning and resource allocation.</p>
            <!-- Important note -->
            <span style="color:red; font-size: small; font-style: italic;"> Note: The total cost will be automatically calculated based on the quantity and unit cost you enter. </span>
            <!-- Detailed guidelines -->
            <p href="#" class="text-primary font-semibold hover:underline group"> 1. Resource Name: Enter the full name of the resource. Be specific to avoid any confusion. For example, instead of "Laptop," specify "HP Pavilion Laptop."</p>
            <p href="#" class="text-primary font-semibold hover:underline group"> 2. Quantity: Specify the exact number of units required. If you need 5 projectors, enter "5."</p>
            <p href="#" class="text-primary font-semibold hover:underline group"> 3. Unit Cost: Enter the cost for a single unit of the resource. Ensure that this figure is accurate to avoid budget discrepancies.</p>
            <p href="#" class="text-primary font-semibold hover:underline group"> 4. Use/Function: Describe how this resource will be used in the project. This helps in understanding its necessity and role in the project.</p>
    
        </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 Resource</h5>
        </div>

        <form method="post" 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 Resource</h6>
            <div class="flex flex-col">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <div >
                        <label for="name" class="form-label">Resource Name</label>
                        <input type="text" id="name" name="name" class="form-input" placeholder="(**Enter resource name**)" required x-tooltip="'Enter the name of the resource. Example: Projector'">
                    </div>
            
                    <div>
                        <label for="number" class="form-label">Quantity</label>
                        <input type="number" id="number" name="number" class="form-input" placeholder="(**Enter quantity**)" required x-tooltip="'Specify the quantity of the resource required. Example: 2'">
                    </div>
            
                    <div>
                        <label for="unit_cost" class="form-label">Unit Cost</label>
                        <input type="number" id="unit_cost" name="unit_cost" class="form-input" placeholder="(**Enter unit cost**)" step="0.01" required x-tooltip="'Enter the unit cost of the resource. Example: 500.00'">
                    </div>
            
                    <div>
                        <label for="use_function" class="form-label">Use/Function</label>
                        <textarea id="use_function" name="use_function" class="form-textarea" placeholder="(**Describe the use or function**)" required x-tooltip="'Describe the use or function of the resource within the project. Example: Used for presentations during training sessions.'"></textarea>
                    </div>
                </div>
            </div>
            {% if user.is_superuser %}
            <div class="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 %}