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

{% load static %}

{% block title %} Ajouter un membre {% endblock %}

{% block content %}
    <!-- Page Title -->
    <div class="page-title">
        <h1> Ajouter un membre </h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"> <a href="{% url 'home' %}">Accueil</a> / <a href="{% url 'list_team_members_view' %}"> Liste des membres </a> / Création </strong> </li>
            </ol>
        </nav>
    </div>
    <!-- End Page Title -->

    <!-- Main Content -->
    <div class="col-lg-12">
        <div class="row">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body pt-4">
                                <form action="" method="post">
                                    {% csrf_token %}
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-sm-6 mt-2 mb-2">
                                                <p class="mb-0">{{ form.first_name.label }}:</p>
                                                <p class="text-muted mb-0">{{ form.first_name }}</p>
                                            </div>
                                            <div class="col-sm-6 mt-2 mb-2">
                                                <p class="mb-0">{{ form.last_name.label }}:</p>
                                                <p class="text-muted mb-0">{{ form.last_name }}</p>
                                            </div>
                                            <div class="col-sm-6 mt-2 mb-2">
                                                <p class="mb-0">{{ form.services.label }}:</p>
                                                <p class="text-muted mb-0">{{ form.services }}</p>
                                            </div>
                                            <div class="col-sm-6 mt-2 mb-2">
                                                <p class="mb-0">{{ form.consultation_date.label }}:</p>
                                                <p class="text-muted mb-0">{{ form.consultation_date }}</p>
                                            </div>
                                            <div class="col-sm-6 mt-2 mb-2">
                                                <p class="mb-0">{{ form.phone_number.label }}:</p>
                                                <p class="text-muted mb-0">{{ form.phone_number }}</p>
                                            </div>
                                            <div class="col-sm-6 mt-2 mb-2">
                                                <p class="mb-0">{{ form.manager_phone_number.label }}:</p>
                                                <p class="text-muted mb-0">{{ form.manager_phone_number }}</p>
                                            </div>
                                            <div class="col-sm-6 mt-2 mb-2">
                                                <p class="mb-0">{{ form.personal_email.label }}:</p>
                                                <p class="text-muted mb-0">{{ form.personal_email }}</p>
                                            </div>
                                            <div class="col-sm-6 mt-2 mb-2">
                                                <p class="mb-0">{{ form.manager_email.label }}:</p>
                                                <p class="text-muted mb-0">{{ form.manager_email }}</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_team_members_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>
            </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 %}