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

{% set array_type = ['mine', 'in_progress', 'validate', 'history'] %}

{% set array_title = {'mine':'Mes Télétravail', 'in_progress':'Télétravail en cours', 'validate':'Télétravail à valider', 'history':'Historique de Télétravail'} %}

{% set array_role = {'mine':'ROLE_AFFICHER_TELETRAVAIL_PERSONNEL', 'in_progress':'ROLE_AFFICHER_TELETRAVAIL_EN_COURS', 'validate':'ROLE_AFFICHER_TELETRAVAIL_A_VALIDER', 'history':'ROLE_AFFICHER_HISTORIQUE_TELETRAVAIL'} %}

{% set array_icon = {'mine':'fa-calendar', 'in_progress':'fa-refresh', 'validate':'fa-check', 'history':'fa-database'} %}

{% block title %} COSAP - {{ array_title[app.request.get('type')] }} {% endblock %}

{% block stylesheets %}
	{{ parent()}}

	<link href="{{ asset('template/assets/css/organigrammeRH.css') }}" rel="stylesheet">

{% endblock %}

{% block body %}

{{ parent() }}

    <section class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h6 style="font-weight: 500;">
                                    
                        {{ array_title[app.request.get('type')] }} 

                        <span class="badge badge-info badge-pill">{{ list_teletravail.getTotalItemCount }}</span> 
                        
                        <span class="dropdown float-right" style="line-height:1.4;border-radius:3px; margin-left:8px; padding:2px;">
                            
                            {% if app.user and app.request.get('type') == 'history' and is_granted('ROLE_EXPORTER_TELETRAVAIL_VERS_EXCEL') %}
                                
                                <a class="btn btn-success btn-not-load btn-sm" href="{{ path('exporter_teletravail_vers_xsl', {type: app.request.get('type'), search_date_debut: app.request.get('search_date_debut'), search_date_fin: app.request.get('search_date_fin'), search_statut: app.request.get('search_statut'), search_direction: app.request.get('search_direction'), search_service: app.request.get('search_service'), search_groupe: app.request.get('search_groupe'), search_personnel: app.request.get('search_personnel')}) }}" title="{% trans %}Exporter vers un excel{% endtrans %}">
                                    <i class="fa fa-file-excel-o"></i>
                                </a>

                            {% endif %}
                            
                            {% if app.user and app.request.get('type') == 'mine' and app.user.isAutorisateConge and is_granted('ROLE_AJOUTER_TELETRAVAIL_PERSONNEL') %}
                                
                                <a class="btn btn-success btn-not-load btn-sm" id="add_demande_teletravail" data-toggle="modal" data-target="#modal_demande_teletravail" title="{% trans %}Nouvelle demande de Télétravail{% endtrans %}">
                                    <i class="fa fa-plus" style="color:white;"></i>
                                </a>

                            {% endif %}

                            {% if app.user and app.request.get('type') == 'validate' and is_granted('ROLE_VALIDER_ALL_TELETRAVAIL') and list_teletravail|length %}
                                
                                <a class="btn btn-success btn-not-load btn-sm" id="validate_all_demandes_teletravail" data-toggle="modal" data-target="#modal_validate_all_demandes_teletravail" title="{% trans %}Valider tous les demandes de Télétravail{% endtrans %}">
                                    <i class="fa fa-check" style="color:white;"></i>
                                </a>

                            {% endif %}

                            <a data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="dropdown-toggle dropdown-menu-right ml-0" style="background-color:#dcdfdc; padding:4px; border-radius:2px;">
                                <i class="fa fa-ellipsis-v"></i>
                            </a>
                            <span aria-labelledby="btnSearchDrop31" class="dropdown-menu mt-1 dropdown-menu-right">

                                {% for type in array_type %}

                                    {% if app.user and is_granted(array_role[type]) %}
                                        <a class="dropdown-item" {% if app.request.get('type') == type %} style="background-color:#dcdfdc" {% endif %} href="{{ path('teletravail_page',{'type':type}) }}" title="" style="cursor:pointer;"><i class="fa {{ array_icon[type] }}" style="color:#3c8ddd"></i>  {{ array_title[type] }} {% if type == 'validate' %}<span class="badge badge-danger" id="count_teletravail_tab"></span> {% endif %} </a>
                                    {% endif %}

                                {% endfor %}

                            </span>

                        </span> 

                    </h6>
                </div>  <!-- end card-header -->
            </div>
        </div>
    </section>

    <section class="row all-contacts">
        <div class="col-12">
            <div class="card">

                <div class="card-content">
                    <div class="card-body" style="min-height:1000px;">

                        {% if app.request.get('type') == 'mine' or app.request.get('type') == 'history' %}        

                            <h6 style="font-size:13.5px !important;height: 30px;">

                                {% if app.request.get('type') == 'mine' or (app.request.get('type') == 'history' and app.request.get('search_personnel') is not empty) %}
                                    Nombre de jours de Télétravail cumulé :
                                    <span class="badge badge-info"> {{ cumule_TT }} {% if cumule_TT > 1 %}jours{% else %}jour{% endif %}</span>
                                {% endif %}

                                <span class="float-right">

                                    <a class="btn btn-sm btn-search-teletravail
                                        {% if app.request.get('search_date_debut') is not empty or app.request.get('search_date_fin') is not empty or app.request.get('search_statut') is not empty or app.request.get('search_direction') or app.request.get('search_service') or app.request.get('search_groupe') or app.request.get('search_personnel') %} 
                                            btn-success 
                                        {% else %} btn-search {% endif %}" style="cursor:pointer;color:white;font-size:13px;"> 
                                        <i class="fa fa-search"></i>  Recherche avancée
                                    </a>

                                </span><!--end advanced_search -->

                            </h6>

                            <hr>
                            
                            {% if app.request.get('type') == 'mine' %}

                                {{ include('TeleTravailProcess/advanced_search/mine_search.html.twig') }}

                            {% elseif app.request.get('type') == 'history' %}

                                {{ include('TeleTravailProcess/advanced_search/history_search.html.twig') }}
                                
                            {% endif %}

                        {% endif %}

                        <!-- debut tabs -->
                        <ul class="nav nav-tabs nav-top-border no-hover-bg nav-justified" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="active-tab1" data-toggle="tab" href="#teletravail" aria-controls="teletravail" role="tab" aria-selected="true" >Liste des Télétravail</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="link-tab2" data-toggle="tab" href="#organigramme" aria-controls="organigramme" role="tab" aria-selected="false">Ordinogramme</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="link-tab3" data-toggle="tab" href="#tracability" aria-controls="tracability" role="tab" aria-selected="false">Traçabilité</a>
                            </li>
                        </ul>

                        <div class="tab-content px-1 pt-1">
                            <div class="tab-pane active" id="teletravail" aria-labelledby="link-tab1" role="tabpanel">
                                {% if app.request.get('type') == 'mine' %}
                                    {{ include('TeleTravailProcess/Tabs/liste_teletravail_mine.html.twig') }}
                                {% elseif app.request.get('type') == 'in_progress' %}
                                    {{ include('TeleTravailProcess/Tabs/liste_teletravail_in_progress.html.twig') }}
                                {% elseif app.request.get('type') == 'validate' %}
                                    {{ include('TeleTravailProcess/Tabs/liste_teletravail_a_validate.html.twig') }}
                                {% elseif app.request.get('type') == 'history' %}
                                    {{ include('TeleTravailProcess/Tabs/liste_teletravail_history.html.twig') }}
                                {% endif %}
                            </div>

                            <div class="tab-pane in" id="organigramme" aria-labelledby="active-tab2" role="tabpanel">
                                {{ include('TeleTravailProcess/Organigramme/organigramme.html.twig') }}
                            </div>
                            
                            <div class="tab-pane in" id="tracability" aria-labelledby="active-tab3" role="tabpanel">
                                {{ include('TeleTravailProcess/Tracability/tracability.html.twig') }}
                            </div>
                        </div>
                        <!--end tabs -->
                    </div> <!-- end card-body -->
                </div>  <!-- end card-content -->
            </div> <!-- end card -->
        </div> <!-- end col-12 -->
    </div> <!-- end row all-contacts -->

    {% include('TeleTravailProcess/modals/add_demande_teletravail.html.twig') %}

    {% include('TeleTravailProcess/modals/validate_all_demandes_teletravail.html.twig') %}

