<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %> - Datafiltering</title>

  <% include templates/styletemplate.ejs %>
  <% include templates/scripttemplate.ejs %>
  <style>
    .vcenter {
      display: inline-block;
      vertical-align: middle;
      float: none;
      /*margin-top: 0.5rem;*/
    }
    .inline-element {
      display: inline-block;
    }
    .container.csegment {
      width: 85%;
      margin-bottom: 2rem;
    }
    .breadcrumb.breadcrumb-background {
      background: #FFF;
    }
    .panel-body .row {
      margin-top: 1rem;
    }
    .panel-center {
      width: 80%;
      margin: 0 auto;
    }
    .panel-filtering {
      width: 30%;
    }
    .btn-filter {
      width: 30%
    }
  </style>
</head>
<body>
<% include templates/header.ejs %>


<div class="container csegment translate10">
  <div class="row">

  </div>
</div>
<!-- end-row -->
<div class="panel panel-default panel-center translate10">
  <div class="panel-body">
    <ol class="breadcrumb breadcrumb-background">
      <li><a href="#">Home</a></li>
      <li class="active">Data filtering</li>
    </ol>
    <h3><i class="fa fa-chevron-right"></i>  Data Filtering</h3>
    <div class="row">
      <div class="col-md-4">
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#solved-filter">Solved Tasks Filter</a></li>
          <li><a data-toggle="tab" href="#person-filter">Person Filter</a></li>
        </ul>
        <div class="panel panel-default panel-filtering" style="width: auto">
          <div class="panel-body tab-content">
            <!--<div class="tab-content"></div>./tab-content -->
            <div id="solved-filter" class="tab-pane fade in active">
              <div class="panel panel-default">
                <form class="panel-body1" method="post" action="/datafiltering/taskFilter">

                  <label>Name:</label>
                  <input type = "text" class = "form-control inlined-element" name="task_name" placeholder = "Enter name">

                  <label>hasSolution:</label>
                  <input type = "text" class = "form-control inlined-element" name="hasSolution" placeholder = "Enter SolEx">

                  <label>Date 1:</label>
                  <input type = "text" class = "form-control inlined-element" name="date1" placeholder = "DD/MM/YY">


                  <label>Date 2:</label>
                  <input type = "text" class = "form-control inlined-element" name="date2" placeholder = "DD/MM/YY">


                  <label>Jump To Page:</label>
                  <input type = "number" max="1000" class = "form-control inlined-element" name="page" placeholder = "100" required>

                  <label>Rows Per Page:</label>
                  <input type = "number" max="1000" class = "form-control inlined-element" name="rowsToFetch" placeholder = "100" required>

                  <label>Display type</label>
                  <label class="radio-inline"><input type="radio" id="list-radio1" name="display" value="list" checked> List</label>
                  <label class="radio-inline"><input type="radio" id="grid-radio1" name="display" value="grid"> Grid</label><br>

                  <input class="btn btn-lg btn-default btn-filter" type="submit" value="Submit" style="width: 100%">
                </form>
                <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
                <script type="text/javascript">
                  $(".panel-body1").submit(function(e)
                  {
                    var postData = $(this).serialize();
                    var formURL = $(this).attr("action");
                    var met=$(this).attr("method");
                    $.ajax(
                            {
                              url : formURL,
                              type: met,
                              data : postData,
                              datatype: "json",
                              success:function(response)
                              {
                                //   $(".col-md-6").append(JSON.stringify(response,null,3));
                                //<button type="button" class="btn btn-default prefill-button">Prefill</button>
                                $(".col-md-12.target-append").empty();
                                if( $("#list-radio1").is(":checked") ){
                                  for(var i=0; i<response.length; i++){
                                    $(".col-md-12.target-append").append(
                                            '<div class="col-md-12 append-container"><textarea class="json-append" disabled>'
                                            +JSON.stringify(response[i],null,3)
                                            +'</textarea></div>');
                                  }
                                } else {
                                  for(var i=0; i<response.length; i++){
                                    if(i%3 === 0){
                                      $(".col-md-12.target-append").append('<div class="row">');
                                    }
                                    $(".col-md-12.target-append").append('<div class="col-md-4"><textarea class="json-append" disabled>'+JSON.stringify(response[i],null,3)+'</textarea></div>');
                                    if((i+1)%3 === 0 || i+1 === response.length){
                                      $(".col-md-12.target-append").append('</div>');
                                    }
                                  }
                                }

                                $(".json-append").each(function() {
                                  //console.log("Entered function");

                                  //console.log($(this).text());
                                  var parsedData = JSON.parse($(this).text());
                                  //console.log(parsedData["SOLUTION"]);
                                  var htmlcodeBoolean = parsedData["HASSOLUTION"];
                                  if(htmlcodeBoolean === 'Y'){
                                    var htmlcode = parsedData["SOLUTION"];
                                  } else {
                                    var htmlcode = "";
                                  }

                                  var el = $(this),
                                          codeInside = htmlcode,
                                          isCodeInside = codeInside.length,
                                          HTML = "",
                                          CSS = "",
                                          JS = "";

                                  if (isCodepenURL(codeInside)){
                                    var form =
                                            '<a href="' + codeInside + '" target="_blank">' +
                                            '<input type="image" src="http://s.cdpn.io/3/cp-arrow-right.svg" width="40" height="40" class="codepen-mover-button prefill-button">'
                                            + '</a>';
                                    el.parent().append(form);
                                  }
                                  else if (isCodeInside) {
                                    HTML = codeInside;//.html()
                                    var data = {
                                      title              : "",
                                      description        : "",
                                      html               : HTML
                                    };

                                    var JSONstring =
                                            JSON.stringify(data)
                                            // Quotes will screw up the JSON
                                                    .replace(/"/g, "&quot;")
                                                    .replace(/'/g, "&apos;");

                                    var form =
                                            '<form action="http://codepen.io/pen/define" method="POST" target="_blank">' +
                                            '<input type="hidden" name="data" value=\'' +
                                            JSONstring +
                                            '\'>' +
                                            '<input type="image" src="http://s.cdpn.io/3/cp-arrow-right.svg" width="40" height="40" value="Create New Pen with Prefilled Data" class="codepen-mover-button prefill-button">' +
                                            '</form>';
                                    el.parent().append(form);
                                  } else {
                                    //HTML = el.html() + "This solution has no code";
                                  }
                                });
                              },
                              error: function(jqXHR, textStatus, errorThrown)
                              {
                                //handle error
                                $(".col-md-12.target-append").empty();
                              }
                            });
                    e.preventDefault();	//STOP default action
                  });
                </script>
              </div>
            </div><!--./tab-pane -->
            <div id="person-filter" class="tab-pane fade">
              <div class="panel panel-default">
                <form class="panel-body2" method="post" action="/datafiltering/personFilter">
                  <h3>Welcome back !</h3>

                  <label>person_id:</label>
                  <input type = "text" class = "form-control inlined-element" name="p_id" placeholder = "Enter ID">


                  <label>completedTasks:</label>
                  <input type = "number" class = "form-control inlined-element" name="tasks_completed_counter" placeholder = "greater than">


                  <label>date1:</label>
                  <input type = "text" class = "form-control inlined-element" name="date11" placeholder = "DD/MM/YY">


                  <label>date2:</label>
                  <input type = "text" class = "form-control inlined-element" name="date22" placeholder = "DD/MM/YY">


                  <label>Jump To Page:</label>
                  <input type = "number" max="1000" class = "form-control inlined-element" name="page1" placeholder = "1" required>

                  <label>Rows Per Page:</label>
                  <input type = "number" max="1000" class = "form-control inlined-element" name="rowsToFetch1" placeholder = "100" required>

                  <label>Display type</label>
                  <label class="radio-inline"><input type="radio" id="list-radio2" name="display" value="list" checked> List</label>
                  <label class="radio-inline"><input type="radio" id="grid-radio2" name="display" value="grid"> Grid</label><br>

                  <input class="btn btn-lg btn-default btn-filter" type="submit" value="Submit" style="width: 100%">

                </form>
                <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
                <script type="text/javascript">
                  $(".panel-body2").submit(function(e)
                  {
                    var postData = $(this).serialize();
                    var formURL = $(this).attr("action");
                    var met=$(this).attr("method");
                    $.ajax(
                            {
                              url : formURL,
                              type: met,
                              data : postData,
                              datatype: "json",
                              success:function(response)
                              {
                                //   $(".col-md-6").append(JSON.stringify(response,null,3));
                                //<button type="button" class="btn btn-default prefill-button">Prefill</button>
                                $(".col-md-12.target-append").empty();
                                if( $("#list-radio2").is(":checked") ){
                                  for(var i=0; i<response.length; i++){
                                    $(".col-md-12.target-append").append(
                                            '<div class="col-md-12 append-container"><textarea class="json-append" disabled>'
                                            +JSON.stringify(response[i],null,3)
                                            +'</textarea></div>');
                                  }
                                } else {
                                  for(var i=0; i<response.length; i++){
                                    if(i%3 === 0){
                                      $(".col-md-12.target-append").append('<div class="row">');
                                    }
                                    $(".col-md-12.target-append").append('<div class="col-md-4"><textarea class="json-append" disabled>'+JSON.stringify(response[i],null,3)+'</textarea></div>');
                                    if((i+1)%3 === 0 || i+1 === response.length){
                                      $(".col-md-12.target-append").append('</div>');
                                    }
                                  }
                                }

                                $(".json-append").each(function() {
                                  //console.log("Entered function");

                                  //console.log($(this).text());
                                  var parsedData = JSON.parse($(this).text());
                                  //console.log(parsedData["SOLUTION"]);
                                  var htmlcodeBoolean = parsedData["HASSOLUTION"];
                                  if(htmlcodeBoolean === 'Y'){
                                    var htmlcode = parsedData["SOLUTION"];
                                  } else {
                                    var htmlcode = "";
                                  }

                                  var el = $(this),
                                          codeInside = htmlcode,
                                          isCodeInside = codeInside.length,
                                          HTML = "",
                                          CSS = "",
                                          JS = "";

                                  if (isCodepenURL(codeInside)){
                                    var form =
                                            '<a href="' + codeInside + '" target="_blank">' +
                                            '<input type="image" src="http://s.cdpn.io/3/cp-arrow-right.svg" width="40" height="40" class="codepen-mover-button prefill-button">'
                                            + '</a>';
                                    el.parent().append(form);
                                  }
                                  else if (isCodeInside) {
                                    HTML = codeInside;//.html()
                                    var data = {
                                      title              : "",
                                      description        : "",
                                      html               : HTML
                                    };

                                    var JSONstring =
                                            JSON.stringify(data)
                                            // Quotes will screw up the JSON
                                                    .replace(/"/g, "&quot;")
                                                    .replace(/'/g, "&apos;");

                                    var form =
                                            '<form action="http://codepen.io/pen/define" method="POST" target="_blank">' +
                                            '<input type="hidden" name="data" value=\'' +
                                            JSONstring +
                                            '\'>' +
                                            '<input type="image" src="http://s.cdpn.io/3/cp-arrow-right.svg" width="40" height="40" value="Create New Pen with Prefilled Data" class="codepen-mover-button prefill-button">' +
                                            '</form>';
                                    el.parent().append(form);
                                  } else {
                                    //HTML = el.html() + "This solution has no code";
                                  }
                                });
                              },
                              error: function(jqXHR, textStatus, errorThrown)
                              {
                                //handle error
                                $(".col-md-12.target-append").empty();
                              }
                            });
                    e.preventDefault();	//STOP default action
                  });
                </script>
              </div>
            </div>
          </div>
          <!-- end-panel-body -->
        </div>
        <!-- end-panel -->
      </div>
      <div class="col-md-8">
        <div class="col-md-12 target-append">
        </div>
        <hr/>
      </div>
    </div>

  </div>
  <!-- end-panel-body -->
</div>
<!-- end-panel -->



</body>
</html>