{% extends 'FrontofficeAr/base.html.twig' %}
{% block activeContact %}main-menu-active{% endblock %}
{% block titre %}الاتصال بنا{% endblock %}
{% block body %}
<style>
     /* Formulaire de contact */
     .php-email-form {
         background-color: #fff;
         padding: 30px;
         border-radius: 8px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         max-width: 600px;
         margin: 0 auto;
     }

     /* Titres du formulaire */
     .php-email-form h2 {
         font-size: 1.8em;
         margin-bottom: 20px;
         color: #333;
         text-align: center;
     }

     /* Labels des champs de formulaire */
     .php-email-form label {
         font-size: 1.1em;
         color: #333;
         margin-bottom: 10px;
     }

     /* Champs de saisie */
     .php-email-form input[type="text"], .php-email-form input[type="email"], .php-email-form textarea {
         width: 100%;
         padding: 12px;
         margin-bottom: 15px;
         border: 1px solid #ddd;
         border-radius: 5px;
         font-size: 1em;
         color: #333;
         transition: all 0.3s ease-in-out;
     }

     .php-email-form input[type="text"]:focus, .php-email-form input[type="email"]:focus, .php-email-form textarea:focus {
         border-color: #007bff;
         outline: none;
     }

     /* Bouton d'envoi */
     .php-email-form .btn-success {
         background-color: #28a745;
         border: none;
         color: #fff;
         padding: 12px 30px;
         font-size: 1.2em;
         cursor: pointer;
         border-radius: 5px;
         transition: background-color 0.3s;
     }

     .php-email-form .btn-success:hover {
         background-color: #218838;
     }

     /* Message de confirmation */
     .php-email-form span {
         font-size: 1.1em;
         font-weight: bold;
         padding: 10px;
         display: inline-block;
         margin-top: 10px;
     }

     .php-email-form span.green {
         color: green;
     }

     .php-email-form span.red {
         color: red;
     }

     /* Informations de contact */
     .contact-info {
         background-color: #fff;
         padding: 20px;
         border-radius: 8px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         margin-top: 70px;
         text-align: center;
     }

     .contact-info h3 {
         font-size: 1.8em;
         margin-bottom: 15px;
         color: #333;
     }

     .contact-info p {
         font-size: 1.1em;
         margin: 10px 0;
         color: #666;
     }

     .contact-info p a {
         color: #007bff;
         text-decoration: none;
     }

     .contact-info p a:hover {
         text-decoration: underline;
     }

     /* Icones de contact */
     .contact-info i {
         font-size: 1.5em;
         margin-right: 10px;
         color: #007bff;
     }

     /* Responsive Design */
     @media (max-width: 768px) {
         .php-email-form {
             padding: 20px;
         }

         .php-email-form input[type="text"], .php-email-form input[type="email"], .php-email-form textarea {
             font-size: 0.9em;
         }

         .contact-info {
             padding: 15px;
         }
     }

     
    .section-title, .section-subtitle {
    text-align: center;
    }

    .section-title {
    font-size: var(--h1-font-size);
    color: var(--first-color);
    margin-bottom: var(--mb-3);
    }

    .section-subtitle {
    display: block;
    font-size: var(--smaller-font-size);
    font-weight: var(--font-semi-bold);
    }

    /*===== LAYOUT =====*/
    .bd-container {
    max-width: 1024px;
    width: calc(100% - 2rem);
    margin-left: var(--mb-2);
    margin-right: var(--mb-2);
    }

    .bd-grid {
    display: grid;
    gap: 1.5rem;
    }

    /*===== BUTTON =====*/
    .button {
    display: inline-block;
    background-color: var(--first-color);
    color: var(--first-color-lighten);
    padding: .75rem 1rem;
    border-radius: .25rem;
    transition: .3s;
    }

    .button:hover {
    background-color: var(--first-color-dark);
    }

    /*===== CONTACT ME =====*/
    .contact__container {
    row-gap: 2.5rem;
    padding:50px;
    }

    .contact__content {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .contact__box {
    background-color: #fff;
    border-radius: .5rem;
    padding: 1.5rem;
    text-align: center;
    /*box-shadow: 0 4px 6px rgba(174, 190, 205, .3);*/
    box-shadow: 0 3px 8px rgb(232 177 84 / 27%);
    }

    .contact__icon, .contact__title {
    color: var(--first-color);
    }

    .contact__icon {
            font-size: 3.5rem;
            color: #e8b154;
    }
    .contact__description{
        font-size: 1rem;
    }

    .contact__title {
    font-size: var(--h3-font-size);
    margin: var(--mb-1) 0;
    }

    .contact__social {
    color: var(--first-color-light);
    font-size: 1.25rem;
    margin: 0 var(--mb-1);
    }

    .contact__box:hover {
    box-shadow: 0 6px 8px rgba(174, 190, 205, .4);
    }

    .contact__inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
    }

    .contact__input, .contact__button {
    outline: none;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    }

    .contact__input {
    width: 100%;
    padding: 1rem;
    border: 2px solid var(--first-color-light);
    color: var(--first-color);
    border-radius: .5rem;
    margin-bottom: var(--mb-1);
    }

    .contact::placeholder {
    color: var(--first-color-light);
    font-family: var(--body-font);
    font-weight: var(--font-semi-bold);
    }

    .contact__button {
    cursor: pointer;
    border: none;
    }

    /*===== MEDIA QUERIES =====*/
    @media screen and (min-width: 576px) {
    .contact__form {
        width: 450px;
        justify-self: center;
    }
    }

    @media screen and (min-width: 1024px) {
    .bd-container {
        margin-left: auto;
        margin-right: auto;
    }
    }

    label {
        display: inline-block;
        font-size: 1.2rem;
        padding: 10px;
    }

    @media (max-width: 768px) {
        .contact{
            padding-left: 0px !important;
            padding-right: 0px !important;
        }
    }
