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

{% block title %}Laser médical{% endblock %}

{% block body %}
<div class="container-fluid mt-5">
    <div class="row px-5">
		<h2 class="text-left mb-4" id="heading">Nos traitements de laser médical</h2>
        <div class="col-md-10">
            
            <div class="row">
                {% for laser in lasermedicaux %}
                    <div class="col-12 mb-4">
                        <div class="  h-100">
                            <div class="card-body d-flex flex-column">
                                <div class="row">
                                    <div class="col-md-6 text-center mb-3">
                                        {% if laser.imageavant %}
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#imageavant-modal-{{ loop.index }}">
                                                <img src="{{ asset('upload/images/' ~ laser.imageavant) }}" 
                                                     class="img-fluid image-clickable" 
                                                     alt="{{ laser.titre }}" 
                                                     style=" margin-bottom: 15px; border-radius: 10px;">
                                            </a>
                                        {% endif %}
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <h5 class="text-center mb-4">
                                            {% if app.request.locale == 'en' %}
                                                {{ laser.getTitreEn(app.request.locale) }}
                                            {% else %}
                                                {{ laser.getTitre(app.request.locale) }}
                                            {% endif %}
                                        </h5>
                                        <p style="text-align:justify;">
                                            {% if app.request.locale == 'en' %}
                                                {{ laser.getDescriptionEn(app.request.locale) }}
                                            {% else %}
                                                {{ laser.getDescription(app.request.locale) }}
                                            {% endif %}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Modal for Image Avant -->
                        {% if laser.imageavant %}
                            <div class="modal fade" id="imageavant-modal-{{ loop.index }}" tabindex="-1" aria-labelledby="imageavantModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <img src="{{ asset('upload/images/' ~ laser.imageavant) }}" class="img-fluid" alt="{{ laser.titre }}" style="border-radius: 10px;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                        
                        <!-- Modal for Image Après -->
                        {% if laser.imageapres %}
                            <div class="modal fade" id="imageapres-modal-{{ loop.index }}" tabindex="-1" aria-labelledby="imageapresModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <img src="{{ asset('upload/images/' ~ laser.imageapres) }}" class="img-fluid" alt="{{ laser.titre }}" style="border-radius: 10px;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                {% else %}
                    <p class="text-center">Aucun traitement disponible pour le moment.</p>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<style>
#adresstop {
  position: relative; /* This makes sure the heading can be positioned relative to it */
  width: 100%; /* Ensure the container covers the full width */
}

#heading {
  position: absolute;
  top: 55%;  /* Vertically center the heading */
  left: 100%;  /* Start from off-screen to the right */
  transform: translateY(-80%);  /* Vertically center the heading */
  white-space: nowrap;  /* Prevent text wrapping */
  font-size: 2.5em;  /* Adjust the font size as needed */
  color: white;  /* Initial text color */
  padding: 10px 0;  /* Padding to ensure text isn't touching edges */
  width: 100%;  /* Make the heading cover the full width of its container */
  text-align: center;  /* Ensure the text is centered inside the heading */
  background-color: #d4af37 !important; /* Start with no background color */
  opacity: 1;  /* Full opacity */
  transition: background-color 0.5s ease;  /* Smooth transition for the background color */
}



/* Full-width container with margins */
.container-fluid {
    padding-left: 5%;
    padding-right: 5%;
}

/* Custom style for the modal images */
.modal-body img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* rounded corners */
}

/* Styling for the clickable image */
.image-clickable {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
    border: 3px solid transparent;
    background-image: linear-gradient(to bottom, #b68e3b, #b07d2a); /* Gradient from gold to brown */
    background-clip: content-box;
}

/* Hover effect for images */
.image-clickable:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(176, 136, 67, 0.7);
    border-color: #ffd700;
}

/* Adjust spacing between title and description */
.card-body h3 {
    margin-bottom: 0;
}

.card-body p {
    margin-top: 0.5rem;
    font-size: 16px;
    color: #6c757d;
}

/* Ensure modal images are responsive */
.modal-dialog img {
    max-width: 100%;
    height: auto;
}
</style>

<script>
$(document).ready(function() {
    // Correctly access 'imagebanniere' in Twig syntax
    var imagePath = "{{ asset('img/medecineesthetiquemanel2025.jpg') }}";  // Correct Twig syntax for asset

    // Set the background of the div
    $('#adresstop').css({
        'background': 'url(' + imagePath + ') top left',
        'height': '350px',
        'background-size': 'cover',
        'background-repeat': 'no-repeat',
        'background-position': 'center',
        'color': '#000 !important',
    });

    // Apply animation to the heading
    $('#heading').css({
        'font-size': '2em',  // Adjust font size
        'color': '#000',      // Initial text color
        'background-color': 'transparent', // Start with no background color
        'opacity': 0.7,
    }).animate({
        left: '0%'  // Move from the right side (left: 100%) to the left side (left: 0%)
    }, 1500, function() {
        // Once the animation is done, apply a golden background color with opacity
        $(this).css({
            'background-color': '#d4af37',  // Golden color with opacity
            'color': 'black'  // Change text color for contrast if needed
        });
    });

 // Get the current page URL
    var currentUrl = window.location.href;

    // Remove 'active' class from all links first
    $('.navmenu ul li a').removeClass('active');

    // Iterate over each link in the nav menu
    $('.navmenu ul li a').each(function() {
        // Check if the link's href matches the current URL
        if (this.href === currentUrl) {
            // Add an 'active' class to the matching link
            $(this).addClass('active');
        }
    });
});
</script>

{% endblock %}