{% extends 'admin.html.twig' %}

{% block content %}
    <div class="block-header">
        <h2>Kontakty</h2>
    </div>
    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="card">
                <div class="header">
                    <div class="row clearfix">
                        <div class="col-sm-2">
                            <div class="form-group">
                                <div class="form-line">
                                    <input type="text" name="date-from" id="date-from" class="form-control datepicker" placeholder="Data od" autocomplete="off"  value="{{searchDateFrom}}" />
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="form-group">
                                <div class="form-line">
                                    <input type="text" name="date-to" id="date-to" class="form-control datepicker" placeholder="Data do" autocomplete="off"  value="{{searchDateTo}}" />
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <select class="form-control show-tick" id="select-global-dates">
                                    <option value="reset">Wszystkie dane</option>
                                    <option value="p_month">Poprzedni miesiąc</option>
                                    <option value="c_month">Aktualny miesiąc</option>
                                    <option value="c_quarter">Aktualny kwartał</option>
                                    <option value="c_year">Aktualny rok</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row clearfix">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <div class="form-line">
                                    <select id="search-contacts" name="search-contacts[]" class="form-control show-tick selectpicker" multiple title="Klient" data-live-search="true">
                                        {% for contact in contacts %}
                                            <option value="{{contact}}">{{contact}}</option>
                                        {% endfor %}
                                    </select>   
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <div class="form-line">
                                    <select id="search-users" name="search-users[]" class="form-control show-tick selectpicker" multiple title="Pracownik" data-live-search="true">
                                        {% for user in users %}
                                            <option value="{{user}}">{{user}}</option>
                                        {% endfor %}
                                    </select>   
                                </div>
                            </div>
                        </div>
                    </div>
                    <ul class="header-dropdown m-r-0">
                        <li>
                            <a href="{{path('nordmind_contact_add')}}" class="btn btn-primary" data-toggle="modal" data-target="#mdModal">
                                Nowy kontakt
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="body">
                    <div class="table-responsive">
                        <table id="contact-table" class="table table-bordered table-striped table-hover dataTable js-exportable">
                            <thead>
                                <tr>
                                    <th>Nazwisko i imię</th>
                                    <th>Opiekun</th>
                                    <th>Telefon</th>
                                    <th>Email</th>
                                    <th>Data dodania</th>
                                    <th>Opis</th>
                                    <th>Akcje</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>Nazwisko i imię</th>
                                    <th>Opiekun</th>
                                    <th>Telefon</th>
                                    <th>Email</th>
                                    <th>Data dodania</th>
                                    <th>Opis</th>
                                    <th>Akcje</th>
                                </tr>
                            </tfoot>
                            <tbody>
                                {% for contact in contacts %}
                                    {% if not contact.deletedAt %}
                                        <tr data-id="{{ contact.id }}" class="{{ contact.deletedAt ? 'deleted-row' : '' }}">
                                            <td><a href="{{path('nordmind_contact_show', {id: contact.id})}}">{{ contact.getFullName() }}</a></td>
                                            <td>{{ contact.user }}</td>
                                            <td>{{ contact.phone }}</td>
                                            <td>{{ contact.email }}</td>
                                            <td>{{ contact.createdAt|date('Y-m-d') }}</td>
                                            <td>{{ contact.description }}</td>
                                            <td>
                                                <a href="{{ path('nordmind_contact_edit', {'id': contact.id}) }}"
                                                   data-toggle="modal" data-target="#mdModal">
                                                    <i class="material-icons">mode_edit</i>
                                                </a>
                                                <a href="{{ path('nordmind_contact_delete', {'id': contact.id}) }}"
                                                   class="confirm-button" data-type="confirm">
                                                    <i class="material-icons">delete</i>
                                                </a>
                                            </td>
                                        </tr>
                                    {% endif %}
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock content %}
{% block javascript %}
    {{ parent() }}
    <script type="text/javascript">
        $(function () {
            $('#select-global-dates').change(function () {
                if ($('#select-global-dates').val())
                {
                    datesSelect($('#select-global-dates').val(), '#date-from', '#date-to')
                }
            });
            //Exportable table
            var dataTable = $('#contact-table').DataTable({
                //scrollX: true,
                dom: 'Bfrtip',
                responsive: true,
                pageLength: 500000,
                buttons: [
                    'copyHtml5', 'csv', 'excel', 'pdf', 'print'
                ],
                colReorder: true,
                "language": {
                    "url": "/js/plugins/jquery-datatable/extensions/Polish.lang.js"
                }

            });
            $.fn.dataTable.ext.search.push(
                    function (settings, data, dataIndex) {
                        var dateFrom = ($('#date-from').val());
                        if (dateFrom)
                        {
                            dateFrom = dateFrom.split('.');
                            dateFrom = dateFrom[2] + '-' + dateFrom[1] + '-' + dateFrom[0];
                        }
                        var dateTo = $('#date-to').val();
                        if (dateTo)
                        {
                            dateTo = dateTo.split('.');
                            dateTo = dateTo[2] + '-' + dateTo[1] + '-' + dateTo[0];
                        }
                        var expectedDate = data[4];
        {#                        expectedDate = expectedDate.split('.');
                                expectedDate = expectedDate[2] + '-' + expectedDate[1] + '-' + expectedDate[0];#}
        {#                        console.log(dateTo);
                                console.log(expectedDate);#}

                                                    if (
                                                            (!dateFrom ||
                                                                    (new Date(dateFrom).getTime() <= new Date(expectedDate).getTime())
                                                                    ) && (!dateTo ||
                                                            (new Date(dateTo).getTime() >= new Date(expectedDate).getTime())
                                                            )
                                                            )
                                                    {
                                                        return true;
                                                    }
                                                    return false;
                                                }
                                        );

                                        $.fn.dataTable.ext.search.push(
                                                function (settings, data, dataIndex) {
                                                    var contacts = $('#search-contacts').val();
                                                    var contact = data[0];
                                                    if (!(contacts) ||
                                                            jQuery.inArray(contact, contacts) != -1
                                                            )
                                                    {
                                                        return true;
                                                    }
                                                    return false;
                                                }
                                        );
                                        $.fn.dataTable.ext.search.push(
                                                function (settings, data, dataIndex) {
                                                    var users = $('#search-users').val();
                                                    var user = data[1];
                                                    if (!(users) ||
                                                            jQuery.inArray(user, users) != -1
                                                            )
                                                    {
                                                        return true;
                                                    }
                                                    return false;
                                                }
                                        );

                                        dataTable.columns([5]).visible(false, false);
                                        $("#date-from, #date-to").on("dp.change", function (e) {
                                            dataTable.draw();
                                        });
                                        $('#search-contacts').change(function () {
                                            dataTable.draw();
                                        });
                                        $('#search-users').change(function () {
                                            dataTable.draw();
                                        });
                                    });
    </script>
{% endblock %}