<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
  <link data-require="toastr@*" data-semver="1.3.0" rel="stylesheet" href="//www.johnpapa.net/scripts/toastr.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="container">
    <h1>Hello knockout job CRUD example!!</h1>
    <div class="row">
      <div class="col-md-12">
        <p class="text-right">
          <button class="btn btn-success" data-bind="click: ShowForm">Add new job</button>
        </p>
      </div>
    </div>

    <div class="row ">
      <div class="col-md-12 ">
        <h2>Jobs i got</h2>
        <table class="table ">
          <thead>
            <tr>
              <td>Company</td>
              <td>Job title</td>
              <td>Description</td>
              <td>Editable</td>
              <td>Actions</td>
            </tr>
          </thead>
          <tbody>

            <tr data-bind="with: newJob">
              <td>
                <input type="text" class="form-control" data-bind="value: company" placeholder="Company Name">
              </td>
              <td>
                <input type="text" class="form-control" data-bind="value: jobTitle" placeholder="Job Title">
              </td>
              <td>
                <input type="text" class="form-control" data-bind="value: description" placeholder="Description">
              </td>
              <td></td>
              <td>
                <button class="btn btn-xs btn-info" data-bind="click: addNewJob">Save</button>
                <button class="btn btn-xs btn-danger" data-bind="click: cancelNewJob">Cancel</button>
              </td>
            </tr>

            <!-- ko foreach: jobs -->
            <tr data-bind="visible: !editable()">
              <td data-bind="text: company">Test</td>
              <td data-bind="text: jobTitle">Test</td>
              <td data-bind="text: description">Test</td>
              <td data-bind="text: editable">Test</td>
              <td>
                <button class="btn btn-xs btn-info" data-bind="click: editJob">Edit</button>
                <button class="btn btn-xs btn-danger" data-bind="click: deleteJob">Delete</button>
              </td>
            </tr>
            <tr data-bind="with: edit">
              <td>
                <input type="text" class="form-control" data-bind="value: company">
              </td>
              <td>
                <input type="text" class="form-control" data-bind="value: jobTitle">
              </td>
              <td>
                <input type="text" class="form-control" data-bind="value: description">
              </td>
              <td data-bind="text: editable">Test</td>
              <td>
                <button class="btn btn-xs btn-info" data-bind="click: acceptEdit">Save</button>
                <button class="btn btn-xs btn-danger" data-bind="click: cancelEdit">Cancel</button>
              </td>
            </tr>
            <!-- /ko -->


          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <pre data-bind="text: ko.toJSON($root, null, 2)">
          
        </pre>
      </div>
    </div>
  </div>

  <script data-require="jquery@* " data-semver="2.0.3 " src="http://code.jquery.com/jquery-2.0.3.min.js "></script>
  <script data-require="bootstrap@3.0.3 " data-semver="3.0.3 " src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js "></script>
  <script data-require="knockout@3.0.0 " data-semver="3.0.0 " src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js "></script>
  <script data-require="knockout-validation@1.0.2" data-semver="1.0.2" src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.js"></script>
  <script data-require="toastr@*" data-semver="1.3.0" src="//www.johnpapa.net/scripts/toastr.min.js"></script>
  <script src="Constructor.js "></script>
  <script src="ViewModel.js "></script>
</body>

</html>
/* Styles go here */

var job = function(data) {
  this.company = ko.observable().extend({
    required: true
  });
  this.jobTitle = ko.observable();
  this.description = ko.observable();
  this.editable = ko.observable(false);
  this.edit = ko.observable();
  if (data) {
    this.update(data);
  }
};

job.prototype.update = function(data) {
  this.company(data.company);
  this.jobTitle(data.jobTitle);
  this.description(data.description);
};
var viewModel = (function() {
  jobs = ko.observableArray();
  newJob = ko.observable();

  ShowForm = function() {
    newJob(new job());
  };

  addNewJob = function() {
    var j = ko.toJS(newJob());
    jobs.unshift(new job(j));
    toastr.success('Job ' + '"' + j.company + '"' + ' added');
    newJob(null);
  };

  cancelNewJob = function() {
    newJob(null);
  };

  deleteJob = function(data) {
    jobs.remove(data);
    toastr.success('Job removed');
  };

  editJob = function(item) {
    var backup = ko.toJS(item);
    item.edit((new job(backup)));
    item.editable(true);
  };

  cancelEdit = function(item) {
    item.editable(false);
    item.edit(null);
  };

  acceptEdit = function(item) {
    var updatedItem = ko.toJS(item);
    item.editable(false);
    item.update(updatedItem);
    item.edit(null);
    toastr.success('Job ' + '"' + item.company() + '"' + ' updated');
  };

  return {
    newJob: newJob,
    jobs: jobs
    
  };
})();

ko.applyBindings(viewModel);