<!DOCTYPE html>
<%@page contentType="text/html; charset=UTF-8" %>
<%@page import="com.csc.library.utilities.*" %>
<%
  UProfile up = null;
  if (session != null) {
    up = (UProfile) session.getAttribute("userprofile");
  }
  CheckNull chk = new CheckNull();
  String reqid = chk.chkNullString(request.getParameter("__requestid"), "0");
  String jobid = chk.chkNullString(request.getParameter("__jobid"), "");
  FileDownloadUtils downloadutils = new FileDownloadUtils("RECRUIT_UPLOAD", "dir", "cutter", "PICTURE");
  downloadutils.setDefaultFileName("DEFAULTPERSON.jpg");
  String path = downloadutils.getViewURL();
  String[] strPath = path.split("cutter");
%>
<html ng-app="RECRUIT">
<head>
  <title>Application Form</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" type="text/css" href="../CSS/Bootstrap/css/bootstrap.css"/>
  <link href="../CSS/font-awesome.min.css" rel="stylesheet" type="text/css"/>
  <link href="../JS/jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
  <link href="../public/lib/angular-material/angular-material.min.css" rel="stylesheet" type="text/css"/>
  <link rel='stylesheet' href='CSS/Recruit.css'/>
  <script type='text/javascript' src='../JS/SCREEN.js'></script>
  <script type='text/javascript' src="../JS/VIEWCALENDAR.js"></script>
  <script type='text/javascript' src="../JS/HOTKEY.js"></script>
  <script type='text/javascript' src='../JS/urljobboard.js'></script>
  <script type="text/javascript" src="../JS/jquery-2.1.3.min.js"></script>
  <script type="text/javascript" src="../JS/jquery-ui-1.11.4.js"></script>
  <script type="text/javascript" src="../JS/jquery-datepicker-language.js"></script>
  <script type="text/javascript" src="../CSS/Bootstrap/js/bootstrap.mins.js"></script>
  <script type="text/javascript" src='../public/lib/angular/angular.min.js'></script>
  <script type="text/javascript" src='../public/lib/angular-resource/angular-resource.min.js'></script>
  <script type='text/javascript' src='../public/lib/angular-sanitize/angular-sanitize.min.js'></script>
  <script type="text/javascript" src="../public/lib/angular-material/angular-material.js"></script>
  <script type="text/javascript" src="../public/lib/angular-animate/angular-animate.js"></script>
  <script type="text/javascript" src="../public/lib/angular-aria/angular-aria.js"></script>
  <script type="text/javascript" src="../public/lib/angular-messages/angular-messages.js"></script>
  <script type="text/javascript" src="../JS/ANGULAR/SCREEN_ANGULAR.js"></script>
  <script type='text/javascript' src="../JS/ANGULAR/swaplang.factory.js"></script>
  <script type='text/javascript' src='js/Appointment/Module.Controller.js'></script>
  <script type='text/javascript' src='js/services.js'></script>
  <script type='text/javascript' src='js/Appointment/Appointment.Controller.js'></script>
  <script type='text/javascript'>
    setLang('<%=up.get("lang")%>');
    $(function () {
      let reqid = '<%=reqid%>'
      let jobid = '<%=jobid%>'
      let scope = angular.element(document.cscform).scope()
      scope.$apply(function () {
        scope.reqid = reqid
        scope.jobid = jobid
      })
    })
  </script>
