<?php
session_start();
if( $_SESSION["user"] == "" || $_SESSION["passwd"] == "" ) {
   mysqli_close($conn);
   header("Location: index.php");
}

$Empresa = isset($_POST['empresa']) ? $_POST["empresa"]  : "";
$_SESSION["empresa"] = $Empresa;
$_SESSION["module"] = "Ejercicios";

include_once('db_config.php');
ini_set('max_execution_time', 120);

$Title = "Ejercicios Contables.";
$admin = false;
include 'headerImpuestos.php'; 
?>
   <link type="text/css" rel="stylesheet" href="styles/styles_100.css"  media="screen,projection"/> 
<style>
.collapsible-header:focus {
  background-color: #16a2d6;
  color: white;
}
</style>

   <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <div id="content">
   <div class="container" style="width:80%" >
   <div class="col l9 m9 s9">
      <div class="page-content">
        <a onclick='newClient(this);' class='btn-floating btn-large waves-effect waves-light red' style='float:right; margin-right:0%; margin-top:20px;'><i class='material-icons'>add</i></a>
      </div>
   <div style="height: 100px;"></div>

<?php
    $sql = "select sql_no_cache * from ejercicios order by DescripcionEjercicio";
    $result = $conn->query($sql);

    echo "<table id='detail' class='highlight' style='color:grey; font-weight:normal;'>";
    echo "<thead>";
      echo "<tr style='background-color: #007FFF; color:white;'>";
