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

{% block body %}

<div class="container-fluid">
    <div class="row">
        <h2 class="text-left mb-4" id="heading">
            {{ 'greffes_capillaire' |trans }}
        </h2>
        
        <div class="row">
	<h3 class="text-left mb-4" id="greffes_hommes">
            {{ 'greffes_cheveux_hommes' |trans }}
        </h3>
            {% for greffe in greffescapillaires %}
                {% if greffe.imageapres or greffe.imageavant %}
                    <div class="col-12 col-md-4 col-xs-12 mb-4"> <!-- 3 items per row, full width on smaller screens -->
                        <div class=" p-3">
                            <div class="card-body">
                                <h5 class="text-left mb-4">
                                    {% if app.request.locale == 'en' %}
                                        {{ greffe.getTitreEn(app.request.locale) }} <!-- English description -->
                                    {% else %}
                                        {{ greffe.getTitre(app.request.locale) }} <!-- Default description (French or fallback) -->
                                    {% endif %}
                                </h5>

                                    <!-- Image Comparison Section -->
<!-- Image Comparison Section -->
<div class="image-comparison-container">
    {% if greffe.imageavant %}
        <div class="imageavant-container" style="width: {% if greffe.imageapres %} 50% {% else %} 100% {% endif %};">
            <img class="imageavant" src="{{ asset('upload/images/' ~ greffe.imageavant) }}" alt="Image Avant">
        </div>
    {% endif %}
    
    {% if greffe.imageapres %}
        <div class="imageapres-container" style="width: {% if greffe.imageavant %} 100% {% else %} 100% {% endif %};">
            <img class="imageapres" src="{{ asset('upload/images/' ~ greffe.imageapres) }}" alt="Image Apres">
        </div>
    {% endif %}
    
    {% if greffe.imageavant and greffe.imageapres %}
        <div class="divider"></div>
    {% endif %}
</div>



                                <!-- Description Section -->
                                <div class="description mt-3">
                                    <p>
                                       {% if app.request.locale == 'en' %}
    {{ greffe.getDescriptionEn(app.request.locale)|slice(0, 50) }}{% if greffe.getDescriptionEn(app.request.locale)|length > 50 %}...{% endif %}
{% else %}
    {{ greffe.getDescription(app.request.locale)|slice(0, 50) }}{% if greffe.getDescription(app.request.locale)|length > 50 %}...{% endif %}
{% endif %}

                                    </p>
                                    <div class="text-center mt-3">
                                        <a href="{{ path('Greffe_show', {'id': greffe.id}) }}" class="btn btn-warning text-dark">En savoir plus</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
<div class="container-fluid">
    <div class="row">
<h3 class="text-left mb-4" id="greffes_femmes">
            {{ 'greffes_cheveux_femmes' |trans }}
        </h3>
        
<div class="row">
            {% for greffe in greffescapillairesfemme %}
                {% if greffe.imageapres or greffe.imageavant %}
                    <div class="col-12 col-md-4 col-xs-12 mb-4"> <!-- 3 items per row, full width on smaller screens -->
                        <div class=" p-3">
                            <div class="card-body">
                                <h5 class="text-left mb-4">
                                    {% if app.request.locale == 'en' %}
                                        {{ greffe.getTitreEn(app.request.locale) }} <!-- English description -->
                                    {% else %}
                                        {{ greffe.getTitre(app.request.locale) }} <!-- Default description (French or fallback) -->
                                    {% endif %}
                                </h5>

                              <!-- Image Comparison Section -->
<div class="image-comparison-container">
    {% if greffe.imageavant %}
        <div class="imageavant-container" style="width: {% if greffe.imageapres %} 50% {% else %} 100% {% endif %};">
            <img class="imageavant" src="{{ asset('upload/images/' ~ greffe.imageavant) }}" alt="Image Avant">
        </div>
    {% endif %}
    
    {% if greffe.imageapres %}
        <div class="imageapres-container" style="width: {% if greffe.imageavant %} 100% {% else %} 100% {% endif %};">
            <img class="imageapres" src="{{ asset('upload/images/' ~ greffe.imageapres) }}" alt="Image Apres">
        </div>
    {% endif %}
    
    {% if greffe.imageavant and greffe.imageapres %}
        <div class="divider"></div>
    {% endif %}
