{% extends 'base.html' %}

{% block content %}

<div class="container py-4">

    <!-- Page Title -->
    <h1 class="mb-4">{{ table_name }}</h1>

    <!-- Navigation Buttons -->
    <div class="mb-4">
        <div class="btn-group" role="group">
            <a href="/masina" class="btn btn-secondary">Home</a>
            <a href="/addalim/{{table_name}}" class="btn btn-primary">Add Alim</a>
            <a href="/summary/{{id_car}}/{{table_name}}" class="btn btn-info text-white">Car Summary</a>
        </div>
    </div>

    <!-- Filter Section -->
    <div class="card mb-4">
        <div class="card-header fw-bold">
            Filter Results
        </div>
        <div class="card-body">

            <form method="post" action="/details/{{table_name}}">
                <div class="row g-3">

                    <!-- Date From -->
                    <div class="col-md-3">
                        <label class="form-label">Date From</label>
                        <input type="date" name="dataFrom" class="form-control"/>
                    </div>

                    <!-- Date To -->
                    <div class="col-md-3">
                        <label class="form-label">Date Bis</label>
                        <input type="date" name="dataBis" class="form-control"/>
                    </div>

                    <!-- Type -->
                    <div class="col-md-3">
                        <label class="form-label">Type</label>
                        <select id="alim_type" name="type" class="form-select">
                            <option value="all">All</option>
                            {% for tt in types_of_costs %}
                                <option value="{{ tt }}">{{ tt }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Month -->
                    <div class="col-md-3">
                        <label class="form-label">Month</label>
                        <select name="month" class="form-select">
                            <option value="interval">Interval</option>
                            {% for month in [
                                'January', 'February', 'March', 'April', 'May',
                                'June', 'July', 'August', 'September',
                                'October', 'November', 'December'
                                ] %}
                                <option value="{{ month }}">{{ month }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Year -->
                    <div class="col-md-3">
                        <label class="form-label">Year</label>
                        <select name="year" class="form-select">
                            {% for y in [2026,2025,2024,2023,2022,2021,2020] %}
                                <option value="{{ y }}">{{ y }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Submit -->
                    <div class="col-md-3 d-flex align-items-end">
                        <button type="submit" class="btn btn-success w-100" name="filter">Apply Filter</button>
                    </div>

                </div>
            </form>

        </div>
    </div>

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


    <!-- Data Table -->
    <div class="card">
        <div class="card-header fw-bold">
            Records
        </div>

        <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 userDetails[0] %}
                            {% if colName in display_table_head %}
                                <th scope="col" onclick="sortMasinaTable({{ loop.index0 }})"
                                style="cursor:pointer;">
                                {{ colName }}
                            </th>
                            {% endif %}
                        {% endfor %}
                        <th>Edit</th>
                        <th>Delete</th>
                    </tr>
                </thead>

                <tbody>
                {% for row in userDetails[1:] %}
                    <tr>
                        {% for col in row %}
                            {% if userDetails[0,loop.index0] in display_table_head %}
                                <td>{{ col }}</td>
                            {% endif %}
<!--                            {% if loop.index0 == 15 %}-->
<!--                                <td>-->
<!--                                    {% if col is none %}-->
<!--                                        <form action="/upload_file/{{table_name}}/{{row[0]}}"-->
<!--                                              method="POST" enctype="multipart/form-data"-->
<!--                                              class="d-flex flex-column">-->

<!--                                            <input type="file" name="myfile" class="form-control mb-2">-->
<!--                                            <button class="btn btn-primary btn-sm" type="submit">-->
<!--                                                Upload File-->
<!--                                            </button>-->
<!--                                        </form>-->
<!--                                    {% else %}-->
<!--                                        {{ col }}-->
<!--                                    {% endif %}-->
<!--                                </td>-->
<!--                            {% else %}-->
<!--                                <td>{{ col }}</td>-->
<!--                            {% endif %}-->
                        {% endfor %}
                        <td><a href="/edit_car_row/{{table_name}}/{{row[0]}}" class="btn btn-danger btn-sm">Edit</a></td>
                        <td><a href="/deleterow/{{table_name}}/{{row[0]}}" class="btn btn-danger btn-sm">Delete</a></td>
                    </tr>
                {% endfor %}
                </tbody>

            </table>
        </div>
    </div>

    <!-- Import / Export Section -->
<!--    <div class="mt-4">-->

<!--        <div class="card mb-3">-->
<!--            <div class="card-header fw-bold">Import Car</div>-->
<!--            <div class="card-body">-->
<!--                <form action="/details/{{table_name}}" method="POST" enctype="multipart/form-data">-->
<!--                    <input type="file" name="myfile" class="form-control mb-2">-->
<!--                    <button class="btn btn-primary" type="submit" name="upload_file">-->
<!--                        Upload-->
<!--                    </button>-->
<!--                </form>-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="card mb-3">-->
<!--            <div class="card-header fw-bold">Backup</div>-->
<!--            <div class="card-body">-->
<!--                <form action="/details/{{table_name}}" method="POST">-->
<!--                    <button class="btn btn-warning" type="submit" name="export_detail_table_as_sql">-->
<!--                        Backup Car (SQL)-->
<!--                    </button>-->
<!--                </form>-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="card mb-5">-->
<!--            <div class="card-header fw-bold">Export Profile</div>-->
<!--            <div class="card-body">-->
<!--                <form action="/masina" method="POST">-->
<!--                    <button class="btn btn-dark" type="submit" name="export_sql_database">-->
<!--                        Export Whole Profile-->
<!--                    </button>-->
<!--                </form>-->
<!--            </div>-->
<!--        </div>-->

<!--    </div>-->

</div>

{% endblock %}