<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!--meta name="viewport" content="width=device-width, initial-scale=1.0"-->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link rel="stylesheet" href="/stylesheets/style.css">
  <link rel="stylesheet" href="/stylesheets/fontawesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
  <link rel="stylesheet" href="/stylesheets/bootstrap-datepicker.standalone.min.css">

  <title>Jifi Todo</title>
</head>

<body>

  <div class="container m-5 p-2 rounded mx-auto bg-light shadow">
  
    <!-- App title section -->
    <div class="row m-1 p-4">
      <div class="col">
        <div class="p-1 h1 text-primary text-center mx-auto display-inline-block">
          <i class="fa fa-dashboard bg-primary text-white rounded p-2"></i>
          <u>Jifi Todo</u>
        </div>
      </div>
    </div>

    <!-- Create todo section -->
    <div class="row m-1 p-3">
      <div class="col col-11 mx-auto">
        <form action="/add" method="post" class="add-task">
          <div class="row bg-white rounded shadow-sm p-2 add-todo-wrapper align-items-center justify-content-center">
            <div class="col">
              <input class="form-control form-control-lg add-todo-input" name="title" type="text" placeholder="Title task .." required>
              <input class="form-control form-control-lg add-todo-input" name="date" type="datetime-local" placeholder="Date .." required>
              <textarea class="form-control form-control-lg add-todo-input" name="description" placeholder="Description .." required></textarea>
            </div>
            <div class="col-auto px-0 mx-0 mr-2">
              <button type="submit" class="btn btn-primary">Add Tak</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="p-2 mx-4 border-black-25 border-bottom"></div>

    <!-- View options section -->
    <div class="row m-1 p-3 px-5 justify-content-end">
      <div class="col-auto d-flex align-items-center">
        <label class="text-secondary my-2 pr-2 view-opt-label">Filter</label>
        <select class="custom-select custom-select-sm btn my-2">
          <option value="all" selected>All</option>
          <option value="completed">Completed</option>
          <option value="active">Active</option>
          <option value="has-due-date">Has due date</option>
        </select>
      </div>
      <div class="col-auto d-flex align-items-center px-1 pr-3">
        <label class="text-secondary my-2 pr-2 view-opt-label">Sort</label>
        <select class="custom-select custom-select-sm btn my-2">
          <option value="added-date-asc" selected>Added date</option>
          <option value="due-date-desc">Due date</option>
        </select>
        <i class="fa fa fa-sort-amount-asc text-info btn mx-0 px-0 pl-1" data-toggle="tooltip" data-placement="bottom"
          title="Ascending"></i>
        <i class="fa fa fa-sort-amount-desc text-info btn mx-0 px-0 pl-1 d-none" data-toggle="tooltip"
          data-placement="bottom" title="Descending"></i>
      </div>
    </div>

    <!-- Todo list section -->
    <div class="row mx-1 px-5 pb-3 w-80">
      <div class="col mx-auto">

        <!-- Todo Item -->
        <% tasks.forEach((task) => { %>
        <div class="row px-3 align-items-center todo-item rounded">
          <div class="col-auto m-1 p-0 d-flex align-items-center">
            <h2 class="m-0 p-0">
              <a href="/done/<%= task._id %>"> <i class="fa fa-<%= task.status ? 'check-square-o' : 'square-o' %> text-primary btn m-0 p-0" data-toggle="tooltip" data-placement="bottom" title="<%= task.status ? 'Mark as complete' : 'Mark as todo' %>"></i></a>
            </h2>
          </div>
          <div class="col px-1 m-1 d-flex align-items-center">
            <div class="col">
              <input type="text" class="form-control form-control-lg border-0 edit-todo-input bg-transparent rounded px-3" readonly value="<%= task.title %>" title="<%= task.title %>" />
              <textarea class="form-control form-control-lg border-0 add-todo-input bg-transparent rounded px-3" readonly title="Description"><%= task.description %></textarea>
            </div>
          </div>
          <div class="col-auto m-1 p-0 px-3">
            <div class="row">
              <% if (!task.status) { %>
                <div class="col-auto d-flex align-items-center rounded bg-white border border-warning">
                  <i class="fa fa-hourglass-2 my-2 px-2 text-warning btn" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Non-completed task"></i>
                  <h6 class="text my-2 pr-2"><%= new Date(task.date).toDateString()  %></h6>
                </div>
              <% } else { %>
                <div class="col-auto d-flex align-items-center rounded bg-white border border-success">
                  <i class="fa fa-check-circle-o my-2 px-2 text-success btn" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Task done"></i>
                  <h6 class="text my-2 pr-2"><%= new Date(task.date).toDateString()  %></h6>
                </div>
              <% } %>
            </div>
          </div>
          <div class="col-auto m-1 p-0 todo-actions">
            <div class="row d-flex align-items-center justify-content-end">
              <% if (!task.status) { %>
              <h5 class="m-0 p-0 px-2">
                <a href="/edit/<%= task._id %>"><i class="fa fa-pencil text-info btn m-0 p-0" data-toggle="tooltip" data-placement="bottom" title="Edit todo"></i></a>
              </h5>
              <% } %>
              <h5 class="m-0 p-0 px-2">
                <form action="/delete/<%= task._id %>?_method=DELETE" method="post">
                  <input type="hidden" name="_method" value="DELETE">
                  <button type="submit" class="text-danger btn m-0 p-0 bg-white">
                    <i class="fa fa-trash-o" data-toggle="tooltip" data-placement="bottom" title="Delete todo"></i>
                  </button>
                </form>
              </h5>
            </div>
            <div class="row todo-created-info">
              <div class="col-auto d-flex align-items-center pr-2">
                <i class="fa fa-info-circle my-2 px-2 text-black-50 btn" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Created date"></i>
                <label class="date-label my-2 text-black-50"><%= new Date(task.created_at).toDateString() %></label>
              </div>
            </div>
          </div>
        </div>
        <% }); %>

      </div>
    </div>
  
  </div>

  <script src="/javascripts/jquery.min.js"></script>
  <script src="/javascripts/popper.min.js"></script>
  <script src="/javascripts/bootstrap.min.js"></script>
  <script src="/javascripts/bootlint.min.js"></script>
  <script src="/javascripts/bootstrap-datepicker.min.js"></script>
  <script src="/javascripts/app.js"></script>
  <script>
    /*
    const form = document.querySelector('.add-task');
    form.addEventListener('submit', async (e) => {
      e.preventDefault();

      try {
        const response = await fetch(form.action,
          {
            method: form.method,
            headers: {
              'X-Requested-With': 'XMLHttpRequest',
              'Content-type': 'application/json;charset=UTF-8'
            }
          });

            if (response.status === 200 && response.ok) {
               const data = await response.json();
               console.log(data)
            } else {
                alert(response.status)
            }

        } catch (e) {
            console.log(e);
        }
    })
    */
  </script>
</body>

</html>