<script>
  var clickedAbsenceRowData;
  var isNewAbsence = false;

  $(document).on('click', '.btn_out', function(event) {
      var btnOutID = $(event.target).attr('id');
      console.log('btnOutID: '+btnOutID);
      hideButtonShowSpan(btnOutID);

      var btnInId = btnOutID.replace('btno', 'btni');

      $('#'+btnInId).show();
  });

  $(document).on('click', '.btn_in', function(event) {
      var btnID = $(event.target).attr('id');
      
      $('#'+btnID).hide();
      var spanIn = $('#'+btnID).parent().children('span');
      const d = new Date();
      let ttext = currentHhMmSs(d);
      spanIn.text(ttext);
      spanIn.show();
  }); 

  function hideButtonShowSpan(btnId) {
    $('#'+btnId).hide();
      var span = $('#'+btnId).parent().children('span');
      const d = new Date();
      let ttext = currentHhMmSs(d);
      span.text(ttext);
      span.show();
  }

  $(document).on("change", ".bus_distance", function(event) {
      console.log('Input value: %s', event.target.value);
      var span = $(event.target).parent().children('span');

      span.text(event.target.value);

  });

  $(document).on('click', '#btn_selector_in_out', function() {
    $('#btn_selector_in_out').removeClass('btn-secondary').addClass('btn-primary');
    $('#btn_selector_absense').removeClass('btn-primary').addClass('btn-secondary');

    $('#div_table').show();
    $('#div_absense').hide();

    $(window).trigger('resize');
  });

  $(document).on('click', '#btn_selector_absense', function() {

    $('#btn_selector_absense').removeClass('btn-secondary').addClass('btn-primary');
    $('#btn_selector_in_out').removeClass('btn-primary').addClass('btn-secondary');

    $('#div_table').hide();
    $('#div_absense').show();
    $(window).trigger('resize');
  });

  function btnOutClick(id) {
      alert(id);
  }

  function currentHhMmSs(curTime) {
    var today = new Date();
    var hh = String(today.getHours()).padStart(2, '0');
    var mm = String(today.getMinutes() + 1).padStart(2, '0');
    var ss = String(today.getSeconds()).padStart(2, '0');

    return hh + ':' + mm + ':' + ss;
  }

  $(document).on('dblclick', '#tbl_absense_id tbody tr', function(event) {
    isNewAbsence = false;

    $('#absence_edtor_dept_row').hide();
    $('#absence_edtor_model_row').hide();

    $('#absense_editor').show();
    var table = $('#tbl_absense_id').DataTable();
    var data = table.row( this ).data();
    clickedAbsenceRowData = this;

    $('#dl_reg_plates').val(data[3]);

    $('#dl_absense_type').val(data[4]);

    var favDialog = document.getElementById('favDialog');

    if (data[6]!=null && data[6].length>14) {
      var parts = data[6].split(' -');
      console.log('parts length: %s', parts.length);
      if (parts.length>0) {
        parts[0]=parts[0].trim().replace(' ','T');
        $('#dl_start_date').val(parts[0]);

        if (parts.length>1) {
          parts[1]=parts[1].trim().replace(' ','T');
          
          $('#dl_end_date').val(parts[1]);
        }
        else {
          $('#dl_end_date').val('');
        }
      }
      else {
        $('#dl_start_date').val('');
      }
    }
    else {
      $('#dl_start_date').val('');
      $('#dl_end_date').val('');
    }

    if (typeof favDialog.showModal === "function") {
      favDialog.showModal();
    } else {
      alert("The <dialog> API is not supported by this browser");
    }
  });

  $(document).on('click', '#addAbsence', function() {
    isNewAbsence = true;

    $('#absence_edtor_dept_row').show();
    $('#absence_edtor_model_row').show();

    $('#absense_editor').show();
    var favDialog = document.getElementById('favDialog');

    $('#dl_depots').val("");
    $('#dl_bus_models').val("");

    $('#dl_reg_plates').val("");
    $('#dl_absense_type').val("");

    $('#dl_start_date').val('');
    $('#dl_end_date').val('');

    $('#dl_comment').val('');

    if (typeof favDialog.showModal === "function") {
      favDialog.showModal();
    } else {
      alert("The <dialog> API is not supported by this browser");
    }
  });

  $(document).on('click', '#confirmBtn', function(event) {
    var table = $('#tbl_absense_id').DataTable();
    
    var dateRange = "";

    if ($('#dl_start_date').val().length>=0) {
      dateRange = $('#dl_start_date').val().replace('T', ' ')+' - ';
    }
    
    if ($('#dl_end_date').val().length>=8) {
      dateRange += ' '+$('#dl_end_date').val().replace('T', ' ');
    }
    
    if (isNewAbsence) {
      var newRowId = table.rows().data().length;

      table.row.add([
        newRowId+1,
        $('#dl_depots').val(),
        $('#dl_bus_models').val(),
        $('#dl_reg_plates').val(),
        $('#dl_absense_type').val(),
        'current',
        dateRange,
        $('#dl_comment').val()
      ]).draw( false );

      table.page( 'last' ).draw( 'page' );
    }
    else {
      var row = table.row(clickedAbsenceRowData);
      var rowIndex = row.index();

      row.cell(rowIndex,6).data(dateRange).draw();

      row.cell(rowIndex,4).data($('#dl_absense_type').val()).draw();

      row.cell(rowIndex,7).data($('#dl_comment').val()).draw();

    }
    
  });

</script>