{% extends 'html/base.html' %}

{% load static %}

{% block title %} Ajouter un rapport général {% endblock %}

{% block content %}
    <!-- Page Title -->
    <div class="page-title">
        <h1> Ajouter un rapport général </h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"> <a href="{% url 'home' %}">Accueil</a> / <a href="{% url 'list_general_reports_view' %}"> Liste des rapport généraux</a> / Ajouter </li>
            </ol>
        </nav>
    </div>
    <!-- End Page Title -->

    <div>
        {% if form.errors%}
            {% for error in form.errors %}
                <p class="text-danger"> {{ error }} </p>
            {% endfor %}
        {% endif %}
    </div>

    <!-- START Main Content -->
    <div class="col-lg-12">
        <div class="row">
            <div class="col-12">
                <div class="card top-selling overflow-auto p-5">
                    <form action="" method="post">
                        {% csrf_token %}
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-4 mt-2 mb-2">
                                    <p class="mb-0"> {{ form.sites.label }} : </p>
                                    <p class="text-muted mb-0"> {{ form.sites }} </p>
                                </div>
                                <div class="col-sm-2 mt-2 mb-2">
                                    <p class="mb-0"> {{ form.age_min.label }} : </p>
                                    <p class="text-muted mb-0"> {{ form.age_min }} </p>
                                </div>
                                <div class="col-sm-2 mt-2 mb-2">
                                    <p class="mb-0"> {{ form.age_max.label }} : </p>
                                    <p class="text-muted mb-0"> {{ form.age_max }} </p>
                                </div>
                                <div class="col-sm-4 mt-2 mb-2">
                                    <p class="mb-0"> {{ form.date.label }} : </p>
                                    <p class="text-muted mb-0"> {{ form.date }} </p>
                                </div>
                                <div class="col-sm-12 mt-2 mb-2">
                                    <p class="mb-0"> {{ form.patologies.label }} : </p>
                                    <p class="text-muted mb-0"> {{ form.patologies }} </p>
                                </div>
                                <div class="col-sm-4 mt-2 mb-2">
                                    <p class="mb-0"> {{ form.number_of_patients_consulted.label }} : </p>
                                    <p class="text-muted mb-0"> {{ form.number_of_patients_consulted }} </p>
                                </div>
                                <div class="col-sm-2 mt-2 mb-2">
                                    <p class="mb-0"> {{ form.number_of_women.label }} : </p>
                                    <p class="text-muted mb-0"> {{ form.number_of_women }} </p>
                                </div>
                                <div class="col-sm-2 mt-2 mb-2">
                                    <p class="mb-0"> {{ form.number_of_men.label }} : </p>
                                    <p class="text-muted mb-0"> {{ form.number_of_men }} </p>
                                </div>
                                <div class="col-sm-4 mt-2 mb-2">
                                    <p class="mb-0"> {{ form.patient_to_follow.label }} : </p>
                                    <p class="text-muted mb-0"> {{ form.patient_to_follow }} </p>
                                </div>
                                <div class="col-sm-6 mt-2 mb-2">
                                    <p class="mb-0"> {{ form.diagnosis.label }} : </p>
                                    <p class="text-muted mb-0"> {{ form.diagnosis }} </p>
                                </div>
                                <div class="col-sm-6 mt-2 mb-2">
                                    <p class="mb-0"> {{ form.referred_patient.label }} : </p>
                                    <p class="text-muted mb-0"> {{ form.referred_patient }} </p>
                                </div>
                                <div class="col-sm-12 mt-2 mb-2">
                                    <p class="mb-0"> {{ form.recommendations.label }} : </p>
                                    <p class="text-muted mb-0"> {{ form.recommendations }} </p>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-start">
                            <button type="button" class="btn btn-secondary btn-sm mt-3 mx-2" onclick="window.location.href='{% url "list_general_reports_view" %}'">Retour</button>
                            <button type="submit" class="btn btn-primary btn-custom btn-sm mt-3 mx-2">Enregistrer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- END Main Content -->

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get all select elements with the multiple attribute
            const selectElements = document.querySelectorAll('select[multiple]');
            
            // Exit the script if no select elements are found
            if (selectElements.length === 0) return;
        
            selectElements.forEach(selectElement => {
                // Create a container for the custom select box
                const container = document.createElement('div');
                container.classList.add('custom-select-container');
        
                // Create a selected items display area
                const selectedList = document.createElement('div');
                selectedList.classList.add('selected-list');
                container.appendChild(selectedList);
        
                // Create a dropdown list for options
                const dropdownList = document.createElement('div');
                dropdownList.classList.add('dropdown-list');
                container.appendChild(dropdownList);
        
                // Populate dropdown list with options
                Array.from(selectElement.options).forEach(option => {
                    const item = document.createElement('div');
                    item.classList.add('dropdown-item');
                    item.textContent = option.text;
                    item.dataset.value = option.value;
        
                    // Highlight selected item
                    if (option.selected) {
                        item.classList.add('selected');
                    }
        
                    item.onclick = () => toggleSelection(option, item);
                    dropdownList.appendChild(item);
                });
        
                // Insert the custom select container before the original select element and hide the original
                selectElement.parentNode.insertBefore(container, selectElement);
                selectElement.style.display = 'none';
        
                // Show or hide dropdown list when clicking on the container
                container.addEventListener('click', (event) => {
                    event.stopPropagation(); // Prevent click from bubbling up to document
                    dropdownList.style.display = dropdownList.style.display === 'none' ? 'block' : 'none';
                });
        
                // Toggle selection in the select element and update display
                function toggleSelection(option, item) {
                    const isSelected = selectElement.querySelector(`option[value="${option.value}"]`).selected;
                    if (isSelected) {
                        // Deselect option
                        selectElement.querySelector(`option[value="${option.value}"]`).selected = false;
                        item.classList.remove('selected');
                        removeSelectedItem(option.text);
                    } else {
                        // Select option
                        selectElement.querySelector(`option[value="${option.value}"]`).selected = true;
                        item.classList.add('selected');
                        addSelectedItem(option.text);
                    }
                }
        
                // Add item to the selected list
                function addSelectedItem(text) {
                    if (!Array.from(selectedList.children).some(item => item.textContent === text)) {
                        const item = document.createElement('div');
                        item.classList.add('selected-item');
                        item.textContent = text;
                        selectedList.appendChild(item);
                    }
                }
        
                // Remove item from the selected list
                function removeSelectedItem(text) {
                    const items = Array.from(selectedList.getElementsByClassName('selected-item'));
                    items.forEach(item => {
                        if (item.textContent === text) {
                            selectedList.removeChild(item);
                        }
                    });
                }
        
                // Close dropdown if clicked outside
                document.addEventListener('click', (event) => {
                    if (!container.contains(event.target)) {
                        dropdownList.style.display = 'none';
                    }
                });
        
                // Prevent dropdown from closing on option click
                dropdownList.addEventListener('click', (event) => {
                    event.stopPropagation(); // Prevent click from bubbling up to container
                });
        
                // Initial population of selected items
                Array.from(selectElement.options).forEach(option => {
                    if (option.selected) {
                        addSelectedItem(option.text);
                        const dropdownItem = Array.from(dropdownList.children).find(item => item.dataset.value === option.value);
                        if (dropdownItem) {
                            dropdownItem.classList.add('selected');
                        }
                    }
                });
            });
        });
    </script>

    {% if messages %}
        <!-- Toast Container code -->
        <div class="toast-container position-fixed top-0 mt-5 end-0 p-3">
            <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                    <img src="{% static 'childrenSunTheme/assets/img/ZAM_LOGO.png' %}" class="img-fluid rounded me-2 h-2" alt="Icon image" style="height: 1.2rem;">
                    <strong class="me-auto">Ziguinchor Assistance Médicale</strong>
                    <small>{% now "Y-m-d G:i:s" %}</small>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    {% for message in messages %}
                        {% if message.tags == "success" %}
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% elif message.tags == "info" %}
                            <div class="alert alert-info alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% elif message.tags == "warning" %}
                            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% elif message.tags == "error" %}
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endif %}

{% endblock %}