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

{% block title %}Affectation | secufinance{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('plugins/table/datatable/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('plugins/table/datatable/dt-global_style.css') }}">
    <link href="{{ asset('assets/css/components/custom-modal.css') }}" rel="stylesheet" type="text/css"/>

    <link href="{{ asset('assets/css/scrollspyNav.css') }}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('plugins/select2/select2.min.css') }}">
    <link href="{{ asset('assets/css/scrollspyNav.css') }}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{{ asset('plugins/font-icons/fontawesome/css/regular.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/font-icons/fontawesome/css/fontawesome.css') }}">
{% endblock %}

{% block body %}
       <div class="layout-px-spacing"> <br>
    <div class="row" id="cancel-row">
        <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
            <div class="widget-content widget-content-area br-6">
                <form method="post" enctype="multipart/form-data">
                    <div class="row">
                        <!-- comptable -->
                        <div class="col-md-4">
                            <select class="form-control  tagging" name="accountant" required >
                                {% for accountant in accountants %}
                                    <option value="{{ accountant.id }}">{{ accountant.lastName }} {{ accountant.firsName }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-1 text-center">
                            {# <div class="icon-container" style="margin-top: 10px;">
                             <i data-feather="arrow-right-circle"></i><span class="icon-name"></span>
                             </div>#}
                            <button class="btn btn-primary mb-2 mr-2" style="height: 52px;">
                                <i data-feather="arrow-right-circle"></i><span class="icon-name"></span>
                            </button>
                        </div>
                        <!--clients -->
                        <div class="col-md-4">
                            <select class="form-control tagging" multiple="multiple" name="clients[]" required>
                                {% for client in clients %}
                                    {% if client.accountant is null %}
                                        <option value="{{ client.id }}">{{ client.company }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-primary btn-block mb-4 mr-2" style="height: 52px;">
                                Enregistrer
                            </button>
                        </div>

                    </div>

                </form>
            </div>
        </div>
    </div>
    <div class="page-header">
        <div class="page-title">
            <h3>Affectations</h3>
        </div>
    </div>

    <div class="row" id="cancel-row">

        <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
            {# <h3>Affectations</h3>
             <button type="button" class="btn btn-primary mb-2 mr-2" data-toggle="modal"
                     data-target="#addUser" style="float: right; margin-bottom: 16px; margin-top: 30px;">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="feather feather-user-plus">
                     <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                     <circle cx="8.5" cy="7" r="4"></circle>
                     <line x1="20" y1="8" x2="20" y2="14"></line>
                     <line x1="23" y1="11" x2="17" y2="11"></line>
                 </svg>
             </button>#}
            <div class="widget-content widget-content-area br-6">
                <div class="table-responsive mb-4 mt-4">
                    <table id="zero-config" class="table table-hover" style="width:100%">
                        <thead>
                        <tr>
                            <th>Client</th>
                            <th>Comptable</th>
                            <th class="no-content"></th>
                        </tr>
                        </thead>
                        <tbody>
                        {#{% for accountant in accountants %}
                            <tr>
                                <td>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                         stroke-linejoin="round" class="feather feather-user text-info">
                                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                        <circle cx="12" cy="7" r="4"></circle>
                                    </svg>
                                </td>

                                <td>
                                    <div class="d-flex">
                                        <p class="align-self-center mb-0">{{ accountant.firsName }} {{ accountant.lastName }}</p>
                                    </div>
                                </td>
                                <td>

                                    {% for client in accountant.clients %}
                                        <span class="badge-chip badge-light mt-3 mb-3 ml-2 position-relative">
                                            {% if client.logo is not null %}
                                                <img src="{{ asset('uploads/clients/' ~ client.logo ) }}" alt="Person" width="96" height="96">
                                            {% else %}
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                     stroke-linejoin="round" class="feather feather-user text-info">
                                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                        <circle cx="12" cy="7" r="4"></circle>
                                    </svg>
                                            {% endif %}

                                    <span class="text">{{client.company}}</span>
                                     </span>
                                    {% endfor %}

                            </tr>
                        {% endfor %}#}
                        {% for client in clients %}
                            {% if client.accountant is not null %}
                            <tr>
                                <td>
                                    <div class="d-flex">
                                        <span class="badge-chip badge-light mt-3 mb-3 ml-2 position-relative">
                                            {% if client.logo is not null %}
                                                <img src="{{ asset('uploads/clients/' ~ client.logo ) }}" alt="Person" width="96" height="96">
                                            {% else %}
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                     stroke-linejoin="round" class="feather feather-user text-info">
                                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                                    <circle cx="12" cy="7" r="4"></circle>
                                                </svg>
                                            {% endif %}

                                            <span class="text">{{client.company}}</span>
                                        </span>
                                    </div>
                                </td>
                                <td>
                                    {{ client.accountant.firsName ~ ' ' ~ client.accountant.lastName }}
                                </td>
                                <td>
                                    <a href="{{ path('affectation_delete', {'accountant': client.accountant.id, 'client': client.id}) }}" class="text-danger" title="retirer l'affectation">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="9" x2="15" y2="15"></line><line x1="15" y1="9" x2="9" y2="15"></line></svg>
                                    </a>
                                </td>

                            </tr>
                            {% endif %}
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('plugins/table/datatable/datatables.js') }}"></script>
    <script>
        $('#zero-config').DataTable({
            "oLanguage": {
                "oPaginate": {
                    "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                    "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
                },
                "sInfo": "Afficher la page _PAGE_ de _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                "sSearchPlaceholder": "Recherche...",
                "sLengthMenu": "Résultats :  _MENU_",
            },
            "stripeClasses": [],
            "lengthMenu": [7, 10, 20, 50],
            "pageLength": 7
        });
    </script>
    <script src="{{ asset('assets/js/scrollspyNav.js') }}"></script>
    <script src="{{ asset('plugins/select2/select2.min.js') }}"></script>
    <script src="{{ asset('plugins/select2/custom-select2.js') }}"></script>
    <script>
        $(".tagging").select2({
            tags: true
        });
    </script>
    <script src="{{ asset('assets/js/scrollspyNav.js') }}"></script>
    <script src="{{ asset('plugins/font-icons/feather/feather.min.js') }}"></script>
    <script type="text/javascript">
        feather.replace();
    </script>
{% endblock %}