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

{% block title %}Cas clinique{% endblock %}

{% block body %}
    <section id="about" class="about section" style="padding: 0px!important;">
        <div style="margin: 3%;">
            <div class="row gy-4 gx-5">
                <!-- Formulaire de filtre par catégorie -->
                <div class="col-lg-3 col-md-5 mb-4">
                    <div class="filter-box p-3 rounded">
                        <h5 style="font-weight: bold; margin-bottom: 1%;">Filtrer par catégories</h5>
                        <div class="form-group">
                            {% set icons = ['fa-tooth', 'fa-teeth-open', 'fa-stethoscope', 'fa-x-ray', 'fa-syringe', 'fa-notes-medical'] %}
                            {% for categorie in categories %}
                                <div class="form-check mb-2">
                                    <input 
                                        class="form-check-input" 
                                        type="checkbox" 
                                        value="{{ categorie.id }}" 
                                        id="categorie_{{ categorie.id }}" 
                                        name="categorie[]" 
                                        {% if app.request.query.get('categorie') is iterable and categorie.id in app.request.query.get('categorie') %}
                                            checked 
                                        {% elseif app.request.query.get('categorie') == categorie.id %}
                                            checked 
                                        {% endif %}
                                    >
                                    <label class="form-check-label" for="categorie_{{ categorie.id }}">
                                        <div class="d-flex align-items-center">
                                            <i class="fa-solid {{ icons[loop.index0 % icons|length] }} me-2" style="color: #8BA8B5; font-size: 0.7rem;"></i>
                                            {{ categorie.categorie }} - {{ actes_count[categorie.id] | default(0) }} 
                                        </div>
                                    </label>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <!-- Liste des cas cliniques -->
                <div class="col-lg-9 col-md-7">
                    <h3 class="text-uppercase fw-bold text-center">Nos cas cliniques</h3>
                    <ul id="casCliniqueList" class="row g-4">
                        {% for ca_clinique in cas_clinique %}
                            <li class="col-lg-6 col-md-12 content" style="list-style: none;" data-categorie-id="{{ ca_clinique.categorie.id }}">

                                <div class="card h-100">
                                    <div class="card-body">
                                        {% set icons = ['fa-tooth', 'fa-teeth-open', 'fa-stethoscope', 'fa-x-ray', 'fa-syringe', 'fa-notes-medical'] %}
                                        <div class="d-flex align-items-center">
                                            <i class="fa-solid {{ icons[loop.index0 % icons|length] }} me-2" style="color: #8BA8B5; font-size: 1.5rem;"></i>
                                            <h5 class="card-title mb-0" style="margin-top: 1%;">{{ ca_clinique.categorie.categorie }}</h5>
                                        </div>
                                        <h6 class="card-subtitle mb-2 text-muted" style="margin-top: 1%;">{{ ca_clinique.titre }}</h6>
                                        <p class="card-text" style="text-align: justify; margin-top: 1%;">
                                            {{ ca_clinique.description }}
                                        </p>

                                        <!-- Section avec le Divider horizontal -->
                                        <div class="image-comparison-container position-relative">
                                            <div class="image-container">
                                                {% if ca_clinique.photoavant %}
                                                    <img src="{{ asset('upload/images/' ~ ca_clinique.photoavant) }}" class="img-fluid rounded mb-2 image image-avant" id="imageavant-{{ loop.index }}">
                                                {% endif %}
                                                {% if ca_clinique.photoapres %}
                                                    <img src="{{ asset('upload/images/' ~ ca_clinique.photoapres) }}" class="img-fluid rounded mb-2 image image-apres" id="imageapres-{{ loop.index }}">
                                                {% endif %}
                                            </div>
                                            {% if ca_clinique.photoavant and ca_clinique.photoapres %}
                                                <!-- Diviseur horizontal au centre -->
                                                <div class="divider" id="divider-{{ loop.index }}"></div>
                                            {% endif %}
                                        </div>

                                        {% if ca_clinique.video %}
                                            <video width="100%" height="200" controls class="rounded">
                                                <source src="{{ asset('upload/images/' ~ ca_clinique.video) }}" type="video/mp4">
                                                Votre navigateur ne supporte pas la balise vidéo.
                                            </video>
                                        {% endif %}
                                    </div>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                    <div id="noResultMessage" style="display: none; text-align: center; font-weight: bold; color: Green;">
                        Aucun cas clinique trouvé pour ces catégories.
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        /* Style pour le conteneur de comparaison d'images */
        .image-comparison-container {
            position: relative;
            width: 100%;
            height: 400px; /* Ajustez la hauteur selon la taille de vos images */
            overflow: hidden;
        }

        /* Conteneur des images */
        .image-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* Style pour les images, elles sont positionnées absolument */
        .image {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            object-fit: cover;
        }

        /* Style pour le diviseur */
        .divider {
            position: absolute;
            top: 0;
            width: 10px; /* Largeur du diviseur */
            height: 100%;
            background-color: blue; /* Couleur du diviseur */
            cursor: ew-resize;
            z-index: 2;
            pointer-events: all; /* Permet l'interaction avec le diviseur */
        }
    </style>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Sélection des checkboxes et des éléments de la liste
            const checkboxes = document.querySelectorAll('input[name="categorie[]"]');
            const casCliniqueList = document.getElementById('casCliniqueList');
            const noResultMessage = document.getElementById('noResultMessage');

            // Fonction pour filtrer les cas cliniques
            function filterCasClinique() {
                // Récupérer les catégories sélectionnées
                const selectedCategories = Array.from(checkboxes)
                    .filter(checkbox => checkbox.checked)
                    .map(checkbox => parseInt(checkbox.value));

                let hasResults = false; // Indique si des résultats sont affichés
                const casCliniqueItems = casCliniqueList.querySelectorAll('li');

                // Parcourir tous les cas cliniques
                casCliniqueItems.forEach(item => {
                    const categorieId = parseInt(item.dataset.categorieId); // Récupération de l'attribut data-categorie-id

                    if (selectedCategories.length === 0 || selectedCategories.includes(categorieId)) {
                        item.style.display = 'block'; // Affiche l'élément
                        hasResults = true; // Résultats trouvés
                        item.classList.add('fade-in');
                    } else {
                        item.style.display = 'none'; // Masque l'élément
                        item.classList.remove('fade-in');
                    }
                });

                // Afficher ou masquer le message "Aucun cas clinique trouvé"
                noResultMessage.style.display = hasResults ? 'none' : 'block';
            }

            // Ajouter un événement "change" à chaque checkbox
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', filterCasClinique);
            });

            // Filtrer les cas cliniques au chargement initial de la page
            filterCasClinique();
        });

        $(document).ready(function () {
            $(".divider").each(function () {
                var divider = $(this);
                var container = divider.closest(".image-comparison-container");
                var containerWidth = container.width();

                // Vérifie si les deux images existent dans le conteneur
                var imageAvant = container.find(".image-avant");
                var imageApres = container.find(".image-apres");

                // Si les deux images existent
                if (imageAvant.length && imageApres.length) {
                    // Positionnement initial du diviseur au centre
                    var initialPosition = containerWidth / 2;
                    divider.css("left", initialPosition + "px");

                    // Initialisation des images pour qu'elles couvrent 50% du conteneur au départ
                    imageAvant.css("width", initialPosition + "px");
                    imageApres.css("width", containerWidth - initialPosition + "px");

                    // Fonction pour mettre à jour la largeur des images en fonction du diviseur
                    function updateImages() {
                        var newLeft = divider.position().left;

                        // Mettre à jour la largeur des images en fonction du diviseur
                        imageAvant.css("width", newLeft + "px");
                        imageApres.css("width", containerWidth - newLeft + "px");
                    }

                    // Lorsque l'utilisateur commence à glisser le diviseur
                    $(document).on("mousedown", function (e) {
                        var initialX = e.pageX;
                        var initialLeft = divider.position().left;

                        $(document).on("mousemove", function (e) {
                            var diff = e.pageX - initialX;
                            var newLeft = initialLeft + diff;

                            // Restreindre le diviseur aux limites du conteneur
                            newLeft = Math.max(0, Math.min(newLeft, containerWidth));

                            // Déplacer le diviseur
                            divider.css("left", newLeft + "px");

                            // Mettre à jour les largeurs des images
                            updateImages();
                        });

                        // Arrêter le drag lorsque l'utilisateur relâche la souris
                        $(document).on("mouseup", function () {
                            $(document).off("mousemove");
                            $(document).off("mouseup");
                        });
                    });
                } else {
                    // Si l'une des images n'existe pas, cacher le diviseur et afficher l'image restante
                    if (imageAvant.length) {
                        imageAvant.css("width", "100%");
                        divider.hide(); // Cacher le diviseur
                    } else if (imageApres.length) {
                        imageApres.css("width", "100%");
                        divider.hide(); // Cacher le diviseur
                    }
                }
            });
        });
    </script>
{% endblock %}