{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% load static %}
{% load custom_filters %}
{% block title %}Orçamento Doméstico{% endblock %}

{% block content %}
<h1 class="mb-4">Orçamento Doméstico</h1>
<div class="row">
    <p>Você está visualizando o período de {{ data_inicial|date:"j" }} de {{ data_inicial|date:"F" }} de {{ data_inicial|date:"Y" }} até {{ data_final|date:"j" }} de {{ data_final|date:"F" }} de {{ data_final|date:"Y" }}</p>

</div>
<div class="row">
    <div class="col-12 col-sm-6 col-md-3">
        <div class="info-box">
            <span class="info-box-icon bg-info"><i class="fa fa-hand-holding-usd"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Total receita</span>
                <span class="info-box-number">{{total_receitas|format_currency}}</span>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
        <div class="info-box">
            <span class="info-box-icon bg-primary"><i class="fa fa-shopping-bag"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Total despesa</span>
                <span class="info-box-number">{{total_despesas|format_currency}}</span>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
        <div class="info-box">
            {% if total_saldo < 0 %} <span class="info-box-icon bg-danger">
                <i class="fa fa-thumbs-down"></i>
                </span>
                {% else %}
                <span class="info-box-icon bg-success">
                    <i class="fa fa-thumbs-up"></i>
                </span>
                {% endif %}
                <div class="info-box-content">
                    <span class="info-box-text">Saldo</span>
                    <span class="info-box-number">{{total_saldo|format_currency}}</span>
                </div>
        </div>
    </div>
</div>


<div class="mt-3 mb-3">
    <form method="GET" action="{% url 'orcamento:index' %}">
        <div class="form-row mt-1">
            <div class="form-group col-md-2 mb-0">
                <label for="start_date">Data inicial:</label>
                <input type="date" class="form-control" id="start_date" name="start_date">
            </div>
            <div class="form-group col-md-2 mb-0">

                <label for="end_date">Data final:</label>
                <input type="date" class="form-control" id="end_date" name="end_date">
            </div>
            <div class="form-group col-md-1 mb-0">
                <label></label>
                <input type="submit" class="btn btn-info form-control mt-2 mb-3" value="Filtrar">
            </div>
        </div>
    </form>
    <button class="btn btn-primary" data-toggle="modal" data-target="#categoriaModal">Categoria</button>
    <button class="btn btn-primary" data-toggle="modal" data-target="#subcategoriaModal">Subcategoria</button>
    <button class="btn btn-primary" data-toggle="modal" data-target="#lancamentoModal">Lançamento</button>

</div>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <!-- /.card-header -->
                    <div class="card-body">
                        <!-- HTML to write -->
                        <table id="paginator" class="table table-hover border border-secondary rounded">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Descrição</th>
                                    <th>Categoria</th>
                                    <th>Subcategoria</th>
                                    <th>Valor</th>
                                    <th>Data</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for lancamento in lancamentos %}
                                <tr
                                    class="{% if lancamento.categoria.tipo == '1' %}receita{% elif lancamento.categoria.tipo == '2' %}despesa{% endif %}">
                                    <td>{{ lancamento.descricao }}</td>
                                    <td>{{ lancamento.categoria.nome }}</td>
                                    <td>{{ lancamento.subcategoria.nome }}</td>
                                    <td>{{ lancamento.valor|format_currency }}</td>
                                    <td>{{ lancamento.data }}</td>
                                    <td>
                                        <form action="{% url 'orcamento:excluir_lancamento' lancamento.id %}"
                                            method="post" class="d-inline">
                                            {% csrf_token %}
                                            <button type="submit" class="btn btn-danger btn-sm"><i
                                                    class="fa-solid fa-trash"></i></button>
                                        </form>
                                    </td>
                                    <td>
                                        <button class="editar-lancamento-btn btn btn-info btn-sm"
                                            data-id="{{ lancamento.id }}"><i class="fa-solid fa-pencil"></i></button>

                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
