<link rel="stylesheet" type="text/css" href="module/report/redeem-report/css/redeem-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>User Reward Point Report</p>
                    </div>

                    <!-- coded by soundariya -->
                    <!-- <div class="row tab-head">
                        <ul class="nav nav-tabs">
                            <li ng-click="listClick(obj)" ng-class="{active:obj.name == sideselect.name}" ng-repeat="obj in submenu track by $index">
                                <a data-toggle="tab" data-target="#menu{{$index}}" class="clsusersidemenu_{{$index}}">{{obj.name}}</a>
                            </li>
                        </ul>
                    </div> -->
                    <!-- <div ng-if="sideselect.id == 1"> -->
                        <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">
                            <!-- <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 class="data_class">
                                    
                                <!-- <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="chartDataAccumulate()" 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> -->
                                <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 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">
                                <h4>Total Accumulation Points</h4>
                                <h2>{{userReport.total}}</h2>
                            </div>
                        </div> -->

                        <div class="col-md-12" style="padding: 0;">
                            <div class="filter-area">
                                <div>
                                    <div class="col-sm-12 tablehead row-name">
                                        <div class="col-sm-2">Name</div>
                                        <div class="col-sm-1">Accumulation Point</div>
                                        <div class="col-sm-2">Redemption Point</div>
                                        <div class="col-sm-2">Approved Point</div>
                                        <div class="col-sm-2">Count of DLR/BR</div>
                                        <div class="col-sm-1">Total DSEs</div>
                                        <div class="col-sm-1">STAR App Registered DSE</div>
                                        <div class="col-sm-1" ng-if="show_hyperlink">Action</div>
                                    </div>
                                    <div ng-if="userReport.list.length>0;">
                                        <div class="col-sm-12 tablebody" ng-repeat="report in userReport.list track by $index">
                                            <div class="newone">
                                                <div class="listitem">
                                                    <div class="col-sm-2 divider">{{report.name}}</div>
                                                    <div class="col-sm-1 divider">{{report.accumulation_point}}</div>
                                                    <div class="col-sm-2 divider">{{report.redemption_point}}</div>
                                                    <div class="col-sm-2 divider">{{report.approved_point}} </div>
                                                    <div class="col-sm-2 divider">{{report.dealer_count}} </div>
                                                    <div class="col-sm-1" ng-if="rmInactive || amInactive" >{{report.dse_count}} </div>
                                                    <div class="col-sm-1" ng-if="!rmInactive && !amInactive" data-toggle="collapse" data-target="#accordion{{$index}}" ng-click="getdsedetails(report.dealer_code,$index)">{{report.dse_count}} 
                                                        <!-- <span ng-class="{'arrow-down': show_hyperlink}"></span> -->
                                                    </div>
                                                    <div class="col-sm-1">{{report.regdse_count}}</div>
                                                    <div class="col-sm-1" ng-click="getdsedetails(report.dealer_code,$index);" ng-if="show_hyperlink"><img src="https://s3.us-east-2.amazonaws.com/upload-icon/uploads/icons/png/14324583051535701996-256.png" data-toggle="collapse" data-target="#accordion{{$index}}" class="listicon"></div>
                                                    <!-- <div class="col-sm-1 extra" ng-if="show_hyperlink" ng-click="getdsedetails(report.dealer_code,$index);arrowfunction($index)" data-toggle="collapse" data-target="#accordion{{$index}}"><i class="arrow right"></i></div> -->
                                                </div>
                                                <div class="listoverall" ng-if="showaccordian">
                                                    <div id="accordion{{$index}}" class="panel-collapse collapse">
                                                        <div class="innerhead">
                                                            <div class="innerhead_align">
                                                                <div class="col-md-3">Name</div>
                                                                <div class="col-md-3">Dealer Code</div>
                                                                <div class="col-md-3">Points</div>
                                                                <div class="col-md-3">Action</div>
                                                            </div>
                                                        </div>
                                                        <div class="innerbody" ng-repeat="user_reward in user_reward_point_Report">
                                                            <div class="inner-row ptr" data-toggle="modal">
                                                                <!-- <div class="col-md-2">{{user_reward}}</div> -->
                                                                <div class="col-md-3">{{user_reward.fname}} {{user_reward.lname}}</div>
                                                                <div class="col-md-3">{{user_reward.dealer_code}}</div>
                                                                <div class="col-md-3">{{user_reward.points}}</div>
                                                                <div class="col-md-3">
                                                                    <div data-backdrop='static' data-toggle="modal" data-target="#myModal" ng-click="viewdetails(user_reward)" 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">Reward Point History </b></h4>
                                                                                                    <b class="font_14" style="float: left;">Name: {{reward_user_data.fname}} {{reward_user_data.lname}}, Employee ID: {{reward_user_data.smpin}}</b>
                                                                                                    <!-- <b class="font_14" style="float: right">Employee ID: {{reward_user_data.smpin}}</b> -->
                                                                                            <button type="button" class="close" data-dismiss="modal" >&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="user_reward_point_history.length>0">
                                                                                                            <th>Description</th> 
                                                                                                            <th>Transaction type</th> 
                                                                                                            <th>Points</th> 
                                                                                                            <th>Created on</th> 
                                                                                                        </tr>
                                                                                                    </thead>
                                                                                                    <tbody>
                                                                                                        <tr ng-if="user_reward_point_history.length>0" class="row-content" ng-repeat="reward_point in user_reward_point_history">
                                                                                                            <td>{{reward_point.description}}</td>
                                                                                                            <td>{{reward_point.transaction_type_str}}</td>
                                                                                                            <td>{{reward_point.points}}</td>
                                                                                                            <td>{{reward_point.created_on}}</td> 
                                                                                                        </tr>
                                                                                                    </tbody>
                                                                                                </table>
                                                                                            </div>
                                                                                        </div>
                                                                                        <!-- Modal footer -->
                                                                                        <div class="modal-footer">
                                                                                            <nav aria-label="Page navigation" id="div" ng-if="user_reward_point_history.length>0">
                                                                                                <div class="download_export insidemodal flt" ng-click="exportTable(reward_user_data.smpin)">
                                                                                                    <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="user_reward_point_history.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>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>      
                                    <div class="col-sm-12 tablefoot row-name">
                                        <div class="col-sm-2">Total</div>
                                        <div class="col-sm-1">{{userReport.total.accumulation_point}}</div>
                                        <div class="col-sm-2">{{userReport.total.redemption_point}}</div>
                                        <div class="col-sm-2">{{userReport.total.approved_point}}</div>
                                        <div class="col-sm-2">{{userReport.total.dealer_count}}</div>
                                        <div class="col-sm-1">{{userReport.total.dse_count}}</div>
                                        <div class="col-sm-1">{{userReport.total.regdse_count}}</div>
                                        <div class="col-sm-1"></div>
                                    </div>   
                                </div>
                            </div>
                        </div>

                        <!-- <div class="filter-area">
                                <div class="table_box">
                                    <div class="table-content table-fixed">
                                        <table class="table table-striped">
                                            <thead ng-if="userReport.list.length>0;">
                                                <tr class="row-name">
                                                    <th>Name</th>
                                                    <th class="centerdata">Accumulation Point</th>
                                                    <th class="centerdata">Redemption Point</th>
                                                    <th class="centerdata">Approved Point</th> 
                                                    <th class="centerdata">Count of DLR/BR</th> 
                                                    <th class="centerdata">Total DSEs</th> 
                                                    <th class="centerdata" ng-if="amInactive">Total DSEs</th> 
                                                    <th class="centerdata" ng-if="!rmInactive && !amInactive" style="cursor: pointer">Total DSEs</th> 
                                                    <th class="centerdata">STAR App Registered DSE</th> 
                                                </tr>
                                            </thead>
                                            <tbody ng-if="userReport.list.length>0;">
                                                <tr ng-if="userReport.list.length>0" class="row-content" ng-repeat="report in userReport.list track by $index">
                                                    <td>{{report.name}}</td> 
                                                    <td class="centerdata">{{report.accumulation_point}}</td>
                                                    <td class="centerdata">{{report.redemption_point}}</td>
                                                    <td class="centerdata">{{report.approved_point}}</td>
                                                    <td class="centerdata">{{report.dealer_count}}</td>
                                                    <td class="centerdata" data-toggle="collapse" data-target="#accordion{{$index}}" ng-style="{'cursor': (!rmInactive && !amInactive) ? 'pointer':'auto'}" ng-click="getdsedetails(report.dealer_code,$index)">{{report.dse_count}}</td>
                                                    <td class="centerdata">{{report.regdse_count}}</td>
                                                </tr>
                                         
                                            </tbody>
                                            <tfoot ng-if="userReport.list.length>0;">
                                                <tr class="row-foot">
                                                    <th>Total</th>
                                                    <th class="centerdata">{{userReport.total.accumulation_point}}</th> 
                                                    <th class="centerdata">{{userReport.total.redemption_point}}</th> 
                                                    <th class="centerdata">{{userReport.total.approved_point}}</th>
                                                    <th class="centerdata">{{userReport.total.dealer_count}}</th>
                                                    <th class="centerdata">{{userReport.total.dse_count}}</th>
                                                    <th class="centerdata">{{userReport.total.regdse_count}}</th>
                                                </tr>
                                                </tfoot>
                                        </table>
                                    </div>
                                    <div class="download_export table_export" ng-click="exportTableData()" ng-if="userReport.list.length>0">
                                        <img src="images/excel.png" alt="Export" title=" Export">
                                        <span>Export table data</span>
                                    </div>
                                    <div class="norecord" ng-if="userReport.list.length==0;">
                                      <p>No Records Found</p> 
                                    </div>
                                </div>
                            </div> -->
                        <!-- </div> -->

                    <!-- <div ng-if="sideselect.id == 2">
                        <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="data_class">
                                    <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="chartDataRedemption()" 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">
                                <h4>Total Redemption Points</h4>
                                <h2>{{userReport.total}}</h2>
                            </div>
                        </div>
                    </div> -->
                    <!-- <div ng-if="sideselect.id == 3">
                        <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="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="chartDataApproval()" 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">
                                <h4>Total Approval Points</h4>
                                <h2>{{userReport.total}}</h2>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</section>