<section class="content-header">
    <h4 translate class="subheader-title">
        <span class="subheader-icon fal fa-table"></span>&nbsp;Vendor Master
    <small> </small>
  </h4>
</section>

<section class="content">
  <div class="box padding-15 clearfix" style="display: block;">

      <div class="row">
        <div class="col-sm-9">
          <div class="dataTables_length" id="datatable_length">
            <button type="button" *ngIf="add==true" (click)="openVendorModal(vendorTemplate,'add')"
            class="btn btn-outline-primary waves-effect waves-themed btn-sm">
            <span class="fal fa-plus"></span>&nbsp;Add New
            </button>
            &nbsp; &nbsp; <a href="#/dashboard" class="btn btn-outline-primary waves-effect waves-themed btn-sm">
              <i class="fal fa-chart-area"></i> Go back to dashboard</a>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Vendor Name" [(ngModel)]="searchText"
              aria-label="Search">
              <span class="input-group-append">
                  <button class="btn btn-primary waves-effect waves-themed btn-sm" type="button">
                    <span class="fal fa-search"></span>
                        </button>
         </span>
          </div>
          <!--<input id="txtPending" type="text" class="form-control table-search" [(ngModel)]="searchText" placeholder="Search" aria-label="Search">-->
        </div>
      </div>
      <div class="table-responsive">
        <table class="table jambo_table table-sm">
          <thead>
            <tr class="headings">
              <th style="width:60px">#</th>
              <th *ngIf="(edit==true || delete==true)" style="width:110px;">


                <label style="font-weight:bold;margin-bottom:0px;">Action</label>&nbsp;&nbsp;
                <span *ngIf="showall==false" class="img-showactive" style="cursor:pointer;"
                  (click)="getactiveinactive(false)" title="Show all"></span>
                <span *ngIf="showall==true" class="img-showall" style="cursor:pointer;"
                  (click)="getactiveinactive(true)" title="Show only active"></span>
              </th>
              <th class="pointer" (click)="sort('vendorname')">
                Vendor Name
                <i *ngIf="key =='vendorname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('username')">
                User Name
                <i *ngIf="key =='username'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('mailid')">
                Mail Id
                <i *ngIf="key =='mailid'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('mobile')">
                Contact Number
                <i *ngIf="key =='mobile'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('location')">
                Location
                <i *ngIf="key =='location'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('createdbyname')">
                Created By
                <i *ngIf="key =='createdbyname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('createddate')">
                Created Date
                <i *ngIf="key =='createddate'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('updatedbyname')">
                Last Modified By
                <i *ngIf="key =='updatedbyname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('updateddate')">
                Last Modified Date
                <i *ngIf="key =='updateddate'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <!--<th>Status</th>-->

            </tr>
          </thead>
          <tbody>
            <tr
              *ngFor="let item of vendors| orderBy: key : reverse |filter:searchText|paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
              <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
              <td *ngIf="(edit==true || delete==true)">
                <span class="fal fa-pencil blue" style="cursor:pointer;"
                  (click)="openVendorModal(vendorTemplate,'update',item)" title="Edit"
                  *ngIf="edit==true"></span>&nbsp;&nbsp;
                <span *ngIf="item.active==1 && delete==true" class="img-active" style="cursor:pointer;"
                  (click)="OpenConfirmTemplate(item)" title="Active"></span>
                <span *ngIf="item.active==0 && delete==true" class="img-inactive" style="cursor:pointer;"
                  (click)="OpenConfirmTemplate(item)" title="Inactive"></span>
              </td>

              <td>{{item.vendorname}}</td>
              <td>{{item.username}}</td>
              <td>{{item.mailid}}</td>
              <td>{{item.mobile}}</td>
              <td>{{item.location}}</td>
              <td>{{item.createdbyname}}</td>
              <td>{{item.createddate | date:'MM-dd-yyyy'}}</td>
              <td>{{item.updatedbyname}}</td>
              <td>{{item.updateddate | date:'MM-dd-yyyy'}}</td>
            </tr>
            <tr *ngIf="vendors.length==0 || (vendors |filter:searchText).length === 0">
              <td colspan="11" style="text-align:center;">No Records Found</td>
            </tr>

          </tbody>
        </table>
        <div *ngIf="vendors && vendors.length!=0" class="pull-right">
          <pagination-controls (pageChange)="p = $event"></pagination-controls>
        </div>
      </div>
   
  </div>
