<link rel="stylesheet" type="text/css" href="module/user/css/user.css" />
<section class="user_page container">
   <div class="sales_report">
      <div class="sales_report_in">
         <div class="sales_card" ng-show="listFound">
            <div class="container-fluid table_area">
               <div class="row top_box">
                  <div class="left_box">
                     <div class="input-group mb-3">
                     </div>
                  </div>
                  <div class="right_box">
                     <div class="sear">
                        <form class="row form_2">
                           <div class="form-group col-sm-12 disable">
                              <input type="search" ng-change="onSearchChange()" class="form-control" ng-model="formData.mymodel" name="Search" placeholder="Search"
                                 autocomplete="off" required>
                           </div>
                        </form>
                     </div>
                     <div class="addbtn">
                        <button class="btn export" ng-click="addFun()">
                           <p>Add</p>
                        </button>
                     </div>
                  </div>
               </div>
               <div class="row bottom_box">
                  <div class="col-sm-12 table_box">
                     <div class="table table-fixed">
                        <table class="table table-fixed table-striped">
                           <thead>
                              <tr class="row-name">
                                 <th class="col-md-2">User Name</th>
                                 <th class="col-md-2">Email ID</th>
                                 <th class="col-md-2">Mobile</th>
                                 <th class="col-md-2">Role</th>
                                 <th class="col-md-2">Action</th>
                              </tr>
                           </thead>
                           <tbody>
                              <tr class="row-content" ng-repeat="userlist in itemuserdetail track by $index">
                                 <td>{{userlist.fname}} {{userlist.lname}} </td>
                                 <td>{{userlist.emailid}}</td>
                                 <td>{{userlist.mobile}}</td>
                                 <td>{{userlist.role}}</td>
                                 <td>
                                    <div class="clsicon deleteicon ion-edit" ng-click="editFun(userlist,$index)" title="Edit"></div>
                                    <div class="clsicon editicon ion-trash-a" title="Delete" ng-click="deleteRow(userlist,$index)"></div>
                                 </td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                  </div>
               </div>
            </div>
            <div class="container">
              <div class="row">
                 <nav aria-label="Page navigation" id="div1">
                    <!-- <ul class="pager">
                       <li>
                          <a href="#" aria-label="Previous">
                          <span aria-hidden="true">
                          <</span>
                          </a>
                       </li>
                       <li>
                          <a href="#" class="active">1</a>
                       </li>
                       <li>
                          <a href="#">2</a>
                       </li>
                       <li>
                          <a href="#">3</a>
                       </li>
                       <li>
                          <a href="#">4</a>
                       </li>
                       <li>
                          <a href="#">5</a>
                       </li>
                       <li>
                          <a href="#" aria-label="Next">
                          <span aria-hidden="true">></span>
                          </a>
                       </li>
                    </ul> -->
                    <ul class="pagination pager" uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" boundary-links="true" rotate="false" num-pages="numPages" items-per-page="itemsPerPage"></ul>
                 </nav>
              </div>
           </div>
         </div>
        
         <!---ADD / EDIT FORM -------->
         <div class="profile_bg" ng-if="formLoad">
            <div class="container-fluid pro_head">
               <h4 class="text4">{{formTitle}}</h4>
               <button type="button" class="close" ng-click="closeForm()">
                <span>×</span>
            </button>
            </div>
            <div class="container-fluid form_bg form-scroll">
               <form class="row form_2" ng-submit="userSubmit()" novalidate>
                  <div class="form-group col-sm-6 phone">
                     <select class="form-control selectbox" ng-model="formData.role" ng-change="changeRole()" ng-if="formAction != 'Edit'"> 
                        <option value="">Select Role</option>
                        <option ng-repeat="rolelist in roledetail" value="{{rolelist.id}}">{{rolelist.rolename}}</option>
                     </select>
                     <select disabled class="form-control selectbox clsicondis" ng-model="formData.role" ng-change="changeRole()" ng-if="formAction == 'Edit'"> 
                      <option disabled value="">Select Role</option>
                      <option disabled ng-repeat="rolelist in roledetail" value="{{rolelist.id}}">{{rolelist.rolename}}</option>
                   </select>
                     <div class="color_error shake" ng-if="role_error!=''">
                      <a class="text-left shake">
                         {{role_error}}</a>
                  </div>
                  </div>
                  <div class="form-group col-sm-6" ng-if="formData.role!=2 && formData.role>7">
                    <input type="text" id="smpin" class="form-control" special-key name="smpin"  ng-model="formData.smpin" autocomplete="off" >
                    <label for="Smpin" class="control-label form-control-placeholder">Smpin</label>
                    <div class="color_error shake" ng-if="smpin_error!=''">
                      <a class="text-left shake">
                         {{smpin_error}}</a>
                  </div>
                 </div>
                  <div class="form-group col-sm-6">
                     <input type="text" id="employee_code" class="form-control" name="employee_code" ng-model="formData.emp_code" autocomplete="off" required>
                     <label for="employee_code" class="control-label form-control-placeholder" ng-if="formData.role!=2">Employee Code</label>
                     <label for="employee_code" class="control-label form-control-placeholder" ng-if="formData.role==2">User Name</label>
                     <div class="color_error shake" ng-if="empcode_error!='' && formData.role!=2">
                      <a class="text-left shake">
                         {{empcode_error}}</a>
                  </div>
                  <div class="color_error shake" ng-if="empcode_error!='' && formData.role==2">
                    <a class="text-left shake">
                       Please enter a valid Username</a>
                </div>
                  </div>
                  <div class="form-group col-sm-6" ng-if="formData.role==2 && formAction != 'Edit'">
                    <input type="text" id="pass" class="form-control" ng-model="formData.password" name="pass" autocomplete="off" required>
                    <label for="pass" class="control-label form-control-placeholder">Password</label>
                 </div>
                  <div class="form-group col-sm-6">
                     <input type="text" id="first" class="form-control" name="first" ng-model="formData.fname" autocomplete="off" required>
                     <label for="first" class="control-label form-control-placeholder">First Name</label>
                     <div class="color_error shake" ng-if="fname_error!=''">
                      <a class="text-left shake">
                         {{fname_error}}</a>
                  </div>
                  </div>
                  <div class="form-group col-sm-6">
                     <input type="text" id="last" class="form-control" name="last" ng-model="formData.lname" autocomplete="off" required>
                     <label for="last" class="control-label form-control-placeholder">Last Name</label>
                  </div>
                  <div class="form-group col-sm-6 email ">
                     <input type="text" id="email" class="form-control" ng-model="formData.emailid" name="email" autocomplete="off" required>
                     <label for="email" class="control-label form-control-placeholder">Email Address</label>
                     <div class="color_error shake" ng-if="email_error!=''">
                      <a class="text-left shake">
                         {{email_error}}</a>
                  </div>
                  </div>
                  
                  <div class="form-group col-sm-6">
                     <input type="text" id="mobile" class="form-control" name="Mobile" ng-model="formData.mobile" onkeypress="return event.charCode >= 48 && event.charCode <= 57" minlength="10" autocomplete="off" required>
                     <label for="Mobile" class="control-label form-control-placeholder">Mobile</label>
                     <div class="color_error shake" ng-if="mobile_error!=''">
                      <a class="text-left shake">
                         {{mobile_error}}</a>
                  </div>
                  </div>
                  <div class="form-group col-sm-6 phone" ng-if="formData.role>7">
                     <select class="form-control selectbox" ng-model="formData.dealer_code">
                        <option value="">Dealer Code</option>
                        <option ng-repeat="dealer in dealerlist" value="{{dealer.dealer_code}}">{{dealer.dealer_code}} - {{dealer.dealer_name}}</option>
                     </select>
                     <div class="color_error shake" ng-if="dealer_error!=''">
                      <a class="text-left shake">
                         {{dealer_error}}</a>
                  </div>
                  </div>
                   <div class="form-group col-sm-6 phone" ng-if="formData.role>7 && formData.role<14 ">
                     
                     <select id="segment" class="form-control selectbox" ng-model="formData.segment">     
                        <option value="">Segment</option> 
                        <option value="0">Student Learner</option>
                        <option value="1">Parents/Guardian</option>
                        <option value="2">Instructor</option>
                     </select>
                     <div class="color_error shake" ng-if="segment_error!=''">
                      <a class="text-left shake">
                         {{segment_error}}</a>
                  </div>
                  </div>
                  <div class="form-group col-sm-6" ng-if="formData.role!=2  && formData.role!=16">
                     <input type="text" id="dob" class="form-control datepicker" name="dob" ng-model="formData.date_of_join" autocomplete="off" data-isblockdate="true"   ng-datepickermin required>
                     <label for="DOB" class="control-label form-control-placeholder">
                     <i class="icon-calendar"></i>Date Of Join</label>
                     <div class="color_error shake" ng-if="dob_error!=''">
                      <a class="text-left shake">
                         {{dob_error}}</a>
                  </div>
                  </div>
                  <div class="form-group col-sm-6 " ng-if="formData.role==5">
                     <select class="form-control selectbox" ng-model="formData.zone">
                        <option value="">Select Zone</option>
                        <option ng-repeat="zone in zoneData" value="{{zone.zone}}">{{zone.zone}}</option>
                     </select>
                     <div class="color_error shake" ng-if="zone_error!=''">
                      <a class="text-left shake">
                         {{zone_error}}</a>
                  </div>
                  </div>
                  <div class="col-sm-12 text-center ">
                      <button type="button" class="btn primary fixed" ng-click="closeForm()">Cancel</button>
                     <button type="submit" class="btn primary fixed">Submit</button>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
</section>