</div>

                                <!-- Description Section -->
                                <div class="description mt-3">
                                    <p>
                                       {% if app.request.locale == 'en' %}
    {{ greffe.getDescriptionEn(app.request.locale)|slice(0, 50) }}{% if greffe.getDescriptionEn(app.request.locale)|length > 50 %}...{% endif %}
{% else %}
    {{ greffe.getDescription(app.request.locale)|slice(0, 50) }}{% if greffe.getDescription(app.request.locale)|length > 50 %}...{% endif %}
{% endif %}

                                    </p>
                                    <div class="text-center mt-3">
                                        <a href="{{ path('Greffe_show', {'id': greffe.id}) }}" class="btn btn-warning text-dark">En savoir plus</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
</div>
</div>
</div>


<div class="container-fluid">
    <div class="row">
<h3 class="text-left mb-4" id="greffes_sourcils">
            {{ 'greffes_des_sourcils' |trans }}
        </h3>
        
<div class="row">
            {% for greffe in greffescapillairessourcils %}
                {% if greffe.imageapres or greffe.imageavant %}
                    <div class="col-12 col-md-4 col-xs-12 mb-4"> <!-- 3 items per row, full width on smaller screens -->
                        <div class=" p-3">
                            <div class="card-body">
                                <h5 class="text-left mb-4">
                                    {% if app.request.locale == 'en' %}
                                        {{ greffe.getTitreEn(app.request.locale) }} <!-- English description -->
                                    {% else %}
                                        {{ greffe.getTitre(app.request.locale) }} <!-- Default description (French or fallback) -->
                                    {% endif %}
                                </h5>

                              <!-- Image Comparison Section -->
<div class="image-comparison-container">
    {% if greffe.imageavant %}
        <div class="imageavant-container" style="width: {% if greffe.imageapres %} 50% {% else %} 100% {% endif %};">
            <img class="imageavant" src="{{ asset('upload/images/' ~ greffe.imageavant) }}" alt="Image Avant">
        </div>
    {% endif %}
    
    {% if greffe.imageapres %}
        <div class="imageapres-container" style="width: {% if greffe.imageavant %} 100% {% else %} 100% {% endif %};">
            <img class="imageapres" src="{{ asset('upload/images/' ~ greffe.imageapres) }}" alt="Image Apres">
        </div>
    {% endif %}
    
    {% if greffe.imageavant and greffe.imageapres %}
        <div class="divider"></div>
    {% endif %}
</div>

                                <!-- Description Section -->
                                <div class="description mt-3">
                                    <p>
                                       {% if app.request.locale == 'en' %}
    {{ greffe.getDescriptionEn(app.request.locale)|slice(0, 50) }}{% if greffe.getDescriptionEn(app.request.locale)|length > 50 %}...{% endif %}
{% else %}
    {{ greffe.getDescription(app.request.locale)|slice(0, 50) }}{% if greffe.getDescription(app.request.locale)|length > 50 %}...{% endif %}
{% endif %}

                                    </p>
                                    <div class="text-center mt-3">
                                        <a href="{{ path('Greffe_show', {'id': greffe.id}) }}" class="btn btn-warning text-dark">En savoir plus</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
</div>
</div>
</div>

<style>
#adresstop {
  position: relative;
  width: 100%;
}
@media screen and (max-width: 768px) {
#heading {
  position: absolute;
  top: 50%;
  font-size:13px!important;
}
}
#heading {
  position: absolute;
  top: 55%;
  left: 100%;
  transform: translateY(-80%);
  white-space: nowrap;
  font-size: 2.5em;
  color: white;
  padding: 10px 0;
  width: 100%;
  text-align: center;
  background-color: #d4af37 !important;
  opacity: 1;
  transition: background-color 0.5s ease;
}

/* General container for comparison */
.image-comparison-container {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    border-radius: 12px;
    touch-action: none;
}

