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

{% block og_title %}Liste des entreprises{% endblock %}

{% block og_description %}Liste des entreprises{% endblock %}

{% block title %}{{ parent() }} | Entreprises{% endblock %}

{% block body %}
    <div id="page">
        <main>
            <div style = 'padding-top: 70px'></div>
            <div id="results">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-md-4 col-10">
                            <h4><strong></strong> result for All listing</h4>
                        </div>
                        <div class="col-lg-9 col-md-8 col-2">
                            <a href="#0" class="side_panel btn_search_mobile"></a> <!-- /open search panel -->
                            <div class="row g-0 custom-search-input-2 inner">
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <input class="form-control" type="text"
                                               placeholder="What are you looking for...">
                                        <i class="icon_search"></i>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <input class="form-control" type="text" placeholder="Where">
                                        <i class="icon_pin_alt"></i>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <select class="wide">
                                        <option>All Categories</option>
                                        <option>Shops</option>
                                        <option>Hotels</option>
                                        <option>Restaurants</option>
                                        <option>Bars</option>
                                        <option>Events</option>
                                        <option>Fitness</option>
                                    </select>
                                </div>
                                <div class="col-lg-1">
                                    <input type="submit">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /row -->
                </div>
                <!-- /container -->
            </div>

            <!-- /results -->
            <div class="filters_listing sticky_horizontal">
                <div class="container">
                    <ul class="clearfix">
                        <li>
                            <div class="switch-field">
                                <input type="radio" id="all" name="listing_filter" value="all" checked>
                                <label for="all">All</label>
                                <input type="radio" id="popular" name="listing_filter" value="popular">
                                <label for="popular">Popular</label>
                                <input type="radio" id="latest" name="listing_filter" value="latest">
                                <label for="latest">Latest</label>
                            </div>
                        </li>
                        <li><a class="btn_filt" data-bs-toggle="collapse" href="#filters" aria-expanded="false"
                               aria-controls="filters" data-text-swap="Less filters" data-text-original="More filters">More
                                filters</a></li>
                        <li>
                            <div class="layout_view">
                                <a href="#0" class="active"><i class="icon-th"></i></a>
                                <a href="#0"><i class="icon-th-list"></i></a>
                                <a href="#0"><i class="icon-map"></i></a>
                            </div>
                        </li>
                        <li>
                            <a class="btn_map" data-bs-toggle="collapse" href="#collapseMap" aria-expanded="false"
                               aria-controls="collapseMap" data-text-swap="Hide map" data-text-original="View on map">View
                                on map</a>
                        </li>
                    </ul>
                </div>
                <!-- /container -->
            </div>
            <!-- /filters -->

            <div class="collapse" id="collapseMap">
                <div id="map" class="map"></div>
            </div>
            <!-- /Map -->

            <div class="collapse" id="filters">
                <div class="container margin_30_5">
                    <div class="row">
                        <div class="col-md-4">
                            <h6>Rating</h6>
                            <ul>
                                <li>
                                    <label class="container_check">Superb 9+ <small>25</small>
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
                                </li>
                                <li>
                                    <label class="container_check">Very Good 8+ <small>133</small>
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
                                </li>
                                <li>
                                    <label class="container_check">Good 7+ <small>32</small>
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
                                </li>
                                <li>
                                    <label class="container_check">Pleasant 6+ <small>12</small>
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <h6>Tags</h6>
                            <ul>
                                <li>
                                    <label class="container_check">Wireless Internet <small>12</small>
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
                                </li>
                                <li>
                                    <label class="container_check">Smoking Allowed <small>11</small>
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
                                </li>
                                <li>
                                    <label class="container_check">Wheelchair Accesible <small>23</small>
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
                                </li>
                                <li>
                                    <label class="container_check">Parking <small>56</small>
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <div class="add_bottom_30">
                                <h6>Distance</h6>
                                <div class="distance"> Radius around selected destination <span></span> km</div>
                                <input type="range" min="10" max="100" step="10" value="30"
                                       data-orientation="horizontal">
                            </div>
                        </div>
                    </div>
                    <!-- /row -->
                </div>
            </div>
            <!-- /Filters -->


            <!-- Debut de la liste des entreprises -->
            <div class="container margin_60_35">

                <div class="row">
                    {% for entreprise in results %}
                        <div class="col-xl-4 col-lg-6 col-md-6">
                            <div class="strip grid">
                                <figure>
                                    <a href={{ path('entreprise_details', {'id':entreprise.id}) }}><img src="{{ entreprise.photoEntreprise }}" class="img-fluid" alt="Photo de l'entreprise {{ entreprise.nomEntreprise }}">
                                        <div class="read_more"><span>Read more</span></div>
                                    </a>
                                    <small>{{ entreprise.secteurActivite.nomActivite }}</small>
                                </figure>
                                <div class="wrapper">
                                    <h3><a href="detail-restaurant.html">{{ entreprise.nomEntreprise }}</a></h3>
                                    <small>{{ entreprise.adresse }}</small>
                                    <p>{{ entreprise.description|slice(0, 100) ~ ' ...'  }}</p>
                                </div>
                                <ul>
                                    {% for statusEntreprise in closeOrOpen %}

                                        {% if (entreprise.id == statusEntreprise.id) %}
                                            {% if (statusEntreprise.status == "Ouvert") %}
                                                <li><span class="loc_open">{{ statusEntreprise.status }}</span></li>
                                            {% elseif (statusEntreprise.status == "Fermé") %}
                                                <li><span class="loc_closed">{{ statusEntreprise.status }}</span></li>
                                            {% else %}
                                                <li><span class="loc_noData">{{ statusEntreprise.status }}</span></li>
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                                    <li>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <p class="text-center"><a href="#0" class="btn_1 rounded add_top_30">Load more</a></p>
            </div>
        </main>
    </div>


    <!-- COMMON SCRIPTS -->
    <script src="js/common_scripts.js"></script>
    <script src="js/functions.js"></script>
    <script src="assets/validate.js"></script>

    <!-- Map LeafLet + Mapbox-->
    <script src="js/leaflet_map/leaflet.min.js"></script>
    <script src="js/leaflet_map/leaflet_markercluster.min.js"></script>
    <script src="js/leaflet_map/leaflet_markers.js"></script>
    <script src="js/leaflet_map/leaflet_func.js"></script>


{% endblock %}