</head>
<body ng-controller="Appointment">
<form name="cscform" method="post" action="Appointment.jsp">
  <br>
  <div class="container-fluid">
    <div class="header-panel-csc text-right panel-heading">
      <span swlang code="SW013416">Appointment</span>
    </div>
    <div class="panel-body body-panel-csc">
      <div ng-clock>
        <div class="row">
          <%--<div class="col-xs-12 col-sm-6">--%>
            <%--<md-content>--%>
              <%--<md-card>--%>
                <%--<md-card-content>--%>
                  <%--<label class="control-label ng-binding">--%>
                    <%--{{candidates.length}}--%>
                    <%--<swaplang code="SW011610">รายการ</swaplang>--%>
                  <%--</label>--%>
                <%--</md-card-content>--%>
              <%--</md-card>--%>
              <%--<md-card class="cardHover" ng-repeat="candidate in candidates">--%>
                <%--<md-card-title>--%>
                  <%--<md-card-title-text>--%>
                    <%--<span class="md-headline">{{getPrefix(candidate.personal.prefixid)}} {{candidate.personal.fname[lang]}} <span--%>
                            <%--style="display: inline-block">{{candidate.personal.lname[lang]}}</span></span>--%>
                    <%--<span class="md-subhead">--%>
                      <%--<p><swaplang code="SW002159">Appplicant ID</swaplang> : {{candidate.applicantid}}</p>--%>
                      <%--<p><swaplang code="SW007178">Job on seek</swaplang> : {{getJobDesc(candidate.jobid)}}</p>--%>
                    <%--</span>--%>
                  <%--</md-card-title-text>--%>
                  <%--<md-card-title-media>--%>
                    <%--<div class="md-media-md card-media profileImg"--%>
                         <%--style="background-image: url(<%=strPath[0]%>{{candidate.personal.imgname}}<%=strPath[1]%>)"></div>--%>
                  <%--</md-card-title-media>--%>
                <%--</md-card-title>--%>
                <%--<md-card-actions layout="row" layout-align="end center">--%>
                  <%--<md-button ng-click="appointmentApplicant($event, candidate)">--%>
                    <%--<swaplang code="SW003415">Appointment</swaplang>--%>
                  <%--</md-button>--%>
                <%--</md-card-actions>--%>
              <%--</md-card>--%>
            <%--</md-content>--%>
          <%--</div>--%>
          <div class="col-xs-12 col-sm-12">
            <md-content>
              <md-toolbar class="md-hue-2">
                <div class="md-toolbar-tools">
                  <md-button class="md-icon-button" ng-click="subMonth()">
                    <i class="fa fa-arrow-left fa-2x"></i>
                  </md-button>
                  <h2 flex class="text-center">
                    <%--{{filterMonth |  date : 'MMMM yyyy'}}--%>
                    {{(filterMonth | date : 'yyyy-MM-dd') | mmyyyyDate}}
                  </h2>
                  <md-button class="md-icon-button" ng-click="addMonth()">
                    <i class="fa fa-arrow-right fa-2x"></i>
                  </md-button>
                </div>
              </md-toolbar>
              <md-subheader class="md-no-sticky">{{(appointmentsToFilter() | filter : filterAppointmentDate | orderBy : 'detail.date').length}}
                <swaplang code="SW011610">Item</swaplang>
              </md-subheader>
              <div ng-repeat="dateGroup in appointmentsToFilter() | filter : filterAppointmentDate  | orderBy : 'detail.date'">
                <div class="md-toolbar-tools dateGroupHover" ng-class="dateGroupStatus(dateGroup.detail.date)" data-toggle="collapse"
                     data-target="#cardAppointment{{$index}}">
                  <span flex></span>
                  <h2>
                    <%--{{dateGroup.detail.date | date : 'dd MMMM yyyy'}}--%>
                    {{dateGroup.detail.date | ddmmyyyyDate}}
                  </h2>
                  <span flex></span>
                </div>
                <div id="cardAppointment{{$index}}" ng-class="collapseStatus(dateGroup.detail.date)">
                  <div class="col-xs-6 non-padding" ng-repeat="appointment in appointments | filter : dateGroup.detail.date">
                    <md-card>
                      <md-card-header>
                        <md-card-header-text>
                          <span class="md-title">
                            {{getPrefix(appointment.personal.prefixid)}} {{appointment.personal.fname[lang]}} {{appointment.personal.lname[lang]}}
                            <span class="pull-right">
                              <i class="fa fa-remove" ng-click="delete(appointment)"></i>
                            </span>
                          </span>
                          <span class="md-subhead">{{getJobDesc(appointment.jobid)}}</span>
                        </md-card-header-text>
                      </md-card-header>
                      <legend></legend>
                      <md-card-content>
                        <p>
                          <swaplang code="SW005559">Type</swaplang>
                          : {{(appointmentType | filter : appointment.detail.type)[0].desc[lang]}}
                        </p>
                        <p>
                          <swaplang code="SW000283">Time</swaplang>
                          : {{appointment.detail.time.start}} - {{appointment.detail.time.end}}
                        </p>
                        <p>
                          <swaplang code="SW000639">Location</swaplang>
                          : {{appointment.detail.address}}
                        </p>
                        <p>
                          <swaplang code="SW009321">Phone</swaplang>
                          : {{appointment.contact.home.number}} | {{appointment.contact.current.number}}
                        </p>
                        <p>
                          <swaplang code="SW000302">Remark</swaplang>
                          : {{appointment.detail.remark}}
                        </p>
                      </md-card-content>
                    </md-card>
                  </div>
                </div>
              </div>
            </md-content>
          </div>
        </div>
      </div>
      <br>
    </div>
    <div class="panel-footer footer-panel-csc"></div>
  </div>
</form>
</body>
</html>