</section>

<!-- Modal de Categoria -->
<div class="modal fade" id="categoriaModal" tabindex="-1" role="dialog" aria-labelledby="categoriaModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="categoriaModalLabel">Adicionar Categoria</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{% url 'orcamento:categoria_modal' %}">
                    {% csrf_token %}
                    {{ categoria_form|crispy }}
                    <button type="submit" class="btn btn-primary">Salvar</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Subcategoria -->
<div class="modal fade" id="subcategoriaModal" tabindex="-1" role="dialog" aria-labelledby="subcategoriaModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="subcategoriaModalLabel">Adicionar Subcategoria</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{% url 'orcamento:subcategoria_modal' %}">
                    {% csrf_token %}
                    {{ subcategoria_form|crispy }}
                    <button type="submit" class="btn btn-primary">Salvar</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Lançamento -->
<div class="modal fade" id="lancamentoModal" tabindex="-1" role="dialog" aria-labelledby="lancamentoModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="lancamentoModalLabel">Adicionar Lançamento</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{% url 'orcamento:lancamento_modal' %}">
                    {% csrf_token %}
                    {{ lancamento_form|crispy }}
                    <button type="submit" class="btn btn-primary">Salvar</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Edição de Lançamento -->
<div class="modal fade" id="editarlancamentoModal" tabindex="-1" role="dialog"
    aria-labelledby="editarlancamentoModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editarlancamentoModalLabel">Editar Lançamento</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editarLancamentoForm" method="POST" action="">
                    {% csrf_token %}
                    <div id="div_id_descricao" class="form-group"> <label for="id_descricao_editar"
                            class=" requiredField">
                            Descricao<span class="asteriskField">*</span> </label>
                        <div class=""> <input type="text" name="descricao" maxlength="100"
                                class="textinput textInput form-control" required="" id="id_descricao_editar"> </div>
                    </div>
                    <div id="div_id_valor" class="form-group"> <label for="id_valor_editar" class=" requiredField">
                            Valor<span class="asteriskField">*</span> </label>
                        <div class=""> <input type="number" name="valor" step="0.01" class="numberinput form-control"
                                required="" id="id_valor_editar"> </div>
                    </div>
                    <div id="div_id_data" class="form-group"> <label for="id_data_editar" class=" requiredField">
                            Data<span class="asteriskField">*</span> </label>
                        <div class=""> <input type="date" name="data" class="dateinput form-control" required=""
                                id="id_data_editar"> </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                <button type="button" class="btn btn-primary" id="salvarEditarBtn">Salvar</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $('.editar-lancamento-btn').click(function () {
            var id = $(this).data('id');
            $.ajax({
                url: '/orcamento/lancamento/editar/' + id + '/',
                method: 'GET',
                success: function (data) {
                    console.log(data)
                    // Preencher os campos do formulário com os dados do lançamento
                    $('#id_descricao_editar').val(data.descricao);
                    $('#id_valor_editar').val(data.valor);
                    $('#id_data_editar').val(data.data);
                    // Preencha os demais campos conforme necessário
                    // Abrir a modal de edição
                    $('#editarlancamentoModal').modal('show');
                    // Adicionar o ID do lançamento ao formulário
                    $('#editarLancamentoForm').attr('action', '/orcamento/lancamento/editar/' + id + '/');
                }
            });
        });

        $('#salvarEditarBtn').click(function () {
            var form = $('#editarLancamentoForm');            
            console.log(form)
            $.ajax({
                url: form.attr('action'),
                method: 'POST',
                headers: {
                    'X-CSRFToken': $('input[name=csrfmiddlewaretoken]').val()
                },
                data: form.serialize(),
                success: function (response) {
                    $('#editarlancamentoModal').modal('hide');
                    if (response.success) {
                        window.location.href = response.redirect_url;
                    }
                    // Atualizar a lista de lançamentos ou fazer qualquer outra ação necessária
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        });
    });

</script>

{% endblock %}