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



{% block all %}

<h1>Liste des voyage disponible</h1>
<br><br>
<div class="row row-cols-1 row-cols-md-3 g-4"> 
 {% for v in voyages %}
    <div class="col">
     <div class="card" style="width: 18rem;">
      <img src={{asset("/image/" ~ v.image)}} class="card-img-top" alt="">
      <div class="card-body">
      <h5 class="card-title">{{v.titre}}</h5>
   
     </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">du {{v.datedebut|date("Y-m-d")}} jusqu a {{v.datefin|date("Y-m-d")}}</li>
    <li class="list-group-item">{{v.destination.ville ~ "," ~ v.destination.pays}}</li>
    <li class="list-group-item">{{v.prix}}</li>
  </ul>
  <div class="card-body">
   
    <p class="card-text">{{v.description|slice(0,15)}}...</p>
  </div>
  <div class="card-body">
    <a href={{path("affV",{"id":v.id})}} class="card-link">voir detail</a>
    <button type="button" name={{v.id}} id={{v.nbmaxvoyag}} class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" >reserver</button>
   
  </div>
</div>
</div>


<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">reservation</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">choisir nombre place a reserver:</label>
            <input type="number" id="nbp"  max=12 class="form-control" >
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" onclick="reserver(this)" id="ro">reserver</button> 
      </div>
    </div>
  </div>
</div>
{% endfor %}</div>
<script>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
 
  var button = event.relatedTarget;
   document.getElementById("ro").name=button.name;
document.getElementById('nbp').max=button.id;
console.log(document.getElementById('nbp'));
  
})
function  reserver(e){
var r=document.getElementById('nbp').value;
window.location.href="http://localhost:8000/reservation/ajouter/"+e.name+"?nbp="+r;
}
</script>
 {% endblock %}