{% extends "base_frontoffice.html" %}

{% block content %}



<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center">
        <h4>CAISSE</h4>
        <button class="btn btn-danger btn-sm mx-1" data-bs-toggle="modal" data-bs-target="#new_caisse"  >NOUVEAU</button>
    </div>

    <!-- Article Table -->
    <div class="table-responsive mt-4">
        <table class="table table-sm align-items-center justify-content-center mb-0">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>NAME</th>
                    <th>MODE</th>
                    <th>OWNER</th>
                    <th>ACTION</th>
                </tr>
            </thead>
            <tbody>
                {% for caisse in  all_caisse %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td>{{ caisse.name }}</td>
                    <td>{{ caisse.mode }}</td>
                    <td>{{ caisse.user.username}}</td>
                    <td><span class="d-flex">
                        <a class="btn btn-outline-warning btn-sm " data-bs-toggle="modal" data-bs-target="#user_detail" href="#" onclick="user_detail('{{caisse.id}}')">MODIFIER</a>
                    </span>
                    </td>

                </tr>
              
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>


<div class="modal fade" id="user_detail" tabindex="-1"  role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <form  method='POST' id="form_detail_caisse" action="#" onsubmit="submit_btn.disabled = true; return true;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="user_selected"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
       
          <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >NAME</span>
            <input type="mail"  class="form-control px-2" name="name" required autocomplete="off" />
          </div>
          <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >MODE</span>
            <input type="mail"  class="form-control px-2" name="mode" required autocomplete="off" />
          </div>
          
        </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">QUITTER</button>
        <button type="submit" class="btn btn-primary" name="submit_btn">SUBMIT</button>
      </div>
    </div>
  </div>
</form>
</div>

<div class="modal fade" id="new_caisse" tabindex="-1" aria-labelledby="addArticleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <form method="POST" action="/add/caisse">
                <div class="modal-header">
                    <h5 class="modal-title" id="addArticleModalLabel">Ajouter une caisse</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="quantityInput" class="form-label">NOM</label>
                        <input type="text" class="form-control" name="name" autocomplete="off" required>
                      </div>
                      <div class="mb-3">
                        <label for="quantityInput" class="form-label">MODE</label>
                        <input type="text" class="form-control" name="mode" autocomplete="off" required>
                      </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-warning" >ENREGISTRER</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    
                </div>
            </form>
        </div>
    </div>
</div>
<script>
function user_detail(id){
  var form=document.getElementById("form_detail_caisse");
  form.action="/caisse/edit?id="+id;
  $.ajax({
      type: 'GET',
      url: "/caisse/profile",
      data: {"id":id},
      success: function(resp){
          document.getElementById("user_selected").textContent=resp["name"];
          form.elements['name'].value=resp["name"];
          form.elements['mode'].checked=resp["mode"];
      },
      error: function(error){
        alert(response)
    },
  })
}
</script>
{% endblock %}