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

{% block specificjs %}
<script type="text/JavaScript" src="{{ asset('conges/js/script.conges.js') }}"></script>
  <script type='text/JavaScript'>
    var limitDefaut = {{ recup_delaidefaut }};
    var limitTitulaire1 = {{ recup_delaititulaire1 }};
    var limitTitulaire2 = {{ recup_delaititulaire2 }};
    var limitContractuel1 = {{ recup_delaicontractuel1 }};
    var limitContractuel2 = {{ recup_delaicontractuel2 }};
    var perso_id = {{ perso_id }};
    var categories = JSON.parse('{{ categories | raw }}');
    var samediSeulement = {{ recup_samediseulement }};
    var oneRecoveryPerDay = {{ recup_uneparjour }};

    $(function() {

      var date = $( "#date" ),
        date2 = $( "#date2" ),
        heures = $( "#heures" ),
        commentaires = $( "#commentaires" ),
        allFields = $( [] ).add( date ).add( heures ).add( date2 ).add( commentaires );

      $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 490,
        width: 650,
        modal: true,
        buttons: {
          "Enregistrer": function() {
        // Calcul du delai limit pour la demande de récup en fonction de la catégorie de l'agent
        var admin=false;
        if($("#agent option:selected").val()){
          perso_id=$("#agent option:selected").val();
          admin=true;
        }
        if(categories[perso_id]=="Titulaire"){
          if($("#date2").val()){
            if(limitTitulaire2 == -1){
              limitJours=limitDefaut;
            }else{
              limitJours=limitTitulaire2*30;
            }
          }else{
            if(limitTitulaire1 == -1){
              limitJours=limitDefaut;
            }else{
              limitJours=limitTitulaire1*30;
            }
          }
        }
        else if(categories[perso_id]=="Contractuel"){
          if($("#date2").val()){
            if(limitContractuel2 == -1){
              limitJours=limitDefaut;
            }else{
              limitJours=limitContractuel2*7;
            }
          }else{
            if(limitContractuel1 == -1){
              limitJours=limitDefaut;
            }else{
              limitJours=limitContractuel1*7;
            }
          }
        }
        else{
          limitJours=limitDefaut;
        }

        var bValid = true;
        allFields.removeClass( "ui-state-error" );
        bValid = bValid && checkRegexp( date, /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}/i, "La date doit être au format JJ/MM/AAAA" );
        if(samediSeulement){
          bValid = bValid && checkSamedi(date,"Vous devez choisir un samedi");
        }
        if (oneRecoveryPerDay) {
          bValid = bValid && verifRecup($("#date"));
        }
        if($("#date2").val()){
          bValid = bValid && checkRegexp( date2, /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}/i, "La date doit être au format JJ/MM/AAAA" );
          bValid = bValid && checkDate2(date, date2,"La 2ème date doit être supérieure à la première");
          if(samediSeulement){
            bValid = bValid && checkSamedi(date2,"Vous devez choisir un samedi");
          }
        }
        bValid = bValid && checkLength( heures, "heures", 4, 5 );
        if(admin && checkDateAge( date, limitJours, "La demande d'heures supplémentaires doit être effectuée dans les "+limitJours+" jours",false)==false){
          res=confirm("Attention, la demande d'heures supplémentaires doit être effectuée dans les "+limitJours+" jours.\nEn tant qu'administrateur, vous pouvez outrepasser cette règle.\nVoulez-vous continuer ?");
          bValid = bValid && res;
        }
        else{
          bValid = bValid && checkDateAge( date, limitJours, "La demande d'heures supplémentaires doit être effectuée dans les "+limitJours+" jours");
        }

        {% if recup_deuxsamedis and recup_uneparjour %}
            if($("#date2").val())
              bValid = bValid && verifRecup($("#date2"));
        {% endif %}

        if ( bValid ) {
          // Enregistre la demande
          $.ajax({
            url: url('conges/ajax.enregistreRecup.php'),
            dataType: "json",
            data: {date: date.val(), date2: date2.val(), heures: heures.val(), commentaires: commentaires.val(), perso_id: perso_id, CSRFToken: $('#CSRFSession').val()},
            type: "post",
            success: function(result){
              if(result[0]=="Demande-OK"){

            // Préparation de l'affichage des erreurs et confirmations
            var msg=encodeURIComponent("Votre demande a été enregistrée");

            var msg2=null;
            var msg2Type=null;
            if(result[1]!=undefined){
              msg2=encodeURIComponent(result[1]);
              msg2Type="error";
            }

            // Affiche la liste des demandes après enregistrement
            document.location.href="{{ asset('overtime') }}?msgType=success&msg="+msg+"&msg2Type="+msg2Type+"&msg2="+msg2;
            // Ferme le dialog
            $( this ).dialog( "close" );
              }else{
            updateTips("Erreur lors de l'enregistrement de la demande d'heures supplémentaires", "error");
              }
            },
            error: function (result){
              updateTips("Erreur lors de l'enregistrement de la demande d'heures supplémentaires", "error");
            },
          });
        }
          },

          Annuler: function() {
        $( this ).dialog( "close" );
          }
        },

        close: function() {
          allFields.val( "" ).removeClass( "ui-state-error" );
          $('.validateTips').text("Veuillez sélectionner le jour concerné par votre demande et le nombre d'heures supplémentaires et un saisir un commentaire.");
        }
      });


      $( "#dialog-button" )
        .click(function() {
          date.datepicker("disable");
          date2.datepicker("disable");
          $( "#dialog-form" ).dialog( "open" );
          date.datepicker("enable");
          date2.datepicker("enable");
          return false;
        });

    });
    </script>
{% endblock %}

