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

{% block title %}Contactez-nous{% endblock %}

{% block body %}
<div class="container">
    <h2 class="text-left mb-4" id="heading">{{ 'contactez-nous' |trans }}</h2>

    <div class="row justify-content-center">
  

    {% for message in app.flashes('success') %}
    <div class="alert alert-success">{{ message }}</div>
    {% endfor %}

    {% for message in app.flashes('error') %}
    <div class="alert alert-danger">{{ message }}</div>
    {% endfor %}
 <div class="col-md-6 col-xs-12">
        <iframe style="width:100%; height:90%; margin-bottom:2%;"
                        src="https://www.google.com/maps?q=Rue+du+Lac+Tanganyika,+Les+Berges+du+Lac+1,+Tunis,+Tunisia&output=embed" 
 
            allowfullscreen>
        </iframe>
    </div>
     


    
        <!-- Formulaire à gauche -->
        <div class="col-md-6 col-xs-12">
            <div style="text-align:center;">
                <div class="card-body">
                    {{ form_start(form) }}
                        <div class="form-group">
                            {{ form_widget(form, {
                                'attr': {
                                    'class': 'form-control custom-form-field'
                                }
                            }) }}
                        </div>
                    {{ form_end(form) }}
                </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 */
}
        /* Make the iframe responsive */
        .map-container {
            position: relative;
            padding-bottom: 56.25%; /* Aspect ratio of 16:9 */
            height: 0;
            overflow: hidden;
            max-width: 100%;
        }

    </style>
<script>
    $(document).ready(function() {
       var imagePath = '{{ asset('img/rdvmanel22.png') }}'

 $('#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
        });
    });

    






    });
</script>
<style>
/* Style the form input fields */
<style>
    .border-golden {
        border: 2px solid goldenrod !important;
    }

    .btn-warning {
        background-color: goldenrod;
        border-color: goldenrod;
        color: #000;
        font-weight: bold;
    }

    .btn-warning:hover {
        background-color: #daa520;
        border-color: #daa520;
    }

    .form-control {
        font-size: 1rem;
        padding: 1rem;
        border-radius: 10px;
        border: 2px solid goldenrod !important;
	 border-radius: 15px !important;
    }
button#contact_submit {
    background-color: goldenrod;
    border-color: goldenrod;
    color: #000;
    font-weight: bold;
}
div#contact {
    border: 1px transparent !important;
}

    .rounded-3 {
        border-radius: 15px !important;
    }

    .text-dark {
        color: #000 !important;
    }
</style>



<script>
    $(document).ready(function() {
        // Change the background image, with position and size
        $('#adresstop').css({
            'background-image': "url('{{ asset('img/rdvmanel22.png') }}')",
            'background-position': 'top center',
            'background-size': 'cover'
        });

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