{% 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>
    {{ 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 | Gestion des études du client
        </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">
                        <h3 class="box-title">Client : {{ finalCustomer.name }}</h3>
                    </div>
                    <table id="projects-list" class="hover row-border" style="width:100%">
                        <thead>
                        <tr>
                            <th>Créer le</th>
                            <th>État</th>
                            <th>Appareil</th>
                            <th>Marque</th>
                            <th>Modèle</th>
                            <th>Mise à jour le</th>
                            {% if not is_granted('ROLE_LECTURE_SEULE') %}
                                <th>Modifier</th>
                            {% else %}
                                <th>Accéder</th>
                            {% endif %}
                        </tr>
                        </thead>
                        <tbody>
                        {% for project in finalCustomerProjects %}
                            <tr>
                                <td>{{ project.createdAt ? project.createdAt|date('d/m/Y H:i:s') : '' }}</td>
                                {% set stateColor =  project.state == 'win' ? "green" : (project.state == 'in_progress' ? 'orange' : 'red') %}
                                <td style="font-weight:bold;color: {{ stateColor }}">{{ project.getAvailableStateTypeName(project.state) }}</td>
                                <td>{{ "@todo à récupérer depuis techdata" }}</td>
                                <td>{{ "@todo à récupérer depuis techdata" }}</td>
                                <td>{{ "@todo à récupérer depuis techdata" }}</td>
                                <td>{{ project.updatedAt ? project.updatedAt|date('d/m/Y H:i:s') : '' }}</td>
                                <td>
                                    {% if userAgency.id == project.user.agency.id or (userAgency.id != project.user.agency.id and project.user.agency.sharedFolder) %}
                                        <a href="{{ path('project_edit', {'id': project.id}) }}" style="color:white;">
                                            <button type="button" class="btn boutonAction">
                                                <img src="{{ asset('install-bois/icon/tab_action_modifier.png') }}"
                                                     alt="Modifier">
                                            </button>
                                        </a>
                                    {% else %}
                                        Pas autorisé
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <div class="box-footer">
                        <a href="{{ path("final_customer_index") }}">
                            <button type="button" class="btn boutonRetour pull-left">Revenir à la liste de vos clients
                            </button>
                        </a>
                        <button type="button" class="btn boutonAction" data-toggle="modal"
                                data-target="#modal-add-project" style="float: right">
                            Créer une nouvelle étude
                        </button>
                    </div>
                </div>
                <script type="application/javascript">
                    let params = {
                        "columnDefs": [
                            {"type": "date-euro", "targets": [0, 5]},
                        ],
                    };
                    initDatatable('#projects-list', params, [6], false, false)
                    )
                </script>
            </div>
        </div>
    </div>
    <div>
        {{ render(controller('App\\Controller\\FinalCustomerController::newProject', { 'id' : finalCustomer.id })) }}
    </div>
{% endblock %}