{% extends "admin/model/edit.html" %}

{% block head_tail %}
  {{super()}}
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js"></script>
{% endblock %}

{% block navlinks %}
  <ul class="nav nav-tabs">
    <li>
      <a href="{{ return_url }}">{{ _gettext('List') }}</a>
    </li>
    {%- if admin_view.can_create -%}
    <li>
      <a href="{{ get_url('.create_view', url=return_url) }}">{{ _gettext('Create') }}</a>
    </li>
    {%- endif -%}
    <li class="active">
      <a data-toggle="tab"  href="#edit-tab">{{ _gettext('Edit') }}</a>
    </li>
    <li>
      <a data-toggle="tab" href="#user-orgs-tab">
        <span data-toggle="tooltip" title="User Organisations">{{ _gettext('Organisations') }}</span></a>
    </li>
    {%- if admin_view.can_view_details -%}
    <li>
      <a href="{{ get_url('.details_view', id=request.args.get('id'), url=return_url) }}">{{ _gettext('Details') }}</a>
    </li>
    {%- endif -%}
  </ul>
{% endblock %}

{% block edit_form %}
  <div class="tab-content">
    <div id="edit-tab" class="tab-pane active">
      <h3>Details</h3>
      {{ lib.render_form(form, return_url, extra(), form_opts) }}
    </div>
    <div id="user-orgs-tab" class="tab-pane" ng-app="userAdmin" ng-controller="userOrgs">
      <h3>User Organisations</h3>
      <div class="form-group">
        <!-- label for="organisation" class="col-md-2 control-label">Organisation
          &nbsp;
          </label -->
          <div class="row">
            <div class="col-md-10">
              <label for="sel_org">Select an ogranisation to add:</label>
              <select class="form-control" id="sel_org" ng-model="selectedOrg" ng-change="add_org()"
                                                                               ng-options="o.name for o in available_orgs | orderBy: 'name' track by o.id">
                {% raw %}
                <!-- option ng-repeat="o in available_orgs | orderBy: 'name'" value="{{o.id}}">{{o.name}}</option -->
                <option value="">-- Choose an Organisation to add... --</option>
                {% endraw %}
              </select>
              <!--select class="form-control" data-allow-blank="1" data-allow-clear="true" data-placeholder="Please select Organisation" data-role="select2-ajax" data-url="{{url_for('user.ajax_lookup', name='organisation')}}" id="user-orgs" name="user-orgs" type="hidden">
                </select -->
                <!-- input class="form-control" data-allow-blank="1" data-allow-clear="true" data-placeholder="Please select Organisation" data-role="select2-ajax" data-url="{{url_for('user.ajax_lookup', name='organisation')}}" id="user-orgs" name="user-orgs" type="hidden" -->

            </div>
          </div>
      </div>
      <div class="row">
        <div class="col-md-10">

          <table class="table table-striped table-bordered table-hover model-list">
            <thead>
              <tr>
                <th class="column-header">
                  Remove
                </th>
                <th class="column-header">
                  Name
                </th>
                <th class="column-header">
                  Is Admin
                </th>
                <th class="column-header">
                  Is Tech.Contact
                </th>
              </tr>
            </thead>
            {% raw %}
            <tbody>
              <tr ng-repeat="r in user_orgs | orderBy: 'name'">
                <form class="icon">
                  <td class="col-name">
                    <button
                      ng-really-message="Are you sure you want to delete this record?"
                      ng-really-click="delete_org(r.id)"
                      title="Delete record"
                      class="remove-org">
                      <span class="fa fa-trash glyphicon glyphicon-trash"></span>
                    </button>
                  </td>
                  <td class="col-name">{{r.name}}</td>
                  <td class="col-name"><input type="checkbox" ng-change="change(r)" ng-model="r.is_admin"></td>
                  <td class="col-name"><input type="checkbox" ng-change="change(r)" ng-model="r.is_tech_contact"></td>
                </form>
              </tr>
            </tbody>
            {% endraw %}
          </table>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block tail_js %}
  {{ super() }}
  <script>
    $('#user-orgs').on("change", function(e) {
      //console.info(e);
    });
var app = angular.module("userAdmin", []);
app.directive('ngReallyClick', [function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.bind('click', function() {
        var message = attrs.ngReallyMessage;
        if (message && confirm(message)) {
          scope.$apply(attrs.ngReallyClick);
        }
      });
    }
  }
}]);
app.controller("userOrgs", function($scope, $http) {
  $scope.user_orgs = {{ model.organisations.dicts()| list | tojson }};
  $scope.available_orgs = {{ model.available_organisations.dicts()| list | tojson }};
  $scope.add_org = function() {
    //console.info($scope.selectedOrg);
    if (!$scope.selectedOrg) {
      return;
    }
    var org = {id: $scope.selectedOrg.id, name: $scope.selectedOrg.name, is_admin: false, is_tech_contact: false};
    $scope.user_orgs.push(org);
    for (var i in $scope.available_orgs) {
      if ($scope.available_orgs[i].id == $scope.selectedOrg.id) {
        $scope.available_orgs.splice(i, 1);
        $scope.selectedOrg = null;
        break;
      }
    }
    $http.post("{{ url_for('user_orgs_org', user_id=request.args.get('id')) }}", org)
      .then(function(response) {
        //console.info(response.data);
      });
  };
  $scope.delete_org = function(org_id) {
    for (var i in $scope.user_orgs) {
      if ($scope.user_orgs[i].id == org_id) {
        var org = $scope.user_orgs.splice(i, 1).pop();
        //console.info(org);
        $scope.available_orgs.push(org);
        $http.delete("{{ url_for('user_orgs_org', user_id=request.args.get('id')) }}" + org_id)
          .then(function(response) {
            //console.info(response.data);
          });
        break;
      }
    }
  };
  $scope.change = function(user_org) {
    //console.info(user_org);
    $http.put("{{ url_for('user_orgs_org', user_id=request.args.get('id')) }}", user_org)
      .then(function(response) {
        //console.info(response.data);
      });
  };
});
  </script>
{% endblock %}