{% endblock %}

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

    <script type="text/javascript">

        var date = new Date();

        var demain = new Date(date.getFullYear(), date.getMonth(), (date.getDate() + 1));

        $('#dateDebut_TT').bootstrapMaterialDatePicker({minDate: demain, weekStart: 0, time: false, disabledDays: [], lang: 'fr', cancelText: 'Annuler', weekStart: 1, format: 'YYYY-MM-DD'});

        $('#dateFin_TT').bootstrapMaterialDatePicker({minDate: demain, weekStart: 0, time: false, disabledDays: [], lang: 'fr', cancelText: 'Annuler', weekStart: 1, format: 'YYYY-MM-DD'});

        $('#date_debut_search').bootstrapMaterialDatePicker({weekStart: 0, time: false, disabledDays: [], lang: 'fr', cancelText: 'Annuler', weekStart: 1});

        $('#date_fin_search').bootstrapMaterialDatePicker({weekStart: 0, time: false, disabledDays: [], lang: 'fr', cancelText: 'Annuler', weekStart: 1});

        $("#clear_input").click(function(){

            $('#date_debut_search').val("");

            $('#date_fin_search').val("");

        });

        {% 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('TeleTravailProcess/ajax/add_demande_teletravail.html.twig') %}

    {% include('TeleTravailProcess/ajax/generate_organigramme.html.twig') %}

    {% include('TeleTravailProcess/ajax/decision_demande_teletravail.html.twig') %}

    {% include('TeleTravailProcess/ajax/default_search.html.twig') %}

    {% include('TeleTravailProcess/ajax/annuler_demande_teletravail.html.twig') %}

{% endblock %}