{% extends 'backend/components/layouts/default.html' %}
{% load static %}

{% block content %}
<div class="panel h-full w-full">

    <!-- 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="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">Najimudu Empowerment Camp Items Registration and Management</h5>

    <h5 class="text-dark text-lg font-semibold mb-3.5 dark:text-white-light">Register Your Items for Security and After-Camp Management</h5>
    
    <p class="text-white-dark text-[15px] mb-3.5">
    To ensure the safety of your belongings and seamless management during and after the camp, please make sure to register all your items. This will help us keep track of everything and ensure smooth organization both during the camp and afterward.
    </p>
    


    
</div>

<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">Register Camp Item</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]" onsubmit="return validateForm()">
            {% csrf_token %}
            <h6 class="text-lg font-bold mb-5">Register Camp Item</h6>
        
            <div class="flex flex-col sm:flex-row">
                <!-- Image Upload Section -->
                <div class="ltr:sm:mr-4 rtl:sm:ml-4 w-full sm:w-2/12 mb-5">
                    <input type="file" id="items" name="items" accept="image/*" style="display: none;" onchange="previewImage(event)" />
                    <label for="items" x-tooltip="Upload Your Camp Items photo" data-theme="info">
                        <img id="imagePreview" src="{% static 'assets/images/upload.jpg' %}" alt="image" class="w-20 h-20 md:w-32 md:h-32 object-cover mx-auto cursor-pointer" />
                        Upload Your Camp Items
                    </label>
                </div>
        
                <!-- Form Fields Section -->
                <div class="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <!-- Item Description -->
                    <div class="col-span-2">
                        <label for="item_description">Item Description:</label>
                        <textarea id="item_description" name="item_description" class="form-input" placeholder="Provide a list of all the items" required></textarea>
                        <span>Provide any additional information that may be relevant to identification of your items.</span>
                    </div>
        
                    <!-- Volunteer Selection -->
                    <div>
                        <label for="volunteer_id">Volunteer:</label>
                        <select id="volunteer_id" name="volunteer_id" class="form-input">
                            <option value="">-- Select Volunteer --</option>
                            {% for volunteer in volunteers %}
                            <option value="{{ volunteer.id }}">{{ volunteer.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
        
                    <!-- Partnering Organization Selection -->
                    <div>
                        <label for="partnering_organization_id">Partnering Organization:</label>
                        <select id="partnering_organization_id" name="partnering_organization_id" class="form-input">
                            <option value="">-- Select Organization --</option>
                            {% for organization in organizations %}
                            <option value="{{ organization.id }}">{{ organization.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
        
                    <!-- Acceptance Checkbox -->
                    <div class="col-span-2">
                        <div class="flex">
                            <input type="checkbox" name="volunteer_agreement_accepted" class="form-checkbox border-[#e0e6ed] dark:border-white-dark" required />
                            <input id="checkLeft" type="text" placeholder="You are responsible for your own belongings, as we are not liable for any loss or mismanagement." class="form-input ltr:rounded-l-none rtl:rounded-r-none" readonly />
                        </div>
                    </div>
                </div>
            </div>
        
            <!-- Submit Button -->
            <div class="sm:col-span-2 mt-3">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </form>
        
    </div>
    <script>
        // Function to preview image before upload
        function previewImage(event) {
            const reader = new FileReader();
            reader.onload = function() {
                const output = document.getElementById('imagePreview');
                output.src = reader.result;
            };
            reader.readAsDataURL(event.target.files[0]);
        }
    
        // Validation function to ensure only one selection is made (either Volunteer or Partnering Organization)
        function validateForm() {
            const volunteer = document.getElementById('volunteer_id').value;
            const organization = document.getElementById('partnering_organization_id').value;
    
            if (volunteer && organization) {
                alert("Please select either a Volunteer or a Partnering Organization, but not both.");
                return false;
            }
    
            if (!volunteer && !organization) {
                alert("Please select either a Volunteer or a Partnering Organization.");
                return false;
            }
    
            return true; // Form can be submitted
        }
    
        // Tooltip initialization
        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 %}