</section>
    <div class="row">

      <ng-template #vendorTemplate>
        <div class="modal-content" id="mainNgCnt" ngDraggable [handle]="dragHandle">
          <div class="modal-header" style="cursor:move" #dragHandle>
            <h4 class="modal-title pull-left" *ngIf="operation=='add'">Add New Vendor</h4>
            <h4 class="modal-title pull-left" *ngIf="operation=='update'">Edit Vendor</h4>
            <button type="button" class="close pull-right" aria-label="Close" (click)="vendorModalRef.hide()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">

            <form [formGroup]="vendorForm" (ngSubmit)="Post(vendorForm.value)">
              <input type="hidden" name="vendorid" formControlName="vendorid" />
              <table class="table">
                <tr>
                  <td>
                      <div class="form-group row">
                     <label class="col-sm-3">User Name&nbsp;<span style="color:red;">*</span>
                     </label>
                     <div class="col-sm-9">
                     <input type="text" trim
                        placeholder="vendor code" name="username" formControlName="username" class="form-control" />
                      <div *ngIf="submitted && g.username.errors" class="invalid-feedback">
                        <div *ngIf="g.username.errors.required" class="errormsg">User Name is required
                        </div>
                      </div>
                    </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                      <div class="form-group row">
                     <label class="col-sm-3">Password&nbsp;<span style="color:red;">*</span>
                     </label>
                     <div class="col-sm-9">
                      <input type="text" trim
                        placeholder="Password" name="password" formControlName="password" class="form-control" />
                      <div *ngIf="submitted && g.password.errors" class="invalid-feedback">
                        <div *ngIf="g.password.errors.required" class="errormsg">Password is required
                        </div>
                      </div>
                    </div>
                    </div>
                  </td>
                </tr>

                <tr>
                  <td>
                      <div class="form-group row">
                     <label class="col-sm-3">Mail Id&nbsp;<span style="color:red;">*</span><br/>
                     <small style="font-style: italic;"> Format:
                        (yourid@domain.com) </small>
                      </label>
                        <div class="col-sm-9">
                      <input type="text" trim placeholder="Mail Id" name="mailid" formControlName="mailid"
                        class="form-control" />
                      <div *ngIf="submitted && g.mailid.errors" class="invalid-feedback">
                        <div *ngIf="g.mailid.errors.required" class="errormsg">Mailid is required
                        </div>
                      </div>
                    </div>
                    </div>
                  </td>
                </tr>

                <tr>
                  <td>
                      <div class="form-group row">
                     <label class="col-sm-3">Vendor Name&nbsp;<span style="color:red;">*</span> 
                     </label>
                     <div class="col-sm-9">
                     <input type="text" trim
                        placeholder="Vendor Name" name="vendorname" formControlName="vendorname" class="form-control" />
                      <div *ngIf="submitted && g.vendorname.errors" class="invalid-feedback">
                        <div *ngIf="g.vendorname.errors.required" class="errormsg">Vendorname is required
                        </div>
                      </div>
                    </div>
                  </div>
                  </td>
                </tr>

                <tr>
                  <td>
                      <div class="form-group row">
                     <label class="col-sm-3">Contact Number </label> 
                     <div class="col-sm-9">
                     <input type="number" trim placeholder="Contact Number"
                        name="mobile" formControlName="mobile" class="form-control" />
                    </div>
                  </div>
                  </td>
                </tr>

                <tr>
                  <td>
                      <div class="form-group row">
                     <label class="col-sm-3">Location </label> 
                     <div class="col-sm-9">
                     <input type="text" trim placeholder="Location" name="location"
                        formControlName="location" class="form-control" />
                    </div>
                  </div>
                  </td>
                </tr>


                <tr *ngIf="operation=='update'">
                  <td colspan="2">
                    <div class="form-group">
                      <input type="checkbox" (change)="ChangeActive($event)" name="active"
                        formControlName="active" /><label>Active</label>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="form-group">
                      <button type="button" class="btn btn-sm btn-outline-warning waves-effect waves-themed pull-right" (click)="clearForm();">Cancel</button>
                      <button type="submit" *ngIf="(edit==true || add==true)" 
                      class="btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"
                        [disabled]="vendorForm.invalid">
                        <span *ngIf="operation=='add' && add==true">Add</span>
                        <span *ngIf="operation!='add' && edit==true">Update</span>
                      </button>
                    </div>
                  </td>
                </tr>
              </table>

            </form>


          </div>
        </div>
      </ng-template>

    </div>
