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

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

{% set array_title = {'mine':'Mes Congés', 'in_progress':'Congés en cours', 'validate':'Congés à valider', 'history':'Historique des congés'} %}

{% set array_role = {'mine':'ROLE_AFFICHER_CONGE_PERSONNEL', 'in_progress':'ROLE_AFFICHER_CONGE_EN_COURS', 'validate':'ROLE_AFFICHER_CONGE_A_VALIDER', 'history':'ROLE_AFFICHER_HISTORIQUE_CONGE'} %}

{% 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">

    <style type="text/css">

        .icon-solde {
            box-shadow: 3px 3px 30px #8ecbdd;
            -webkit-animation-name: clignote-icon-solde; 
            -webkit-animation-duration: 2s; 
            -webkit-animation-iteration-count: infinite;
        }

        @-webkit-keyframes clignote-icon-solde {
            0% {box-shadow: 0px 0px 10px gray;}
            50% {box-shadow: 0px 0px 20px #8ecbdd;}
            100% {box-shadow: 0px 0px 20px #e57112;}
        }

        .popover{
            max-width:900px;
        }

    </style>

{% endblock %}

{% block body %}

{{ parent() }}


    {{ include('CongeProcess/right_side.html.twig') }}
    

    {{ include('CongeProcess/left_side.html.twig') }}

    <!--  start modal sélection catégorie demande congé -->
    <div id="modal_demande_conge" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="badge badge-facebook" id="span_content" style="font-size: 14px !important;">Catégorie de congé</span>
                    <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">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group m-b-40">
                                <label>{% trans %}Choisir le catégorie de congé{% endtrans %}</label> :
                                <select class="select2 form-control" id="select_category_conge" style="width: 100%">
                                    <option value="">choisir le catégorie de congé</option>
                                    {% for category in list_categories_conges %}
                                        <option value={{ category.id }}>{{ category.label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <form method="post" novalidate>
                    <div class="modal-footer">
                        <a class="btn btn-success waves-effect btn-sm" data-token-conge="{{ csrf_token('conge-item') }}" style="color:white; padding:7px;" id="confirmer_demande_conge">{% trans %}Confirmer{% endtrans %}</a>
                    </div>
                </form>

            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!--  end modal sélection catégorie demande congé -->


    <!--  start modal sélection catégorie demande congé pour un tierce personne -->
    <div id="modal_demande_conge_tierce" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="badge badge-facebook" id="span_content" style="font-size: 14px !important;">Congé tierce</span>
                    <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">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group m-b-40">
                                <label>{% trans %}Choisir le personnel{% endtrans %}</label> :
                                <select class="select2 form-control" id="personnel_tierce" style="width: 100%">
                                    <option value="">choisir le personnel</option>
                                    {% for personnel in list_personnels %}
                                        <option value={{ personnel.id }}>{{ personnel.fullName }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group m-b-40">
                                <label>{% trans %}Choisir le catégorie de congé{% endtrans %}</label> :
                                <select class="select2 form-control" id="category_conge" style="width: 100%">
                                    <option value="">choisir le catégorie de congé</option>
                                    {% for category in list_categories_conges %}
                                        <option value={{ category.id }}>{{ category.label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <form method="post" novalidate>
                    <div class="modal-footer">
                        <a class="btn btn-success waves-effect btn-sm" data-token-conge="{{ csrf_token('conge-item') }}" style="color:white; padding:7px;" id="confirmer_conge_tierce">{% trans %}Confirmer{% endtrans %}</a>
                    </div>
                </form>

            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!--  end modal sélection catégorie demande congé pour un tierce personne -->

    {% include('CongeProcess/modals/import_piece_justificative.html.twig') %}
                

{% endblock %}


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

    <script type="text/javascript">

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

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

        $('#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('CongeProcess/ajax/category_demande_conge.html.twig') %}

    {% include('CongeProcess/ajax/trait_demande_conge.html.twig') %}

    {% include('CongeProcess/ajax/manage_conge_tierce.html.twig') %}

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

    {% include('CongeProcess/ajax/import_piece_justificative.html.twig') %}

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

    {% include('CongeProcess/ajax/annuler_demande_conge.html.twig') %}

    {% include('CongeProcess/ajax/generate_selected_conge.html.twig') %}

{% endblock %}