var myApp = angular.module('myApp');

myApp.directive('selectPicker', function() {
  return {
    restrict: 'A',

    link: function(scope, element, attrs) {
      $(element).selectpicker();

      $(element).change(function() {
        if ($(this).val() === '' || $(this).val() === null) {
          $(this).selectpicker('setStyle', 'btn-success', 'remove');
        } else {
          $(this).selectpicker('setStyle', 'btn-success', 'add');
        }
      });
    }
  };
});

myApp.directive('datePicker', function() {
  var updateDatePicker = function() {
    var inputGroup = $(this).parents('.input-group');

    if ($(this).val() === '' || $(this).val() === null) {
      inputGroup.removeClass('input-group-success');
    } else {
      inputGroup.addClass('input-group-success');
    }
  };

  return {
    restrict: 'A',

    link: function(scope, element, attrs) {
      $(element).datepicker();

      $(element)
        .on('changeDate', updateDatePicker)
        .change(updateDatePicker)
        .blur(updateDatePicker);
    }
  };
});

myApp.directive('toggleHandle', function() {
  return {
    restrict: 'A',

    link: function(scope, element, attrs) {
      $(element).click(function() {
        $(attrs.handleTarget).toggle();
      });
    }
  };
});