<link rel="stylesheet" type="text/css" href="module/dealer/css/dealer.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-fixed">
                <table class="table table-striped">
                  <thead>
                    <tr class="row-name">
                      <th>Dealer Name</th>
                      <th>Dealer Code</th>
                      <th>Zone</th>
                      <th>State</th>
                      <th>City</th>
                      <th>ZM</th>
                      <th>RM</th>
                      <th>AM</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="row-content" ng-repeat="dealerlist in itemdealerdetail track by $index">
                      <td>{{dealerlist.dealer_name}}</td>
                      <td>{{dealerlist.dealer_code}}</td>
                      <td>{{dealerlist.zone}}</td>
                      <td>{{dealerlist.state}}</td>
                      <td>{{dealerlist.city}}</td>
                      <td>{{dealerlist.zm_name}}</td>
                      <td>{{dealerlist.rm_name}}</td>
                      <td>{{dealerlist.am_name}}</td>
                      <td>
                        <div class="  deleteicon ion-edit" ng-click="editFun(dealerlist,$index)" title="Edit"></div>
                        <div class=" editicon ion-trash-a" title="Delete" ng-click="deleteRow(dealerlist,$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="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=" form_2" ng-submit="userSubmit()" novalidate>
            <div class="form-group col-sm-6">
              <input type="text" id="dealer-code" class="form-control" name="dealer-code" ng-model="formData.dealer_code" autocomplete="off"
                required>
              <label for="Dealer Code" class="control-label form-control-placeholder">Dealer Code</label>
              <div class="color_error shake" ng-if="dealercode_error!=''">
                <a class="text-left shake">
                  {{dealercode_error}}</a>
              </div>
            </div>
            <div class="form-group col-sm-6">
              <input type="text" id="dealer" class="form-control" name="dealer" ng-model="formData.dealer_name" autocomplete="off" required>
              <label for="Dealer Name" class="control-label form-control-placeholder">Dealer Name</label>
              <div class="color_error shake" ng-if="dealername_error!=''">
                <a class="text-left shake">
                  {{dealername_error}}</a>
              </div>
            </div>
            <div class="form-group col-sm-6">
              <input type="text" id="mobile" class="form-control" name="mobile" ng-model="formData.phone" 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 ">
              <select class="form-control selectbox" ng-model="formData.zone" ng-change="changeZone()">
                <option value="">Zone</option>
                <option ng-repeat="zonelist in zonedata" value="{{zonelist.zone}}">{{zonelist.zone}}</option>
              </select>
              <div class="color_error shake" ng-if="zone_error!=''">
                <a class="text-left shake">
                  {{zone_error}}</a>
              </div>
            </div>
            <div class="form-group col-sm-6 ">
              <select class="form-control selectbox" ng-model="formData.state" ng-change="changeState()">
                <option value="" selected="" disabled>State</option>
                <option ng-repeat="statelist in statedata" value="{{statelist.state}}">{{statelist.state}}</option>
              </select>
              <div class="color_error shake" ng-if="state_error!=''">
                <a class="text-left shake">
                  {{state_error}}</a>
              </div>
            </div>
            <div class="form-group col-sm-6 ">
              <select class="form-control selectbox" ng-model="formData.city">
                <option value="" selected="">City</option>
                <option ng-repeat="citylist in citydata" value="{{citylist.city}}">{{citylist.city}}</option>
              </select>
              <div class="color_error shake" ng-if="city_error!=''">
                <a class="text-left shake">
                  {{city_error}}</a>
              </div>
            </div>
            <div class="form-group col-sm-6">
              <input type="text" id="zm-name" class="form-control" name="zm-name" ng-model="formData.zm_name" autocomplete="off" required>
              <label for="ZM Name" class="control-label form-control-placeholder">ZM Name</label>
              <div class="color_error shake" ng-if="zmname_error!=''">
                <a class="text-left shake">
                  {{zmname_error}}</a>
              </div>
            </div>
            <div class="form-group col-sm-6">
              <input type="text" id="rm-name" class="form-control" name="rm-name" ng-model="formData.rm_name" autocomplete="off" required>
              <label for="RM Name" class="control-label form-control-placeholder">RM Name</label>
              <div class="color_error shake" ng-if="rmname_error!=''">
                <a class="text-left shake">
                  {{rmname_error}}</a>
              </div>
            </div>
            <div class="form-group col-sm-6">
              <input type="text" id="am-name" class="form-control" name="am-name" ng-model="formData.am_name" autocomplete="off" required>
              <label for="AM Name" class="control-label form-control-placeholder">AM Name</label>
              <div class="color_error shake" ng-if="amname_error!=''">
                <a class="text-left shake">
                  {{amname_error}}</a>
              </div>
            </div>
            <div class="form-group col-sm-6 email">
              <input type="email" id="zm-email" class="form-control" ng-model="formData.zm_email" name="zm-email" autocomplete="off" required>
              <label for="zm-email" class="control-label form-control-placeholder"> ZM Email</label>
              <div class="color_error shake" ng-if="zmemail_error!=''">
                <a class="text-left shake">
                  {{zmemail_error}}</a>
              </div>
            </div>
            <div class="form-group col-sm-6 email">
              <input type="email" id="rm-email" class="form-control" ng-model="formData.rm_email" name="rm-email" autocomplete="off" required>
              <label for="rm-email" class="control-label form-control-placeholder">RM Email</label>
              <div class="color_error shake" ng-if="rmemail_error!=''">
                <a class="text-left shake">
                  {{rmemail_error}}</a>
              </div>
            </div>
            <div class="form-group col-sm-6 email">
              <input type="email" id="am-email" class="form-control" ng-model="formData.am_email" name="am-email" autocomplete="off" required>
              <label for="am-email" class="control-label form-control-placeholder">AM Email</label>
              <div class="color_error shake" ng-if="amemail_error!=''">
                <a class="text-left shake">
                  {{amemail_error}}</a>
              </div>
            </div>
            <div class="form-group col-sm-6">
              <input type="text" id="zm-mobile" class="form-control" name="zm-mobile" onkeypress="return event.charCode >= 48 && event.charCode <= 57" minlength="10" ng-model="formData.zm_mobile" autocomplete="off"
                required>
              <label for="ZM Mobile" class="control-label form-control-placeholder">ZM Mobile</label>
              <div class="color_error shake" ng-if="zmmobile_error!=''">
                <a class="text-left shake">
                  {{zmmobile_error}}</a>
              </div>
            </div>
            <div class="form-group col-sm-6">
              <input type="text" id="rm-mobile" class="form-control" name="rm-mobile" onkeypress="return event.charCode >= 48 && event.charCode <= 57" minlength="10" ng-model="formData.rm_mobile" autocomplete="off"
                required>
              <label for="RM Mobile" class="control-label form-control-placeholder">RM Mobile</label>
              <div class="color_error shake" ng-if="rmmobile_error!=''">
                <a class="text-left shake">
                  {{rmmobile_error}}</a>
              </div>
            </div>
            <div class="form-group col-sm-6">
              <input type="text" id="am-mobile" class="form-control" name="am-mobile" onkeypress="return event.charCode >= 48 && event.charCode <= 57" minlength="10" ng-model="formData.am_mobile" autocomplete="off"
                required>
              <label for="AM Mobile" class="control-label form-control-placeholder">AM Mobile</label>
              <div class="color_error shake" ng-if="ammobile_error!=''">
                <a class="text-left shake">
                  {{ammobile_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>