{% extends "BaseLogin.html" %}
{% block title %} List {% endblock %}
{% block content %}

<div class="container py-4">
    <form method="get" action="{% url 'MovExpenseOrCreditListView' %}" id="Form">
        <div class="row align-items-center g-3 mb-4">
            <div class="col-12 col-lg-6 d-flex align-items-center gap-3">
                <h1 class="h3 m-0 text-nowrap">
                    <i class="bi bi-wallet2 text-primary me-2"></i>Despesas
                </h1>
                <div class="input-group" style="max-width: 250px;">
                    <span class="input-group-text bg-transparent border-secondary text-secondary">
                        <i class="bi bi-calendar3"></i>
                    </span>
                    <select class="form-select border-secondary bg-dark text-white" name="month" onchange="this.form.submit();">
                        <option value="">Todos os meses</option>
                        <option value="1"  {% if request.GET.month == '1' %}selected{% endif %}>Janeiro</option>
                        <option value="2"  {% if request.GET.month == '2' %}selected{% endif %}>Fevereiro</option>
                        <option value="3"  {% if request.GET.month == '3' %}selected{% endif %}>Março</option>
                        <option value="4"  {% if request.GET.month == '4' %}selected{% endif %}>Abril</option>
                        <option value="5"  {% if request.GET.month == '5' %}selected{% endif %}>Maio</option>
                        <option value="6"  {% if request.GET.month == '6' %}selected{% endif %}>Junho</option>
                        <option value="7"  {% if request.GET.month == '7' %}selected{% endif %}>Julho</option>
                        <option value="8"  {% if request.GET.month == '8' %}selected{% endif %}>Agosto</option>
                        <option value="9"  {% if request.GET.month == '9' %}selected{% endif %}>Setembro</option>
                        <option value="10" {% if request.GET.month == '10' %}selected{% endif %}>Outubro</option>
                        <option value="11" {% if request.GET.month == '11' %}selected{% endif %}>Novembro</option>
                        <option value="12" {% if request.GET.month == '12' %}selected{% endif %}>Dezembro</option>
                    </select>
                </div>
            </div>

            <div class="col-12 col-lg-6 text-lg-end">
                <div class="btn-group" role="group">
                    <a href="{% url 'MovExpenseOrCreditFirmCreateView' %}" class="btn btn-outline-info btn-sm px-3">D. Firm</a>
                    <a href="{% url 'MovExpenseOrCreditProfCreateView' %}" class="btn btn-outline-info btn-sm px-3">D. Prof</a>
                    <a href="{% url 'MovExpenseOrCreditFirmCreditCreateView' %}" class="btn btn-outline-success btn-sm px-3">C. Firm</a>
                    <a href="{% url 'MovExpenseOrCreditProfCreditCreateView' %}" class="btn btn-outline-success btn-sm px-3">C. Prof</a>
                </div>
            </div>
        </div>

        <div class="card bg-dark border-secondary mb-4">
            <div class="card-body py-2 px-3">
                <div class="row g-3 align-items-center">
                    <div class="col-md-5 d-flex align-items-center gap-3">
                        <span class="small text-secondary fw-bold text-uppercase">Tipo:</span>
                        <div class="btn-group btn-group-sm" role="group">
                            <input type="radio" class="btn-check" name="type" id="typeC" value="credit"
                                   {% if request.GET.type == "credit" %}checked{% endif %} onchange="this.form.submit();">
                            <label class="btn btn-outline-secondary px-4" for="typeC">Crédito</label>

                            <input type="radio" class="btn-check" name="type" id="typeD" value="debit"
                                   {% if request.GET.type == "debit" %}checked{% endif %} onchange="this.form.submit();">
                            <label class="btn btn-outline-secondary px-4" for="typeD">Débito</label>
                        </div>
                    </div>

                    <div class="col-md-5 d-flex align-items-center gap-3 border-start border-secondary ps-4">
                        <span class="small text-secondary fw-bold text-uppercase">Resp:</span>
                        <div class="btn-group btn-group-sm" role="group">
                            <input type="radio" class="btn-check" name="resp" id="resF" value="firm"
                                   {% if request.GET.resp == "firm" %}checked{% endif %} onchange="this.form.submit();">
                            <label class="btn btn-outline-secondary px-4" for="resF">Firma</label>

                            <input type="radio" class="btn-check" name="resp" id="respP" value="prof"
                                   {% if request.GET.resp == "prof" %}checked{% endif %} onchange="this.form.submit();">
                            <label class="btn btn-outline-secondary px-4" for="respP">Prof.</label>
                        </div>
                    </div>

                    <div class="col-md-2 text-end">
                        <a href="{% url 'MovExpenseOrCreditListView' %}" class="btn btn-link btn-sm text-secondary text-decoration-none">
                            <i class="bi bi-x-circle me-1"></i>Limpar
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>



<div class="table-responsive">
    <table class="table table-striped table-bordered">
        <thead class="thead-dark">
            <tr align="center">
                <th width="15%"> Data </th>
                <th> Plano de Contas </th>
                <th> Valor </th>
                <th width="10%"> Banco </th>
                <th width="5%"> Firma </th>
                <th width="5%"> Credito </th>
                <th width="5%"> Debito </th>
                <th width="5%"> Prof </th>
                <th> Profissimal </th>
                <th width="5%"> Ações </th>
            </tr>
        </thead>
        <tbody>
        {% for Exp in Expenses %}
            <tr  align="center">
                <td> {{ Exp.date|date:"d/m/Y" }}</td>
                <td> {{ Exp.chart_of_account }} </td>
                <td> R$ {{ Exp.gross_value }} </td>
                <td> {{ Exp.bank }} </td>
                <td> {% if Exp.firm %} <i class="bi bi-check-circle-fill text-success "></i>
                    {% else %} <i class="bi bi-x-circle-fill text-danger "></i> {% endif %} </td>
                <td> {% if Exp.credit %} <i class="bi bi-check-circle-fill text-success "></i>
                    {% else %} <i class="bi bi-x-circle-fill text-danger "></i> {% endif %} </td>
                <td> {% if Exp.debit %} <i class="bi bi-check-circle-fill text-success "></i>
                    {% else %} <i class="bi bi-x-circle-fill text-danger "></i> {% endif %} </td>
                <td> {% if Exp.prof %} <i class="bi bi-check-circle-fill text-success "></i>
                    {% else %} <i class="bi bi-x-circle-fill text-danger "></i> {% endif %} </td>
                <td> {% if Exp.professional %} {{ Exp.professional }}
                    {% else %} <i class="bi bi-x-circle-fill text-danger "></i> {% endif %} </td>
                 <td>
                  <form action="{% url 'MovExpenseOrCreditDeleteView' Exp.id %}" method="post" >
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger" >
                        <i class="bi bi-trash"></i>
                    </button>
                  </form>
                </td> 
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
    {% include 'components/_pagination.html' %}

<form method="get" action="{% url 'MovExpenseOrCreditListView' %}" id="Form" class="">

</form>


{% endblock %}