{% extends 'base_admin.html.twig' %}
{% block title %}Payments Made{% endblock %}
{% block body %}
<h1 class="text-danger">Payments</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('payment_made_new', {id: '1'}) }}">+ Active</a>
        <a target="_blank" class="btn btn-outline-info" href="{{ path('payment_made_new', {id:'0'}) }}">+ Inactive</a>
        <a target="_blank" class="btn btn-outline-primary" href="{{ path('payment_order_new') }}">+ Group</a>
    </div>
    <div class="col-md-6">
        {% if group_payments is defined %}
        <div id = "groupPaymentValue" data="{{ group_payments }}">
        </div>
        {% endif %}
        {% if group_payments=='split' %}
            <button id="grouppayments_group" class="group-button btn btn-info search-action group-payments" data="group">Group payments by month</button>
        {% else %}
            <button id="grouppayments_split" class="group-button btn btn-info search-action group-payments" data="split">Split payments in month</button>
        {% endif %}
        <a target="_blank" class="btn btn-primary"  href="{{ path('payment_made_check') }}">Check-grid</a>
    </div>

</div>
<hr>

<table class="table">
    <thead>
    <tr>
        <th>Employer</th>
        <th>Employee</th>
        <th style="text-align: right">Month worked</th>
        <th style="text-align: right">Amount</th>
        {% if group_payments == 'split' %}
        <th class="text-danger"> Payment made</th>
        {% endif %}
        <th>Comment</th>
    </tr>
    </thead>
    <tbody>
    {% for payment_made in payment_mades %}
    <tr>
        <td>{{ payment_made.paymentemployer.employer }}</td>
        <td>{{ payment_made.employee.fullName }}</td>
        <td style="text-align: right" data-sort="{{ payment_made.workedmonth ? payment_made.workedmonth|date('Y-m-d') : '' }}"> {{ payment_made.workedmonth ? payment_made.workedmonth|date('M-Y') : '' }}</td>
        <td style="text-align: right"><a href="{{ path('payment_made_edit', {'id': payment_made.id}) }}">{{ payment_made.amount|number_format(2, '.', ',') }}</a></td>

        {% if group_payments == 'split' %}
        <td style="text-align: right">{{ payment_made.dateofpaymentfrombank ? payment_made.dateofpaymentfrombank|date('d-M-Y') : '' }}</td>
        {% endif %}

        <td style="text-align: left">{{ payment_made.comment }}</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,
            });
        })
    </script>

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

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