{% extends 'backend/components/layouts/auth.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>
{% if user_has_volunteer_request %}
<h5 class="text-dark text-lg font-semibold mb-3.5 dark:text-white-light">You have already submitted a volunteer request. Thank you for your interest in volunteering with us! We will review your request and get back to you soon.</h5>
{% else %}

<h5 class="text-dark text-lg font-semibold mb-3.5 dark:text-white-light">Najimudu Empowerment Initiative 2nd Edition Climate Health Camp Volunteer Registration</h5>
<h5 class="text-dark text-lg font-semibold mb-3.5 dark:text-white-light">YOU ARE INVITED!</h5>
<p class="text-white-dark text-[15px]  mb-3.5">✔. Join us for the Climate Health Camp Nexus Campaign.</p>

 <p class="text-white-dark text-[15px]  mb-3.5">✔. From 6th November 2024 to 10th November 2024 </p>

<p class="text-white-dark text-[15px]  mb-3.5">✔. At Full Gospel Churches of Kenya - Kyangombe, Kitengela. </p>

<p class="text-white-dark text-[15px]  mb-3.5">✔. This initiative focuses on the intersection of climate change and public health, offering healthcare services and promoting eco-friendly practices within the community. </p>

<p class="text-white-dark text-[15px]  mb-3.5">✔. We are seeking passionate volunteers to support healthcare delivery, civic education, and environmental sustainability efforts during the event. Be part of this impactful cause and help build a healthier, climate-resilient future!</p>

<p class="text-white-dark text-[15px]  mb-3.5">Deadline : 20th October 2024 11:59pm EAT</p>

        
{% if latest_volunteer_agreement %}
<P>Read our <a href="{{ latest_volunteer_agreement.document.url }}" target="_blank" class="text-primary underline transition hover:text-black dark:hover:text-white">Volunteer Agreement</a></P>
{% endif %}
{% endif %}
    
</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 as a Volunteer</h5>
        </div>
        {% if latest_volunteer_agreement %}
        <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 as a Volunteer</h6>
                <div class="flex flex-col sm:flex-row">
                    <div class="ltr:sm:mr-4 rtl:sm:ml-4 w-full sm:w-2/12 mb-5">
                        <input type="file" id="profile_picture" name="profile_picture" accept="image/*" style="display: none;" onchange="previewImage(event)" />
                    
                        <label for="profile_picture" x-tooltip="Upload Profile Picture" data-theme="info">
                            <img id="imagePreview" src="{% static 'assets/images/Blank-Avatar.png' %}" alt="image" class="w-20 h-20 md:w-32 md:h-32 rounded-full object-cover mx-auto cursor-pointer" />
                            Upload Profile Picture
                        </label>
                    </div> 
                    <div class="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div>
                            <label for="name">Full Name</label>
                            <input id="name" name="name" type="text" class="form-input" required />
                        </div>
                        
                        <div>
                            <label for="phone">Phone Number (WhatsApp Number)</label>
                            <input id="phone" name="phone" type="phone" class="form-input" required/>
                        </div>
                        <div>
                            <label for="email">Email</label>
                            <input id="email" name="email" type="email" class="form-input" required />
                        </div>
                        <div>
                            <label for="volunteer_type">Volunteer Type</label>
                            <select id="volunteer_type" name="volunteer_type" class="form-select" required>
                                {% for volunteer_type in volunteer_types %}
                                    <option value="{{ volunteer_type.0 }}">{{ volunteer_type.1 }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <div>
                            <label for="start_date">Date Today</label>
                            <input id="start_date" name="start_date" type="date" class="form-input" min="2024-11-06" max="2024-11-10" required /><span class="event-dates">(Event dates: November 6th - November 10th, 2024)</span>
                        </div>
                        <div>
                            <label for="end_date">Volunteer End Date</label>
                            <input id="end_date" name="end_date" type="date" class="form-input" min="2024-11-06" max="2024-11-10" required /><span class="event-dates">(Event dates: November 6th - November 10th, 2024)</span>
                        </div>

                        <div class="col-span-2">
                            <label for="role_description">Role in the Camp</label>
                            <textarea id="role_description" name="role_description" class="form-input" placeholder="Provide any relevant information" required></textarea>
                            <span>Role in the Camp.</span>
                        </div>
                        
                        <div class="col-span-2">
                            <label for="additional_info">Additional Info</label>
                            <textarea id="additional_info" name="additional_info" class="form-input" placeholder="Provide any relevant information" required></textarea>
                            <span>Provide any additional information that may be relevant to your application.</span>
                        </div>

                        <div class="col-span-2">
                            <label for="emergency_contact_name">Emergency Contact Name</label>
                            <input id="emergency_contact_name" name="emergency_contact_name" type="text" class="form-input" required />
                        </div>
                        <div>
                            <label for="emergency_contact_phone">Emergency Contact Phone</label>
                            <input id="emergency_contact_phone" name="emergency_contact_phone" type="phone" class="form-input" required />
                        </div>
                        <div>
                            <label for="emergency_contact_email">Emergency Contact Email</label>
                            <input id="emergency_contact_email" name="emergency_contact_email" type="email" class="form-input" required />
                        </div>
                        <div class="col-span-2">
                            <label for="licenses">Licenses and Documents</label>
                            <input id="licenses" name="licenses" type="file" accept="image/*" class="form-input" x-tooltip="Picture of the license." />
                            <p class="form-note">Select multiple Picture of the license.</p>
                        </div>
                        <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 confirm to have read and accepted the volunteer agreement" class="form-input ltr:rounded-l-none rtl:rounded-r-none" readonly />
                            </div>
                            
                        </div>
                        
                    </div>
                </div>
                    
                    <div class="sm:col-span-2 mt-3">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </form>
        {% else %}
        <br />
        <div class="text-center dark:text-white">
            <div class="text-center dark:text-white">
                Volunteer Agreement needed to continue!
            </div>
        </div>
        {% endif %}
    </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") || "",
                });
            });
        });
    
        function validateForm() {
            // Validate dates first
            if (!validateDates()) {
                return false;
            }
    
            // Check if the profile picture is selected
            const profilePictureInput = document.getElementById('profile_picture');
            if (!profilePictureInput.files.length) {
                alert("Please upload a profile picture.");
                return false; // Prevent form submission
            }
    
            return true; // Allow form submission if all checks pass
        }
    
        function validateDates() {
            var startDate = document.getElementById("start_date").value;
            var endDate = document.getElementById("end_date").value;
    
            // Define the event date boundaries
            var eventStartDate = new Date("2024-11-06");
            var eventEndDate = new Date("2024-11-10");
    
            // Convert user inputs to Date objects
            var selectedStartDate = new Date(startDate);
            var selectedEndDate = new Date(endDate);
    
            // Check if start date is after the end date
            if (selectedStartDate > selectedEndDate) {
                alert("End date must be on or after the start date.");
                return false;
            }
    
            // Ensure the start date is within the event dates
            if (selectedStartDate < eventStartDate || selectedStartDate > eventEndDate) {
                alert("Start date must be between November 6th and November 10th, 2024.");
                return false;
            }
    
            // Ensure the end date is within the event dates
            if (selectedEndDate < eventStartDate || selectedEndDate > eventEndDate) {
                alert("End date must be between November 6th and November 10th, 2024.");
                return false;
            }
    
            return true; // All date validations passed
        }
    
        function previewImage(event) {
            const preview = document.getElementById('imagePreview');
            const file = event.target.files[0];
            const reader = new FileReader();
    
            reader.onloadend = function () {
                preview.src = reader.result;
            }
    
            if (file) {
                reader.readAsDataURL(file);
            } else {
                preview.src = "{% static 'assets/images/logo.svg' %}"; // Default image if no file selected
            }
        }
    </script>

{% endblock %}