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

{% set scripts = '' %}
{% block css %}
    <link rel="stylesheet" href="/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
{% endblock %}

{% block title %}Tableau de bord clients{% endblock %}

{% block topRight %}
    <a href="{{ path('app_client_import') }}" class="btn btn-primary"><i class="fas fa-file-import"></i> &nbsp;&nbsp;Importer les clients</a>
    <a href="{{ path('app_client_new') }}" class="btn btn-primary"><i class="fas fa-plus"></i> &nbsp;&nbsp;Ajouter un client</a>
{% endblock %}


{% block body %}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div id="legende-clients" class="d-none">
                        <ul class="list-inline">
                            <li class="list-inline-item" data-status="btn-primary"><span class="pastille bg-primary"></span> Aucun traitement démarré</li>
                            <li class="list-inline-item" data-status="btn-warning"><span class="pastille bg-warning"></span> En traitement</li>
                            <li class="list-inline-item" data-status="btn-success"><span class="pastille bg-success"></span> Traité</li>
                            <li class="list-inline-item" data-status="btn-turquoise"><span class="pastille bg-turquoise"></span> Livré</li>
                        </ul>
                    </div>
                    <table id="clients" class="table table-bordered table-hover table-striped">
                        <thead>
                        <tr>
                            <th>Code dossier</th>
                            <th>Raison sociale</th>
                            <th>Dernier traitement</th>
                            <th>Nom dirigeant</th>
                            <th>Livrables</th>
                            <th>Vous/Tu</th>
                            <th>Actions</th>
                            <th>Hidden</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for client in clients %}
                            <tr id="row-client-{{ client.id }}">
                                <td>
                                    <a href="{{ path('app_client_edit', {'id': client.id, 'tab':'infos'}) }}">{{ client.codeDossier }}</a>
                                </td>
                                <td>
                                    <a href="{{ path('app_client_edit', {'id': client.id, 'tab':'infos'}) }}">{{ client.nomDossier }}</a>
                                </td>
                                <td data-sort="{{ client.getLastTraitement('timestamp') }}">{{ client.getLastTraitement('date') }}</td>
                                <td>{{ client.nomDirigeant|upper }} {{ client.prenomDirigeant|capitalize }}</td>
                                <td>{{ client.getLivrablesSummary()|raw }}</td>
                                <td>{% if client.vousvoiement %}Vous{% else %}Tu{% endif %}</td>
                                <td data-search="{{ client.getTraitementsButtonClass() }}">
                                    <a href="{{ path('app_client_edit', {'id': client.id, 'tab':'fec'}) }}"
                                       class="btn btn-primary btn-sm open-fec-modal mr-2">
                                        FEC
                                        {% if client.getFecs()|default %}
                                            <span class="badge badge-light">{{ client.getFecs()|length }}</span>
                                        {% endif %}
                                    </a>
                                    <a href="{{ path('app_client_edit', {'id': client.id, 'tab':'traitements'}) }}" data-toggle="modal"
                                       class="btn btn-sm open-traitements-modal mr-2 {{ client.getTraitementsButtonClass() }}">
                                        Traitements
                                        {% if client.getTraitements()|default %}
                                            <span class="badge badge-light">{{ client.getTraitements()|length }}</span>
                                        {% endif %}
                                    </a>
                                    <a href="{{ path('app_client_edit', {'id': client.id, 'tab':'infos'}) }}"><i
                                                class="fas fa-edit"></i></a>&nbsp;&nbsp;
                                    {{ include('client/_delete_form.html.twig') }}
                                </td>
                                <td>
                                    {% if (app.request.get('fec_modal')|default and app.request.get('fec_modal') == client.id)
                                        or (app.request.get('traitements_modal')|default and app.request.get('traitements_modal') == client.id)
                                        or (pinned is not null and pinned == client.id) %}
                                        XXX
                                    {% endif %}
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="7">Aucun client trouvé</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <div class="card-footer mt-3">
                        <a href="{{ path('app_client_new') }}" class="btn btn-primary"><i class="fas fa-plus"></i>
                            Ajouter un client</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascript %}
<script src="/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.19/sorting/absolute.js"></script>
<script>
$(function () {

    let dossierCourant = $.fn.dataTable.absoluteOrder( [
        { value: 'XXX', position: 'top' }
      ] );

    const table = $('#clients').DataTable({
        orderFixed: {'pre': [7, 'asc']},
        columnDefs: [{
            targets: 7,
            visible: false,
            type: dossierCourant
        }],
        language: {
            processing:     "Traitement en cours...",
            search:         "Rechercher&nbsp;:",
            lengthMenu:    "Afficher _MENU_ &eacute;l&eacute;ments",
            info:           "Affichage des clients de _START_ à _END_ sur un total de _TOTAL_",
            infoEmpty:      "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
            infoFiltered:   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
            infoPostFix:    "",
            loadingRecords: "Chargement en cours...",
            zeroRecords:    "Aucun &eacute;l&eacute;ment &agrave; afficher",
            emptyTable:     "Aucune donnée disponible dans le tableau",
            paginate: {
                first:      "Premier",
                previous:   "Pr&eacute;c&eacute;dent",
                next:       "Suivant",
                last:       "Dernier"
            },
            aria: {
                sortAscending:  ": activer pour trier la colonne par ordre croissant",
                sortDescending: ": activer pour trier la colonne par ordre décroissant"
            }
        },
        "paging": true,
        "pageLength" : 15,
        "lengthChange": false,
        "ordering": true,
        "info": true,
        "searching":true,
        "autoWidth": false,
        "responsive": true,
    });

    $('#legende-clients li').on('click', function() {

        if($(this).hasClass('selected')) {
            $(this).removeClass('selected');
            table.column(6).search('').draw();
        } else {
            $('#legende-clients li').removeClass('selected');
            $(this).addClass('selected');
            table.column(6).search($(this).data('status')).draw();
        }

    });

    $('#clients_filter').appendTo('#clients_wrapper .row:first-child .col-md-6:first-child');
    $('#clients_wrapper .row:first-child .col-md-6:last-child').addClass('dt-custom-content');
    $('#legende-clients').appendTo('.dt-custom-content').removeClass('d-none');

    function refreshSwitch() {
        $("input[data-bootstrap-switch]").each(function() {
            $(this).attr('data-bootstrap-switch', '');
            $(this).bootstrapSwitch('state', $(this).prop('checked'));
        });
    }


    {% if pinned is not null %}
        jQuery(window).on('load', function() {
            $('#row-client-{{ pinned }}').addClass('pinned-row');
        });
    {% endif %}

});
</script>
{% endblock %}