<link rel="stylesheet" type="text/css" href="module/report/content-report/css/content-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>Content 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">
                        <!-- coded by soundariya -->
                        <!-- <div class="inner-tab pull-left">
                            <select class="cat-item" ng-model="formData.cateid" ng-change='selectTab()'>
                                <option ng-repeat="cat in catList" value="{{cat.cateid}}">{{cat.catename}}</option>
                            </select>
                            <select class="cat-item" ng-model="formData.type" ng-change='selectType()'>
                                    <option ng-repeat="type in typeList" value="{{type.id}}">{{type.name}}</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="inner-tab pull-left">
                            <div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
                                <div class="btn-group" role="group" ng-repeat="cat in catList track by $index" ng-init=1>
                                    <button type="button" id="stars" class="btn"  ng-model="formData.cateid" ng-class="cat.active ?'btn-primary':'btn-default'" ng-click="selectNewTab(cat.cateid,$index)">
                                        <div class="hidden-xs">{{cat.catename}}</div>
                                    </button>
                                </div>
                                <!-- <div class="btn-group" role="group">
                                    <button type="button" id="stars1" class="btn" ng-class="tabActive==2 ?'btn-primary':'btn-default'" ng-click="selectTab('2')"
                                        href="#tab2" data-toggle="tab">
                                        <div class="hidden-xs">Enquired Users</div>
                                    </button>
                                </div> -->
                            </div>
                        </div>
                        <div class="data_class">
                            <!-- <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> -->
                            <!-- <select class="cat-item" ng-model="formData.cateid" ng-change='selectTab()'>
                                <option ng-repeat="cat in catList" value="{{cat.cateid}}">{{cat.catename}}</option>
                            </select>
                            <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="inner-container">
                                <canvas id="contentChart" width="500" height="400"></canvas>
                            </div> -->
                            <!-- <div class="box_chart">
                                <div class="total-item" ng-repeat="totalData in totalValue"><p>{{totalData.title}} <span>({{totalData.value}})</span> </p>
                                </div>
                                <div class="total-item" ng-if='totalValue.length==undefined || totalValue.length==0'><p>No record found </p>
                                </div>
                                <p>From {{formData.from_date}} to {{formData.to_date}}</p>  
                            </div> -->

                             <!-- coded by soundariya -->
                            <div class="table_box">
                                    <div class="table-content table-fixed">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr class="row-name" ng-if="totalValue.length>0">
                                                    <th>Topic Name</th>
                                                    <th>Content Title</th>
                                                    <th class="centerdata">View Count</th> 
                                                    <th class="centerdata">Completed Count</th> 
                                                    <th class="centerdata">Action</th> 
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-if="totalValue.length>0" class="row-content" ng-repeat="totalData in totalValue">
                                                    <td>{{totalData.topicname}}</td>
                                                    <td>{{totalData.title}}</td> 
                                                    <td class="centerdata">{{totalData.total_view}}</td>
                                                    <td class="centerdata">{{totalData.total_completed}}</td> 
                                                    <td>
                                                        <div data-backdrop='static' data-toggle="modal" data-target="#myModal" ng-click="viewdetails(totalData)" class="editicon ion-eye ptr"
                                                        title="View"></div>
                                                        <div class="modal fade myViewModal" id="myModal">
                                                            <div class="modal-dialog modal-lg">
                                                                  <div class="modal-content">
                                                                        <div class="modal-header">
                                                                              <h4 class="modal-title">
                                                                                    <b class="font_14">Topic Name: </b>{{particular_contentdata.topicname}}</h4>
                                                                                    <b class="font_14">Content Title: </b>{{particular_contentdata.title}}
                                                                              <button type="button" class="close" ng-click="modal_dismiss()">&times;</button>
                                                                        </div>
                                                                        <div class="modal-body model_left">
                                                                            <div class="table-content table-fixed">
                                                                                <table class="table table-striped">
                                                                                    <thead>
                                                                                        <tr class="row-name" ng-if="contentViewValueReport.length>0">
                                                                                            <th>Employee ID</th>
                                                                                            <th>Name</th>
                                                                                            <th>Dealer Code</th> 
                                                                                            <th>Dealer Name</th> 
                                                                                            <th>Status</th> 
                                                                                        </tr>
                                                                                    </thead>
                                                                                    <tbody>
                                                                                        <tr ng-if="contentViewValueReport.length>0" class="row-content" ng-repeat="contentView in contentViewValueReport">
                                                                                            <td>{{contentView.smpin}}</td>
                                                                                            <td>{{contentView.fname}} {{contentView.lname}}</td> 
                                                                                            <td>{{contentView.dealer_code}}</td>
                                                                                            <td>{{contentView.dealer_name}}</td>
                                                                                            <td>{{contentView.content_status}}</td> 
                                                                                        </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                            </div>
                                                                        </div>
                                                                        <!-- Modal footer -->
                                                                        <div class="modal-footer">
                                                                            <nav aria-label="Page navigation" id="div" ng-if="contentViewValueReport.length>0">
                                                                                <div class="download_export insidemodal" ng-click="exportTableData('0',particular_contentdata.assettopicid)">
                                                                                    <img src="images/excel.png" alt="Export" title=" Export">
                                                                                    <span>Export Report</span>
                                                                                </div>
                                                                                <ul class="pagination-sm" uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged(currentPage)" max-size="maxSize" boundary-links="true" rotate="true" num-pages="numPages" items-per-page="itemsPerPage"></ul>
                                                                            </nav>
                                                                            <div ng-if="contentViewValueReport.length==0" class="no_report">
                                                                                <p>No records Found</p>
                                                                            </div>
                                                                              <!-- <button type="button" class="btn_close btn btn-danger" data-dismiss="modal">Close</button> -->
                                                                        </div>
                                                                  </div>
                                                            </div>
                                                      </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                            <tfoot ng-if="totalValue.length>0">
                                                <tr class="row-foot">
                                                    <th>Total</th>
                                                    <th></th>
                                                    <th class="centerdata">{{contentReport.total.total_view}}</th>
                                                    <th class="centerdata">{{contentReport.total.total_completed}}</th>
                                                    <th></th>
                                                </tr>
                                                </tbody>
                                                <div class="norecord" ng-if="totalValue.length==0">
                                                    No Records Found
                                                </div>
                                        </table>
                                    </div>
                                    <div class="download_export table_export" ng-click="exportTableData('1')" ng-if="totalValue.length>0">
                                        <img src="images/excel.png" alt="Export" title=" Export">
                                        <span>Export table data</span>
                                    </div>
                                </div>
                        </div>
                        <!-- <div class="download_export table_export" ng-click="exportTableData()" ng-if="totalValue.length>0">
                                <img src="images/excel.png" alt="Export" title=" Export">
                                <span>Export table data</span>
                        </div> -->
                </div>
            </div>
        </div>
    </div>
</section>