<%-- 
    Document   : validationResults
    Created on : 21.1.2018, 20:28:40
    Author     : themi
--%>
<%@ page import="cz.csu.sdmx.constants.URL"%>
<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="reusable/header.jsp">
    <jsp:param name="title" value="Validation results" />
</jsp:include>
<h2>Validation results list</h2>
<form name="filterResults" action="<c:url value="<%=URL.RESULTS_FILTER%>" />" method="POST">
    <div class="datepickers">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='fromPicker'>
                        <input name="from"  type='text' class="form-control" value="<c:out value="${from}"/>" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='toPicker'>
                        <input name="to" type='text' class="form-control" value="<c:out value="${to}"/>" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                var dateFormat = "DD/MM/YYYY";
                $(function () {
                    $('#fromPicker').datetimepicker({
                        format: dateFormat,
                        useCurrent: true
                    });
                    $('#toPicker').datetimepicker({
                        format: dateFormat
                    });
                    
                    $("#fromPicker").on("dp.change", function (e) {
                        $('#toPicker').data("DateTimePicker").minDate(e.date);
                    });
                });
            </script>
        </div>
    </div> 
    <input type="submit" class="btn btn-primary btn-block" value="Filter">
</form> 
<hr class="hr-primary" /> 
<c:if test="${empty validationResults}">
    <div class="well">No validation results for selected dates.</div>
</c:if>
 
<c:if test="${!empty validationResults}">   
<ul class="pagination">
    <c:forEach begin="1" end="${pageCount}" varStatus="status">
        <li <c:if test="${status.index == 1}">class="active"</c:if>><a class="pageNumber" data-page="${status.index}">${status.index}</a></li>
    </c:forEach>
</ul> 
<script>
    $(".pageNumber").click(function() {
        var page = $(this).data("page");
        $(".resultPage").hide();
        $("[data-page="+page+"]").show();
        $(".pageNumber").parent().removeClass("active");
        $(this).parent().addClass("active");
    });
    function showPage(pageNumber){
        $(".resultPage").hide();
        $("[data-page="+pageNumber+"]").show();
    }
</script>
<div class="panel-group" id="results">
    <c:forEach var="result" items="${validationResults}" varStatus="status">
            <c:if test="${(status.index % 10) == 0}">
                <fmt:parseNumber var = "page" integerOnly = "true" type = "number" value = "${status.index / 10 + 1}" />
                <div class="resultPage" data-page="${page}" <c:if test="${page != 1}">style="display:none"</c:if>>
            </c:if>
        <div class="panel">
            
            <c:set var="hasErrors" value="${result.errorCount != 0}" />
            <c:if test="${hasErrors}" ><c:set var="resultClass" value="hasErrors" /><c:set var="detailClass" value="btn-danger" /></c:if>
            <c:if test="${!hasErrors}" ><c:set var="resultClass" value="noErrors" /><c:set var="detailClass" value="btn-success" /></c:if>
            <div class="btn-group result">
                <button class="infoButton btn ${resultClass}" data-toggle="collapse" data-parent="#results" href="#${result.id}">
                <span class="pull-left">Filename:<c:out value="${result.dataFilename}"/></span>
                <span class="badge pull-right"><c:out value="${result.date}"/></span>
                </button>
                <a href="<c:url value="<%=URL.RESULT%>" />/${result.id}" class="detailButton btn ${detailClass}">Detail</a>
            </div>
            <div id="${result.id}" class="panel panel-collapse collapse">
                <div class="panel-body">
                    <c:if test="${!hasErrors}" >Validation found no errors.</c:if>
                    <c:forEach var="error" items="${result.errors}">
                    <div>${error.text}</div>
                    </c:forEach>
                </div>
            </div>
        </div>  
                    
            <c:if test="${(status.index % 10) == 9}">
                </div>
            </c:if>
    </c:forEach>
</div>
</c:if>
<jsp:include page="reusable/footer.jsp" />
