{% if data : %}
<div class=" col-md-12 form-group text-center">
    <label><h3 class="font-weight-bold"><b>Your Training in endoscopic surgery/procedures</b></h3></label>
</div>
<div class="mobile-responsive">
<table class="table table-striped table-bordered bg-light" id="myTable"  >
    <thead>
      <tr>
         <th scope="col">SNo</th>
         <th scope="col">Institution</th>
         <th scope="col">From(Date)</th>
         <th scope="col">Duration</th>
         <th scope="col">Teacher</th>
         <th scope="col" colspan="2"></th>
      </tr>
    </thead>
    <tbody >
      {% for row in data or [] %}
       <tr id="{{row.work_id}}" >
         <td data-label="SNo">{{loop.index}}</td>
         <td data-label="Institution">{{row.institution or ''}}</td>
         <td data-label="From(Date)">{{row.from_date.strftime('%d-%m-%Y') if row.from_date else ''}}</td>
         <td data-label="Duration">{{row.duration or ''}} </td>
         <td data-label="Teacher">{{row.teacher or ''}}</td>
         <td data-label="Edit"><button type="button" class="edit btn btn-primary" id="idbtnedit" name="btnedit" value="{{row.ut_id}}">Edit</button></td>
         <td data-label="Delete"><button type="button" class="delete btn btn-danger" id="idbtndelete" name="btndelete" value="{{row.ut_id}}">Delete</button></td>
      </tr>
       {% endfor %}
   </tbody>
</table>
</div>
{% endif %}

 <script type="text/javascript">
  var BaseUrl     = document.location.origin
  var society_id  = "{{society_id}}"
  var society_key = "{{society_key}}"

$(document).ready( function ()
{
   $(".delete").click(function()
   {
      var ut_id = $(this).val();
      var user_id = $("#user_id").val();
      var msg     = confirm("Are you sure to delete?")
      if (msg==true) {
         $.ajax({
            type: 'POST',
            url: BaseUrl+"/delete_training/"+society_id+"/"+society_key,   
            data:{ 'ut_id': ut_id,'user_id':user_id}, 
            dataType: 'html',
            success: function(data){
                $("#showtable").empty();
                $("#showtable").html(data);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {}                      
         }); 
         return false;
      }
      else {
      }
   })
   $(".edit").click(function()
   {
      var ut_id  = $(this).val();
      $.ajax({
         type: 'POST', 
         url: BaseUrl+"/get_training/"+society_id+"/"+society_key,   
         data:{ 'ut_id': ut_id}, 
         dataType: 'json',
         success: function(data)
         {
            console.log(data.from_date)
            var date    = new Date(data.from_date);
            yr      = date.getFullYear(),
            console.log(date)
            month   = date.getMonth() < 10 ? ('0' + date.getMonth()+1).slice(-2) : date.getMonth()+1,
            day     = date.getDate()  < 10 ? '0' + date.getDate()  : date.getDate(),
            newDate = day + '-' + month + '-' + yr;
            
            $("#ut_id").val(ut_id)
            $("#training_place").val(data.institution);

            $("#from_date").val(newDate);
            $("#duration").val(data.duration);
            $("#teacher").val(data.teacher);
         },
         error: function(XMLHttpRequest, textStatus, errorThrown) {}                      
      });   
      return false;
   })
   $(".edit").click(function() {
      $("#add_submit_t").prop("value", "Update");
   });
   $("#add_submit_t").click(function() {
      $("#add_submit_t").prop("value", "Add");
   });
   $("#clear_submit_t").click(function() {
      $("#add_submit_t").prop("value", "Add");
   });
});

</script>