{% extends "base_frontoffice.html" %}

{% block content %}



<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center">
        <h4>UTILISATEUR</h4>
        <button class="btn btn-danger btn-sm mx-1" data-bs-toggle="modal" data-bs-target="#new_user"  >NOUVEAU UTILISATEUR</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>USERNAME</th>
                    <th>TYPE</th>
                    <th>ACTIVE</th>
                    <th>CAISSE</th>
                    <th>ACTION</th>
                </tr>
            </thead>
            <tbody>
                {% for user in all_user %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.account_type}}</td>
                    <td >{{ user.active }}</td>
                    <td >{{ user.caisse_link }}</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('{{user.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_user" 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" >USERNAME</span>
            <input type="mail"  class="form-control px-2" name="username" required autocomplete="off" />
          </div>
          <div class="input-group mb-1">
          <span class="input-group-text bg-secondary text-light" id="basic-addon1">TYPE</span>
              <select class="form-control "  name="account_type"  id="account_type">
                  <option value="admin" >ADMIN</option>
                  <option value="limited" >LIMITED</option>
                  <option value="caissier" >CAISSIER</option>
              </select>
          </div>
          <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >MOT DE PASSE</span>
            <input type="password"  class="form-control px-2" name="password"  />
          </div>
        <div class="input-group mb-1">
          <span class="input-group-text bg-secondary text-white" >ACTIVE</span>
          <input type="checkbox"  class="form-check-input m-2 p-2" name="active"  />
        </div>
        <div class="input-group mb-1">
          <span class="input-group-text bg-secondary text-light" id="basic-addon1">CAISSE</span>
              <select class="form-control "  name="caisse_id" id="caisse_profile" >
                  <option value="0" >0</option>
                  {% for caisse in all_caisse %}
                  <option value="{{caisse.id}}" >{{caisse.name}}</option>
                  {% endfor %}
              </select>
          </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_user" tabindex="-1"  role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <form  method='POST'  action="/user/new" onsubmit="submit_btn.disabled = true; return true;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">NOUVEAU UTILISATEUR</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" >USERNAME</span>
            <input type="text"  class="form-control px-2" name="username" required autocomplete="off" />
          </div>
          <div class="input-group mb-1">
          <span class="input-group-text bg-secondary text-light" id="basic-addon1">TYPE</span>
              <select class="form-control "  name="account_type" >
                  <option value="admin" >ADMIN</option>
                  <option value="limited" >LIMITED</option>
                  <option value="caissier" >CAISSIER</option>
              </select>
          </div>
          <div class="input-group mb-1">
          <span class="input-group-text bg-secondary text-light" id="basic-addon1">CAISSE</span>
              <select class="form-control "  name="caisse_id" >
                  <option value="0" >0</option>
                  {% for caisse in all_caisse %}
                  <option value="{{caisse.id}}" >{{caisse.name}}</option>
                  {% endfor %}
              </select>
          </div>
          <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >MOT DE PASSE</span>
            <input type="password"  class="form-control px-2" name="password" required />
          </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>
<script>
function user_detail(user_id){
  var form=document.getElementById("form_detail_user");
  form.action="/user/edit?id="+user_id;
  $.ajax({
      type: 'GET',
      url: "/user/profile",
      data: {"id":user_id},
      success: function(resp){
          console.log(resp);
          document.getElementById("user_selected").textContent=resp["username"];
          form.elements['username'].value=resp["username"];
          form.elements['active'].checked=resp["active"];
          let select=document.getElementById("account_type");
          let caisse=document.getElementById("caisse_profile");
          caisse.value=resp["caisse_id"];
          select.value=resp['account_type'];
          

      },
      error: function(error){
        alert(response)
    },
  })
}
</script>
{% endblock %}