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

{% block title %}
    COSAP - Bilan quotidien
{% endblock %}

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

    <style type="text/css">
        tbody {
            line-height: 40px;
            font-size: 12px !important;
        }

        .title span {
            font-size: 12px !important;
        }

        .table th,
        .table tbody td {
            padding-left: 5px;
            padding-right: 5px;
        }

        .popover {
            z-index: unset;
        }

        .badge-pill {
            padding-right: 0.4em !important;
            padding-left: 0.4em !important;
        }

        .table tbody td {
            padding-top: 5px;
            padding-bottom: 5px;
        }
        /*-------------------------------------------------*/
        .SpanNature{
            position: absolute;
            width: 40px;
            height: 40px;
            top: calc(( 100% - 40px) /2);
        }
        .presence{
            background-color: white !important;
            border-color: #00b5b8 !important;
        }
        .presence i{
            color:#00b5b8;
        }
        .presence:hover {
            background-color: #00b5b8 !important;
            border-color: #00b5b8 !important;
        }
        .presence:hover i {
            color:white;
        }
        .present{
            background-color: #00b5b8 !important;
            border-color: #00b5b8 !important;
        }
        .present i{
            color:white;
        }
        .present:hover{
            background-color: white !important;
            border-color: #00b5b8 !important;
        }
        .present:hover i{
            color:#00b5b8;
        }
    </style>


{% endblock %}

