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

{% block content %}
{% load custom_tags %}
<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 Climate Health Camp Participant Medical Service Registration</h5>

    
</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 Medical Service Participants attended</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 Medical Service Participants attended </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="participant">Participant</label>
                        <select id="participant" name="participant" class="form-input" required onchange="filterServices()">
                            <option value="">Select a participant</option>
                            {% for participant in participants %}
                                <option value="{{ participant.id }}" data-services="{{ participant|received_services }}">
                                    {{ participant.name }} - ({{ participant.phone }} - {{ participant.email }})
                                </option>  
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="col-span-2">
                        <label for="service">Services</label>
                        <select id="service" name="service" class="form-input" required>
                            {% for service in services %}
                                <option value="{{ service.id }}">{{ service.service_title }}</option>  
                            {% endfor %}
                        </select>
                    </div>

                    <div class="col-span-2">
                        <label for="participant_results">Participant Test Results 
                        <span style="color: #a9a9a9; font-style: italic;">eg Blood Pressure, Temperature, Random Blood Sugar Level...etc</span>
                        </label>
                        <textarea id="participant_results" name="participant_results" class="form-input" rows="7" required placeholder="(**Participant Results from your service/s eg Blood Pressure, Temperature, Random Blood Sugar Level...etc**)" x-tooltip="Describe the results and outcomes of the tests of your service/s."></textarea>
                    </div>
                    
                    <div class="col-span-2">
                        <label for="service_officer_officer_feedback">Notes,  <span style="color: #a9a9a9; font-style: italic;">eg Feedback, Comments, suggestions, prescriptions...etc</span></label>
                        <textarea id="service_officer_officer_feedback" name="service_officer_officer_feedback" rows="7" class="form-input" required placeholder="(**Nurse Notes, Feedback, Comments, Suggestions etc.**)" x-tooltip="Provide feedback from the service officer regarding the results and outcomes from the tests."></textarea>
                    </div>
                    

                    
        
                </div>
            </div>
            
            <div class="sm:col-span-2 mt-3">
                <button type="submit" class="btn btn-primary">Add Participant</button>
            </div>
        </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") || "",
            });
        });
    });
    
    function filterServices() {
        const participantSelect = document.getElementById('participant');
        const serviceSelect = document.getElementById('service');
    
        // Clear the service dropdown options
        serviceSelect.innerHTML = '';
    
        // Get selected participant and associated received services
        const selectedOption = participantSelect.options[participantSelect.selectedIndex];
        const receivedServiceIds = selectedOption.getAttribute('data-services').split(',');
    
        let hasAvailableServices = false;
    
        // Loop through all available services and add only those not received
        {% for service in services %}
            if (!receivedServiceIds.includes("{{ service.id }}")) {
                const option = document.createElement('option');
                option.value = "{{ service.id }}";
                option.text = "{{ service.service_title }}";
                serviceSelect.appendChild(option);
                hasAvailableServices = true;
            }
        {% endfor %}
    
        // If no available services, add a message indicating all services have been received
        if (!hasAvailableServices) {
            const option = document.createElement('option');
            option.text = "User has received this Service.";
            option.disabled = true;
            serviceSelect.appendChild(option);
        }
    }

</script>

{% endblock %}