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

{% block title %}Nos actes{% endblock %}

{% block head %}
    <link rel="icon" href="{{ asset('assets/img/favicon.png') }}" type="image/png">
{% endblock %}

{% block body %}
<!-- About Section -->
<section id="about" class="about section" style="padding:0px!important;">
    <div class="container">
        <div class="">
            <h3 style="font-weight:bold; text-align:center;">Nos actes médicaux</h3>
            <p style="text-align:center;">
                Nos actes médicaux à votre disposition.
            </p>
            <div class="content" data-aos="fade-up" data-aos-delay="100">
                <ul class="row" id="sortable-frontend">
                    {% for acte_medical in actesMedicaux %}
                    
		<li class="col-md-6 col-12 content" style="float:right;" data-id="{{ acte_medical.id }}">
                        {% set icons = ['fa-tooth', 'fa-teeth-open', 'fa-stethoscope', 'fa-x-ray', 'fa-syringe', 'fa-notes-medical'] %}
                            <i class="fa-solid {{ icons[loop.index0 % icons|length] }} me-2" style="color: #8BA8B5 !important; font-size: 1.5rem;"></i>
                        <div>
                            <h5>{{ acte_medical.nom }}</h5>
{% if acte_medical.categorie %}
                                <div class="category-link mt-3">
                                    <i class="fa-solid fa-folder me-2" style="color: #8BA8B5 !important; font-size: 1.5rem;"></i>
                                    <a href="{{ path('app_cas_clinique', { 'categorie': acte_medical.categorie.id }) }}" class="category-link-text">
                                        {{ acte_medical.categorie.categorie }} - Voir les cas cliniques
                                    </a>
                                </div>
                            {% endif %}
                            <p style="text-align:justify;">
                                {{ acte_medical.description }}
                            </p>
                            {% if acte_medical.image %}
                            <img src="{{ asset('upload/images/' ~ acte_medical.image) }}" alt="Image de {{ acte_medical.nom }}" style="max-width: 100%;">
                            {% endif %}
                        </div>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</section><!-- /About Section -->

<style>
    section#about {
        padding: 0px;
    }
</style>

<script>
    $(document).ready(function() {
        // Vérifier si un ordre est sauvegardé dans localStorage
        const savedOrder = JSON.parse(localStorage.getItem('articleOrder'));

        if (savedOrder && Array.isArray(savedOrder)) {
            // Réorganiser les éléments de la liste
            reorderList(savedOrder);
        }

        // Fonction pour réorganiser la liste selon l'ordre sauvegardé
        function reorderList(order) {
            const items = $('#sortable-frontend li');
            const sortedItems = order.map(id => {
                return items.filter(function() {
                    return $(this).data('id').toString() === id.toString();
                })[0];
            });

            // Vider la liste et réinsérer les éléments dans l'ordre correct
            $('#sortable-frontend').empty().append(sortedItems);
        }

        // Sauvegarder l'ordre des éléments dans localStorage après modification
        $('#sortable-frontend').on('sortupdate', function() {
            const currentOrder = [];
            $('#sortable-frontend li').each(function() {
                currentOrder.push($(this).data('id').toString());
            });
            localStorage.setItem('articleOrder', JSON.stringify(currentOrder));
        });
    });
</script>


{% endblock %}