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

    <% include templates/styletemplate.ejs %>
    <% include templates/scripttemplate.ejs %>
    <style>
        form{
            margin-top: 3rem;
        }
        
    </style>
</head>
<body>
<% include templates/header.ejs %>

<div class="row translate10">
    <div class="col-md-10 col-md-offset-1">
        <div class="panel panel-default">
            <form class="panel-body" method="post" action="/datafiltering/solvedTasksFilter">

                    <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-radio" name="display" value="list" checked> List</label>
                    <label class="radio-inline"><input type="radio" id="grid-radio" name="display" value="grid"> Grid</label><br>

                    <input type="submit" class = "btn btn-default" value="getJson">
            </form>
            <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
            <script type="text/javascript">
                $(".panel-body").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-radio").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 class="form-horizontal">
            <div class="form-group">
                <div class="col-md-12 target-append">

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

    </div>
</div>

</body>
</html>