//      echo "<tr style='background-color: #8C2300 ; color:white;'>";
      
        echo "<th class='col s2' style='width:21%; border-radius:0; font-weight:normal;'>Empresa</th>";
        echo "<th class='col s4' style='width:50%; border-radius:0; font-weight:normal;'>Descripci&oacute;n</th>"; 
        echo "<th class='col s2' style='width:12%; border-radius:0; font-weight:normal;'>Inicio</th>"; 
        echo "<th class='col s2' style='width:12%; border-radius:0; font-weight:normal;'>Fin</th>"; 
        echo "<th class='col s1' style='width:5%; border-radius:0; font-weight:normal;'>Activo</th>"; 
        echo "<th class='col s1' style='width:1%; border-radius:0; font-weight:normal;'>&nbsp;</th>"; 
      echo "</tr>"; 
   echo "</thead>"; 
   echo "<tbody />"; 
   echo "</table>"; 
   echo "<tr>";
   echo "<td>";
   echo "<div id='therow' class='row' style='width: 100%; margin-left: 0px;'>"; 
   echo "<ul class='collapsible' data-collapsible='accordion'>";
   while($row = $result->fetch_assoc()) {
      $ID   = $row["ID"];
      $Inicio = $row["FechaInicio"];
      $Fin = $row["FechaFin"];
      $Activa = $row["Activa"];

      $date = date_create($Inicio);
      $I = date_format($date, 'd-m-Y');

      $date = date_create($Fin);
      $F = date_format($date, 'd-m-Y');

      echo "<li id='" . $ID . "' class='lista'>";
      if( $Activa == 1 ) {
         $active = "<i class='material-icons'>check_circle</i>";
      }
      else $active = "&nbsp;";
      echo "<div class='collapsible-header' id='ejercicios' style='line-height:1.5em;'>";
         echo "<div class='row' style='line-height:1.5em;'>";
         echo "<div id='empresa" . $ID . "' class='col s2' style='width: 21%;'>" . $row["Nombre_Empresa"] . "</div>";
         echo "<div id='descrip" . $ID . "' class='col s4' style='width: 50%;'>" . $row["DescripcionEjercicio"] . "</div>"; 
         echo "<div class='col s2' style='width: 12%;'>" . $I . "</div>";
         echo "<div class='col s2' style='width: 12%;'>" . $F . "</div>";
         echo "<div class='col s1' style='width: 5%;'>" . $active. "</div>";
         echo "</div>";
      echo "</div>";
      echo "<div id='detail' class='collapsible-body'>";
//         echo "<div style='height: 30px;'></div>";
         echo "<div class='row'>";
         echo "<div class='input-field col s2 offset-s1'>";
         echo "</div>";
         echo "</div>";
         echo "<div class='row'>";
         echo "<div class='input-field col s6 offset-s1'>";
             echo "<input id='empresa" . $ID . "' type='text' class='' placeholder=' ' value='" . $row["Nombre_Empresa"] . "'>";
             echo "<label for='empresa'>Empresa</label>";
         echo "</div>";
         echo "</div>";
         echo "<div class='row'>";
         echo "<div class='input-field col s6 offset-s1'>";
             echo "<input id='descripcion" . $ID . "' data-id='" . $ID . "' type='text' class='' placeholder=' ' value='" . $row["DescripcionEjercicio"] . "' onChange='onChange(this);'>";
             echo "<label for='descripcion'>Descripcion del Ejercicio</label>";
         echo "</div>";
         echo "</div>";
   
         echo "<div class='row'>";
         echo "<div class='input-field col s3 offset-s1'>";
         echo "<label for='fechad'>Inicio</label>";
         echo "<input id='fechad" . $ID . "' data-id='" . $ID . "' type='text' class='datepicker' placeholder=' ' value='" . $I . "' onChange='onChange(this);'>";
         echo "</div>";
   
         echo "<div class='input-field col s3 offset-s1'>";
         echo "<label for='fechah'>Fin</label>";
         echo "<input id='fechah" . $ID . "' data-id='" . $ID . "' type='text' class='datepicker' placeholder=' ' value='" . $F . "' onChange='onChange(this);'>";
         echo "</div>";
         echo "</div>";
   
         echo "<div class='row'>";
         echo "<div class='input-field col s10  offset-s1' >";
            echo "<textarea id='observaciones" . $ID . "' data-id='" . $ID . "' class='materialize-textarea' onChange='onChange(this);'>" . $row["Observaciones"] . "</textarea>";
            echo "<label for='observaciones'>Observaciones</label>";
         echo "</div>";
         echo "</div>";
         echo "<div class='input-field col s10 offset-s1' style='margin-top: 0;'>";
            echo "<a id='cancel" . $ID . "' onclick='Cancel(this);' data-id='" . $ID . "' class='waves-effect waves-light btn blue-grey darken-2 text-grey text-darken-1 hide disabled' style='float:right; margin-top: 0;margin-right: 10px;'><i class='material-icons right'>cancel</i>Cancelar</a>";
            echo "<a id='delete" . $ID . "' onclick='Delete(this);' data-id='" . $ID . "' class='waves-effect waves-light btn blue-grey darken-2 text-grey text-darken-1' style='float:right; margin-top: 0;margin-right: 10px;'><i class='material-icons right'>delete</i>Borrar</a>";
            echo "<a id='upd" . $ID . "' onclick='Update(this);' data-id='" . $ID . "' class='waves-effect waves-light btn hide blue-grey darken-2 text-grey text-darken-1' style='float:right; margin-top: 0; margin-right: 10px;'><i class='material-icons right'>cached</i>Actualizar</a>";
            echo "<a id='select" . $ID . "' onclick='Select(this);' data-id='" . $ID . "' class='waves-effect waves-light btn blue-grey darken-2 text-grey text-darken-1' style='float:right; margin-top: 0;margin-right: 10px;'><i class='material-icons right'>done</i>Activar</a>";
         echo "</div>";
         echo "<div class='input-field col s10' style='height: 5px;'>";
            echo "<input type='hidden' id='id' value=''>"; 
         echo "</div>";
         echo "<div style='height: 50px;'></div>";
      echo "</div>";
      echo "</li>"; 
   }
   echo "</ul>";
   echo "</div>";
   mysqli_close($conn);
?>
   </div>
   </div>
