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

{% block title %}Actualité{% endblock %}

{% block body %}
    <div class="container-fluid mt-5">
        <div class="row justify-content-center">
            <div class="col-12"> <!-- Adjusted from col-md-10 to col-12 for full width -->
                <h2 class="text-left mb-4" id="heading">{{ 'nos_actualites' | trans }}</h2>
                <div class="row">
                    {% for actualite in actualites %}
                        <div class="col-12 mb-4">
                            <div class=" h-100">
                                <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" style="text-align: right;">
                                            {% if actualite.imageavant %}
                                                <!-- Image Avant -->
                                                <a href="#" data-bs-toggle="modal" data-bs-target="#imageavant-modal-{{ loop.index }}">
                                                    <img src="{{ asset('upload/images/' ~ actualite.imageavant) }}" 
                                                         class="img-fluid image-clickable" 
                                                         alt="{{ actualite.titre }}" 
                                                         style="width: 300px; height: 300px; margin-bottom: 15px; border-radius: 25%;">
                                                </a>
                                            {% endif %}
                                           
                                        </div>

                                        <!-- Block 2: Title and Description -->
                                        <div class="col-md-6">
                                            <h5 class="text-center mb-4">
                                                {% if app.request.locale == 'en' %}
                                                    {{ actualite.getTitreEn() }} <!-- English title -->
                                                {% else %}
                                                    {{ actualite.getTitre() }} <!-- Default title (French or fallback) -->
                                                {% endif %}
                                            </h5>
                                            <p class="text-muted mt-2 mb-0" style="text-align:justify!important;">
                                                {% if app.request.locale == 'en' %}
                                                    {{ actualite.getDescriptionEn() }} <!-- English description -->
                                                {% else %}
                                                    {{ actualite.getDescription() }} <!-- Default description (French or fallback) -->
                                                {% endif %}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Modal for Image Avant -->
                            {% if actualite.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/' ~ actualite.imageavant) }}" class="img-fluid rounded" alt="{{ actualite.titre }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}

                            <!-- Modal for Image Après -->
                            {% if actualite.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/' ~ actualite.imageapres) }}" class="img-fluid rounded" alt="{{ actualite.titre }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    {% else %}
                        <p class="text-center">Aucune actualité 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;
        }

        /* 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; /* Remove margin between title and description */
        }

        .card-body p {
            margin-top: 0.5rem; /* Add small margin between title and description */
            font-size: 16px;
            color: #6c757d;
        }

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

    <script>
        // JavaScript for modal image preview (optional)
        $(document).ready(function() {
            $('.image-clickable').click(function() {
                // Additional modal functionalities can be added here if necessary
            });
        });
    
    $(document).ready(function() {
       var imagePath = '{{ asset('img/rdvmanel22.png') }}'

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