{% extends 'base.html' %}
{% block content %}

<br>
<form method="post" action="/cheltuieli">
    <br>
    <div class="form-row" style="border: 1px solid black">
        <div class="form-group col-md-6">
            <label for="inputEmail4">Date From</label>
            <input type="date" class="form-control" name="dataFrom" />
        </div>
        <div class="form-group col-md-6">
            <label for="inputEmail4">Date bis</label>
            <input type="date" class="form-control" name="dataBis" />
        </div>
        <div class="form-group col-md-4">
            <label for="cars">Conto</label>
            <select id="cars" name="conto" class="form-control">
                    <option value="all">all</option>
                    <option value="EC">EC</option>
                    <option value="Siri&Radu">Siri&Radu</option>
                    <option value="N26">N26</option>
                    <option value="DeutscheBank">DeutscheBank</option>
            </select>
        </div>

        <div class="form-group col-md-4">
            <label>Monthly</label>
            <select id="ffff" name="month" class="form-control">
                    <option value="interval">interval</option>
                    <option value="January">January</option>
                    <option value="February">February</option>
                    <option value="March">March</option>
                    <option value="April">April</option>
                    <option value="June">June</option>
                    <option value="July">July</option>
                    <option value="August">August</option>
                    <option value="September">September</option>
                    <option value="October">October</option>
                    <option value="November">November</option>
                    <option value="December">December</option>
            </select>
        </div>

        <div class="form-group col-md-4">
            <label>Year</label>
            <select id="year" name="year" class="form-control">
                    <option value="2025">2025</option>
                    <option value="2024">2024</option>
                    <option value="2023">2023</option>
                    <option value="2022">2022</option>
                    <option value="2021">2021</option>
                    <option value="2020">2020</option>
                    <option value="2026">2026</option>
            </select>
        </div>
        <div class="form-group col-md-4">
            <label>next days</label>
            <select id="xdays" name="xdays" class="form-control">
                    <option value=""></option>
                    <option value="5">5 days</option>
                    <option value="10">10 days</option>
                    <option value="15">15 days</option>
            </select>
        </div>

        <button type="submit" class="btn btn-primary">Filter</button>

    </div>
    <br>
</form>
<br>
<a href="/add_one_time_transaction">add one time transaction</a>
<br>
<a href="/all_chelt_planned">edit all planned expenses</a>
<br>
FILTERED DATES
<br>
<div class="container text-center" style="border: 1px solid black">
    <div class="row">
        <div class="col">
            Data From: {{dataFrom}}
        </div>
        <div class="col">
            Data Bis: {{dataBis}}
        </div>
    </div>
</div>
<br>

EXPENSES SUMMARY
<div class="container text-center" style="border: 1px solid black">
    <div class="row">
        <div class="col">
            Expenses: {{tot_val_of_expenses}}
        </div>
        <div class="col">
            #Expenses: {{tot_no_of_expenses}}
        </div>
        <div class="col">
            Monthly: {{tot_val_of_monthly_expenses}}
        </div>
        <div class="col">
            #Monthly: {{tot_no_of_monthly_expenses}}
        </div>
        <div class="col">
            Irregular: {{tot_val_of_irregular_expenses}}
        </div>
        <div class="col">
            #Irregular: {{tot_no_of_irregular_expenses}}
        </div>
    </div>
</div>
<br>
<table class="table" id="myTable1" border="1">
    <script src="{{ url_for('static', filename='js/myfile.cs') }}"></script>
    <thead>
        <tr>
            {% for col in expensestableHead %}
            <th scope="col" onclick="sortTable({{ loop.index0 }})">{{col}}</th>
            {% endfor %}
        </tr>
    </thead>

    {% for row in expenses %}
    <tr>
        {% for col  in row %}
         <td>{{col}}</td>
        {% endfor %}
    </tr>
    {% endfor %}
</table>
<br>

{% endblock %}