{% extends "base.html" %}
{% block title %}Trait Submission{% endblock %}

{% block css %}
<link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
<style>
 .reject, .approve {
     margin-bottom: 5px;
 }
.case-attribute {
     width: 10em;
 }
 .table-title {
     padding-bottom: 10px;
     margin: 0 0 10px;
 }

 .table-title h2 {
     margin: 6px 0 0;
     font-size: 22px;
 }
 .table-title .add-new {
     float: right;
     height: 30px;
     font-weight: bold;
     font-size: 12px;
     text-shadow: none;
     min-width: 100px;
     border-radius: 50px;
     line-height: 13px;
 }
 .table-title .add-new i {
     margin-right: 4px;
 }
 table.table {
     table-layout: fixed;
     width: 70%;
 }
 table.table tr th, table.table tr td {
     border-color: #e9e9e9;
 }
 table.table th i {
     font-size: 13px;
     margin: 0 5px;
     cursor: pointer;
 }
 table.table th:last-child {
     width: 100px;
 }
 table.table td a {
     cursor: pointer;
     display: inline-block;
     margin: 0 5px;
     min-width: 24px;
 }
 table.table td a.add {
     color: #27C46B;
 }
 table.table td a.edit {
     color: #FFC107;
 }
 table.table td a.delete {
     color: #E34724;
 }
 table.table td i {
     font-size: 19px;
 }
 table.table td a.add i {
     font-size: 24px;
     margin-right: -1px;
     position: relative;
     top: 3px;
 }
 table.table .form-control {
     height: 32px;
     line-height: 32px;
     box-shadow: none;
     border-radius: 2px;
 }
 table.table .form-control.error {
     border-color: #f50000;
 }
 table.table td .add {
     display: none;
 }
</style>
{% endblock %}