{% block body %}
    {{ parent() }}
    <div class="content-detached content-right">
        <div class="content">
            <div class="content-overlay"></div>
            <section class="row all-contacts">
                <div class="col-md-12">
                    <div class="card card-bottom">
                        <div class="card-content">
                            <div class="card-body" style="min-height:1000px;">

                                <ul class="nav nav-tabs nav-top-border no-hover-bg nav-justified" role="tablist" id="tablistBilan">

                                    <li class="nav-item">
                                        <a {% if app.request.get('type') == 'aujourdhui' %} class="nav-link active" id="link-tabBilanDuJour" data-toggle="tab" href="#BilanDuJour" aria-controls="Bilan du jour" role="tab" aria-selected="false" {% else %} class="nav-link" href="{{ path('bilan_page',{'type':'aujourdhui'}) }}" {% endif %} id="link-tabBilanDuJour" >Bilan du jour <span class="badge badge badge-info badge-pill mr-0" id="nbrBilandDuJour">{{countDujour}}</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a {% if app.request.get('type') == 'retard' %} class="nav-link active" data-toggle="tab" href="#BilanEnRetard" aria-controls="Bilan en retard" role="tab" aria-selected="false" {% else %} class="nav-link" href="{{ path('bilan_page',{'type':'retard'}) }}" {% endif %} id="link-tabBilanRetard" >Bilan non renseigné <span class="badge badge badge-info badge-pill mr-0" id="badgeNbrRetard">{{countRetard}}</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a {% if app.request.get('type') == 'historique' or app.request.get('type') == 'historique_general' %} class="nav-link active" data-toggle="tab" href="#HistoriqueBilan" aria-controls="historique" role="tab" aria-selected="false" {% else %} class="nav-link" href="{{ path('bilan_page',{'type':'historique'}) }}" {% endif %} id="link-tabBilanHistorique" >Historique <span class="badge badge badge-info badge-pill mr-0">{{countHisto}}</span></a>
                                    </li>

                                </ul>

                                <div class="tab-content px-1 pt-1">
                                    {{ include('Bilan/tabs/bilanDuJour.html.twig') }}
                                    {{ include('Bilan/tabs/bilanEnRetard.html.twig') }}
                                    {{ include('Bilan/tabs/historiqueBilan.html.twig') }}
                                    <div></div>
                                    <!-- end card body -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
        <!--  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 pull-left 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 -->
        <!--  start modal add new element -->

        <div id="modal_ajout_enregistrement" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static" style="overflow: hidden;">
            <div class="modal-dialog modal-lg" style="max-width: 800px !important;">
                <div class="modal-content" style="max-height: calc(100vh - 35px);">
                    <div class="modal-header">
                        <h5 class="modal-title text-primary" id="myLargeModalLabel">{% trans %}Nouvel 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" style="overflow: hidden;overflow-y: auto;" >

                        <div id="loading_module"  style="position:absolute; left:45%; top:30%;visibility: hidden;">
                            <div>
                                <img src="{{ asset('template/app-assets/images/icons/loading.gif')}}" class="body_loading" height="70" style="z-index:1000;"/>
                            </div>
                        </div>

                        <div class="row" id="new_bilan_content">
                            <div class="col-md-12">
                                <div class="col-md-12" style="margin-top: 10px;margin-bottom: 10px;">
                                    <div class="form-group list-group">

                                        <div class="card">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group mt-1">

                                                            <label for="input3">Nature :
                                                                <span class=" text-danger">*</span>
                                                            </label>

                                                            <select class="select2" id="selectNature" style="width: 100%"> 

                                                                <option value=""> Choisir nature </option>
                                                                {% for key,nature in constant('App\\Entity\\Bilan::NATUREADD') %}

                                                                    <option value="{{ key }}" {% if key == "N09" %} selected {% endif %}>{{ nature }}</option>

                                                                {% endfor %}

                                                            </select>

                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group mt-1">

                                                            <label for="input3">Durée (en heure) :
                                                                <span class=" text-danger">*</span>
                                                            </label>

                                                            <select class="select2" style="width: 100%" id="duree"> 

                                                                <option value=""> Choisir durée </option>
                                                                {% for heure in heures %}
                                                                    <option value="{{heure}}" {% if heure =="1" %} selected {% endif %}>{{ heure }} </option>
                                                                {% endfor %}

                                                            </select>

                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="contentNature contentAction" id="N09" >
                                                    <div class="row">
                                                        
                                                        <div class="col-md-8">
                                                            <div class="form-group mt-1">

                                                                <label>Titre :</label>

                                                                <input placeholder="Saisir un titre" type="text" class="form-control" id="titrAction" style="width: 100%;">

                                                            </div>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <div class="form-group mt-1">

                                                                <label>Intitulé :
                                                                    <span class=" text-danger">*</span>
                                                                </label>

                                                                <select class="select2" id="selectIntitule" style="width: 100%"> 

                                                                    <option value=""> Choisir intitulé </option>
                                                                    {% for intitule in intituleActions %}

                                                                        <option value="{{intitule.id}}"> {{intitule.label}} </option>

                                                                    {% endfor %}

                                                                </select>

                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">	
                                                        <div class="col-md-6">
                                                            <div class="form-group mt-1">

                                                                <label >Projet : </label>

                                                                <select class="select2" id="selectProjet" style="width: 100%"> 

                                                                    <option value=""> Choisir projet </option>
                                                                    {% for projet in projets %}

                                                                        <option value="{{projet.id}}"> {{projet.intitule}} </option>

                                                                    {% endfor %}
                                                                </select>

                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group mt-1">

                                                                <label for="input3">Module : </label>

                                                                <select class="select2" id="selectModule" style="width: 100%"> 

                                                                    <option value=""> Choisir module </option>

                                                                </select>

                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                                <div class="contentNature contentReunion" id="N01" style="display: none">
                                                    <div class="row">

                                                        <div class="col-md-12">
                                                            <div class="form-group mt-1">

                                                                <label>Titre :
                                                                    <span class=" text-danger">*</span>
                                                                </label>

                                                                <input placeholder="Saisir un titre" type="text" class="form-control" id="titrReunion" style="width: 100%;">

                                                            </div>
                                                        </div>

                                                    </div>
                                                    <div class="row">	
                                                        <div class="col-md-6">
                                                            <div class="form-group mt-1">

                                                                <label >Projet :</label>

                                                                <select class="select2" id="selectProjetReunion" style="width: 100%"> 

                                                                    <option value=""> Choisir projet </option>
                                                                    {% for projet in projets %}

                                                                        <option value="{{projet.id}}"> {{projet.intitule}} </option>

                                                                    {% endfor %}
                                                                </select>

                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group mt-1">

                                                                <label for="input3">Module :</label>

                                                                <select class="select2" id="selectModuleReunion" style="width: 100%"> 

                                                                    <option value=""> Choisir module </option>

                                                                </select>

                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>	
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <form method="post" novalidate>
                        <div class="modal-footer" style="display:flex !important;justify-content:space-between;">
                            <a class="btn btn-danger waves-effect pull-left btn-sm" data-dismiss="modal" style="color:white;padding:7px;" id="AnnulerAjoutBilan"><i class="ft-x-square"></i> {% trans %}Annuler{% endtrans %}</a>
                            <a class="btn btn-success waves-effect pull-right btn-sm" style="color:white;margin: 0;padding:7px;" data-token-addBilan="{{ csrf_token('add-item') }}" id="confirmer_ajout_bilan"><i class="ft-check-square"></i> {% trans %}Confirmer{% endtrans %}</a>
                        </div>
                    </form>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!--  end modal add new element -->
        </div>

        <!--  end modal add new element -->

    {% endblock %}

    {% block javascripts %}

        {{ parent() }}

        <script type="application/javascript" data-main="static/js/main" src="static/js/libs/require/2.1.11/require.js"></script>

        <script type="text/javascript">

            $('#projet_collaborateurs').select2({closeOnSelect: false});

            $('#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});


            {% 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('Bilan/ajax/add.html.twig') %}
        {% include('Bilan/ajax/delete.html.twig') %}
        {% include('Bilan/ajax/valid.html.twig') %}
        {% include('Bilan/ajax/presence.html.twig') %}        
        {% include('Bilan/ajax/recherche.html.twig') %}

    {% endblock %}