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

{% block title %}Médecine Esthétique{% endblock %}

{% block body %}
<div class="container-fluid mt-5"> <!-- Utilisation de container-fluid pour toute la largeur -->
  
    <div class="row px-5">
 <h2 class="text-left mb-4" id="heading">
				{% if app.request.locale == 'en' %}
                                                {{ typemedecineimg.getTitreEn(app.request.locale) }} <!-- English description -->
                                            {% else %}
                                                {{ typemedecineimg.getTitre(app.request.locale) }} <!-- Default description (French or fallback) -->
                                            {% endif %} 
			</h2>
        <div class="col-md-10">
          
            <div class="row">
                {% for medicine in medecinesesthetiques %}
                    <div class="col-12 mb-4">
                        <div class="card shadow-sm border-0 h-100">
                            <div class="card-body d-flex flex-column">
                                <!-- Title Row -->
                               
                                <div class="row">
                                    <!-- Left: Image (stacked vertically) -->
                                    <div class="col-md-6 d-flex flex-column align-items-center mb-3" style="text-align: right;">
                                        {% if medicine.imageavant %}
                                            <!-- Image Avant -->
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#imageavant-modal-{{ loop.index }}">
                                                <img src="{{ asset('upload/images/' ~ medicine.imageavant) }}" 
                                                     class="img-fluid rounded-circle image-clickable" 
                                                     alt="{{ medicine.titre }}" 
                                                     style=" margin-bottom: 15px;">
                                            </a>
                                            <!-- Modal for Image Avant -->
                                            <div class="modal fade" id="imageavant-modal-{{ loop.index }}" tabindex="-1" aria-labelledby="imageavant-modalLabel-{{ loop.index }}" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="imageavant-modalLabel-{{ loop.index }}">{{ medicine.titre }} Avant</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <img src="{{ asset('upload/images/' ~ medicine.imageavant) }}" class="img-fluid" alt="{{ medicine.titre }}">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}
                                        {% if medicine.imageapres %}
                                            <!-- Image Après -->
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#imageapres-modal-{{ loop.index }}">
                                                <img src="{{ asset('upload/images/' ~ medicine.imageapres) }}" 
                                                     class="img-fluid rounded-circle image-clickable" 
                                                     alt="{{ medicine.titre }}" 
                                                     >
                                            </a>
                                            <!-- Modal for Image Après -->
                                            <div class="modal fade" id="imageapres-modal-{{ loop.index }}" tabindex="-1" aria-labelledby="imageapres-modalLabel-{{ loop.index }}" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="imageapres-modalLabel-{{ loop.index }}">{{ medicine.titre }} Après</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <img src="{{ asset('upload/images/' ~ medicine.imageapres) }}" class="img-fluid" alt="{{ medicine.titre }}">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>

                                    <!-- Right: Description -->
                                    <div class="col-md-6">
 					<h4 class="mb-3 text-justify">
                                    {% if app.request.locale == 'en' %}
                                                {{ medicine.getTitreEn(app.request.locale) }} <!-- English description -->
                                            {% else %}
                                                {{ medicine.getTitre(app.request.locale) }} <!-- Default description (French or fallback) -->
                                            {% endif %} 
                                </h4>
                                        <p class="text-justify mt-2">
                                            {% if app.request.locale == 'en' %}
                                                {{ medicine.getDescriptionEn(app.request.locale) }} <!-- English description -->
                                            {% else %}
                                                {{ medicine.getDescription(app.request.locale) }} <!-- Default description (French or fallback) -->
                                            {% endif %}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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 */
}
    /* Custom style for the modal images */
    .modal-body img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }
    img.img-fluid.rounded-circle.image-clickable {
        border-radius: 15% !important;
    }

    /* 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 h4 {
        margin-bottom: 1rem;
    }

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

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

<script>
$(document).ready(function() {
    var imagePath = "{{ asset('upload/images/' ~ typemedecineimg.imagebanniere) }}";


          // 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 %}