{% extends "base.html" %}
{% load static %}
{% load custom_filter_tag %}





{% block 'title' %}
Clientes
{% endblock %}

{% block 'head' %}
<link rel="stylesheet" href="{% static 'clients/css/clients.css' %}">
{% endblock %}

{% block 'body' %}


<div class="grid-container">
    <div class="grid-top">
      <button class="btn-primary"
     
       onclick="openModal()" id="openModal">Novo Cliente</button>
    </div>

    <table id="client-list">
      <tr>
        <th style="text-align: left;">Cliente</th>
        <th style="text-align: left;width: 20%;">Débito</th>
        <th class="hide-on-mobile" style="text-align: left;">Contato</th>
        <th class="hide-on-mobile" style="text-align: left;width: 20%;">Ações</th>
      </tr>

  {% for client in clients %}

  <tr>
      <td ><a id="name-{{client.id}}" href="{% url 'viewClient' client.id %}">{{client.name}}</a></td>
      <td id="debt-{{client.id}}" >R$ {{client.id | totalFiado}}</td>
      <td class="hide-on-mobile" id="contact-{{client.id}}" >{{client.contact}}</td>
      <td hidden  id="active-{{client.id}}" >{{client.active}}</td>
      <td>
    <div class="grid-buttons hide-on-mobile">
      
    <img 
      src="{% static 'midia/icons/edit.svg' %}" 
      style=" width: 35px; height: 35px; cursor: pointer;" 
      onclick="editclient({{client.id}})" >
    </img>

        <input type="hidden" id="name-{{client.id}}" value="{{ client.name }}">
        <input type="hidden" id="contact-{{client.id}}" value="{{ client.contact }}">
     
      
    </div>

    </td>
  </tr>

  {% endfor %} 

</table>
</div>



<dialog  id='Modal-create-client'  >
    <article >
      <form action="{% url 'createClient' %}" id="clientForm" method="post" >

        {% csrf_token %}
          <h2 id="title-window">Cadastro Cliente</h2>
          <input  type="text" id="clientId" name="clientId"  hidden >

          <input  type="text" id="clientName" name="name" required placeholder="Nome">
           <input type="checkbox" id="active" name="active" placeholder="Ativo">Ativo
           
          <input type="text" id="clientContact" name="contact"  placeholder="Contato"></input>
          <footer class="grid-buttons">
            <button class="btn-primary" id="save" type="submit">Salvar</button>
            <button class="btn-primary" onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editClient'  %}" hx-trigger="click"  hx-swap="none" style="width: 100%;">Alterar</button>
            <button class="btn-cancel" type="button" onclick="closeModal()" style="background-color:red;">Cancelar</button>
          </footer>
      </form>

    </article>
  </dialog>




<script src="{% static 'clients/js/clients.js' %}"></script>



{% endblock %}