<link rel="stylesheet" type="text/css" href="module/report/assessment-report/css/assessment-report.css" />
<section class="user_page container">
    <div class="sales_report">
        <div class="sales_report_in">
            <div class="sales_card">
                <div class="container-fluid table_area">
                    <div class="page-head">
                        <p>ASSESSMENT REPORT</p>
                    </div>
                    <div class="main_dropdown">
                        <div class="zmdropdown">
                            <label>Zonal Manager</label>
                            <select ng-model="formData.zm_email" ng-change='zmChange()'>
                                <option value="all">All</option>
                                <option ng-repeat="zm in zmuser_list" value="{{zm.email}}">{{zm.name}}</option>
                            </select>
                        </div>
                        <div class="rmdropdown" ng-if="!rmInactive">
                            <label>Regional Manager</label>
                            <select ng-model="formData.rm_email" ng-class="rmInactive ?'disabled':''" ng-change='rmChange()'>
                                <option value="all">All</option>
                                <option ng-repeat="rm in rmuser_list" value="{{rm.email}}">{{rm.name}}</option>
                            </select>
                        </div>
                        <div class="amdropdown" ng-if="!amInactive">
                            <label>Area Manager</label>
                            <select ng-model="formData.am_email" ng-class="amInactive ?'disabled':''" ng-change='amChange()'>
                                <option value="all">All</option>
                                <option ng-repeat="am in amuser_list" value="{{am.email}}">{{am.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="date_align">
                        <div class="inner-tab pull-left">
                            <select class="cat-item" ng-model="formData.assessmentid" ng-change='selectAssessment()'>
                                <option ng-repeat="assessment in assessmentData" value="{{assessment.assessmentid}}">{{assessment.assessmentname}}</option>
                            </select>
                            <!-- <input type="checkbox" class="check_cls" ng-model="formData.regtype" ng-true-value="0" ng-false-value="1" ng-click="selectStatus()"> 
                            <label class="lbl_font">Include Historical Data</label>   -->
                        </div>
                        <div class="data_class">
                           <!-- coded by sound -->
                            <!-- <div class="top_export" ng-click="topFiftyData()">
                                <img src="images/excel.png" alt="Top 50" title=" Top 50">
                                <span>Top 50 Report</span>
                            </div>
                            <label>From Date</label>
                            <input type="text" id="fromdate" class="datepicker" name="fromdate" ng-model="formData.from_date" autocomplete="off" placeholder="Start Date"
                                data-isblockdate="true" ng-reportpickermin>
                            <label>To Date</label>
                            <input type="text" id="todate" class="datepicker" name="todate" ng-model="formData.to_date" autocomplete="off" placeholder="End Date"
                                data-isblockdate="true" ng-reportpickermin>
                            <button class="btn export_update" ng-click="chartData()" ng-if="formData.from_date!='' && formData.to_date!=''">
                                <p>Go</p>
                            </button>
                            <button class="btn export_update opacity" ng-if="formData.from_date=='' || formData.to_date==''">
                                <p>Go</p>
                            </button> -->

                            <div class="download_export" ng-click="exportData()">
                                <img src="images/excel.png" alt="Export" title=" Export">
                                <span>Export Report</span>
                            </div>
                        </div>
                    </div>
                    <div class="filter-area">
                        <!-- <div class="box_chart">
                            <div class="total-item" ng-repeat="totalData in assessmentDataReport">
                                <p>{{totalData.title}}
                                    <span>({{totalData.value}})</span>
                                </p>
                            </div>
                        </div> -->
                        <div class="table_box">
                            <div class="table-content table-fixed">
                                <table class="table table-striped">
                                    <thead>
                                        <tr class="row-name" ng-if="assessmentReport.list.length>0">
                                            <th>Name</th>
                                            <th>Email ID</th>
                                            <th class="centerdata">Below 50</th> 
                                            <th class="centerdata">50 to 79</th> 
                                            <th class="centerdata">80 to 100</th> 
                                            <th class="centerdata">Total Participant</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-if="assessmentReport.list.length>0" class="row-content" ng-repeat="assessmentData in assessmentReport.list">
                                            <td>{{assessmentData.name}}</td>
                                            <td>{{assessmentData.email}}</td> 
                                                <td class="centerdata">{{assessmentData.level_1}}</td>
                                                <td class="centerdata">{{assessmentData.level_2}}</td> 
                                                <td class="centerdata">{{assessmentData.level_3}}</td> 
                                                <td class="centerdata">{{assessmentData.total}}</td>    
                                            </tr>
                                        </tbody>
                                        <tfoot ng-if="assessmentReport.list.length>0">
                                            <tr class="row-foot">
                                                <th>Total</th>
                                                <th></th>
                                                <th class="centerdata">{{assessmentReport.total.level_1}}</th>
                                                <th class="centerdata">{{assessmentReport.total.level_2}}</th>
                                                <th class="centerdata">{{assessmentReport.total.level_3}}</th>
                                                <th class="centerdata">{{assessmentReport.total.total}}</th>
                                            </tr>
                                            </tbody>
                                            <div class="norecord" ng-if="assessmentReport.list.length==0">
                                                No Records Found
                                            </div>
                                    </table>
                                </div>
                                <div class="download_export table_export" ng-click="exportTableData()" ng-if="assessmentReport.list.length>0">
                                    <img src="images/excel.png" alt="Export" title=" Export">
                                    <span>Export table data</span>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>