{% 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 [2020,2021,2022,2023,2024,2025,2026] %}
                                <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">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] %}
                            <th scope="col" onclick="sortMasinaTable({{ loop.index0 }})"
                                style="cursor:pointer;">
                                {{ colName }}
                            </th>
                        {% endfor %}
                        <th>Delete</th>
                    </tr>
                </thead>

                <tbody>
                {% for row in userDetails[1:] %}
                    <tr>
                        {% for col in row %}
                            {% 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="/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 %}