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

{% block body %}

<br></br>

<!-- vrai code pour le site Pataplouf -->
<div class="container">
     
    <h1>Location Entrepot</h1>
    {# 
	<h2>Startdate :
	{% if startDate|date('d-m-Y') is not empty %}
        <span>le {{ startDate|date('d-m-Y') }}</span>
    {% else %} startDate vide 
    {% endif %}
      
	</h2>
	{% if isMoisRecurring == false %}
    <h2>Enddate :
		{% if endDate|date('d-m-Y') is not empty %}
        <span>le {{ endDate|date('d-m-Y') }}</span>
		{% else %} endDate vide 
		{% endif %}
    {% endif %}  
	</h2>
	<h2>MoisRecurring :   {{ isMoisRecurring ?  'Yes' : 'No'  }} </h2>
	<h2>Departement :   {{ departement }} </h2>
	<h2>recurrent :  {{ recurrent }} </h2>
    <h2>connexion :  {{ connexion ?  'Yes' : 'No'  }} </h2>
	#}
        <br />
            
	<div class="row justify-content-left">
        <div class="col-6">
                    {% for message in app.flashes('success') %}
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ message|raw }}
                            
                        </div>
                    {% endfor %}
                    {% for message in app.flashes('danger') %}
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ message|raw }}
                            
                        </div>
                    {% endfor %}
                    {# 
                    {% for message in app.flashes('info') %}
                        <div class="alert alert-info alert-dismissible fade show" role="alert">
                            {{ message|raw }}
                            
                        </div>
                    {% endfor %}
                    #}
                    {% for message in app.flashes('warning') %}
                        <div class="alert alert-warning alert-dismissible fade show" role="alert">
                            {{ message|raw }}
                        
                        </div>
                    {% endfor %}
            </div>
		</div>
			
	
    </div>

	<div class="jumbotron jumbotron-fluid w-100">
        <div class="container">
		<h2>Choississez votre Type de Hangar ou Garage</h2>
		
		 {% if types|length > 1 %}
			<p class="font-italic text-muted mb-0">Choisissez parmis nos <strong>{{ types|length }}</strong>
                modèles</p>
		{% endif %}
			 <div class="row g-4">
            {% if types|length > 0 %}
                {% for type in types %}
				<div class="col-lg-4 col-md6">
                
                    <!-- Card-->
                    <div class="card rounded shadow-sm border-0">
                        <a href="{{ path('louage_type', {id: type.id})}}" class="text-dark">
                            <div class="card-body p-4">
				
                                <img height="100px" src="{{ asset("uploads/images/Cars/") ~ type.image  }}" >	
                                 <h3>
                                    {{ type.name }} 
                                </h3>
                                {% set minimalPrice = 10000 %}
                                {% for v in type.Caros %}
                                    {% if v.price < minimalPrice%}
                                        {% set minimalPrice = v.price %}
                                    {% endif %}
                                {% endfor %}
                                <p class="small font-bold float-right">À partir de
                                    {% if isMoisRecurring  %}{{ minimalPrice * 0.9 * 30 }} €/mois{% else %}{{ minimalPrice }} €/jour{% endif %}</p>
                            </div>
                        </a>
                    </div>
                </div>
                {% endfor %}
			</div>
            {% else %}
            <div class="jumbotron jumbotron-fluid w-100">
                <div class="container">
                    <h1 class="display-4">Oops !</h1>
                    <p class="lead">Aucun Hangar disponible ! Des dates différentes peuvent donner de nouveaux résultats!</p>
                </div>
            </div>
            {% endif %}
             
         </div>
         <h2><a href="{{ path('louage_index') }}" class="btn btn-primary">Retour Accueil</a></h2>
	</div>
    
</div>
{% endblock %}

{% block javascripts %}
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.13.2/themes/dot-luv/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> 
  
    <script>
        $(document).ready(function() {
            // you may need to change this code if you are not using Bootstrap Datepicker
            $('.js-datepicker').datepicker({
                dateFormat: 'yy-mm-dd'
            });
        });
    </script>
 
{# $('#input').datepicker({ minDate: new Date($.datepicker.parseDate('yy-mm-dd', $('#input').val())) }); #}
{% endblock %}