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

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

{% block body %}
<div class="container-fluid mt-5">
    <div class="row px-5">
        <div class="col-12">
            <h2 class="text-left mb-4" id="heading">{{ 'nos_traitements_medecine' | trans }}</h2>

            <div class="row">
                {% for medicine in medecinesesthetiques %}
                    <div class="col-12 mb-4">
                        <div style="margin-bottom:2%;">
                            <div class="card-body d-flex flex-column">
                                <div class="row">
                                    <!-- Block 1: Images (stacked vertically) -->
        <div class="col-md-6 d-flex flex-column align-items-center mb-3">                          
    {% if medicine.imageavant %}
        {% set file_extension = medicine.imageavant|split('.')|last %}
        {% if medicine.imageavant %}
            {% if file_extension in ['jpg', 'jpeg', 'png', 'gif', 'bmp'] %}
                <!-- 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 image-clickable" 
                         alt="{{ medicine.titre }}" 
                         style=" height: auto; margin-bottom: 15px; border-radius: 10px;">
                </a>
            {% elseif file_extension in ['mp4', 'webm', 'ogg'] %}
                <!-- Vidéo Avant -->
                <a href="#" data-bs-toggle="modal" data-bs-target="#videoavant-modal-{{ loop.index }}">
                    <video controls class="img-fluid image-clickable video-square" style="margin-bottom: 15px; border-radius: 10px;">
                        <source src="{{ asset('upload/images/' ~ medicine.imageavant) }}" type="video/{{ file_extension }}">
                        Your browser does not support the video tag.
                    </video>
                </a>
            {% endif %}
        {% endif %}
    {% endif %}
</div>


                                    <!-- Block 2: Title and Description -->
                                    <div class="col-md-6 text-justify">
                                       <h4 class="mb-3 text-justify" style="text-align:justify;">
                                            {% if app.request.locale == 'en' %}
                                                {{ medicine.getTitreEn(app.request.locale) }}
                                            {% else %}
                                                {{ medicine.getTitre(app.request.locale) }}
                                            {% endif %}
                                        </h4>
                                        <p class="text-muted mt-2 mb-0 text-justify" style="text-align:justify!important;">
                                            {% if app.request.locale == 'en' %}
                                                {{ medicine.getDescriptionEn(app.request.locale) }}
                                            {% else %}
                                                {{ medicine.getDescription(app.request.locale) }}
                                            {% endif %}
                                        </p>
                                    </div>
                                </div>
                            </div>
                    

                        <!-- Modal for Image Avant -->
                        {% if medicine.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/' ~ medicine.imageavant) }}" class="img-fluid" alt="{{ medicine.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 */
}
    /* 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>
<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: 401;  /* 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 */
}


</style>
<script>
$(document).ready(function() {
    var imagePath = "{{ asset('img/medecineesthetiquemanel2025.jpg') }}";

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

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

    /* 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);
        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;
    }

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

{% endblock %}