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

{% block body %}

<br></br>

<!-- vrai code pour le site Pataplouf -->
<div class="container">
     
    <h1>Location Entrepot - parking  minimum 3 mois</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>
    <h2>Enddate :
	{% if endDate|date('d-m-Y') is not empty %}
        <span>le {{ endDate|date('d-m-Y') }}</span>
    {% else %} endDate vide 
    {% endif %}
      
	</h2>
	<h2>MoisRecurring :   {{ isMoisRecurring ?  'Yes' : 'No'  }} </h2>
	<h2>Departement :   {{ departement }} </h2>
	<h2>recurrent :  {{ recurrent }} </h2>
    <h2>connexion :  {{ connexion ?  'Yes' : 'No'  }} </h2> 
    #}
	
        <br />
				
         {{ form_start(form) }}
    <div class="my-custom-class-for-errors">
            {{ form_errors(form) }}
    </div>
    <div class="row justify-content-md-left">
		<div class="col-6">
           
                {% if isMoisRecurring %}
						<b>Saississez vos choix et ensuite Validez :</b>
						<p></p>
						{{ form_row(form.departement, {'label': 'Departement:'}) }} 
                        {{ form_row(form.startDate , {'label': 'Date debut:'}) }} 
						{{ form_row(form.recurrent , {'label': 'Mensuel ? :'}) }} 
						
					
							
                {% else %}
					
						<p>choix location dates precises</p>
						{{ form_row(form.departement, {'label': 'Departement:'}) }} 
                        {{ form_row(form.startDate, {'label': 'Date debut :'}) }} 
						{{ form_row(form.endDate, {'label': 'Date fin:'}) }}
						{{ form_row(form.recurrent) }} 
					
                {% endif %}
						
        </div>

    </div>
    
    <div class="row justify-content-md-left">
    				
        <div class="col-3">
			<button type="submit" class="btn btn-primary">valider</button>
			
        </div>
		<div class="col-3">
			
			{% if isMoisRecurring == true %}  
                        <a href="{{ path('louage_date_init') }}" >Re-init</a>
                {% else %}	
                        <a href="{{ path('louage_date_reset') }}" >Re-init</a>
                {% endif %}	
        </div>
		
    </div>
            
	<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>
			
			{{ form_row(form._token) }}
            {{ form_end(form, {render_rest: false}) }}
            {# {{ form_end(form) }} #}
    </div>

	<div class="jumbotron jumbotron-fluid w-100">
        <div class="container">
		<h1>Type de Hangar ou Garage</h1>
		 {% if types|length > 1 %}
			<p class="font-italic text-muted mb-0">Les <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>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

{% 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 %}