{% block page %}
  <div id="content-admin">
    {% if perso_id != 0 %}
    <h3 class="print_only">Liste des congés de {{ perso_name }}, année {{ year_from }}-{{ year_to}}</h3>
    {% endif %}
    <h3 class='noprint'>Heures supplémentaires</h3>
    <div class="admin-div">
      <div id='liste'>
        <h4 class='noprint'>Liste des demandes d'heures supplémentaires</h4>
        <form name='form' method='get' action='{{ asset("overtime") }}' class='noprint'>
          <div class="container">
            <span style='float:left; vertical-align:top; margin-bottom:20px;'>
              <div class='row'>
                <div class="col">
                  Année : <select name='annee'>
                    {% for elem in years %}
                      {% if elem[0] == year_from %}
                        <option value="{{ elem[0] }}" selected="selected">{{ elem[1] }}</option>
                      {% else %}
                        <option value="{{ elem[0] }}">{{ elem[1] }}</option>
                      {% endif %}
                    {% endfor %}
                  </select>
                </div>

                {% if admin %}
                  <div class="col">
                    <span style='margin-left:30px;'>Agent : </span>
                    <select name='perso_id'>
                      {% if perso_id == 0 %}
                        <option value='0' selected="selected">Tous</option>
                      {% else %}
                        <option value='0'>Tous</option>
                      {% endif %}
                      {% for m in managed %}
                        {% if m.id == perso_id %}
                          <option value="{{ m.id }}" selected>{{ m.nom }} {{ m.prenom }}</option>
                        {% else %}
                          <option value="{{ m.id }}">{{ m.nom }} {{ m.prenom }}</option>
                        {% endif %}
                      {% endfor %}
                    </select>
                  </div>
                {% endif %}
                <div class="col" style='margin-left:30px;'><input type='submit' value='Rechercher' id='button-OK' class='ui-button' style="margin-top: 10px;"/></div>
                <div class="col" style='margin-left:30px;'><input type='button' value='Réinitialiser' id='button-Effacer' class='ui-button ui-button-type2' onclick='location.href="{{ asset('overtime') }}?reset=on"' style="margin-top: 10px;"/></div>
                <div class="col" style='float:right; vertical-align:top; margin-top: 10px;'>
                  <button id='dialog-button' class='ui-button ui-button-type2'>Nouvelle demande</button>
                </div>
              </div>
            </span>
          </div>
        </form>

        <table id='tableRecup' class='CJDataTable' data-sort='[[1]]'>
          <thead>
            <tr>
              <th rowspan='2' class='dataTableNoSort'>&nbsp;</th>
              <th rowspan='2' class='dataTableDateFR'>Date</th>
              {% if admin %}
                <th rowspan='2'>Agent</th>
              {% endif %}
              <th rowspan='2'>Heures</th>
              <th colspan='2'>Validation</th>
              <th rowspan='2'>Crédits</th>
              <th rowspan='2'>Commentaires</th>
            </tr>

            <tr>
              <th>&Eacute;tat</th>
              <th class='dataTableDateFR' style="border-right: 1px solid #000;">Date</th>
            </tr>
          </thead>
          <tbody>
            {% for elem in overtimes %}
              <tr>
                <td>
                  <a href="{{ asset('overtime') }}/{{ elem.id }}">
                    <span class='pl-icon pl-icon-edit' title='Modifier'></span>
                  </a>
                </td>

                <td>{{ elem.date }}{{ elem.date2 }}</td>

                {% if admin %}
                  <td>{{ elem.name }}</td>
                {% endif %}

                <td>{{ elem.hours }}
                  {% if elem.hourstodays %}
                    <br />{{ elem.hourstodays }}j;
                  {% endif %}
                </td>

                <td style="{{ elem.validation_style }}">{{ elem.validation }}</td>
                <td>{{ elem.validation_date }}</td>
                <td>{{ elem.credits }}</td>
                <td>{{ elem.commentaires | nl2br }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div> <!-- liste -->

      <div id="dialog-form" title="Nouvelle demande" class='noprint'>
        <p class="validateTips">Veuillez sélectionner le jour concerné par votre demande et le nombre d'heures supplémentaires et un saisir un commentaire.</p>
        <form>
          <fieldset>
            <table class='tableauFiches'>
              {% if admin %}
                <tr>
                  <td><label for="agent">Agent</label></td>
                  <td>
                    <select id='agent' name='agent' style='text-align:center;'>
                      <option value=''>&nbsp;</option>
                      {% for m in managed %}
                        {% if m.id == perso_id %}
                          <option value="{{ m.id }}" selected>{{ m.nom }} {{ m.prenom | first }}</option>
                        {% else %}
                          <option value="{{ m.id }}">{{ m.nom }} {{ m.prenom | first }}</option>
                        {% endif %}
                      {% endfor %}
                    </select>
                  </td>
                </tr>
              {% endif %}

              <tr>
                <td>
                  <label for="date">{{ label|raw }}</label>
                </td>

                <td>
                  <input type="text" name="date" id="date" class="text ui-widget-content ui-corner-all datepicker"/>
                </td>
              </tr>

              {% if recup_deuxsamedis %}
                <tr>
                  <td>
                    <label  for="date2">{{ saturday|raw }}</label>
                  </td>

                  <td>
                    <input type="text" name="date2" id="date2" class="text ui-widget-content ui-corner-all datepicker"/>
                  </td>
                </tr>
              {% endif %}

              <tr>
                <td><label  for="heures">Heures</label></td>
                <td>
                  <input id="heures" name="heures" class="overtime-timepicker ui-widget-content ui-corner-all" value=""/>
                </td>
              </tr>

              <tr>
                <td><label  for="commentaires">Commentaire</label></td>
                <td><textarea name="commentaires" id="commentaires" ></textarea></td>
              </tr>
            </table>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
{% endblock %}