<style>
.dropdown-client {
   background-color: white;
   opacity: 1;
   overflow-y: auto;
   border-bottom: 1px solid #d0d0d0;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
ul.dropdown-client li {
   line-height:3em;
   height:3em;
   vertical-align: middle;
   color: #009688;
   min-height: 3em;
   text-align: left;
   padding: 0px 16px;
}
ul.dropdown-client li:hover {
 background-color:#90a4ae;
}

.modal { width: 75% !important ; max-height: 85% !important } /* increase the width and height! */
</style>

<!--  Modal Ejercicios -->
<?php
  echo "<div id='modal-ejercicio' class='modal modal-footer'>";
    echo "<div class='modal-content'>";
         echo "<div style='height: 30px;'></div>";
         echo "<div class='row'>";
         echo "<div class='input-field col s1'></div>";
         echo "<div id='ejercicio-title' style='font-size: 1.3em; padding-bottom: 20px;'>Nuevo Ejercicio</div>";
         echo "</div>";
         echo "<div style='height: 30px;'></div>";

         echo "<div class='row'>";
         echo "<div class='input-field col s6' style='margin-left:60px;'>";
             echo "<input id='empresa' type='text' class='' placeholder=' ' value='' onBlur='onBlur(this);'>";
             echo "<label for='empresa'>Empresa</label>";
         echo "</div>";
         echo "</div>";
         echo "<div class='row'>";
         echo "<div class='input-field col s10' style='margin-left:60px;'>";
             echo "<input id='descripcion' type='text' class='' placeholder=' ' value='' onBlur='onBlur(this);'>";
             echo "<label for='descripcion'>Descripcion del Ejercicio</label>";
         echo "</div>";
         echo "</div>";

         echo "<div class='row'>";
         echo "<div class='input-field col s3' style='margin-left:60px;'>";
         echo "<label for='fechad'>Inicio</label>";
         echo "<input id='fechad' type='text' disabled class='datepicker' placeholder=' ' value='' onBlur='onBlur(this);'>";
         echo "</div>";

         echo "<div class='input-field col s3'>";
         echo "<label for='fechah'>Fin</label>";
         echo "<input id='fechah' type='text' disabled class='datepicker' placeholder=' ' value='' onBlur='onBlur(this);'>";
         echo "</div>";
         echo "</div>";

         echo "<div style='height: 30px;'></div>";
         echo "<div class='row'>";
         echo "<div class='input-field col s10' disabled style='margin-left:60px;'>";
            echo "<textarea id='observaciones' disabled class='materialize-textarea' onBlur='onBlur(this);'> </textarea>";
            echo "<label for='observaciones'>Observaciones</label>";
         echo "</div>";
         echo "</div>";
         echo "<div style='height: 40px;'></div>";

    echo "</div>";   // modal-content
    echo "<div class='modal-footer'>"; 
      echo "<a onclick='Cancel(this);' class='modal-action modal-close waves-effect waves-green btn-flat'>Cancelar</a>"; 
      echo "<a onclick='Add(this);' id='ejercicioBtn' class='waves-effect waves-green btn-flat disabled hide'>Actualizar</a>"; 
    echo "</div>"; 
    echo "<div style='height: 40px;'></div>";
  echo "</div>";  // modal-ejericio
  // <!-- End Modal -->
?>

  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.form.js"></script> 
   <script type="text/javascript" src="materialize/1.0.0/js/materialize.min.js"></script>
   <script src="js/numeral.min.js"></script>
   <script src="js/jquery.maskedinput.min.js" type="text/javascript"></script>
<script>

   var keyTimeout;
   var newflag = false;
   var searchflag = 0;
   var found = false;
   var empresa;
   var descripcion;
   var inicio;
   var fin;
   var observa;

   $(document).ready(function() {

      $('.dropdown-trigger').dropdown({
         "hover": true,
         "constrainWidth": false,
         "coverTrigger": false
      });


      $('.collapsible').collapsible({
         accordion : false,
         onOpenStart: function(el) { CaptureCollapsible(el); }, 
         onCloseEnd: function(el) { CloseCollapsible(el); }
      });
      $('select').formSelect();

    $('.datepicker').datepicker({
       selectMonths: true, // Creates a dropdown to control month
       selectYears: 15, // Creates a dropdown of 15 years to control year
       months: [ 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre' ],
       monthsShort: [ 'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic' ],
       weekdays: [ 'Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado' ],
       weekdaysShort: [ 'Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab' ],
       weekdaysLetter: [ 'D', 'L', 'M', 'M', 'J', 'V', 'S' ],
       today: 'Hoy',
       clear: 'Borrar',
       cancel: 'Cerrar',
       format: 'dd-mm-yyyy',
       formatSubmit: 'yyyy-mm-dd'
    });

    $('.modal').modal({dismissible: false, outDuration: 0, startingTop: '4%', endingTop: '5%' });


/*
      $('.collapsible').collapsible({
         accordion : false,
         onOpen: function(el) { CaptureCollapsible(el); },
         onClose: function(el) { CloseCollapsible(el); }
      });

      $('.modal').modal({dismissible: false, out_duration: 0, starting_top: '4%', ending_top: '5%' });
      */
   });   

   function Select(e) {
      var option = e.id;
      var id = $("#" + option ).attr('data-id');
      console.log( "Select ID: " + id );

      $.ajax({
          type: "POST",
          url: "updateEjercicio.php",
          data: {'id': id, 'mode': 'activate' },
              success: function(data){
                              var msg = JSON.parse(data);
                              if( msg.status.length >= 0 ) {
                                 console.log( msg.status );
                                 post("ejercicios.php", ""); 
                              }    
                       }
      });
   }

   function Close(id) {

      if( id === undefined ) return;
      newflag = false;
      console.log( "Close ID: " + id );
      $('#cancel' + id).addClass("hide" );
      $('#cancel' + id).addClass("disabled" );
      $('#upd' + id).addClass("hide" );
      $('#upd' + id).addClass("disabled" );
//    $('#select' + id).addClass("hide" );
//    $('#select' + id).addClass("disabled" );
   }


   function Cancel(e) {

      newflag = false;
      $('#empresa').val(""); 
      $('#descripcion').val(""); 
      $('#fechad').val(""); 
      $('#fechah').val(""); 
      $('#observaciones').val(""); 
   }

   function newClient(e) {
      newflag = true;
      console.log( "NEW EJERCICIO!" );

      $('#ejercicioBtn').addClass('hide' );
      $('#ejercicioBtn').addClass('disabled' );

//      $('#descripcion').attr('disabled','disabled'); 
      $('#fechad').attr('disabled','disabled'); 
      $('#fechah').attr('disabled','disabled'); 
      $('#observaciones').attr('disabled','disabled'); 

      $('#empresa').val(""); 
      $('#descripcion').val(""); 
      $('#fechad').val(""); 
      $('#fechah').val(""); 
      $('#observaciones').val(""); 
      $('#modal-ejercicio').modal('open');
      $("#empresa").focus();
   }


   function post(path, parameters) {
      var form = $('<form></form>');

       form.attr("method", "post");
       form.attr("action", path);

       $.each(parameters, function(key, value) {
           var field = $('<input></input>');
           field.attr("type", "hidden");
           field.attr("name", key);
           field.attr("value", value);
           form.append(field);
       });

       // The form needs to be a part of the document in
       // order for us to be able to submit it.
       $(document.body).append(form);
      form.submit();
   };


   function Delete(e) {
      var option = e.id;
      var id = $("#" + option ).attr('data-id');
      console.log( "Delete ID: " + id );

      /* --- Verificar que no haya asientos --- */
      $.ajax({
          type: "POST",
          url: "updateEjercicio.php",
          data: {'id': id, 'mode': 'delete' },
              success: function(data){
                              var msg = JSON.parse(data);
                              if( msg.status.length >= 0 ) {
                                 console.log( msg.status );
                              }    
                              post("ejercicios.php", ""); 
//                            Close(id);
                       }
      });
   }


   function Update(e) {

      var id = e.id;
      var mode = "update";

      console.dir( e );
      option = $("#" + id ).attr('data-id');
      console.log( "Update ID: " + option );

      id = option;
      if( newflag == true ) id ="0";      

      var empresa = $('#empresa' + id).val(); 
      var descripcion = $('#descripcion' + id).val(); 
      var desde = $('#fechad' + id).val(); 
      var hasta = $('#fechah' + id).val(); 
      var observa = $('#observaciones' + id).val(); 

      if( newflag == true ) {

         mode = "append";
         var msg = "";
         if( empresa.length <= 0 ) {
            msg = 'Ingrese el nombre de la empresa';
            Materialize.toast(msg, 3000, 'rounded') 
         }
      }

      $.ajax({
          type: "POST",
          url: "updateEjercicio.php",
          data: {'id': id, 'empresa': empresa, 'descripcion': descripcion, 'desde': desde, 'hasta': hasta, 'observaciones': observa, 'mode': mode },
              success: function(data){
                              var msg = JSON.parse(data);
                              if( msg.status.length >= 0 ) {
                                 console.log( msg.status );
//                                 collapseAll();
                                   if( newflag == true ) {
                                       post("ejercicios.php", ""); 
                                   }
                                   else Close(id);
                              }    
                       }
      });
//      post("updateEjercicio.php", {'id': id, 'empresa': empresa, 'descripcion': descripcion, 'desde': desde, 'hasta': hasta, 'observaciones': observa, 'mode': mode }); 
   }

   function Add(e) {

      var id = e.id;
      var mode = "update";

      if( newflag == true ) id ="0";      

      var empresa = $('#empresa').val(); 
      var descripcion = $('#descripcion').val(); 
      var desde = $('#fechad').val(); 
      var hasta = $('#fechah').val(); 
      var observa = $('#observaciones').val(); 

      if( newflag == true ) {

         mode = "append";
         var msg = "";
         if( empresa.length <= 0 ) {
            msg = 'Ingrese el nombre de la empresa';
            Materialize.toast(msg, 3000, 'rounded') 
         }
      }

      $.ajax({
          type: "POST",
          url: "updateEjercicio.php",
          data: {'id': id, 'empresa': empresa, 'descripcion': descripcion, 'desde': desde, 'hasta': hasta, 'observaciones': observa, 'mode': mode },
              success: function(data){
                              var msg = JSON.parse(data);
                              if( msg.status.length >= 0 ) {
                                 console.log( msg.status );
                                   post("ejercicios.php", ""); 
                              }    
                       }
      });
   }

   function onChange(el) {

      var id = $( "#" + el.id ).data( "id" );
      console.log( id );
      $( "#cancel" + id ).removeClass( "disabled" )
      $( "#delete" + id ).removeClass( "hide" )
      $( "#delete" + id ).removeClass( "disabled" )
      $( "#upd" + id ).removeClass( "hide" )
      $( "#upd" + id ).removeClass( "disabled" )
   }

   function onBlur(el) {

      console.log( el.id );
      switch( el.id ) {
         case "empresa":
            var empresa = $("#empresa").val();
            if( empresa.length <= 0 ) {
               Materialize.toast("Debe ingresar un nombre para la empresa", 3000, 'rounded') 
               $('#empresa').focus();
               break;
            }
            $('#descripcion').removeAttr('disabled'); 
            $('#empresa').removeAttr('disabled'); 
            $('#fechad').removeAttr('disabled'); 
            $('#fechah').removeAttr('disabled'); 
            $('#observaciones').removeAttr('disabled'); 
            $("#ejercicioBtn" ).removeClass( "hide" )
            $("#ejercicioBtn" ).removeClass( "disabled" )
            $('#descripcion').focus();
            break;

         case "descripcion":
            var descripcion = $("#descripcion").val();
            if( descripcion.length <= 0 ) {
               Materialize.toast("Debe ingresar una descripcion para el ejercicio", 3000, 'rounded') 
               $('#descripcion').focus();
               break;
            }
            break;

         default:
            break;
      }
   }

   function CaptureCollapsible(el) {

//      var id = el.attr('id');
      var id = el.id;
      console.log( "ID: " + id );
      empresa = $('#empresa' + id).val();
      descripcion = $('#descripcion' + id).val();
      inicio = $('#desdeh' + id).val();
      fin = $('#hastah' + id).val();
      observa = $('#observaciones' + id).val();
      
   }

   function CloseCollapsible(el) {
//      var id = el.attr('id');
      var id = el.id;

      if( id === undefined ) return;
      console.log( "CloseCollapsible ID: " + id );

      $( "#cancel" + id ).addClass( "disabled" )
//      $( "#delete" + id ).addClass( "hide" )

      $('#empresa' + id).val(empresa);
      $('#descripcion' + id).val(descripcion);
      $('#desdeh' + id).val(inicio);
      $('#hastah' + id).val(fin);
      $('#observaciones' + id).val(observa);

   }
   function collapseAll(){
     $(".collapsible-header").removeClass(function(){
       return "active";
     });
     $(".collapsible").collapsible({accordion: true});
     $(".collapsible").collapsible({accordion: false});
   }
</script>
</body>
</html>
