{% extends 'base.html' %}
{% block title %} Home {% endblock title %}
{% block body %}
  
<div id="mdiv">
    <div class="container my-3">
      <form id="addform">
        <h1>Enter a Todo</h1>

        <div class="mb-3">
          <label for="todotitle" class="form-label">Todo Title</label>
          <input type="text" class="form-control" name="title" id="todotitle" aria-describedby="emailHelp">
        </div>
        <div class="mb-3">
          <label for="tododesc" class="form-label">Todo Descritption</label>
          <input type="text" class="form-control" name="description" id="tododesc">
        </div>
        <button type="button" class="btn btn-dark" id="butsave" >Submit</button>
      </form>
    </div>

    <div class="container my-3">
      {% if alltodo|length == 0 %}
      <div class="alert alert-dark" role="alert">
        There is no Task Todo!
      </div>
      
        
      {% else %}
        
      
      <table class="table" id="divid" >
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Title</th>
            <th scope="col">Description</th>
            <th scope="col">Date Time</th>
            <th scope="col">Status</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for todo in alltodo %}
          <tr>
            <th scope="row">{{loop.index}}</th>
            <td>{{todo.title}}</td>
            <td>{{todo.description}}</td>
            <td>{{todo.date_created}}</td>
            <td>
            {% if todo.status == "Pending" %}
            <span class="badge text-bg-secondary">Pending</span>
            {% elif todo.status == "Completed" %}
            <span class="badge text-bg-success">Completed</span>
            {% endif %}
            </td>
            <td>
              <button type="button" value="{{todo.sno}}" class="btn updatebtn btn-outline-dark btn-sm">Update</button>
              <button type="button" value="{{todo.sno}}" class="btn deletebtn btn-outline-danger btn-sm">Delete</button>
              {% if todo.status == "Pending" %}
              <button type="button" value="{{todo.sno}}" class="btn compbtn btn-outline-success btn-sm">Completed</button>
              {% elif todo.status == "Completed" %}
              <button type="button" value="{{todo.sno}}" class="btn uncompbtn btn-outline-secondary btn-sm">Not Completed</button>
              {% endif %}
            
            </td>
          </tr>
          {% endfor %}
         
        </tbody>
      </table>
      {% endif %}
    </div>

    <div class="modal fade" id="editmodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Update Your Todo</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="addform">
              <div class="mb-3">
                <label for="todotitle" class="form-label">Todo Title</label>
                <input type="text" class="form-control" name="title" id="updatetitle" aria-describedby="emailHelp">
              </div>
              <div class="mb-3">
                <label for="tododesc" class="form-label">Todo Descritption</label>
                <input type="text" class="form-control" name="description" id="updatedesc">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn updatemodalbtn btn-outline-dark" id="updatemodalbtn">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
    {% endblock body %}
    {% block scripts %}
    <script>
      $(document).ready(function() {
          $(document).on('click', '.deletebtn', function() {
              // console.log("Hello")
              var id = $(this).val()
              var $ele = $(this).parent().parent();
    
              console.log(id)
    
              // $('#editmodal').modal('show')
              $.ajax({
                  type: "GET",
                  url: "delete/"+id,
                  success: function (response) {
                      // console.log(response);
                      $ele.fadeOut().remove();
                      $("#mdiv").load(" #mdiv");

                      // $('#code').val(response.student.code);
                      
                  }
              });
          });

          $(document).on('click', '.compbtn', function() {
              // console.log("Hello")
              var id1 = $(this).val()
              var $ele = $(this).parent().parent();
    
              console.log(id1)
    
              // $('#editmodal').modal('show')
              $.ajax({
                  type: "GET",
                  url: "complete/"+id1,
                  success: function (response) {
                      // console.log(response);
                      // $ele.fadeOut().remove();
                      // if (data.success){
                        $("#divid").load(" #divid");
                    //  }
                      // $('#code').val(response.student.code);
                      
                  }
              });
          });

          $(document).on('click', '.uncompbtn', function() {
              // console.log("Hello")
              var id = $(this).val()
              var $ele = $(this).parent().parent();
    
              console.log(id)
    
              // $('#editmodal').modal('show')
              $.ajax({
                  type: "GET",
                  url: "uncomplete/"+id,
                  success: function (response) {
                      // console.log(response);
                      // $ele.fadeOut().remove();
                      // if (data.success){
                        $("#divid").load(" #divid");
                    //  }
                      // $('#code').val(response.student.code);
                      
                  }
              });
            
          });
    
      });
    </script>
    <script>
      $("#butsave").on("click", function(e){
        e.preventDefault();
        var title = $("#todotitle").val();
        var description = $("#tododesc").val();
        console.log(title);
        console.log(description);
        $.ajax({
          url: "/",
          type: "POST",
          data: {
            title: title,
            description: description
          },
          success : function(data){
            $("#divid").load(" #divid");
            $("#addform").trigger("reset");
            // console.log("Success");
          }
        })
      })
    </script>

<script>
  $(document).ready(function() {
      $(document).on('click', '.updatebtn', function() {
          var id = $(this).val()
          $('#editmodal').modal('show')
          // $('#updatetitle').val("hello");
          console.log(id);

          $.ajax({
              type: "POST",
              url: "/updatedata/"+id,
              success: function (response) {
                  console.log(response);
                  // console.log(response)
                  // console.log(response.desc)
                  $('#updatetitle').val(response.title);
                  $('#updatedesc').val(response.desc);
                  // $('#Description').val(response.student.description);
                  // $('#orderno').val(response.student.orderno);
                  // $('#file').val(response.student.imgurl);
                  // $('#program').val(response.student.code);
                  // $('#status').val(response.student.status);
              }
          });
          $("#updatemodalbtn").on("click", function(e){
            e.preventDefault();
            var title = $('#updatetitle').val();
            var desc = $('#updatedesc').val();
            console.log(title);
            console.log(desc);
            console.log(id);
            $.ajax({
                url: "/update/"+id,
                type: "POST",
                data: {
                  title: title,
                  description: desc      
                },
                cache: false,
                success: function(response){
                  console.log(response)
                  $('#editmodal').modal('hide')
                  if(response == "Record Updated"){
                    // location.reload();
                    // $("#divid").load(window.location + " #divid");
                  // $("#divid").load(" #divid");
                  $('#mdiv').load(' #mdiv')
                  // $("#editmodal").load(" #editmodal");


                  }
                  // $("#divid").load(" #divid");
                }
                
                               
              })
            

          })
          // $.ajax({
          //       url: "/update/"+id,
          //       type: "POST",
                
          //     })
      });

  });

  
</script>


    {% endblock scripts %}