<%--
 ~
 ~ Copyright (c) 2021, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.
 ~
 ~ This software is the property of WSO2 Inc. and its suppliers, if any.
 ~ Dissemination of any information or reproduction of any material contained
 ~ herein in any form is strictly forbidden, unless permitted by WSO2 expressly.
 ~ You may not alter or remove any copyright or other notice from copies of this content."
 ~
--%>

<%@ page import="org.wso2.carbon.identity.application.authentication.endpoint.util.Constants" %>
<%@ page import="org.owasp.encoder.Encode" %>
<%@ page import="java.io.File" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<%@ include file="includes/localize.jsp" %>
<%@ include file="includes/init-url.jsp" %>

<%
    String[] missingClaimList = null;
    String appName = null;
    Boolean isFederated = false;
    if (request.getParameter(Constants.MISSING_CLAIMS) != null) {
        missingClaimList = request.getParameter(Constants.MISSING_CLAIMS).split(",");
    }
    if (request.getParameter(Constants.REQUEST_PARAM_SP) != null) {
        appName = request.getParameter(Constants.REQUEST_PARAM_SP);
    }
%>

<!doctype html>
<html>
<head>
    <!-- header -->
    <%
        File headerFile = new File(getServletContext().getRealPath("extensions/header.jsp"));
        if (headerFile.exists()) {
    %>
        <jsp:include page="extensions/header.jsp"/>
    <% } else { %>
        <jsp:include page="includes/header.jsp"/>
    <% } %>

    <script src="libs/addons/calendar.min.js"></script>
    <link rel="stylesheet" href="libs/addons/calendar.min.css"/>
</head>

<body class="login-portal layout authentication-portal-layout">
   <div class="page-wrapper">
        <main class="center-segment">
            <div class="ui container medium center aligned middle aligned">

                <!-- product-title -->
                <%
                    File productTitleFile = new File(getServletContext().getRealPath("extensions/product-title.jsp"));
                    if (productTitleFile.exists()) {
                %>
                    <jsp:include page="extensions/product-title.jsp"/>
                <% } else { %>
                    <jsp:include page="includes/product-title.jsp"/>
                <% } %>

                <div class="ui segment">
                    <div class="ui header text-center">
                        <h3 data-testid="request-claims-page-mandatory-header-text">
                            Complete Your Profile
                        </h3>
                    </div>
                    <div class="ui text-center login-portal-app-des2-font">
                        <p data-testid="request-claims-page-recommendation">
                            <strong style="color: #ff8e32;" class="text-capitalize"
                                    data-testid="request-claims-page-application-name">
                                <%=Encode.forHtmlContent(appName)%>
                            </strong>
                            needs the following details that are missing in your profile.
                        </p>
                    </div>
                    <form class="ui large form" action="<%=commonauthURL%>" method="post" id="claimForm">
                        <div class="segment-form mt-4">
                            <div>
                                <% for (String claim : missingClaimList) {
                                    String claimDisplayName = claim;
                                    claimDisplayName = claimDisplayName.replaceAll(".*/", "");
                                    claimDisplayName = claimDisplayName.substring(0, 1).toUpperCase() + claimDisplayName.substring(1);
                                    if (claim.contains("claims/dob")) {
                                        claimDisplayName = "Date of Birth (YYYY-MM-DD)";
                                    }
                                %>
                                    <div class="mt-3">
                                        <label for="claim_mand_<%=Encode.forHtmlAttribute(claim)%>"
                                               style="font-size: 0.9em; color: grey;"
                                               data-testid="request-claims-page-form-field-<%=Encode.forHtmlAttribute(claim)%>-label">
                                            <%= Encode.forHtmlContent(claimDisplayName) %>
                                        </label>
                                        <% if (claim.contains("claims/dob")) { %>
                                            <div class="mt-1">
                                                <div class="ui calendar" id="date_picker">
                                                    <div class="ui input left icon" style="width: 100%;">
                                                        <i class="calendar icon"></i>
                                                        <input type="text"
                                                               autocomplete="off"
                                                               data-testid="request-claims-page-form-field-claim-<%=Encode.forHtmlAttribute(claim)%>-input"
                                                               id="claim_mand_<%=Encode.forHtmlAttribute(claim)%>"
                                                               name="claim_mand_<%=Encode.forHtmlAttribute(claim)%>"
                                                               placeholder="Enter <%=Encode.forHtmlContent(claimDisplayName)%>"
                                                               required="required">
                                                    </div>
                                                </div>
                                            </div>
                                        <% } else { %>
                                            <div class="mt-1">
                                                <input type="text"
                                                       name="claim_mand_<%=Encode.forHtmlAttribute(claim)%>"
                                                       id="claim_mand_<%=Encode.forHtmlAttribute(claim)%>"
                                                       required="required"
                                                       data-testid="request-claims-page-form-field-claim-<%=Encode.forHtmlAttribute(claim)%>-input"
                                                       placeholder="Enter <%=Encode.forHtmlContent(claimDisplayName)%>">
                                            </div>
                                        <% } %>
                                    </div>
                                <% } %>
                                <input type="hidden"
                                       name="sessionDataKey"
                                       data-testid="request-claims-page-session-data-key"
                                       value='<%=Encode.forHtmlAttribute(request.getParameter("sessionDataKey"))%>'/>
                            </div>
                            <div class="mt-5">
                                <button class="ui primary fluid large button"
                                        type="submit"
                                        data-testid="request-claims-page-continue-button">
                                    <%=AuthenticationEndpointUtil.i18n(resourceBundle, "continue")%>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </main>
         <!-- product-footer -->
        <%
            File productFooterFile = new File(getServletContext().getRealPath("extensions/product-footer.jsp"));
            if (productFooterFile.exists()) {
        %>
            <jsp:include page="extensions/product-footer.jsp"/>
        <% } else { %>
            <jsp:include page="includes/product-footer.jsp"/>
        <% } %>
    </div>
    <!-- footer -->
    <%
        File footerFile = new File(getServletContext().getRealPath("extensions/footer.jsp"));
        if (footerFile.exists()) {
    %>
        <jsp:include page="extensions/footer.jsp"/>
    <% } else { %>
        <jsp:include page="includes/footer.jsp"/>
    <% } %>

  <script defer>

  function getDiplayName(claimURI) {

    var claim = claimURI.split("/").pop();
    return claim.charAt(0).toUpperCase() + claim.slice(1);
  }

  /**
   * Event handler and trigger for #date_picker element.
   * This is a extension we've added to facilitate a ui
   * calendar for Semantic-UI. The extension files are
   * added manually to lib/ directory of authentication
   * portal. calendar.min.js and calendar.min.css.
   *
   * If you do want to change these settings in the future
   * refer [1] since this API is not officially merged to
   * Semantic-UI.
   *
   * [1] https://github.com/mdehoog/Semantic-UI-Calendar#settings
   */
  $("#date_picker").calendar({
      type: 'date',
      formatter: {
          date: function (date, settings) {
              var EMPTY_STRING = "";
              var DATE_SEPARATOR = "-";
              var STRING_ZERO = "0";
              if (!date) return EMPTY_STRING;
              var day = date.getDate() + EMPTY_STRING;
              if (day.length < 2) {
                  day = STRING_ZERO + day;
              }
              var month = (date.getMonth() + 1) + EMPTY_STRING;
              if (month.length < 2) {
                  month = STRING_ZERO + month;
              }
              var year = date.getFullYear();
              return year + DATE_SEPARATOR + month + DATE_SEPARATOR + day;
          }
      }
  });

  </script>
</body>
</html>
