 <section class="content-header">
    <h1>
        {{phrase.attendanceStats}}
    </h1>
</section>

<section class="content" ng-show="views.list">
  <div class="row">
    <div class="col-md-7">
      <div class="box box-primary">
        <div class="box-header">
            <i class="fa fa-bar-chart-o"></i>
            <h3 class="box-title">{{phrase.attendancePerDay}}</h3>
        </div>
        <div class="box-body" style="height: 330px;">
            <div attendance-per-day id="line-chart" style="width:100%;height: 300px;"></div>
        </div>
      </div>
    </div>

    <div class="col-md-5">
      <div class="box box-primary">
        <div class="box-header">
            <i class="fa fa-bar-chart-o"></i>
            <h3 class="box-title">{{phrase.attendanceToday}}</h3>
        </div>
        <div class="box-body" style="height: 330px;">
            <div attendance-bar-chart id="bar-chart" style="width:100%; height: 300px;"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="box col-xs-12">
    <div class="box-header">
        <h3 class="box-title">{{phrase.attendanceFilters}}</h3>
    </div>
    
    <div class="box-body table-responsive">
      <form class="form-horizontal" ng-submit="statsAttendance()" name="attendance" novalidate>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">{{phrase.class}}</label>
          <div class="col-sm-10">
            <select class="form-control" ng-model="form.classId" name="classId">
              <option ng-repeat="(key,value) in attendanceStats.classes" value="{{key}}">{{value}}</option>
            </select>
          </div>
        </div>
        <div class="form-group" ng-show="attendanceStats.attendanceModel == 'subject'">
          <label for="inputPassword3" class="col-sm-2 control-label">{{phrase.Subject}}</label>
          <div class="col-sm-10">
            <select class="form-control" ng-model="form.subjectId" name="subjectId">
              <option ng-repeat="(key,value) in attendanceStats.subjects" value="{{key}}">{{value}}</option>
            </select>
          </div>
        </div>
        <div class="form-group" ng-class="{'has-error': attendance.attendanceDay.$invalid}">
          <label for="inputPassword3" class="col-sm-2 control-label">{{phrase.Date}}</label>
          <div class="col-sm-10">
            <input type="text" name="attendanceDay" ng-model="form.attendanceDay" class="form-control datemask" required>
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">{{phrase.Status}}</label>
          <div class="col-sm-10">
            <select class="form-control" ng-model="form.status" name="status">
              <option value="All">{{phrase.All}}</option>
              <option value="1">{{phrase.Present}}</option>
              <option value="0">{{phrase.Absent}}</option>
              <option value="2">{{phrase.Late}}</option>
              <option value="3">{{phrase.LateExecuse}}</option>
              <option value="4">{{phrase.earlyDismissal}}</option>
            </select>
          </div>
        </div>
        <div date-picker selector=".datemask" ></div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default" ng-disabled="attendance.$invalid">{{phrase.attendanceSearch}}</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

<section class="content" ng-show="views.listdata">
  <a ng-click="changeView('list')" class="floatRTL btn btn-danger btn-flat pull-right marginBottom15">{{phrase.Return}}</a>  
  <div class="box col-xs-12">
    <div class="box-header">
      <h3 class="box-title">{{phrase.attendanceStats}}</h3>
    </div>
    <div class="box-body table-responsive">
      <table class="table table-bordered">
          <tbody><tr>
              <th style="width: 10px">#</th>
              <th>{{phrase.studentName}}</th>
              <th ng-show="attendanceModel='subject'">{{phrase.Subject}}</th>
              <th>{{phrase.Attendance}}</th>
          </tr>
          <tr ng-repeat="student in attendanceData | object2Array | orderBy:'studentRollId'">
              <td>{{student.studentRollId}}</td>
              <td><a href="" ng-click="studentProfile( student.studentId )">{{student.studentName}}</a></td>
              <td ng-show="attendanceModel='subject'">{{student.studentSubject}}</td>
              <td>
                <div>
                  <span ng-show="student.status =='0'">{{phrase.Absent}}</span>
                  <span ng-show="student.status =='1'">{{phrase.Present}}</span>
                  <span ng-show="student.status =='2'">{{phrase.Late}}</span>
                  <span ng-show="student.status =='3'">{{phrase.LateExecuse}}</span>
                  <span ng-show="student.status =='4'">{{phrase.earlyDismissal}}</span>
                </div>
              </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

<section class="content" ng-show="views.lists">
  <div class="box col-xs-12">
    <div class="box-header">
      <h3 class="box-title">{{phrase.attendanceStats}}</h3>
    </div>
    <div class="box-body table-responsive">
      <table class="table table-bordered">
          <tbody><tr>
              <th>{{phrase.Date}}</th>
              <th ng-show="attendanceStats.attendanceModel=='subject'">{{phrase.Subject}}</th>
              <th>{{phrase.Attendance}}</th>
          </tr>
          <tr ng-repeat="(key,value) in attendanceStats.studentAttendance">
              <td>{{value.date}}</td>
              <td ng-show="attendanceStats.attendanceModel=='subject'">{{value.subject}}</td>
              <td>
                <div>
                  <span ng-show="value.status =='0'">{{phrase.Absent}}</span>
                  <span ng-show="value.status =='1'">{{phrase.Present}}</span>
                  <span ng-show="value.status =='2'">{{phrase.Late}}</span>
                  <span ng-show="value.status =='3'">{{phrase.LateExecuse}}</span>
                  <span ng-show="value.status =='4'">{{phrase.earlyDismissal}}</span>
                </div>
              </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

<section class="content" ng-show="views.listp">
  <div ng-repeat="(key, value) in attendanceStats.studentAttendance" class="box col-xs-12">
    <div class="box-header">
      <h3 class="box-title">{{value.n.name}}</h3>
    </div>
    <div class="box-body table-responsive">
      <table class="table table-bordered">
          <tbody><tr>
              <th>{{phrase.Date}}</th>
              <th>{{phrase.Attendance}}</th>
          </tr>
          <tr ng-repeat="(key2,value2) in value.d">
              <td>{{value2.date}}</td>
              <td>
                <div>
                  <span ng-show="value2.status =='0'">{{phrase.Absent}}</span>
                  <span ng-show="value2.status =='1'">{{phrase.Present}}</span>
                  <span ng-show="value2.status =='2'">{{phrase.Late}}</span>
                  <span ng-show="value2.status =='3'">{{phrase.LateExecuse}}</span>
                  <span ng-show="value2.status =='4'">{{phrase.earlyDismissal}}</span>
                </div>
              </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

<modal visible="showModal"><div ng-bind-html="modalContent"></div></modal>