{% extends 'base.html' %}
{% block title %}Line Items By Month{% endblock title %}

{% block content %}
<main>
    <div class="container mt-5">
        {% if files %}
            <div class="card mb-3">
                <div class="card-header bg-primary text-white">
                    File available in static folder for upload - 
                    New files must be formatted with the following columns in this order - Date, Vendor, Note, Confirmation Code, Charge, Deposit
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">Filename</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for file in files %}
                                <tr>
                                    <th scope="row"><a href="{{url_for('upload_file', filename=file)}}">{{file}}</a></th>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        {% else %}
        <div class="card">
            <div class="card-header bg-primary text-white">
                No files in the upload folder
            </div>
        </div>
        {% endif %}
        <div class="card mb-3">
            <div class="card-header bg-primary text-white">
                Add Line Item
            </div>
            <div class="card-body">
                
                <form action="{{ url_for('add_line_item') }}" method="POST">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <tbody id="add-line-item-table">
                                <tr>
                                    <td><input type="text" class="form-control" name="ParentId" placeholder="ParentId"></td>
                                    <td><input type="text" class="form-control" name="Amount" placeholder="Amount"></td>
                                    <td><input type="text" class="form-control" name="Currency-Type" placeholder="Currency Type"></td>
                                    <td><input type="text" class="form-control" name="Vendor" placeholder="Vendor"></td>
                                    <td><input type="text" class="form-control" name="Date" placeholder="Date yyyy-mm-dd"></td>
                                    <td><input type="text" class="form-control" name="Confirmation Code" placeholder="Confirmation Code"></td>
                                    <td><input type="text" class="form-control" name="Note" placeholder="Note"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
                

            </div>
        </div>
        <div class="card mb-3">
            <div class="card-header bg-primary text-white">
                Line Items
                <br/>
                <label for="month-selector">Choose a month:</label>

                <select name="month-selector" id="month-selector">
                    {% for month in all_months %}
                        <option value="{{month}}">{{month}}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">Amount</th>
                                <th scope="col">Currency Type</th>
                                <th scope="col">Vendor</th>
                                <th scope="col">Date</th>
                                <th scope="col">Confirmation Code</th>
                                <th scope="col">Note</th>
                                <th scope="col">Reassign Vendor</th>
                                <th scope="col">Split Line?</th>
                            </tr>
                        </thead>
                        <tbody id="table-body">
                            <tr><td>Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="card mb-5">
            <div class="card-header bg-primary text-white">
                Child Line Items
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">Parent LineItem ID</th>
                                <th scope="col">Amount</th>
                                <th scope="col">Currency Type</th>
                                <th scope="col">Vendor</th>
                                <th scope="col">Date</th>
                                <th scope="col">Confirmation Code</th>
                                <th scope="col">Note</th>
                                <th scope="col">Reassign Vendor</th>
                            </tr>
                        </thead>
                        <tbody id="child-table-body">
                            <tr><td>Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>
<script src="{{url_for('.static', filename='line_items_by_month.js')}}"></script>
{% endblock content %}