{% extends 'base_admin.html.twig' %}
{% block title %}Expense index{% endblock %}
{% block body %}
    <h1 class="text-danger">Expenses</h1>
    {% include ('template_parts/_date_ranges.html.twig') %}
    <div class="row">
        <div class="col-md-5">
            <a target="_blank" class="btn btn-outline-info" href="{{ path('expense_new', {id: '1'} ) }}">+ Active</a>
            <a target="_blank" class="btn btn-outline-info" href="{{ path('expense_new', {id:'0'}) }}">+ Inactive</a>
            <a target="_blank" class="btn btn-outline-primary" href="{{ path('expense_order_new') }}">+ Group</a>
        </div>
        <div class="col-md-4">
        </div>
    </div>
    <hr>
    <table class="table">
        <thead>
        <tr>
            <th>Employee</th>
            <th>Employer</th>
            <th>Category</th>
            <th style="text-align: right">Month</th>
            <th style="text-align: right">Amount</th>
            <th style="text-align: right" width="150px">Comment 1</th>
            <th style="text-align: right">Comment 2</th>
            <th style="text-align: right">Created</th>
        </tr>
        </thead>
        <tbody>
        {% for expense in expenses %}
            <tr>
                <td>{{ expense.employee.fullName }}</td>
                <td>{{ expense.expenseEmployer }}</td>
                <td>{{ expense.expenseCategory.name }}</td>
                <td style="text-align: right" data-sort="{{ expense.expenseMonth ? expense.expenseMonth|date('Y-m-d') : '' }}">{{ expense.expenseMonth ? expense.expenseMonth|date('M-Y') : '' }}</td>
                <td style="text-align: right">
                    <a href="{{ path('expense_edit', {'id': expense.id}) }}">{{ expense.amount |number_format(2, '.', ',') }}</a>
                </td>
                <td style="text-align: right">{{ expense.comment1 }}</td>
                <td style="text-align: right">{{ expense.comment2 }}</td>
                <td style="text-align: right" class="text-secondary" data-sort="{{ expense.createdAt ? expense.createdAt|date('Y-m-d') : '' }}">{{ expense.createdAt ? expense.createdAt|date('d-M-Y') : '' }}</td>

            </tr>
        {% else %}

        {% endfor %}
        </tbody>
    </table>

{% endblock %}

{% block javascripts %}

    {{ parent() }}

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/fr.js"></script>
    <script>

        $(document).ready(function () {
            $(".datepicker").flatpickr({
                altInput: true,
                altFormat: "d M Y",
                //defaultDate: "",
                time_24hr: true,
                enableTime: false,
                noCalendar: false,
                dateFormat: "Y-m-d H:i",
                minuteIncrement: 15
                //minDate: "today",
            });
        })

    </script>


    {% include 'template_parts/_js_date_ranges.html.twig' %}
{% endblock javascripts %}

  {% block datatable %}
      <script>
          $(document).ready(function () {
              $('.table').DataTable({
                  'pageLength': 100,
                  "order": [[3, 'desc'], [2, 'asc']]
                  "paging": false,
                  "searching": false,
                  "bInfo": false
              });
          });
      </script>
  {% endblock datatable %}