/* Image Containers */
.imageavant-container, .imageapres-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

/* Styling images */
.imageavant, .imageapres {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

/* Image Avant (Before) */
.imageavant-container {
    left: 0;
    z-index: 2;
    overflow: hidden;
    width: 50%;
}

/* Image Après (After) */
.imageapres-container {
    right: 0;
    z-index: 1;
}

/* Divider Line */
.divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 10px;
    background-color: goldenrod;
    cursor: grab;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    transition: background-color 0.2s;
}

.divider:hover {
    background-color: #daa520;
}

.divider::before {
    content: '⇆';
    font-size: 16px;
    color: #fff;
}

/* Styling the description */
.description {
    margin-top: 15px;
    font-size: 0.9em;
    color: #333;
    line-height: 1.5;
}

/* Ensuring the text is styled nicely */
.description p {
    margin-bottom: 15px;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('.image-comparison-container').each(function() {
        var $container = $(this);
        var $divider = $container.find('.divider');
        var $imageAvantContainer = $container.find('.imageavant-container');
        var containerWidth = $container.width();
        var isDragging = false;

        function moveDivider(position) {
            var newLeft = Math.max(0, Math.min(position, containerWidth));
            $divider.css('left', newLeft);
            $imageAvantContainer.css('width', newLeft);
        }

        // Mouse Events
        $divider.on('mousedown', function(e) {
            isDragging = true;
            $(document).on('mousemove', function(e) {
                if (isDragging) moveDivider(e.pageX - $container.offset().left);
            });
        });

        $(document).on('mouseup', function() {
            isDragging = false;
            $(document).off('mousemove');
        });

        // Touch Events
        $divider.on('touchstart', function(e) {
            isDragging = true;
        });

        $(document).on('touchmove', function(e) {
            if (isDragging) {
                var touch = e.touches[0];
                moveDivider(touch.pageX - $container.offset().left);
            }
        });

        $(document).on('touchend', function() {
            isDragging = false;
        });
    });

    var imagePath = "{{ asset('upload/images/' ~ typegreffesimg.imagebanniere) }}"; 
    $('#adresstop').css({
        'background': 'url(' + imagePath + ') top left',
        'height': '350px',
        'background-size': 'cover',
        'background-repeat': 'no-repeat',
        'background-position': 'center',
        'color': '#000 !important',
    });

    $('#heading').css({
        'font-size': '2em',
        'color': '#000',
        'background-color': 'transparent',
        'opacity': 0.7,
    }).animate({
        left: '0%'
    }, 1500, function() {
        $(this).css({
            'background-color': '#d4af37',
            'color': 'black'
        });
    });

    var currentUrl = window.location.href;
    $('.navmenu ul li a').removeClass('active');
    $('.navmenu ul li a').each(function() {
        if (this.href === currentUrl) {
            $(this).addClass('active');
        }
    });


    
    // When the span with class "greffes-hommes-link" is clicked
    $('.greffes-hommes-link').click(function(event) {
        event.preventDefault();  // Prevent any default behavior, if any
        $('html, body').animate({
            scrollTop: $('#greffes_hommes').offset().top  // Scroll to the element with id="greffes_hommes"
        }, 1000);  // Adjust 1000 for the scrolling speed in milliseconds
    });
 // When the span with class "greffes-hommes-link" is clicked
    $('.greffes-femmes-link').click(function(event) {
        event.preventDefault();  // Prevent any default behavior, if any
        $('html, body').animate({
            scrollTop: $('#greffes_femmes').offset().top  // Scroll to the element with id="greffes_hommes"
        }, 1000);  // Adjust 1000 for the scrolling speed in milliseconds
    });
// When the span with class "greffes-hommes-link" is clicked
    $('.greffes-sourcils-link').click(function(event) {
        event.preventDefault();  // Prevent any default behavior, if any
        $('html, body').animate({
            scrollTop: $('#greffes_sourcils').offset().top  // Scroll to the element with id="greffes_hommes"
        }, 1000);  // Adjust 1000 for the scrolling speed in milliseconds
    });

});

</script>

{% endblock %}