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

{% block title %} {% trans %}COSAP - Clients{% endtrans %} {% endblock %}


{% block body %}
    {{ parent() }}

    {% if action == "edit" or action == "add" %}
        <section class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h6 style="font-weight:500;">{% if action == "add" %} {% trans %}Nouvel{% endtrans %} {% else %} {% trans %}Modifier{% endtrans %} {% endif %} {% trans %}Enregistrement{% endtrans %}</h6>
                    </div>
                    <div class="card-body">
                        {{ include('CRM/Client/action.html.twig') }}
                    </div>
                </div>
            </div>
        </section>
    {% endif %}

    <section class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="bug-list-search-content">
                        <form method="get" action="">
                            <div class="row">
	                            <div class="col-4">
                                    <div class="position-relative">
                                        <input type="search" id="search-clients" name="search_input" value="{{ app.request.get('search_input')}}" class="form-control" placeholder="Recherche avancée...">
                                        <div class="form-control-position">
                                            <i class="fa fa-search text-size-base text-muted la-rotate-270"></i>
                                        </div>
                                    </div>
                                </div><!-- end div search input -->
                                <div class="col-4">
                                    <div class="bug-list-search-content">
                                        <select class="select2 select_load" style="width: 100%;" name="search_pays" onChange="this.form.submit()">
                                            <option value="">{% trans %}Choisir un pays{% endtrans %}</option>
                                            {% for pay in constant('App\\Entity\\Client::COUNTRIES') %}
                                                <option value="{{ pay }}" {% if pay == app.request.get('search_pays') %} selected {% endif %} >{{ pay }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div><!-- end div search pays -->
                                <div class="col-4">
                                    <div class="bug-list-search-content">
                                        <select class="select2 select_load" style="width: 100%;" name="search_type" onChange="this.form.submit()">
                                            <option value="">{% trans %}Choisir un type{% endtrans %}</option>
                                            <option value="{{ constant('App\\Entity\\Client::T1') }}" {% if search_type == constant('App\\Entity\\Client::T1') %} selected {% endif %}>{{ constant('App\\Entity\\Client::TYPE')[constant('App\\Entity\\Client::T1')] }}</option>
                                            <option value="{{ constant('App\\Entity\\Client::T2') }}" {% if search_type == constant('App\\Entity\\Client::T2') %} selected {% endif %}>{{ constant('App\\Entity\\Client::TYPE')[constant('App\\Entity\\Client::T2')] }}</option>
                                            <option value="{{ constant('App\\Entity\\Client::T3') }}" {% if search_type == constant('App\\Entity\\Client::T3') %} selected {% endif %}>{{ constant('App\\Entity\\Client::TYPE')[constant('App\\Entity\\Client::T3')] }}</option>
                                            <option value="{{ constant('App\\Entity\\Client::T4') }}" {% if search_type == constant('App\\Entity\\Client::T4') %} selected {% endif %}>{{ constant('App\\Entity\\Client::TYPE')[constant('App\\Entity\\Client::T4')] }}</option>
                                            <option value="{{ constant('App\\Entity\\Client::T5') }}" {% if search_type == constant('App\\Entity\\Client::T5') %} selected {% endif %}>{{ constant('App\\Entity\\Client::TYPE')[constant('App\\Entity\\Client::T5')] }}</option>
                                            <option value="{{ constant('App\\Entity\\Client::T6') }}" {% if search_type == constant('App\\Entity\\Client::T6') %} selected {% endif %}>{{ constant('App\\Entity\\Client::TYPE')[constant('App\\Entity\\Client::T6')] }}</option>
                                            <option value="{{ constant('App\\Entity\\Client::T7') }}" {% if search_type == constant('App\\Entity\\Client::T7') %} selected {% endif %}>{{ constant('App\\Entity\\Client::TYPE')[constant('App\\Entity\\Client::T7')] }}</option>
                                            <option value="{{ constant('App\\Entity\\Client::T8') }}" {% if search_type == constant('App\\Entity\\Client::T8') %} selected {% endif %}>{{ constant('App\\Entity\\Client::TYPE')[constant('App\\Entity\\Client::T8')] }}</option>
                                        </select>
                                    </div>
                                </div><!-- end div search type --> 
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h6 style="font-weight:500;">{% trans %}Liste des Clients{% endtrans %} <span class="badge badge badge-info badge-pill mr-2">{{ clients.getTotalItemCount }}</span></h6>
                    <div class="heading-elements mt-0">
                        {% if app.user and is_granted('ROLE_AJOUTER_CLIENT') %}
                            <a class="btn btn-cyan btn-sm" href="{{ path('add_client_page') }}"><i class="fa fa-plus mr-0"></i>
                                {% trans %}nouvel enregistrement{% endtrans %}
                            </a>
                        {% endif %}
                        <a class="btn btn-warning btn-sm" href="{{ path('client_page') }}" title="{% trans %}Actualiser{% endtrans %}"><i class="fa fa-refresh"></i></a>
                    </div>
                </div>  <!-- end card-header -->
                <div class="card-body">
                    {% if not clients|length %}

                        <div class="alert alert-info" role="alert" style="padding:8px;">
                            <i class="icon fa fa-info-circle"></i> <span id="content-message"> {% trans %}Aucun enregistrement trouvé{% endtrans %}</span>
                        </div>

                    {% else %}
                    <div class="table-responsive m-t-40">
                        <table class="display nowrap table table-hover table-bordered" cellspacing="0" width="100%" style="font-size:13.5px;">
                            <thead style="background:#e0eeea57;">
                                <tr>
                                    <th>{% trans %}Nom de client{% endtrans %}</th>
                                    <th style="text-align:center;">{% trans %}Abréviation{% endtrans %}</th>
                                    <th style="text-align:center;">{% trans %}Pays{% endtrans %}</th>
                                    <th style="text-align:center;">{% trans %}Type{% endtrans %}</th>
                                    <th style="text-align:center;">{% trans %}Logo{% endtrans %}</th>
                                    <th style="text-align:center;">{% trans %}Actions{% endtrans %}</th>
                                </tr>
                            </thead>
                            <tbody style="line-height:40px;">
                            {% for client in clients %}
                                <tr class="rowDetail" id="row_{{ client.id }}" data-id="{{ client.id }}" {% if client.id == selected_row %} style="Background-color:#dcdfdc;" {% endif %}>
                                    <td >{{ client.name }}</td>
                                    <td style="text-align:center;">{{ client.abreviation }}</td>
                                    <td style="text-align:center;">{{ client.paysName }}</td>
                                    <td style="text-align:center;">{{ client.typeValue }}</td>
                                    <td style="text-align: center; min-width:60px; width:60px;">
                                        <div class="media">
                                            <div data-toggle="popover" data-content="<img src='{{ asset('uploads/logo_client/'~client.logo) }}' width='100px' height='100px'>" data-trigger="hover" data-html="true">
                                                <img src="{{ asset('uploads/logo_client/'~client.logo) }}" style="height:40px;width:40px; border:0.5px solid gray;" alt="Logo de client">
                                            </div>
                                        </div>
                                    </td>
                                    <td style="text-align:center; min-width:120px; width:120px;">
                                        <div class="btn-group">
                                            
                                            <button type="button" class="btn btn-light dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </button>
                                            <div class="dropdown-menu animated flipInY">
                                                <a class="dropdown-item" id="show_info" data-id="{{ client.id }}" style="cursor:pointer;" data-toggle="modal" data-target="#modal_show_info_{{ client.id }}">
                                                    <i class="fa fa-info-circle" aria-hidden="true" style="color:rgb(255, 0, 221);"></i> {% trans %}Plus d'infos{% endtrans %}
                                                </a>
                                                
                                                {% if app.user and is_granted('ROLE_MODIFIER_CLIENT') %}
                                                    <a class="dropdown-item" href="{{ path('edit_client_page',{id:client.id,search_input:search_input,search_pays:search_pays,page:page}) }}" style="cursor:pointer;">
                                                        <i class="fa fa-pencil-square-o" aria-hidden="true" style="color:blue;"></i> {% trans %}Modifier{% endtrans %}
                                                    </a>
                                                {% endif %}

                                                {% if app.user and is_granted('ROLE_SUPPRIMER_CLIENT') %}
                                                    <a class="dropdown-item" id="delete_data" data-id="{{ client.id }}" data-toggle="modal" data-target="#modal_delete_data">
                                                        <i class="fa fa-trash-o" style="color:red;"></i> {% trans %}Supprimer{% endtrans %}
                                                    </a>
                                                {% endif %}

                                            </div>
                                        </div>
                                    </td>
                                    
                                    {{ include('CRM/Client/modals/show_info.html.twig') }}

                                </tr>
                            {% endfor %}

                            </tbody>
                        </table>
                        <div class="navigation pull-right" style="margin-left:20px;">
                            {{ knp_pagination_render(clients) }}
                        </div>
                    </div><!-- end div table-responsive -->
                    {% endif  %}
                </div><!-- end div card-body -->
            </div><!-- end div card -->
        </div><!-- end div col-12 -->
    </section><!-- end div section -->

    <!--  start modal suppression data -->

    <div id="modal_delete_data" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false"
        data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel" style="color:#4b50fc">{% trans %}Suppression enregistrement{% endtrans %}</h5>
                    <a class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true" title="{% trans %}Fermer{% endtrans %}"><i class="fa fa-close text-white"></i></a>
                </div>
                <div class="modal-body">
                    <p style="color:black;">{% trans %}Voulez vous vraiment supprimer cet enregistrement{% endtrans %} ?</p>
                </div>
                <form method="post" novalidate>
                    <div class="modal-footer" style="display:flex !important; justify-content:space-between">
                        <a class="btn btn-danger waves-effect btn-sm" data-dismiss="modal" style="color:white; padding:7px;"><i class="ft-x-square"></i> {% trans %}Annuler{% endtrans %}</a>
                        <a class="btn btn-success waves-effect btn-sm" data-token-delete="{{ csrf_token('delete-item') }}" style="color:white; padding:7px" id="confirmer_delete"><i class="ft-check-square"></i> {% trans %}Confirmer{% endtrans %}</a>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!--  end  modal suppression data -->


{% endblock %}


{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">

        $("#client_contacts").select2({closeOnSelect:false});

        $("#client_secteur").select2({closeOnSelect:false});

        $(document).on("click","#show_info",function(){

            var id = $(this).data("id");

            //remove background color from all table rows
            $('.rowDetail').each(function(){
                $(this).css('background-color','inherit');
            });

            //add background-color to the selected row
            $('#row_'+id).css('background-color','#dcdfdc');

        })

        {% for flash_message in app.session.flashBag.get('success') %}

            toastr.success('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('info') %}

            toastr.info('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('warning') %}

            toastr.warning('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('error') %}

            toastr.error('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

    </script>

    {% include('CRM/Client/ajax/delete.html.twig') %}

{% endblock %}