<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="UTF-8">
  <title>Student</title>
  <script id="sap-ui-bootstrap" type="text/javascript" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-xx-bindingSyntax="complex">
  </script>
  <style type="text/css">
    #__xmlview0--oPage-intHeader {
      box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
      background: linear-gradient(#fff, rgba(240, 240, 240, 0.9));
      border-bottom: 1px solid #d4d4d4;
      z-index: 1010;
      transition: top .4s;
    }
    
    .sapMLabel {
      font-size: 0.975rem !important;
      margin-top: 15px !important;
    }
    
    .barStyle {
      background-color: transparent;
    }
  </style>

  <!-- XML-based view definition -->
  <script id="oView" type="sapui5/xmlview">
    <mvc:View controllerName="myView.Template" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" class="viewPadding">
      <App>
        <pages>
          <Page id="oPage" title="Students" class="marginBoxContent">
            <content>
              <Bar class="barStyle">
                <contentRight>
                  <Button text="Add Student" icon="sap-icon://add" press="onStudentAdd" />
                </contentRight>
              </Bar>
              <Panel id="oPanel" width="auto" class="sapUiResponsiveMargin">
                <content>
                  <l:Grid defaultSpan="L12 M12 S12" hSpacing="2" width="auto">
                    <l:content>
                      <f:Form id="FormDisplay354" minWidth="1024" maxContainerCols="2">
                        <f:layout>
                          <f:ResponsiveGridLayout labelSpanL="2" labelSpanM="2" emptySpanL="2" emptySpanM="2" columnsL="1" columnsM="1" />
                        </f:layout>
                        <f:formContainers>
                          <f:FormContainer>
                            <f:formElements>
                              <f:FormElement label="Name">
                                <f:fields>
                                  <Input />
                                </f:fields>
                              </f:FormElement>
                              <f:FormElement id="oSubjectElement" label="Subjects">
                                <f:fields>
                                  <Input />
                                  <Input />
                                  <Input />
                                  <Button text="Add Subject" icon="sap-icon://add" press="onSubjectAdd" />
                                </f:fields>
                              </f:FormElement>
                            </f:formElements>
                          </f:FormContainer>
                        </f:formContainers>
                      </f:Form>
                    </l:content>
                  </l:Grid>
                </content>
              </Panel>
            </content>
          </Page>
        </pages>
      </App>
    </mvc:View>
  </script>

  <script>
    // Controller definition
    sap.ui.define([
      'jquery.sap.global',
      'sap/ui/core/mvc/Controller',
      'sap/ui/model/Filter',
      'sap/ui/model/json/JSONModel'
    ], function(jQuery, Controller, Filter, JSONModel) {
      "use strict";

      var PanelController = Controller.extend("myView.Template", {

        onInit: function(oEvent) {

        },

        onStudentAdd: function(oEvent) {
          var oPage = this.getView().byId("oPage");
          var oLength = oPage.getContent().length;
          var oPanel = this.getView().byId("oPanel");
          var oPanelCopy = oPanel.clone();
          var oFormContent = oPanelCopy.getContent()[0].getContent()[0];
          var oFormContainer = oFormContent.getFormContainers()[0];
          var oFormElements = oFormContainer.getFormElements();
          if (oFormElements.length > 2) {
            oFormElements.slice(0, 2);
            var oElements = oFormElements;
            oFormContainer.removeAllFormElements();
            oFormContainer.insertFormElement(oElements[1]);
            oFormContainer.insertFormElement(oElements[0]);
          }
          oFormElements[0].getFields()[0].setValue("");
          oFormElements[1].getFields()[0].setValue("");
          oFormElements[1].getFields()[1].setValue("");
          oFormElements[1].getFields()[2].setValue("");
          var oPage = this.getView().byId("oPage");
          oPage.insertContent(oPanelCopy, oLength + 1);
        },

        onSubjectAdd: function(oEvent) {
          var oForm = oEvent.getSource().getParent().getParent().getParent();
          var oFormContainer = oForm.getFormContainers()[0];
          var oLength = oFormContainer.getFormElements().length;
          var oSubjectElement = this.getView().byId("oSubjectElement");
          var oSubjectElementCopy = oSubjectElement.clone();
          oSubjectElementCopy.getFields()[0].setValue("");
          oSubjectElementCopy.getFields()[1].setValue("");
          oSubjectElementCopy.getFields()[2].setValue("");
          oFormContainer.insertFormElement(oSubjectElementCopy, oLength + 1);
        }

      });

      return PanelController;

    });

    // Instantiate the View and display
    var oView = sap.ui.xmlview({
      viewContent: jQuery('#oView').html()
    });

    oView.placeAt('content');
  </script>
</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>
// Code goes here

/* Styles go here */