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

{% block title %}Hello HomeController!{% endblock %}

{% block body %}
<style>
.wilaya-section {
    max-height: 200px;
    overflow-y: auto; 
    margin-bottom: 20px;
    padding: 5px;
}
</style>
  <section class="home-slider owl-carousel">
    <div class="slider-item" style="background-image:url({{asset('assets/images/bg_1.jpg')}});">
      <div class="overlay"></div>
      <div class="container">
        <div class="row no-gutters slider-text align-items-md-end align-items-center justify-content-end">
        <div class="col-md-6 text p-4 ftco-animate">
          <h1 class="mb-3">Alger, Pinecrest, FL</h1>
          <span class="location d-block mb-3"><i class="icon-my_location"></i> Chéraga, Vic 3004</span>
          <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
          <span class="price">2800,000DZD</span>
          <a href="#" class="btn-custom p-3 px-4 bg-primary">View Details <span class="icon-plus ml-1"></span></a>
        </div>
      </div>
      </div>
    </div>

    <div class="slider-item" style="background-image:url({{asset('assets/images/bg_2.jpg')}});">
      <div class="overlay"></div>
      <div class="container">
        <div class="row no-gutters slider-text align-items-md-end align-items-center justify-content-end">
        <div class="col-md-6 text p-4 ftco-animate">
          <h1 class="mb-3">Oran, CocoWalk</h1>
          <span class="location d-block mb-3"><i class="icon-my_location"></i> Oran, Vic 3004</span>
          <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
          <span class="price">5000,000DZD</span>
          <a href="#" class="btn-custom p-3 px-4 bg-primary">View Details <span class="icon-plus ml-1"></span></a>
        </div>
      </div>
      </div>
    </div>
  </section>
    {# <section class="search-section mt-4">
      <div class="container">
          <form action="{{ path('search_home') }}" method="GET" class="row">
              <div class="col-md-3">
                  <input type="text" name="search" class="form-control" placeholder="Rechercher des annonces...">
              </div>
              <div class="col-md-3">
                  <input type="number" name="min_price" class="form-control" placeholder="Prix minimum">
              </div>
              <div class="col-md-3">
                  <input type="number" name="max_price" class="form-control" placeholder="Prix maximum">
              </div>
              <div class="col-md-3">
                  <button type="submit" class="btn btn-primary">Rechercher</button>
              </div>
          </form>
      </div>
    </section> #}
    <section class="ftco-section bg-light">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-3">
         {% include "annonce/_filter.html.twig" with {form: form} only %}
      </div>
        <div class="col-md-9">
          {% if pagination is defined and pagination|length > 0 %}
            <div class="container">
              <div class="row">
                {% for result in pagination %}
                  <div class="col-md-4">
                    <div class="card bg-light mb-3">
                      <div class="card-header text-center">
                        {{ result.rooms }} chambres,
                        <strong>{{ result.price | number_format(2, ',', ' ') }}DZD; / nuit</strong>
                        <br>
                        {% if result.avis|length > 0 %}
                          {% include 'includes/rating.html.twig' with {'rating': result.avgRatings} %}
                        {% else %}
                          <small>Pas encore noté</small>
                        {% endif %}
                      </div>
                      <a href="{{ path('app_annonce_show', { 'category_slug' : result.category.slug, 'slug': result.slug}) }}">
                        <img height="200" width="340" src="{{asset('/uploads/imagesAnnonce/'~result.coverImage)}}" alt="Image de l'appartement" class="img-appart">
                      </a>
                      <div class="card-body">
                        <h4 class="card-title">
                          <a href="{{ path('app_annonce_show', { 'category_slug' : result.category.slug, 'slug': result.slug}) }}" class="profil-annonce-name">
                            {{ result.titre }}
                          </a>
                        </h4>
                        <p class="card-text">
                          {{ result.introduction }}
                        </p>
                        <a href="{{ path('app_annonce_show', { 'category_slug' : result.category.slug, 'slug': result.slug}) }}" class="btn btn-primary">En savoir plus !</a>
                        {% if app.user and app.user == result.user %}
                          <a href="{{ path('app_annonce_edit', { 'slug': result.slug }) }}" class="btn btn-secondary">Modifier l'annonce</a>
                        {% endif %}
                      </div>
                    </div>
                  </div>
                {% endfor %}
              </div>
              <div class="pagination">
                {{ knp_pagination_render(pagination) }}
              </div>
            </div>
          {% else %}
            <h2 class="h1 my-5">Aucun résultat trouvé</h2>
            <p>Désolé, aucun résultat n'a été trouvé pour la recherche spécifiée.</p>
          {% endif %}
        </div>
      </div>
    </div>
  </section>
      
    {% if searchTerm is defined %}
      <section class="ftco-section bg-light">
          <div class="container">
              <h2 class="h1 my-5">Aucun résultat trouvé</h2>
              <p>Désolé, aucun résultat n'a été trouvé pour la recherche spécifiée.</p>
          </div>
      </section>
    {% endif %}
    <section class="ftco-section bg-light">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3">        
      </div>
      <div class="col-md-9">
        <h2 class="h1 my-5">Ça vient d'arriver !</h2>
        <div class="row">
          {% for data in rentalsByOrderDateDesc %}
            {% include "annonce/_annonce.html.twig" with {'annonce': data.annonce} %}
          {% endfor %}
        </div>
        <h2 class="h1 my-5">Nos locations stars</h2>
        <div class="row">
          {% for data in rentals %}
            {% include "annonce/_annonce.html.twig" with {'annonce': data.annonce} %}
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>

    <section class="ftco-section testimony-section bg-light">
      <div class="container">
        <div class="row justify-content-center mb-5 pb-3">
          <div class="col-md-7 heading-section text-center ftco-animate">
            <span class="subheading">Meilleurs Hosts</span>
            <h2 class="mb-4">Nos Accueillants stars</h2>
          </div>
            </div>    		
        </div>
      </div>  
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-8 ftco-animate">
              <div class="row ftco-animate">
                <div class="col-md-12">
                  <div class="carousel-testimony owl-carousel ftco-owl">
              <div class="row">
                {% for data in users %}
                  <div class="item">
                    <div class="testimony-wrap py-4 pb-5">
                    {% if data.host.user.image != null %}
                    <div class="user-img mb-4" style="background-image: url({{asset('/uploads/imagesUser/'~data.host.user.image)}})">
                      <span class="quote d-flex align-items-center justify-content-center">
                      <i class="icon-quote-left"></i>
                      </span>
                    </div>
                    {% else %}
                    <div class="user-img mb-4" width="50" style="background-image: url({{asset('assets/images/userMessneger.jpg')}} class="mini-avatar")">
                      <span class="quote d-flex align-items-center justify-content-center">
                      <i class="icon-quote-left"></i>
                      </span>
                    </div>
                    {% endif %}  
                    <div class="text text-center">
                      <p class="mb-4">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                      <p class="name">{{data.host.user.nom}} {{data.host.user.prenom}}</p>
                      <span class="position">{{ data.host.user.adresse }}</span>
                    </div>
                    </div>
                  </div>
                {% endfor %}
              </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </section>


    <section class="ftco-section">
      <div class="container">
        <div class="row justify-content-center mb-5 pb-3">
          <div class="col-md-7 heading-section text-center ftco-animate">
            <span class="subheading">Read Articles</span>
            <h2>Recent Blog</h2>
          </div>
        </div>
        <div class="row d-flex">
          <div class="col-md-3 d-flex ftco-animate">
            <div class="blog-entry align-self-stretch">
              <a href="blog-single.html" class="block-20" style="background-image: url('{{asset('assets/images/image_1.jpg')}}');">
              </a>
              <div class="text mt-3 d-block">
                <h3 class="heading mt-3"><a href="#">Even the all-powerful Pointing has no control about the blind texts</a></h3>
                <div class="meta mb-3">
                  <div><a href="#">Dec 6, 2018</a></div>
                  <div><a href="#">Admin</a></div>
                  <div><a href="#" class="meta-chat"><span class="icon-chat"></span> 3</a></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 d-flex ftco-animate">
            <div class="blog-entry align-self-stretch">
              <a href="blog-single.html" class="block-20" style="background-image: url('{{asset('assets/images/image_2.jpg')}}');">
              </a>
              <div class="text mt-3">
                <h3 class="heading mt-3"><a href="#">Even the all-powerful Pointing has no control about the blind texts</a></h3>
                <div class="meta mb-3">
                  <div><a href="#">Dec 6, 2018</a></div>
                  <div><a href="#">Admin</a></div>
                  <div><a href="#" class="meta-chat"><span class="icon-chat"></span> 3</a></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 d-flex ftco-animate">
            <div class="blog-entry align-self-stretch">
              <a href="blog-single.html" class="block-20" style="background-image: url('{{asset('assets/images/image_3.jpg')}}');">
              </a>
              <div class="text mt-3">
                <h3 class="heading mt-3"><a href="#">Even the all-powerful Pointing has no control about the blind texts</a></h3>
                <div class="meta mb-3">
                  <div><a href="#">Dec 6, 2018</a></div>
                  <div><a href="#">Admin</a></div>
                  <div><a href="#" class="meta-chat"><span class="icon-chat"></span> 3</a></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 d-flex ftco-animate">
            <div class="blog-entry align-self-stretch">
              <a href="blog-single.html" class="block-20" style="background-image: url('{{asset('assets/images/image_4.jpg')}}');">
              </a>
              <div class="text mt-3">
                <h3 class="heading mt-3"><a href="#">Even the all-powerful Pointing has no control about the blind texts</a></h3>
                <div class="meta mb-3">
                  <div><a href="#">Dec 6, 2018</a></div>
                  <div><a href="#">Admin</a></div>
                  <div><a href="#" class="meta-chat"><span class="icon-chat"></span> 3</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
		
	{# <section class="ftco-section-parallax">
    <div class="parallax-img d-flex align-items-center">
      <div class="container">
        <div class="row d-flex justify-content-center">
          <div class="col-md-7 text-center heading-section heading-section-white ftco-animate">
            <h2>Subcribe to our Newsletter</h2>
            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in</p>
            <div class="row d-flex justify-content-center mt-5">
              <div class="col-md-8">
                <form action="#" class="subscribe-form">
                  <div class="form-group d-flex">
                    <input type="text" class="form-control" placeholder="Enter email address">
                    <input type="submit" value="Subscribe" class="submit px-3">
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section> #}
{% endblock %}