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


<link rel="stylesheet"
      href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>


<div class="d-flex flex-wrap gap-2 mb-3">

    <button class="btn btn-secondary"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#filterCollapse">
        Show / Hide Filters
    </button>

    <a href="/all_chelt_planned"
       class="btn btn-info">
        Edit All Planned Expenses
    </a>

    <a href="{{ url_for('delete_profile', db_type='cheltuieli') }}"
       class="btn btn-danger">
        Delete Profile
    </a>

</div>

<div class="collapse" id="filterCollapse">
    <form method="post" action="/cheltuieli_planned">
    <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 for="categ">Category</label>
            <select name="category" id="categ" class="form-control">
                {% for item in chelt_app.categories %}
                    <option value="{{ item }}">{{ item }}</option>
                {% endfor %}
            </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="2026">2026</option>
                    <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>
            </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>
</div>
<br>


<!-- Selected Date Info -->
<div class="alert alert-info">
    <strong>LAST DATABASE UPDATE:</strong> {{ chelt_app.last_inptimestamp }}
    &nbsp; || &nbsp;
    <strong>Date From:</strong> {{ dataFrom }}
    &nbsp; | &nbsp;
    <strong>Date Bis:</strong> {{ dataBis }}
</div>

<div class="card shadow-sm border-dark">
    <div class="card-header bg-dark text-white text-center fw-bold">
        EXPENSES SUMMARY
    </div>

    <div class="card-body">
        <div class="row g-3 text-center">

            <div class="col-md-2">
                <div class="p-3 border rounded bg-light">
                    <div class="text-muted small">Expenses</div>
                    <div class="fw-bold fs-5">{{chelt_app.tot_val_of_expenses}}</div>
                </div>
            </div>

            <div class="col-md-2">
                <div class="p-3 border rounded bg-light">
                    <div class="text-muted small"># Expenses</div>
                    <div class="fw-bold fs-5">{{chelt_app.tot_no_of_expenses}}</div>
                </div>
            </div>

            <div class="col-md-2">
                <div class="p-3 border rounded bg-primary text-white">
                    <div class="small">Monthly</div>
                    <div class="fw-bold fs-5">{{chelt_app.tot_val_of_monthly_expenses}}</div>
                </div>
            </div>

            <div class="col-md-2">
                <div class="p-3 border rounded bg-primary text-white">
                    <div class="small"># Monthly</div>
                    <div class="fw-bold fs-5">{{chelt_app.tot_no_of_monthly_expenses}}</div>
                </div>
            </div>

            <div class="col-md-2">
                <div class="p-3 border rounded bg-warning">
                    <div class="small">Irregular</div>
                    <div class="fw-bold fs-5">{{chelt_app.tot_val_of_irregular_expenses}}</div>
                </div>
            </div>

            <div class="col-md-2">
                <div class="p-3 border rounded bg-warning">
                    <div class="small"># Irregular</div>
                    <div class="fw-bold fs-5">{{chelt_app.tot_no_of_irregular_expenses}}</div>
                </div>
            </div>

        </div>
    </div>

    <div class="card-body">
        <div class="row g-3 text-center">
            {% for conto, (val, trans_no) in chelt_app.expenses_per_conto.items() %}
                {% if trans_no and conto != 'all' %}
                    <div class="col-md-2">
                <div class="p-3 border rounded bg-light">
                    <div class="text-muted small">{{conto}}</div>
                    <div class="fw-bold fs-5">{{val}}</div>
                </div>
            </div>
                {% endif %}
            {% endfor %}

        </div>
    </div>

</div>
<br>

<!-- Data Table -->
<div class="card">
    <div class="table-responsive">
        <table class="table table-striped table-hover table-bordered mb-0"
               id="HyundaiTable">
            <thead class="table-light">
                <tr>
                    {% for colName in chelt_app.tableHead %}
                        {% if colName in chelt_app.displayExpensesTableHead %}
                            <th>{{ colName }}</th>
                        {% endif %}
                    {% endfor %}

                    <th>Edit</th>
                </tr>
            </thead>
            <tbody>
                {% for row in chelt_app.expenses %}
                    <tr>

                        {% for col in row %}
                            {% if chelt_app.tableHead[loop.index0] in chelt_app.displayExpensesTableHead %}
                                <td>{{ col }}</td>
                            {% endif %}
                        {% endfor %}
                        <td><a href="/edit_row/{{db_type}}/{{table_name}}/{{row[0]}}" class="btn btn-danger btn-sm">Edit</a></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<br>
<div class="card shadow-sm border-dark">
    <div class="card-header bg-dark text-white text-center fw-bold">
        INCOME SUMMARY
    </div>

    <div class="card-body">
        <div class="row g-3 text-center">

            <div class="col-md-2">
                <div class="p-3 border rounded bg-light">
                    <div class="text-muted small">Income</div>
                    <div class="fw-bold fs-5">{{chelt_app.tot_val_of_income}}</div>
                </div>
            </div>

            <div class="col-md-2">
                <div class="p-3 border rounded bg-light">
                    <div class="text-muted small"># Income</div>
                    <div class="fw-bold fs-5">{{chelt_app.tot_no_of_income}}</div>
                </div>
            </div>

        </div>
    </div>
</div>
<br>
<div class="card">
    <div class="table-responsive">
        <table class="table table-striped table-hover table-bordered mb-0"
               id="TableIncome">

            <thead class="table-light">
                <tr>

                    {% for colName in chelt_app.tableHead %}
                        {% if colName in chelt_app.displayExpensesTableHead %}
                            <th>{{ colName }}</th>
                        {% endif %}
                    {% endfor %}

                    <th>Edit</th>
<!--                    <th>Delete</th>-->

                </tr>
            </thead>
            <tbody>
            {% for row in chelt_app.income %}
                <tr>
                    {% for col in row %}
                        {% if chelt_app.tableHead[loop.index0] in chelt_app.displayExpensesTableHead %}
                            <td>{{ col }}</td>
                        {% endif %}
                    {% endfor %}
                    <td><a href="/edit_row/{{db_type}}/{{table_name}}/{{row[0]}}" class="btn btn-danger btn-sm">Edit</a></td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
$(document).ready(function () {

    $('#HyundaiTable').DataTable({
        responsive: true,
        paging: true,
        searching: true,
        ordering: true,
        pageLength: 25,
        order: [],
        columnDefs: [
            {
                targets: [-1, -2],
                orderable: false,
                searchable: false
            }
        ]
    });

    $('#TableIncome').DataTable({
        responsive: true,
        paging: true,
        searching: true,
        ordering: true,
        pageLength: 25,
        order: [],
        columnDefs: [
            {
                targets: [-1, -2],
                orderable: false,
                searchable: false
            }
        ]
    });

});
</script>

{% endblock %}