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

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" type="text/css"
          href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css"/>
{% endblock %}

{% block title %}Contract index{% endblock %}

{% block body %}
    <div class="col-lg-6">
        <h1>{{ 'title.contract_list'|trans }}</h1>
    </div>
    <div class="col-lg-6">
        {% if app.user.profileType.type != 'b' %}
            <a href="{{ path('contract_new') }}" class="btn btn-primary btn-sm pull-right">
                <h4><i class="fas fa-folder-plus"></i> {{ 'action.create_post'|trans }}</h4>
            </a>
        {% endif %}
    </div>
    {#    <table class="table table-striped table-middle-aligned">#}
    {#        <thead>#}
    {#        <tr>#}
    {#            <th scope="col">#{{ 'label.contract.number'|trans }}</th>#}
    {#            <th scope="col"><i class="fa fa-calendar" aria-hidden="true"></i> {{ 'label.create_date'|trans }}</th>#}
    {#            <th scope="col"><i class="fa fa-building" aria-hidden="true"></i> {{ 'label.company_name'|trans }}</th>#}
    {#            <th scope="col">{{ 'label.company.siren'|trans }}</th>#}
    {#            <th scope="col">{{ 'label.contract.status'|trans }}</th>#}
    {#            {% for extraOption in extra_options %}#}
    {#                <th scope="col">#}
    {#                    {{ extraOption.name }}#}
    {#                </th>#}
    {#            {% endfor %}#}
    {#            <th scope="col"><i class="fa fa-user" aria-hidden="true"></i> {{ 'profile_type.seller'|trans }}</th>#}
    {#            <th scope="col">{{ 'label.date_appointment'|trans }}</th>#}
    {#            <th scope="col">{{ 'label.signed_date'|trans }}</th>#}
    {#            <th scope="col" class="text-center"><i class="fa fa-cogs"#}
    {#                                                   aria-hidden="true"></i> {{ 'label.actions'|trans }}</th>#}
    {#        </tr>#}
    {#        </thead>#}
    {#        <tbody>#}
    {#        {% for contract in contracts %}#}
    {#            <tr>#}
    {#                <td>{{ contract.number }}</td>#}
    {#                <td>{{ contract.createdAt ? contract.createdAt|date('d-m-Y H:i:s') : '' }}</td>#}
    {#                <td>{{ contract.owner.companyName }}</td>#}
    {#                <td>{{ contract.owner.siren }}</td>#}
    {#                {% set lastStatus = contract.contractStatusList|first %}#}
    {#                <td>#}
    {#                    <span class="badge badge-secondary"><i>{{ lastStatus.status.description }}</i></span>#}
    {#                </td>#}

    {#                {% for extraOption in extra_options %}#}
    {#                    <td>#}
    {#                        {% for extraOptionType in contract.getTotalExtraOptions %}#}
    {#                            {% if  extraOption.id == extraOptionType.id %}#}
    {#                                {{ extraOptionType.value }}#}
    {#                            {% endif %}#}
    {#                        {% endfor %}#}
    {#                    </td>#}
    {#                {% endfor %}#}
    {#                <td>#}
    {#                    {% if app.user.profileType.type == 'b' %}#}
    {#                        {{ contract.author.getHiddenFullname() }}#}
    {#                    {% else %}#}
    {#                        {{ contract.author.fullname }}#}
    {#                    {% endif %}#}
    {#                </td>#}
    {#                <td>{{ contract.appointmentDate ? contract.appointmentDate|date('d-m-Y') : '' }}</td>#}
    {#                <td>{{ contract.signatureDate ? contract.signatureDate|date('d-m-Y') : '' }}</td>#}
    {#                <td>#}
    {#                    <a href="{{ path('contract_show', {'id': contract.id}) }}"><i class="fa fa-eye"></i></a>#}
    {#                    {% if app.user.id == contract.author.id or app.user.profileType.type in ['s', 'p'] %}#}
    {#                        <a href="{{ path('contract_edit', {'id': contract.id}) }}">#}
    {#                            <i class="fa fa-edit" aria-hidden="true"></i>#}
    {#                        </a>#}
    {#                    {% endif %}#}
    {#                </td>#}
    {#            </tr>#}
    {#        {% else %}#}
    {#            <tr>#}
    {#                <td colspan="14">{{ 'text.contract.no_records_found'|trans }}</td>#}
    {#            </tr>#}
    {#        {% endfor %}#}
    {#        </tbody>#}
    {#    </table>#}
    <div class="row"><br/></div>
    <!-- Insert this where you want the table to appear -->
    <div id="contracts">
        <div class="col-md-2 col-md-offset-5">
            <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Chargement en cours...</span>
        </div>
    </div>

    <!-- Insert this at the end of your body element, but before the closing tag -->

{% endblock %}
{% block javascripts %}
    {{ parent() }}
    {#    <script>#}
    {#        var jQuery = $;#}
    {#        $(function() {#}
    {#            $('#tablecontainer').initDataTables({{ datatable_settings(datatable) }});#}
    {#        });#}
    {#    </script>#}
    <script src="{{ asset('bundles/datatables/js/datatables.js') }}"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
    <script>
        var jQuery = $;
        $(function () {
            $('#contracts').initDataTables({{ datatable_settings(datatable) }}, {
                searching: true,
                dom: '<"html5buttons"B>lTfgitp',
                // "columnDefs": [
                //     {"targets": [10, 5, 6], "searchable": false},
                //     {"width": "20%", "targets": 9}
                // ],
                buttons: [
                    'copy',
                    {extend: 'pdf', title: 'domains'},
                    {extend: 'print'}
                ],
                "bSortCellsTop": true,
                // "initComplete": function (settings, json) {
                //     console.log('Showing ' + json.recordsTotal + ' jobs.');
                //     //console.log($("#contracts thead tr:eq(1)").find('input').length);
                //     this.api().columns().every(function () {
                //         var column = this;
                //         //var col = table.column($(this).index());
                //         //console.log($(column.header()).closest('thead').find('select').eq(column.index()));
                //         //var select = $(column.header()).find('select')
                //         var select = $(column.header()).closest('thead').find('select').eq(column.index()) ?? null;
                //
                //         //             var select = $('<select><option value=""></option></select>')
                //         //                 .appendTo($(column.footer()).empty())
                //         //if(select.length){
                //         select.on('change', function () {
                //             const val = $.fn.dataTable.util.escapeRegex(
                //                 $(this).val()
                //             );
                //             console.log(column.index());
                //             column
                //                 .search(val ? '^' + val + '$' : '', true, false)
                //                 //.search(val ? val : '', true, false)
                //                 .draw();
                //         });
                //         //}
                //         // if (column.index() === 7) {
                //         //
                //         //     select.append('<option value=""></option>');
                //         //     //
                //         //     column.data().unique().sort().each(function (d, j) {
                //         //         //console.log(j);
                //         //         select.append('<option value="' + d.replace(/(<([^>]+)>)/ig, "") + '">' + d.replace(/(<([^>]+)>)/ig, "") + '</option>')
                //         //     });
                //         // }
                //     });
                // },
            }).then(function (dt) {
                // dt contains the initialized instance of DataTables
                // dt.on('draw', function (e) {
                //     let target = e.currentTarget;
                //     $(target).find('thead th').each(function() {
                //         var title = $(this).text();
                //         console.log(title);
                //         $(this).html('<input type="text" placeholder="Search ' + title + '" />');
                //     });
                // })
                //dt.columns().every(function () {
                // var column = this;
                // Apply the search
                $.each($('.select-filter', dt.table().header()), function (i) {
                    var that = this;
                    const index = $(that).data('search-column-index');
                    var column = dt.column(index);
                    $(that).on('change', function () {
                        if (column.search() !== that.value) {
                            column
                                .search(that.value)
                                .draw();

                        } else if (column.search() !== "") {
                            column
                                .draw();
                        }
                    });
                });
                $.each($('.input-filter', dt.table().header()), function (e, i) {
                    var that = this;
                    const index = $(that).data('range-column-index');
                    var column = dt.column(index);
                    if ($(that).attr('id') === 'filter_date_end') {
                        $('#submit_date_range').on('click', function (ev) {
                            ev.preventDefault();
                            var date_start = $('#filter_date_start').val();
                            var date_end = $('#filter_date_end').val();
                            if (date_start !== '' && date_end !== '') {
                                var range_date = date_start + '|' + date_end;
                                if (column.search() !== range_date) {
                                    column
                                        .search(range_date)
                                        .draw();
                                }
                            }
                            // $.each($(".input-daterange").find('input'), function (index, element) {
                            //     // console.log($('#filter_date_start').data('range_value'));
                            //     // console.log($('#filter_date_end').data('range_value'));
                            //     console.log($(element).val());
                            //     //date_range_values.push($(element).data('range_value'));
                            // });
                            //console.log(date_range_values);
                        });
                        $('#clear_date_range').on('click', function (ev) {
                            ev.preventDefault();
                            $('#filter_date_start').val('');
                            $('#filter_date_end').val('');
                            column
                                .search('')
                                .draw();
                        });
                    }
                });
                // Apply the search
                // $.each($('.input-filter', dt.table().header()), function () {
                //     var that = this;
                //     const index = $(that).data('range-column-index');
                //     var column = dt.column(index);
                //     console.log($(that).datepicker());
                //$(that).on('changeDate', function (e) {
                // console.log($(that).find('input'));
                //$('#filter_date_end').trigger("change");
                //});
                // $(that).on('change paste keyup', function(){
                //     console.log('change!!');
                // });
                // $(that).on('change paste keyup', function () {
                //     if (column.search() !== that.value) {
                //         column
                //             .search(that.value)
                //             .draw();
                //     }
                // });
                // });
                //     if (column.index() === 7) {
                //         //console.log($(column.header()).find('select').first());
                //         var select = $(column.header()).find('select').first();
                //         //.appendTo($(column.header()).empty())
                //         // .on('change', function () {
                //         //     var val = $.fn.dataTable.util.escapeRegex(
                //         //         $(this).val()
                //         //     );
                //         //
                //         //     column
                //         //         .search(val ? '^' + val + '$' : '', true, false)
                //         //         .draw();
                //         // });
                //         console.log(column);
                //         column.data().unique().sort().each(function (d, j) {
                //             select.append('<option value="' + d + '">' + d + '</option>')
                //         });
                //     }
                // });
            });
        });

    </script>
{% endblock %}