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


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

    {{ include('ParametrageConge/detailsSoldeConge/tabs/trace_personnel.html.twig') }}

    <div class="row">

        <!-- debut solde normal -->
        <div class="col-xl-6 col-lg-12">
            <!-- debut partie pour l'ajout ou le modif -->
            {% if action == "add" or action == "edit" %}
                <section class="row" id="card_action">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h6 style="font-weight:500;"> {% if action == "add" %} Nouvel enregistrement {% elseif action == "edit" %} Modifier enregistrement {% endif %}</h6><hr>
                                {{ include('ParametrageConge/detailsSoldeConge/tabs/action_solde_annuel.html.twig') }}
                            </div>
                        </div>
                    </div>
                </section>
            {% endif %}
            <!-- fin partie pour l'ajout ou le modif -->
            <div class="card">
                <div class="card-header">
                    <h6 style="font-weight:500;">Soldes de congés annuels <span class="badge badge badge-info badge-pill mr-2" id="nb_solde_annuel">{{ user.solde }} {% if user.solde|abs <= 1 %} jour {% else %} jours {% endif %}</span></h6>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li>
                                {% if app.user and (is_granted('ROLE_AFFICHER_SOLDE_CONGE_DETAILLEE')) %}
                                    <a class="btn btn-warning btn-sm" id="tracability_solde_annuel" data-toggle="modal" data-target="#modal_tracability_solde_annuel" title="{% trans %}Voir traçabilité{% endtrans %}" style="position:relative;">
                                        <span class="badge badge-info badge-pill" style="position:absolute;top:-13px;left:-13px;">{{ user.tracabilitySoldeAnnuelsCible|length }}</span>
                                        <i class="fa fa-eye" style="color:white;"></i>
                                    </a>
                                {% endif %}
                                {% if app.user and is_granted('ROLE_CONFIG_SOLDE_CONGE') %}
                                    <a class="btn btn-success btn-sm" href="{{ path('add_solde_annuel_page',{id:user.id}) }}" title="Nouvel enregistrement"><i class="fa fa-plus"></i></a>
                                {% endif %}
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    {% if not user.soldeDetaileds|length %}
                        <div class="alert alert-info mr-1 ml-1" id="message" role="alert" style="padding:8px;">
                            <i class="icon fa fa-info-circle"></i> <span id="content-message"> Aucun enregistrement trouvé</span>
                        </div>
                    {% else %}
                        <div class="table-responsive">
                            <table class="table table-hover mb-0 ps-container ps-theme-default">
                                <thead>
                                    <tr class="bg-info bg-lighten-2">
                                        <th>Année</th>
                                        <th>Solde</th>
                                        {% if app.user and is_granted('ROLE_CONFIG_SOLDE_CONGE') %}
                                            <th style="text-align:center;">Actions</th>
                                        {% endif %}
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for solde in user.soldeDetaileds %}
                                        <tr data-id="{{ solde.id }}" {% if solde.id == selected_row_annuel %} style="Background-color:#dcdfdc;" {% endif %}>
                                            <td class="text-truncate">{{ solde.annee|date('Y') }}</td>
                                            <td class="text-truncate" style="width:200px;min-width:200px;">
                                                {% if solde.solde is not null %}
                                                    {% if solde.solde >= 0 %}
                                                        <span class="badge badge badge-success badge-pill mr-2">{{ solde.solde }} {% if solde.solde|abs <= 1 %} jour {% else %} jours {% endif %}</span>
                                                    {% else %}
                                                        <span class="badge badge badge-danger badge-pill mr-2">{{ solde.solde }} {% if solde.solde|abs <= 1  %} jour {% else %} jours {% endif %}</span>
                                                    {% endif %}
                                                {% endif %}
                                            </td>
                                            {% if app.user and is_granted('ROLE_CONFIG_SOLDE_CONGE') %}
                                            <td style="width:120px;min-width:120px;text-align:center;">
                                                <a class="btn btn-linkedin btn-sm" href="{{path('edit_solde_annuel_page',{id_solde:solde.id})}}" title="Modifier">
                                                    <i class="fa fa-pencil"></i>
                                                </a>
                                                {% if action == "" %}
                                                    <a class="btn btn-danger btn-sm" data-annee="{{ solde.annee|date('Y') }}" data-id="{{ solde.id }}" data-toggle="modal" data-target="#modal_delete_solde_annuel" style="color:white;"
                                                        id="delete_solde_annuel" title="Supprimer">
                                                        <i class="fa fa-trash"></i>
                                                    </a>
                                                {% endif %}
                                            </td>
                                            {% endif %}
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- end solde normal -->


        <!-- debut solde de circonstance -->
        <div class="col-xl-6 col-lg-12">
            <!-- debut partie pour modif circonstance -->
            {% if action == "edit_circonstance" %}
                <section class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h6 style="font-weight:500;">Modifier enregistrement </h6><hr>
                                {{ include('ParametrageConge/detailsSoldeConge/tabs/action_solde_circonstance.html.twig') }}
                            </div>
                        </div>
                    </div>
                </section>
            {% endif %}
            <!--fin partie pour modif circonstance -->
            <div class="card">
                <div class="card-header">
                    <h6 style="font-weight:500;">Soldes de congés de circonstance <span class="badge badge badge-info badge-pill mr-2" >{{ user.soldeCirconstances|length }} </span></h6>
                </div>
                <div class="card-content">
                    {% if not user.soldeCirconstances|length %}
                        <div class="alert alert-info mr-1 ml-1" id="message" role="alert" style="padding:8px;">
                            <i class="icon fa fa-info-circle"></i> <span id="content-message"> Aucun enregistrement trouvé</span>
                        </div>
                    {% else %}
                    <div class="table-responsive">
                        <table class="table table-hover mb-0 ps-container ps-theme-default">
                            <thead>
                                <tr class="bg-purple bg-lighten-4">
                                    <th>Circonstance</th>
                                    <th>Solde</th>
                                    {% if app.user and (is_granted('ROLE_CONFIG_SOLDE_CONGE') or is_granted('ROLE_AFFICHER_SOLDE_CONGE_DETAILLEE')) %}
                                        <th style="text-align:center;">Actions</th>
                                    {% endif %}
                                </tr>
                            </thead>
                            <tbody>
                                {% for solde in user.soldeCirconstances %}
                                    {% if solde.circonstance.statut == 1 %}
                                        {% if ((user.genre == 'G01' and (solde.circonstance.genre == 'G01' or solde.circonstance.genre == 'G02')) or (user.genre == 'G02' and (solde.circonstance.genre == 'G01' or solde.circonstance.genre == 'G03'))) %}            
                                            <tr data-id="{{ solde.id }}" {% if solde.id == selected_row_circonstance %} style="Background-color:#dcdfdc;" {% endif %}>
                                                <td class="text-truncate">{{ solde.circonstance.label }}</td>
                                                <td class="text-truncate" style="width:200px;min-width:200px;">{% if solde.solde is not null %} <span class="badge badge-success badge-pill mr-2"> {{ solde.solde }} {{ solde.circonstance.valueUnitySolde }} </span>{% endif %}</td>
                                                {% if app.user and (is_granted('ROLE_CONFIG_SOLDE_CONGE') or is_granted('ROLE_AFFICHER_SOLDE_CONGE_DETAILLEE')) %}
                                                    <td style="width:110px;min-width:110px;text-align:center;">
                                                        {% if app.user and is_granted('ROLE_AFFICHER_SOLDE_CONGE_DETAILLEE') %}
                                                            <a class="btn btn-warning btn-sm" id="tracability_solde_circonstance" data-toggle="modal" data-target="#modal_tracability_solde_circonstance_{{ solde.id }}" title="{% trans %}Voir traçabilité{% endtrans %}" style="position:relative;">
                                                                <span class="badge badge-info badge-pill" style="position:absolute;top:-13px;left:-13px;">{{ solde.tracabilitySoldeCirconstances|length}}</span>
                                                                <i class="fa fa-eye" style="color:white;"></i>
                                                            </a>
                                                        {% endif %}
                                                        {% if app.user and is_granted('ROLE_CONFIG_SOLDE_CONGE') %}
                                                            <a class="btn btn-linkedin btn-sm" href="{{path('edit_solde_circonstance_page',{id_solde:solde.id})}}" title="Modifier">
                                                                <i class="fa fa-pencil"></i>
                                                            </a>
                                                        {% endif %}
                                                        {% include('ParametrageConge/detailsSoldeConge/modals/tracability_solde_circonstance.html.twig') %}
                                                    </td>
                                                {% endif %}
                                            </tr>
                                        {% endif %}
                                    {% endif %}
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- end solde de circonstance -->
    </div>

    <!--  start modal suppression solde annuel -->
    <div id="modal_delete_solde_annuel" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
					<h5 class="modal-title" id="myModalLabel" style="color:#4b50fc">{% trans %}Suppression Solde Annuel{% 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;">Voulez vous vraiment supprimer le solde de congés de l'année <strong id="selected_year"></strong> ?</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_solde_annuel"><i class="ft-check-square"></i> {% trans %}Confirmer{% endtrans %}</a>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!--  end  modal suppression solde annuel -->

{% endblock %}


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

    <script type="text/javascript">

        {% 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('ParametrageConge/detailsSoldeConge/ajax/delete.html.twig') %}

    {% include('ParametrageConge/detailsSoldeConge/ajax/check_input_year.html.twig') %}

    {% include('ParametrageConge/detailsSoldeConge/modals/tracability_solde_annuel.html.twig') %}

{% endblock %}