	<div class="row page-titles">
    <div class="col-md-6 col-8 align-self-center">
        <h3 class="text-themecolor m-b-0 m-t-0">{{phrase.attReport}}</h3>
    </div>
    <div class="col-md-6 col-4 align-self-center">

    </div>
</div>

<div class="row" ng-show="views.list">
    <div class="col-12">
        <div class="card">
            <div class="card-block">
                <h4 class="card-title">{{phrase.reportClassif}}</h4>
                <div class="form">

                    <form class="form-horizontal" ng-submit="generateReport()" name="attendance" novalidate>
                        <div class="form-group row" style="z-index: 999999999;" ng-class="{'has-error': attendance.attendanceDayFrom.$invalid}">
                            <label class="col-sm-2 text-right control-label col-form-label">{{phrase.from}} *</label>
                            <div class="col-sm-10">
                                <input type="text" date-picker name="attendanceDayFrom" ng-model="form.attendanceDayFrom" id="datemaskFrom" class="form-control datemaskFrom" required>
                            </div>
                        </div>

                        <div class="form-group row" style="z-index: 999999999;" ng-class="{'has-error': attendance.attendanceDayTo.$invalid}">
                            <label class="col-sm-2 text-right control-label col-form-label">{{phrase.to}} *</label>
                            <div class="col-sm-10">
                                <input type="text" date-picker name="attendanceDayTo" ng-model="form.attendanceDayTo" id="datemaskTo" class="form-control datemaskTo" required>
                            </div>
                        </div>

                        <div class="form-group m-b-0">
                            <div class="offset-sm-2 col-sm-10">
                                <button type="submit" class="btn btn-info waves-effect waves-light" ng-disabled="attendance.$invalid">{{phrase.controlAttendance}}</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="row" ng-show="views.report">
    <div class="col-12">
        <div class="card">
            <div class="card-block">
                <button class="btn btn-danger btn-sm pull-right" type="button" ng-click="changeView('list')"> {{phrase.Return}}</button>
                <h4 class="card-title">{{phrase.controlAttendance}}</h4>
                <div class="form table-responsive">

                    <div style="padding:  10px;text-align:  center;font-weight: bold;">
                        {{phrase.class}} : {{class.className}}, <span ng-show="attendanceModel == 'subject'">{{phrase.Subject}}: {{subject.subjectTitle}}</span>
                        <br/>
                        P : {{phrase.Present}}  -  A : {{phrase.Absent}}  - L : {{phrase.Late}}  -  E : {{phrase.LateExecuse}} 
                    </div>

                    <table class="table table-bordered table-hover">
                        <tbody>
                            <tr>
                                <th>{{phrase.name}}</th>
                                <th colspan="4">{{phrase.percentage}}</th>
                                <th colspan="{{date_range.length}}">{{phrase.details}}</th>
                            </tr>
                            <tr>
                                <td style="width: 10px"></td>
                                <td class="att_perc">
                                    <span tooltip data-original-title="{{phrase.Present}}">%P</span>
                                </td>
                                <td class="att_perc">
                                    <span tooltip data-original-title="{{phrase.Absent}}">%A</span>
                                </td>
                                <td class="att_perc">
                                    <span tooltip data-original-title="{{phrase.Late}}">%L</span>
                                </td>
                                <td class="att_perc">
                                    <span tooltip data-original-title="{{phrase.LateExecuse}}">%E</span>
                                </td>
                                <td ng-repeat="range_one in date_range" style="text-align: center;">
                                    <span tooltip data-original-title="{{range_one.date}}">{{firstChunk(range_one.date)}}</span>
                                </td>
                            </tr>
                            <tr ng-repeat="employee in employees | object2Array">
                                <td style="white-space: nowrap;">
                                    <img alt="{{employee.fullName}}" class="user-image img-circle" style="width:35px; height:35px;" ng-src="{{'index.php/dashboard/profileImage/'+employee.id}}">
                                    <a href="" ng-click="studentProfile( employee.id )">{{employee.fullName}}</a>
                                </td>
                                <td class="att_perc">{{employee.precentage[1]}}%</td>
                                <td class="att_perc">{{employee.precentage[0]}}%</td>
                                <td class="att_perc">{{employee.precentage[2]}}%</td>
                                <td class="att_perc">{{employee.precentage[3]}}%</td>
                                <td ng-repeat="date in date_range">
                                    <span ng-repeat="(key,att) in employee.attendance">
                                        <span ng-show="date.timestamp == key" tooltip data-html="true" data-original-title="{{att.in_time?phrase.chkin+' '+att.in_time+'<br>':''}} {{att.out_time?phrase.chkout+' '+att.out_time+'<br>':''}} {{phrase.Notes}} {{att.attNotes}}">
                                            <span ng-switch on="{{att.status}}">
                                                <span ng-switch-when="0">{{phrase.Absent}}</span>
                                                <span ng-switch-when="1">{{phrase.Present}}</span>
                                                <span ng-switch-when="2">{{phrase.Late}}</span>
                                                <span ng-switch-when="3">{{phrase.LateExecuse}}</span>
                                            </span>
                                        </span>
                                    </span>

                                    <span ng-repeat="(key,vac) in employee.vacation">
                                        <span ng-show="date.timestamp == key" tooltip data-original-title="{{att.attNotes}}">
                                            <span ng-switch on="{{vac}}">
                                                <span ng-switch-when="1">{{phrase.acceptedVacation}}</span>
                                                <span ng-switch-when="0">{{phrase.rejectedVacation}}</span>
                                            </span>
                                        </span>
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <br/>

                </div>
            </div>
        </div>
    </div>
</div>
