{% extends '@InstallBois/index.html.twig' %}

{% block title %}
    INSTALL-BOIS
{% endblock %}

{% block head %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    <script type="text/javascript"
            src="{{ asset('install-bois/initDateTimeFormatDatatable.js') ~ "?rnd=" ~ random() }}"></script>
    {{ parent() }}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js">
{% endblock %}

{% block javascripts %}
    {#    <script src="{{ asset('install-bois/app.js') }}"></script> #}
    {{ parent() }}
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Clients | Liste des clients
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12">
                <div class="box box-warning">
                    <div class="box-header with-border">
                        {% if not is_granted('ROLE_LECTURE_SEULE') %}
                            <a href="{{ path("final_customer_new") }}">
                                <button type="button" class="btn boutonAction" style="float: right">
                                    Ajouter un nouveau client
                                </button>
                            </a>
                        {% endif %}
                    </div>
                    <table data-isLectureSeul="{{ is_granted('ROLE_LECTURE_SEULE') }}" id="final-customer-list"
                           class="hover row-border" style="padding:1%;width:100%">
                        <thead>
                        <tr>
                            <th>Civilitée</th>
                            <th>Nom</th>
                            <th>Prénom</th>
                            <th>Magasin associé</th>
                            <th>Code postal</th>
                            <th>Ville</th>
                            <th>Pays</th>
                            <th>Phone</th>
                            <th>Email</th>
                            <th>CreatedAt</th>
                            <th>UpdatedAt</th>
                            <th>Nombre d'études créées</th>
                            {% if not is_granted('ROLE_LECTURE_SEULE') %}
                                <th style="text-align: center">Actions</th>
                            {% else %}
                                <th>Voir ces études</th>
                            {% endif %}
                        </tr>
                        </thead>
                        <tbody>
                        {% for final_customer in final_customers %}
                            <tr>
                                <td>{{ final_customer.civility }}</td>
                                <td style="font-weight: bold;">
                                    {% if final_customer.name %}
                                        {{ final_customer.name }}
                                    {% else %}
                                        Non renseigné
                                    {% endif %}
                                </td>
                                <td style="font-weight: bold;">
                                    {% if final_customer.firstname %}
                                        {{ final_customer.firstname }}
                                    {% else %}
                                        Non renseigné
                                    {% endif %}
                                </td>
                                <td>{{ final_customer.agency.name }}</td>
                                <td>{{ final_customer.address.postalCode }}</td>
                                <td>{{ final_customer.address.city }}</td>
                                <td>{{ final_customer.address.country }}</td>
                                <td>{{ final_customer.phone }}</td>
                                <td>{{ final_customer.email }}</td>
                                <td>{{ final_customer.createdAt ? final_customer.createdAt|date('d/m/Y H:i:s') : '' }}</td>
                                <td>{{ final_customer.updatedAt ? final_customer.updatedAt|date('d/m/Y H:i:s') : '' }}</td>
                                <td style="text-align: center; font-weight: bold;font-size: 18px;">{{ final_customer.getNbProject() }}</td>
                                <td style="text-align: center">
                                    {% if not is_granted('ROLE_LECTURE_SEULE') %}

                                        <a href="{{ path('final_customer_edit', {'id': final_customer.id}) }}">
                                            <button type="button" class="btn boutonAction">
                                                <img src="{{ asset('install-bois/icon/tab_action_modifier.png') }}"/>
                                            </button>
                                        </a>
                                    {% endif %}
                                    <a href="{{ path('project_show_by_final_customer', {'id': final_customer.id}) }}">
                                        <button type="button" class="btn boutonAction">
                                            <img src="{{ asset('install-bois/icon/tab_action_consulter.png') }}"/>
                                        </button>
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <script type="application/javascript">
                    let params = {
                        'columnDefs': [
                            {
                                "targets": 12,
                                "type": "numeric-comma"
                            },
                            {"type": "date-euro", "targets": [9, 10]},
                        ],
                    };
                    let excludeOrderableColumn = !$("#isLectureSeul").val() === true ? [12] : [12, 13];

                    initDatatable('#final-customer-list', params, excludeOrderableColumn);
                </script>
            </div>
        </div>
    </div>
{% endblock %}