$(function() {
  var occupationId = 0;
  var categoryId = 0;
  var contentId = 0;
  $("#body_occupation").on("click", ".sel_occupation", function() {
    occupationId = $(this).val();
    $("#error_occupation").html("");
    $("#error_category").html("");
    $("#error_content").html("");
    $("#occupation_name").val($.trim($("#span_occupation_" + occupationId).html()));
    $("#edit_occupation").val(occupationId);
    $("#category_name").val("");
    $("#content_name").val("");
    $("#tbl_category").css("display", "");
    $("#tbl_content").css("display", "none");
    $(".sel_occupation").css("display", "");
    $(this).css("display", "none");
    $("#body_category tr").empty();
    $("#body_content tr").empty();
    $.ajax({
      type : "post",
      cache : false,
      url : "/back/outline/category",
      dataType : "json",
      data : {
        "occupationId" : occupationId
      }
    }).done(function(data) {
      $.each(data, function(key, val) {
        $("#body_category").append($("<tr>").append($("<td>").css("text-align", "center").html(key)).append($("<td>").css("padding-left", "1em").append($("<span>").attr("id", "span_category_" + key).addClass("span_category").html(val))).append($("<td>").append($("<button>").attr("type", "button").addClass("sexybutton sexysimple sexyicononly sexygreen sel_category").val(key).append($("<span>").addClass("ok")))).append($("<td>").append($("<button>").attr("type", "button").addClass("sexybutton sexysimple sexyicononly sexyred del_category").val(key).append($("<span>").addClass("delete")))));
      });
    });
  });
  $("#body_category").on("click", ".sel_category", function() {
    categoryId = $(this).val();
    $("#error_category").html("");
    $("#error_content").html("");
    $("#category_name").val($.trim($("#span_category_" + categoryId).html()));
    $("#edit_category").val(categoryId);
    $("#content_name").val("");
    $("#tbl_content").css("display", "");
    $(".sel_category").css("display", "");
    $(this).css("display", "none");
    $("#body_content tr").empty();
    $.ajax({
      type : "post",
      cache : false,
      url : "/back/outline/content",
      dataType : "json",
      data : {
        "occupationId" : occupationId,
        "categoryId" : categoryId
      }
    }).done(function(data) {
      $.each(data, function(key, val) {
        $("#body_content").append($("<tr>").append($("<td>").css("text-align", "center").html(key)).append($("<td>").css("padding-left", "1em").append($("<span>").attr("id", "span_content_" + key).addClass("span_content").html(val))).append($("<td>").append($("<button>").attr("type", "button").addClass("sexybutton sexysimple sexyicononly sexygreen sel_content").val(key).append($("<span>").addClass("ok")))).append($("<td>").append($("<button>").attr("type", "button").addClass("sexybutton sexysimple sexyicononly sexyred del_content").val(key).append($("<span>").addClass("delete")))));
      });
    });
  });
  $("#body_content").on("click", ".sel_content", function() {
    contentId = $(this).val();
    $("#error_content").html("");
    $("#content_name").val($.trim($("#span_content_" + contentId).html()));
    $("#edit_content").val(contentId);
    $(".sel_content").css("display", "");
    $(this).css("display", "none");
  });
  $("#add_occupation").click(function() {
    $("#error_occupation").html("");
    if ($("#occupation_name").val().length == 0) {
      $("#error_occupation").html("職種名称を入力してください。");
      return false;
    }
    var isExists = false;
    $.each($(".span_occupation"), function() {
      if ($.trim($(this).html()) == $("#occupation_name").val()) {
        isExists = true;
        return false;
      }
    });
    if (isExists) {
      $("#error_occupation").html("すでに登録されています。");
      return false;
    }
    $.ajax({
      type : "post",
      cache : false,
      url : "/back/outline/add/occupation",
      dataType : "json",
      data : {
        "name" : $("#occupation_name").val()
      }
    }).done(function(data) {
      $("#occupation_name").val("");
      $.each(data, function(key, val) {
        $("#body_occupation").append($("<tr>").append($("<td>").css("text-align", "center").html(key)).append($("<td>").css("padding-left", "1em").append($("<span>").attr("id", "span_occupation_" + key).addClass("span_occupation").html(val))).append($("<td>").append($("<button>").attr("type", "button").addClass("sexybutton sexysimple sexyicononly sexygreen sel_occupation").val(key).append($("<span>").addClass("ok")))).append($("<td>").append($("<button>").attr("type", "button").addClass("sexybutton sexysimple sexyicononly sexyred del_occupation").val(key).append($("<span>").addClass("delete")))));
      });
    });
  });
  $("#add_category").click(function() {
    $("#error_category").html("");
    if ($("#category_name").val().length == 0) {
      $("#error_category").html("業種名称を入力してください。");
      return false;
    }
    var isExists = false;
    $.each($(".span_category"), function() {
      if ($.trim($(this).html()) == $("#category_name").val()) {
        isExists = true;
        return false;
      }
    });
    if (isExists) {
      $("#error_category").html("すでに登録されています。");
      return false;
    }
    $.ajax({
      type : "post",
      cache : false,
      url : "/back/outline/add/category",
      dataType : "json",
      data : {
        "occupationId" : occupationId,
        "name" : $("#category_name").val()
      }
    }).done(function(data) {
      $("#category_name").val("");
      $.each(data, function(key, val) {
        $("#body_category").append($("<tr>").append($("<td>").css("text-align", "center").html(key)).append($("<td>").css("padding-left", "1em").append($("<span>").attr("id", "span_category_" + key).addClass("span_category").html(val))).append($("<td>").append($("<button>").attr("type", "button").addClass("sexybutton sexysimple sexyicononly sexygreen sel_category").val(key).append($("<span>").addClass("ok")))).append($("<td>").append($("<button>").attr("type", "button").addClass("sexybutton sexysimple sexyicononly sexyred del_category").val(key).append($("<span>").addClass("delete")))));
      });
    });
  });
  $("#add_content").click(function() {
    $("#error_content").html("");
    if ($("#content_name").val().length == 0) {
      $("#error_content").html("業務内容名称を入力してください。");
      return false;
    }
    var isExists = false;
    $.each($(".span_content"), function() {
      if ($.trim($(this).html()) == $("#content_name").val()) {
        isExists = true;
        return false;
      }
    });
    if (isExists) {
      $("#error_content").html("すでに登録されています。");
      return false;
    }
    $.ajax({
      type : "post",
      cache : false,
      url : "/back/outline/add/content",
      dataType : "json",
      data : {
        "occupationId" : occupationId,
        "categoryId" : categoryId,
        "name" : $("#content_name").val()
      }
    }).done(function(data) {
      $("#content_name").val("");
      $.each(data, function(key, val) {
        $("#body_content").append($("<tr>").append($("<td>").css("text-align", "center").html(key)).append($("<td>").css("padding-left", "1em").append($("<span>").attr("id", "span_content_" + key).addClass("span_content").html(val))).append($("<td>").append($("<button>").attr("type", "button").addClass("sexybutton sexysimple sexyicononly sexygreen sel_content").val(key).append($("<span>").addClass("ok")))).append($("<td>").append($("<button>").attr("type", "button").addClass("sexybutton sexysimple sexyicononly sexyred del_content").val(key).append($("<span>").addClass("delete")))));
      });
    });
  });
  $("#edit_occupation").click(function() {
    $("#error_occupation").html("");
    if ($("#occupation_name").val().length == 0) {
      $("#error_occupation").html("職種名称を入力してください。");
      return false;
    }
    var isExists = false;
    $.each($(".span_occupation"), function() {
      if ($.trim($(this).html()) == $("#occupation_name").val()) {
        isExists = true;
        return false;
      }
    });
    if (isExists) {
      $("#error_occupation").html("すでに登録されています。");
      return false;
    }
    $.ajax({
      type : "post",
      cache : false,
      url : "/back/outline/edit/occupation",
      dataType : "json",
      data : {
        "occupationId" : occupationId,
        "name" : $("#occupation_name").val()
      }
    }).done(function(data) {
      $("#span_occupation_" + occupationId).html($("#occupation_name").val());
    });
  });
  $("#edit_category").click(function() {
    $("#error_category").html("");
    if ($("#category_name").val().length == 0) {
      $("#error_category").html("業種名称を入力してください。");
      return false;
    }
    var isExists = false;
    $.each($(".span_category"), function() {
      if ($.trim($(this).html()) == $("#category_name").val()) {
        isExists = true;
        return false;
      }
    });
    if (isExists) {
      $("#error_category").html("すでに登録されています。");
      return false;
    }
    $.ajax({
      type : "post",
      cache : false,
      url : "/back/outline/edit/category",
      dataType : "json",
      data : {
        "occupationId" : occupationId,
        "categoryId" : categoryId,
        "name" : $("#category_name").val()
      }
    }).done(function(data) {
      $("#span_category_" + categoryId).html($("#category_name").val());
    });
  });
  $("#edit_content").click(function() {
    $("#error_content").html("");
    if ($("#content_name").val().length == 0) {
      $("#error_content").html("業務内容名称を入力してください。");
      return false;
    }
    var isExists = false;
    $.each($(".span_content"), function() {
      if ($.trim($(this).html()) == $("#content_name").val()) {
        isExists = true;
        return false;
      }
    });
    if (isExists) {
      $("#error_content").html("すでに登録されています。");
      return false;
    }
    $.ajax({
      type : "post",
      cache : false,
      url : "/back/outline/edit/content",
      dataType : "json",
      data : {
        "occupationId" : occupationId,
        "categoryId" : categoryId,
        "contentId" : contentId,
        "name" : $("#content_name").val()
      }
    }).done(function(data) {
      $("#span_content_" + contentId).html($("#content_name").val());
    });
  });
  $("#body_occupation").on("click", ".del_occupation", function() {
    if (!confirm("削除しますか？")) {
      return false;
    }
    var obj = $(this);
    $("#tbl_category").css("display", "none");
    $("#tbl_content").css("display", "none");
    $("#body_category tr").empty();
    $("#body_content tr").empty();
    $.ajax({
      type : "post",
      cache : false,
      url : "/back/outline/del/occupation",
      dataType : "json",
      data : {
        "occupationId" : $(this).val()
      }
    }).done(function(data) {
      obj.parent().parent().remove();
    });
  });
  $("#body_category").on("click", ".del_category", function() {
    if (!confirm("削除しますか？")) {
      return false;
    }
    var obj = $(this);
    $("#tbl_content").css("display", "none");
    $("#body_content tr").empty();
    $.ajax({
      type : "post",
      cache : false,
      url : "/back/outline/del/category",
      dataType : "json",
      data : {
        "occupationId" : occupationId,
        "categoryId" : $(this).val()
      }
    }).done(function(data) {
      obj.parent().parent().remove();
    });
  });
  $("#body_content").on("click", ".del_content", function() {
    if (!confirm("削除しますか？")) {
      return false;
    }
    var obj = $(this);
    $.ajax({
      type : "post",
      cache : false,
      url : "/back/outline/del/content",
      dataType : "json",
      data : {
        "occupationId" : occupationId,
        "categoryId" : categoryId,
        "contentId" : $(this).val()
      }
    }).done(function(data) {
      obj.parent().parent().remove();
    });
  });
});
