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

{% block title %}Acceuil SCI CAWALLY !{% endblock %}

{% block body %}
    <!-- Header Start -->
    <div class="container-fluid header bg-white p-0">
        <div class="row g-0 align-items-center flex-column-reverse flex-md-row">
            <div class="col-md-6 p-5 mt-lg-5">
                <h1 class="display-5 animated fadeIn  mb-4">Trouvez une <span class="text-primary">Maison parfaite</span> Pour vivre avec votre famille</h1>
                <p class="animated fadeIn mb-4 pb-2">Trouvez facilement votre bien immobilier en quelques clics.</p>
                <a href="{{ path('frontend_property') }}" class="btn btn-primary py-3 px-5 me-3 animated fadeIn">Voir Plus</a>
            </div>
            <div class="col-md-6 animated fadeIn">
                <div class="owl-carousel header-carousel">
                    <div class="owl-carousel-item">
                        <img class="img-fluid header-img" src="{{ absolute_url('build/images/SCI-CAWALLY-Projet-de-construction.jpeg') }}" alt="">
                    </div>
                    <div class="owl-carousel-item">
                        <img class="img-fluid header-img" src="{{ absolute_url('build/images/SCI-CAWALLY-Projet.jpeg') }}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Header End -->


    <!-- Search Start -->
    <div class="container-fluid bg-primary mb-5 wow fadeIn" data-wow-delay="0.1s" style="padding: 35px;">
        <div class="container">
            {{ form_start(Form) }}
            <div class="row g-2">
                <div class="col-md-10">
                    <div class="row g-2">
                        <div class="col-md-4">
                            {{ form_widget(Form.city)}}
                        </div>
                        <div class="col-md-4">
                            {{ form_widget(Form.categorie) }}
                        </div>
                        <div class="col-md-4">
                            {{ form_widget(Form.isToSal)}}
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-dark btn-sm border-0 w-100 py-3">Recherche</button>
                </div>
            </div>
            {{ form_end(Form) }}
        </div>
    </div>
    <!-- Search End -->


    <!-- Category Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
                <h1 class="mb-3">Les catégories de bien disponible</h1>
            </div>
            <div class="row g-4">
                <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.1s">
                    <a class="cat-item d-block bg-light text-center link rounded p-3" href="{{ path('frontend_property') }}">
                        <div class="rounded p-4">
                            <div class="icon mb-3">
                                <img class="img-fluid" src="{{ absolute_url('build/images/icon-apartment.png')}}" alt="Icon">
                            </div>
                            <h6>Apartment</h6>
                            <span>123 Propriétés</span>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.3s">
                    <a class="cat-item d-block bg-light text-center link  rounded p-3" href="">
                        <div class="rounded p-4">
                            <div class="icon mb-3">
                                <img class="img-fluid" src="{{ absolute_url('build/images/icon-villa.png')}}" alt="Icon">
                            </div>
                            <h6>Villa</h6>
                            <span>12 Propriétés</span>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.5s">
                    <a class="cat-item d-block bg-light text-center link  rounded p-3" href="{{ path('frontend_property') }}">
                        <div class="rounded p-4">
                            <div class="icon mb-3">
                                <img class="img-fluid" src="{{ absolute_url('build/images/icon-house.png')}}" alt="Icon">
                            </div>
                            <h6>Maison</h6>
                            <span>123 Propriétés</span>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.7s">
                    <a class="cat-item d-block bg-light text-center link  rounded p-3" href="{{ path('frontend_property') }}">
                        <div class="rounded p-4">
                            <div class="icon mb-3">
                                <img class="img-fluid" src="{{ absolute_url('build/images/icon-housing.png')}} " alt="Icon">
                            </div>
                            <h6>Bureaux</h6>
                            <span>123 Propriétés</span>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.1s">
                    <a class="cat-item d-block bg-light text-center link  rounded p-3" href="{{ path('frontend_property') }}">
                        <div class="rounded p-4">
                            <div class="icon mb-3">
                                <img class="img-fluid" src="{{ absolute_url('build/images/icon-building.png')}}" alt="Icon">
                            </div>
                            <h6>Immeubles</h6>
                            <span>123 Propriétés</span>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.3s">
                    <a class="cat-item d-block bg-light text-center link  rounded p-3" href="{{ path('frontend_property') }}">
                        <div class="rounded p-4">
                            <div class="icon mb-3">
                                <img class="img-fluid" src="{{ absolute_url('build/images/icon-neighborhood.png')}}" alt="Icon">
                            </div>
                            <h6>Duplexes</h6>
                            <span>123 Properties</span>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.5s">
                    <a class="cat-item d-block bg-light text-center link  rounded p-3" href="{{ path('frontend_property') }}">
                        <div class="rounded p-4">
                            <div class="icon mb-3">
                                <img class="img-fluid" src="{{ absolute_url('build/images/icon-condominium.png')}}" alt="Icon">
                            </div>
                            <h6>Magasins</h6>
                            <span>123 Propriétés</span>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.7s">
                    <a class="cat-item d-block bg-light text-center link  rounded p-3" href="{{ path('frontend_property') }}">
                        <div class="rounded p-4">
                            <div class="icon mb-3">
                                <img class="img-fluid" src="{{ absolute_url('build/images/icon-luxury.png')}}" alt="Icon">
                            </div>
                            <h6>Garages</h6>
                            <span>123 Propriétés</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- Category End -->


    <!-- About Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                    <div class="about-img position-relative overflow-hidden p-5 pe-0">
                        <img class="img-fluid w-100" src="{{ absolute_url('build/images/about.jpg')}}">
                    </div>
                </div>
                <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
                    <h1 class="mb-4">Un endroit pour trouver la propriété parfaite</h1>
                    <p class="mb-4">Avec nous c’est la satisfaction assuré ! </p>
                    <p><i class="fa fa-check text-primary me-3"></i>Professionnalisme </p>
                    <p><i class="fa fa-check text-primary me-3"></i>Fiabilité </p>
                    <p><i class="fa fa-check text-primary me-3"></i>Des propriétés de bonne qualité </p>
                    <a class="btn btn-primary py-3 px-5 mt-3" href="">Voir plus</a>
                </div>
            </div>
        </div>
    </div>
    <!-- About End -->


    <!-- Property List Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="row g-0 gx-5 align-items-end">
                <div class="col-lg-6">
                    <div class="text-start mx-auto mb-5 wow slideInLeft" data-wow-delay="0.1s">
                        <h1 class="mb-3">Liste de nos Propriétés</h1>
                        <p>Vous Trouverez les plus belles propriétés immobilières dans cette liste.</p>
                    </div>
                </div>
                <div class="col-lg-6 text-start text-lg-end wow slideInRight" data-wow-delay="0.1s">
                    <ul class="nav nav-pills d-inline-flex justify-content-end mb-5">
                        <li class="nav-item me-2">
                            <a class="btn btn-outline-primary active" data-bs-toggle="pill" href="#tab-1">En vedette</a>
                        </li>
                        <li class="nav-item me-2">
                            <a class="btn btn-outline-primary" data-bs-toggle="pill" href="#tab-2">À vendre</a>
                        </li>
                        <li class="nav-item me-0">
                            <a class="btn btn-outline-primary" data-bs-toggle="pill" href="#tab-3">À louer</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="tab-content">
                <div id="tab-1" class="tab-pane fade show p-0 active">
                    <div class="row g-4">
                        {% for properties in property %}
                        <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                            <div class="property-item rounded overflow-hidden">
                                <div class="position-relative overflow-hidden">
                                    <a href="{{ path('frontend_property') }}"><img class="img-fluid img-miniature" src="{{ absolute_url('uploads/' ~ properties.firstimage)}}" alt=""></a>
                                    <div class="bg-primary rounded text-white position-absolute start-0 top-0 m-4 py-1 px-3">{% if properties.isToSale == 1 %} À vendre{% else %} À Louer{% endif %}</div>
                                    <div class="bg-white rounded-top text-primary position-absolute start-0 bottom-0 mx-4 pt-1 px-3">{{ properties.propertyTypes.title }}</div>
                                </div>
                                <div class="p-4  pb-0">
                                    <h5 class="text-primary mb-3">{{ properties.price|number_format() }} FCFA</h5>
                                    <a class="d-block text-truncate h5 mb-2" href="{{ path('frontend_property') }}">{{ properties.title }}</a>
                                    <p><i class="fa fa-map-marker-alt text-primary me-2"></i>123 Street, New York, USA</p>
                                </div>
                                <div class="d-flex border-top">
                                    <small class="flex-fill text-center border-end py-2"><i class="fa fa-ruler-combined text-primary me-2"></i>{{ properties.surface }} m²</small>
                                    <small class="flex-fill text-center border-end py-2"><i class="fa fa-bed text-primary me-2"></i>{{ properties.room }} pièces</small>
                                    <small class="flex-fill text-center py-2"><i class="fa fa-bath text-primary me-2"></i>{{ properties.shower}} douches</small>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                        <div class="col-12 text-center wow fadeInUp" data-wow-delay="0.1s">
                            <a class="btn btn-primary py-3 px-5" href="{{ path('frontend_property') }}">Voir Plus de propriétés </a>
                        </div>
                    </div>
                </div>
                <div id="tab-2" class="tab-pane fade show p-0">
                    <div class="row g-4">
                        {% for properties in propertyTosel %}
                        <div class="col-lg-4 col-md-6">
                            <div class="property-item rounded overflow-hidden">
                                <div class="position-relative overflow-hidden">
                                    <a href="{{ path('frontend_property') }}"><img class="img-fluid img-miniature" src="{{ absolute_url('uploads/' ~ properties.firstimage)}}" alt=""></a>
                                    <div class="bg-primary rounded text-white position-absolute start-0 top-0 m-4 py-1 px-3">À vendre</div>
                                    <div class="bg-white rounded-top text-primary position-absolute start-0 bottom-0 mx-4 pt-1 px-3">{{ properties.propertyTypes.title }}</div>
                                </div>
                                <div class="p-4 pb-0">
                                    <h5 class="text-primary mb-3">{{ properties.price|number_format() }} FCFA</h5>
                                    <a class="d-block h5 text-truncate mb-2" href="{{ path('frontend_property') }}">{{ properties.title }}</a>
                                    <p><i class="fa fa-map-marker-alt text-primary me-2"></i>{{ properties.quatier }}, {{ properties.city }}</p>
                                </div>
                                <div class="d-flex border-top">
                                    <small class="flex-fill text-center border-end py-2"><i class="fa fa-ruler-combined text-primary me-2"></i>{{ properties.surface }} m²</small>
                                    <small class="flex-fill text-center border-end py-2"><i class="fa fa-bed text-primary me-2"></i>{{ properties.room }} Pièces</small>
                                    <small class="flex-fill text-center py-2"><i class="fa fa-bath text-primary me-2"></i>{{ properties.shower}} douche(s)</small>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                        <div class="col-12 text-center">
                            <a class="btn btn-primary py-3 px-5" href="{{ path('frontend_property') }}">Voir Plus de propriétés</a>
                        </div>
                    </div>
                </div>
                <div id="tab-3" class="tab-pane fade show p-0">
                    <div class="row g-4">
                        {% for properties in propertyTorent %}
                        <div class="col-lg-4 col-md-6">
                            <div class="property-item rounded overflow-hidden">
                                <div class="position-relative overflow-hidden">
                                    <a href="{{ path('frontend_property') }}"><img class="img-fluid img-miniature" src="{{ absolute_url('uploads/' ~ properties.firstimage)}}" alt=""></a>
                                    <div class="bg-primary rounded text-white position-absolute start-0 top-0 m-4 py-1 px-3">À louer</div>
                                    <div class="bg-white rounded-top text-primary position-absolute start-0 bottom-0 mx-4 pt-1 px-3">{{ properties.propertyTypes.title }}</div>
                                </div>
                                <div class="p-4 pb-0">
                                    <h5 class="text-primary mb-3">{{ properties.price|number_format() }} FCFA</h5>
                                    <a class="d-block text-truncate h5 mb-2" href="{{ path('frontend_property') }}">{{ properties.title }}</a>
                                    <p><i class="fa fa-map-marker-alt text-primary me-2"></i>{{ properties.quatier}}, {{ properties.city }}</p>
                                </div>
                                <div class="d-flex border-top">
                                    <small class="flex-fill text-center border-end py-2"><i class="fa fa-ruler-combined text-primary me-2"></i>{{ properties.surface }} m²</small>
                                    <small class="flex-fill text-center border-end py-2"><i class="fa fa-bed text-primary me-2"></i>{{ properties.room }} Pièces</small>
                                    <small class="flex-fill text-center py-2"><i class="fa fa-bath text-primary me-2"></i>{{ properties.shower }} douches</small>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                        <div class="col-12 text-center">
                            <a class="btn btn-primary py-3 px-5" href="{{ path('frontend_property') }}">Voir Plus de propriétés</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Property List End -->

    <!-- Call to Action Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="bg-light rounded p-3">
                <div class="bg-white rounded p-4" style="border: 1px dashed rgba(0, 185, 142, .3)">
                    <div class="row g-5 align-items-center">
                        <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                            <img class="img-fluid rounded w-100" src=" {{ absolute_url('build/images/agent2.jpg')}} " alt="">
                        </div>
                        <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
                            <div class="mb-4">
                                <h1 class="mb-3">Contactez  notre agent certifié</h1>
                                <p>Eirmod sed ipsum dolor sit rebum magna erat. Tempor lorem kasd vero ipsum sit sit diam justo sed vero dolor duo.</p>
                            </div>
                            <a href="tel:225 07 58 48 32 71" class="btn btn-primary py-3 px-4 me-2"><i class="fa fa-phone-alt me-2"></i>Appel Téléphonique</a>
                            <a href="" class="btn btn-dark py-3 px-4"><i class="fa fa-calendar-alt me-2"></i>Obtenir un rendez-vous</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Call to Action End -->

    <!-- Team End -->


    <!-- Testimonial Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
                <h1 class="mb-3">Ce que nos clients disent!</h1>
                <p>Vous troverez ci-dessous les temoignages de nos clients.</p>
            </div>
            <div class="owl-carousel testimonial-carousel wow fadeInUp" data-wow-delay="0.1s">
                <div class="testimonial-item bg-light rounded p-3">
                    <div class="bg-white border rounded p-4">
                        <p>Un personnel jeune, dynamique et professionnel .   </p>
                        <div class="d-flex align-items-center">
                            <img class="img-fluid flex-shrink-0 rounded" src="{{ absolute_url('build/images/user.jpg')}} " style="width: 45px; height: 45px;">
                            <div class="ps-3">
                                <h6 class="fw-bold mb-1">Client </h6>
                                <small>Profession</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="testimonial-item bg-light rounded p-3">
                    <div class="bg-white border rounded p-4">
                        <p>Ils m'ont aider à trouver ma maison de rêves en un ci peut de temps. Ils sont vraiment éfficace .</p>
                        <div class="d-flex align-items-center">
                            <img class="img-fluid flex-shrink-0 rounded" src="{{ absolute_url('build/images/user.jpg')}}" style="width: 45px; height: 45px;">
                            <div class="ps-3">
                                <h6 class="fw-bold mb-1">Client </h6>
                                <small>Profession</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="testimonial-item bg-light rounded p-3">
                    <div class="bg-white border rounded p-4">
                        <p>Les agens immobilier sont aimable, profesionnel et donne de très bons conseils.  </p>
                        <div class="d-flex align-items-center">
                            <img class="img-fluid flex-shrink-0 rounded" src="{{ absolute_url('build/images/user.jpg')}}" style="width: 45px; height: 45px;">
                            <div class="ps-3">
                                <h6 class="fw-bold mb-1">Client</h6>
                                <small>Profession</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}