{% block content %}
<!-- Start of body -->
<div class="container">
    <div class="table-wrapper">
        <div class="table-title">
            <div class="row">
                <div class="col-sm-8">
                    <h2>Case Attributes Reference Table</h2>
                </div>
            </div>
        </div>
        <table class="table table-bordered table-responsive">
	    <colgroup>
		<col class="case-attribute">
		<col>
		<col>
	    </colgroup>
            <thead>
                <th scope="col">Case Attribute</th>
                <th scope="col">Description</th>
                <th scope="col">Actions</th>
            </thead>
            <tbody>
                {% for id_, name, description in case_attributes %}
                <tr data-id="{{id_}}">
                    <td class="name" data-original-value="{{ name }}">{{ name }}</td>
                    <td class="description" data-original-value="{{ description }}">{{ description }}</td>
                    <td>
                        <a class="add" title="Add" data-toggle="tooltip"><i><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></i></a>
                        <a class="edit" title="Edit" data-toggle="tooltip"><i><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></i></a>
                        <a class="delete" title="Delete" data-toggle="tooltip"><i><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></i></a>
                    </td>
                </tr>
                {% endfor %}
		<tr id="addNew">
		    <td></td>
		    <td></td>
		    <td><button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i> Add New</button></td>
		</tr>
            </tbody>
        </table>

	{% if modifications or inserts or deletions %}
	<h2>Please Review These Changes</h2>
	{% endif %}
	{% if modifications %}
	<h3>Modify Existing Case Attributes</h3>
	<table class="table table-responsive table-hover table-striped cell-border" id="table-modifications">
            <thead>
		<th scope="col">Author</th>
		<th scope="col">Diff</th>
		<th scope="col">Action</th>
            </thead>
            <tbody>
		{% for data in modifications %}
		<tr>
		    <td>{{ data.get('author') }}</td>
		    <td>
			{% if data.get("name")%}
			<b>Name:</b><br/>
			<small>Original: </small>{{ data["name"].get("Original") }}<br/>
			<small>Current: </small>{{ data["name"].get("Current") }} <br/>
			<small>Diff:</small><br/>
			<pre>{{data["name"].get("Diff")}}</pre>
			{% endif %}
			{% if data.get("description")%}
			<b>Description:</b><br/>
			<small>Original: </small>{{ data["description"].get("Original") }}<br/>
			<small>Current: </small>{{ data["description"].get("Current") }} <br/>
			<small>Diff:</small><br/>
			<pre>{{data["description"].get("Diff")}}</pre>
			{% endif %}
		    </td>
		    <td>
                        <button data-id="{{ data.get('id') }}" type="button"
                                class="btn btn-default reject">
                            Reject
                        </button>
			<button data-id="{{ data.get('id') }}" type="button"
                                class="btn btn-success approve">
                            Approve
                        </button>
                    </td>
		</tr>
		{% endfor %}
            </tbody>
	</table>
	{% endif %}
	{% if deletions %}
	<h3>Delete Existing Case Attributes</h3>
	<table class="table table-responsive table-hover table-striped cell-border" id="table-modifications">
	    <colgroup>
		<col class="case-attribute">
		<col>
		<col>
		<col>
	    </colgroup>
            <thead>
		<th scope="col">Case Attribute</th>
		<th scope="col">Author</th>
		<th scope="col">Description</th>
		<th scope="col">Action</th>
            </thead>
            <tbody>
		{% for data in deletions %}
                <tr>
		    <td>{{data.get("name")}}</td>
                    <td>{{ data.get('author') }}</td>
		    <td>{{data.get("description")}}</td>
		    <td>
			<button data-id="{{data.get('id')}}" type="button"
				class="btn btn-default reject">
			    Reject
			</button>
			<button data-id="{{data.get('id')}}" type="button" class="btn btn-success approve">
			    Approve
			</button>
                    </td>
		</tr>
		{% endfor %}
            </tbody>
	</table>
	{% endif %}

	{% if inserts %}
	<h3>Insert New Case Attributes</h3>
	<table class="table table-responsive table-hover table-striped cell-border" id="table-modifications">
	    <colgroup>
		<col class="case-attribute">
		<col>
		<col>
		<col>
	    </colgroup>
	    <thead>
		<th scope="col">Case Attribute</th>
		<th scope="col">Author</th>
		<th scope="col">Description</th>
		<th scope="col">Action</th>
	    </thead>
	    <tbody>
		{% for data in inserts %}
                <tr>
		    <td>{{ data.get("name") }}</td>
		    <td>{{ data.get("author")}}</td>
		    <td>{{ data.get("description") }} </td>
		    <td>
			<button data-id="{{ data.get('id') }}" type="button"
					 class="btn btn-default reject">
			    Reject
			</button>
			<button data-id="{{ data.get('id') }}" type="button" class="btn btn-success approve">
			    Approve
			</button>
                    </td>
		</tr>
		{% endfor %}
			    </tbody>
	</table>
	{% endif %}
    </div>
    {%endblock%}

    {% block js %}
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.js') }}"></script>
    <script language="javascript" type="text/javascript">
     gn_server_url = "{{ gn_server_url }}";

     $(document).ready( function() {
	 let actions = $("table td:last-child").html();
	 // Append table with add row form on add new button click
	 $(".add-new").click(function(){
             $(this).attr("disabled", "disabled");
	     let index = $("table tbody tr:nth-last-child(2)").index();
             let row = '<tr>' +
                       '<td class="name"><input type="text" class="form-control"></td>' +
                       '<td class="description"><input type="text" class="form-control"></td>' +
                       '<td>' + actions + '</td>' +
                       '</tr>';
	     $(row).insertBefore("#addNew")
             $("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
	 });
	 // Add row on add button click
	 $(document).on("click", ".add", function(){
             let empty = false;
             let input = $(this).parents("tr").find('input[type="text"]');
             input.each(function(){
		 if(!$(this).val()){
                     $(this).addClass("error");
                     empty = true;
		 } else{
                     $(this).removeClass("error");
		 }
             });
             $(this).parents("tr").find(".error").first().focus();
             if(!empty){
		 input.each(function(){
                     $(this).parent("td").html($(this).val());
		 });
		 $(this).parents("tr").find(".add, .edit").toggle();
		 $(".add-new").removeAttr("disabled");
             }
	     else {
		 return;
	     }

	     let nameNode = $(this).parents("tr").find(".name");
	     let descNode = $(this).parents("tr").find(".description");
	     let name = nameNode.html();
	     let desc = descNode.html();
	     let nodeId = $(this).parents("tr").data("id");
	     let originalName = nameNode.data("original-value");
	     let originalDesc = descNode.data("original-value");
	     let diff = {};
	     if (nodeId) {
		 if (name !== originalName) {
		     diff["Modification"] = {
			 name: {
			     Original: originalName,
			     Current: name,
		     }};
		 }
		 if (desc !== originalDesc) {
		     let desc_ = {
			 Original: originalDesc,
			 Current: desc,
		     }
		     if (Object.keys(diff).length == 0) {
			 diff["Modification"] = {
			     description: desc_
			 }
		     }
		     else {
			 diff["Modification"].description = desc_;
		     }
		 }
		 if (!Object.keys(diff).length == 0) {
		     diff["id"] = nodeId;
		 }
	     } else {
		 if (name) {
		     diff["Insert"] = {
			 name: name,
		     }
		 }
		 if (desc) {
		     if (Object.keys(diff).length == 0) {
			 diff["Insert"] = {
			     description: desc,
			 }
		     }
		     else {
			 diff["Insert"].description = desc;
		     }
		 }
	     }
	     if(diff) {
		 $.ajax({
		     type: "POST",
		     data: {"data": JSON.stringify(diff)},
		     url: '{{ url_for("metadata_edit.update_case_attributes") }}',
		     /* contentType: "application/json", */
		     success: function(data, status, xhr) { location.reload() }
		 }
		 )
	     }
	 });
	 // Edit row on edit button click
	 $(document).on("click", ".edit", function(){
             $(this).parents("tr").find("td:not(:last-child)").each(function(){
		 $(this).html('<input type="text" class="form-control" value="' + $(this).text() + '">');
             });
             $(this).parents("tr").find(".add, .edit").toggle();
             $(".add-new").attr("disabled", "disabled");
	 });

	 // Delete row on delete button click
	 $(document).on("click", ".delete", function(){
             $(this).parents("tr").remove();
             $(".add-new").removeAttr("disabled");
	     let node = $(this).parents("tr")

	     let diff = {};
	     let nodeId = $(this).parents("tr").data("id");
	     diff["Deletion"] = {
		 name: node.find(".name").data("original-value"),
		 description: node.find(".description").data("original-value"),
		 id: node.data("id")}
	     if (nodeId){
		 $.ajax({
		     type: "POST",
		     data: {"data": JSON.stringify(diff)},
		     url: '{{ url_for("metadata_edit.update_case_attributes") }}',
		     success: function(data, status, xhr) {
			 location.reload();
		     }
	     })}
	 });
     });

     $(".reject").click(function(){
	 let id = $(this).data("id");
	 if (Number.isInteger(id)) {
	     $.ajax({
		 type: "POST",
		 data: {"id": id},
		 url: '{{ url_for("metadata_edit.reject_case_attribute_data") }}',
		 success: function(data, status, xhr) {
		     location.reload();
		 }
	     })
	 }
     });
     $(".approve").click(function(){
	 let id = $(this).data("id");
	 if (Number.isInteger(id)) {
	     $.ajax({
		 type: "POST",
		 data: {"id": id},
		 url: '{{ url_for("metadata_edit.approve_case_attribute_data") }}',
		 success: function(data, status, xhr) {
		     location.reload();
		 }
	     })
	 }
     });
    </script>
    {% endblock %}