</style>
    <div class="actualites_title">
        <br/>
        <div class="text-center">
            <img src="{{ asset("/assets/Backoffice/images/logo-fcpm.png") }}" />
            <h3 class="title-page" style="color:white;">الاتصال بنا</h3>
        </div>
    </div>


    <div class="contact__container bd-grid">
        <div class="contact__content bd-grid">
            <div class="contact__box">
                {# <i class="bx bx-home contact__icon"></i> #}
                <i class="bi bi-geo-alt contact__icon"></i>
                <h3 class="contact__title"></h3>
                <span class="contact__description mt-3"> 5 شارع بني وراين ، سويسي الرباط</span>
            </div>

            <div class="contact__box">
                <i class="bx bx-phone contact__icon"></i>
                <h3 class="contact__title"></h3>
                <span class="contact__description mt-3">05 37 65 30 12</span>
            </div>

            <div class="contact__box">
                <i class="bx bx-envelope contact__icon"></i>
                <h3 class="contact__title"></h3>
                <span class="contact__description mt-3">fcpm@menara.ma</span>
            </div>
        </div>

        <div class="row block_ac contact pt-0" style="width: 100%; padding-left: 50px;padding-right: 50px;">
            <!-- Informations de contact avec icônes -->
            <div class="col-md-3" style=""></div>

            <!-- Formulaire de contact -->
            <form class="col-md-7" method="post" class="php-email-form" style="background:white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
                <div class="col-md-12">
                    {% if response != "" %}
                        <center>
                            {% if response == "OK" %}
                                <span style="color:green;font-weight : bold;">تم الارسال</span>
                            {% else %}
                                <span style="color:red;font-weight : bold;">{{ response }}</span>
                            {% endif %}
                            <br/>
                        </center>
                    {% endif %}
                    <div class="form-group">
                        <label>الإسم واللقب</label>
                        <input type="text" class="form-control"  name="name">
                    </div>
                    <div class="form-group">
                        <label>البريد الإلكتروني</label>
                        <input type="text" class="form-control"  name="email">
                    </div>
                    <div class="form-group">
                        <label>موضوع</label>
                        <input type="text" class="form-control"  name="sujet">
                    </div>
                    <div class="form-group">
                        <label>الرسالة</label>
                        <textarea class="form-control" rows="5"  name="message"></textarea>
                    </div>
                </div>

                <div class="col-md-12 text-center mt-3">
                    <button type="submit" class="btn btn-success">إرسال</button>
                </div>
            </form>

            <div class="col-md-3" style=""></div>
        </div>
    </div>
{% endblock %}