{% 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>

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

    </div>
    <br>
</form>
<br>
<a href="/add_cheltuieli">add chelt</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>
            <th scope="col" onclick="sortTable(1)">category</th>
            <th scope="col" onclick="sortTable(2)">name</th>
            <th scope="col" onclick="sortTable(2)">value</th>
            <th scope="col" onclick="sortTable(3)">myconto</th>
            <th scope="col" onclick="sortTable(4)">freq</th>
            <th scope="col" onclick="sortTable(4)">payDay</th>
        </tr>
    </thead>

    {% for user in expenses %}
    <tr>
        <td>{{user[2]}}</td>
        <td>{{user[3]}}</td>
        <td>{{user[4]}}</td>
        <td>{{user[5]}}</td>
        <td>{{user[6]}}</td>
        <td>{{user[11]}}</td>
    </tr>
    {% endfor %}
</table>
<br>

{% endblock %}