<ol class="breadcrumb breadcrumb-arrow font-trirong">
    <li>
        <a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']">
            <clr-icon shape="home"></clr-icon>
        </a>
    </li>
    <li>
        <a href="">
            <clr-icon shape="flag"></clr-icon>{{ 'SEQ_GENERATOR' | translate }}</a>
    </li>

</ol>

<div class="dg-wrapper">
    <div class="clr-row">
        <div class="clr-col-8">
            <h3>{{ 'SEQ_GENERATOR' | translate }}</h3>
        </div>

        <div class="clr-col-4" style="text-align: right;">
            <button class="btn btn-outline" (click)="onExport()">
                <clr-icon shape="export"></clr-icon> {{ 'EXPORT' | translate }}
            </button>
            <button id="add" class="btn btn-primary" (click)="goToAdd()">
                <clr-icon shape="plus"></clr-icon>{{ 'ADD' | translate }}
            </button>
        </div>
    </div>

    <clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected">
        <clr-dg-placeholder>
            <ng-template #loadingSpinner>
                <clr-spinner>Loading ... </clr-spinner>
            </ng-template>
            <div *ngIf="error;else loadingSpinner">{{error}}</div>
        </clr-dg-placeholder>
        <clr-dg-column [clrDgField]="'seq_no'">
            <ng-container *clrDgHideableColumn="{hidden: false}">
                {{ 'CURRENT_NO' | translate }}
            </ng-container>
        </clr-dg-column>
        <clr-dg-column [clrDgField]="'seq_no'">
            <ng-container *clrDgHideableColumn="{hidden: false}">
                {{ 'NAME' | translate }}
            </ng-container>
        </clr-dg-column>
        <clr-dg-column [clrDgField]="'prefix'">
            <ng-container *clrDgHideableColumn="{hidden: false}">
                {{ 'PREFIX' | translate }}
            </ng-container>
        </clr-dg-column>

        <clr-dg-column [clrDgField]="'seperator'">
            <ng-container *clrDgHideableColumn="{hidden: false}">
                {{ 'SEPARATOR' | translate }}
            </ng-container>
        </clr-dg-column>

        <clr-dg-column [clrDgField]="'digit'">
            <ng-container *clrDgHideableColumn="{hidden: false}">
                {{ 'SEQUENCE_SIZE' | translate }}
            </ng-container>
        </clr-dg-column>
        <!-- <clr-dg-column [clrDgField]="'date_format'">
            <ng-container *clrDgHideableColumn="{hidden: false}">
                Date Format
            </ng-container>
        </clr-dg-column> -->
        <clr-dg-row *clrDgItems="let user of alldata" [clrDgItem]="user">
            <clr-dg-cell>{{user.current_no}}</clr-dg-cell>
            <clr-dg-cell>{{user.sequence_name}}</clr-dg-cell>
            <clr-dg-cell>{{user.prefix}}</clr-dg-cell>
            <clr-dg-cell>{{user.seperator}}</clr-dg-cell>
            <clr-dg-cell>{{user.sequence_size}}</clr-dg-cell>
            <!-- <clr-dg-cell>{{user.date_format}}</clr-dg-cell> -->
            <clr-dg-action-overflow>
                <button class="action-item" (click)="goToEdit(user)"> {{ 'EDIT' | translate }} <clr-icon shape="edit"
                        class="is-error"></clr-icon></button>
                <button class="action-item" (click)="onDelete(user)"> {{ 'DELETE' | translate }}<clr-icon shape="trash"
                        class="is-error"></clr-icon></button>
            </clr-dg-action-overflow>


        </clr-dg-row>

        <clr-dg-footer>
            <clr-dg-pagination #pagination [clrDgPageSize]="10">
                <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{ 'USERS_PER_PAGE' | translate
                    }}</clr-dg-page-size>
                {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users
            </clr-dg-pagination>
        </clr-dg-footer>
    </clr-datagrid>
</div>

<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">

    <div class="modal-body" *ngIf="rowSelected.id">
        <h1 class="delete">Are You Sure Want to delete?</h1>
        <h2 class="heading">{{rowSelected.id}}</h2>
        <div class="modal-footer">
            <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
            <button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary">Delete</button>
        </div>
    </div>
</clr-modal>


<clr-modal [(clrModalOpen)]="modaladd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
    <h3 class="modal-title">Add Sequence Genarator</h3>
    <div class="modal-body">
        <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
            <div class="clr-row">
                <div class="clr-col-sm-12">
                    <label for="name">Name<span class="required-field">*</span></label>
                    <input type="text" class="clr-input" name="sequence_name" formControlName="sequence_name">
                </div>
                <div class="clr-col-sm-12">
                    <label for="name">Sequence Code</label>
                    <input type="text" class="clr-input" name="sequence_code" formControlName="sequence_code">
                </div>
                <!-- <div class="clr-col-sm-12">
                    <label for="name">Implementation</label>
                    <select name="implementation" formControlName="implementation" class="clr-dropdown">
                            <option>standard</option>
                            <option>shared</option>
                    </select>
                </div> -->
                <div class="clr-col-sm-12">
                    <label for="tags">Demonstration</label>
                    <input type="text" class="clr-input" formControlName="demonstration">
                </div>
                <!-- <div class="clr-col-sm-12">
                    <label for="name">Active</label>
                    <input type="checkbox" formControlName="active" name="active" clrCheckbox>
                </div> -->

                <div class="clr-col-sm-12">
                    <label for="name">Prefix<span class="required-field">*</span></label>
                    <input type="text" class="clr-input" formControlName="prefix" name="prefix">
                </div>
                <div class="clr-col-sm-12">
                    <label for="tags">suffix</label>
                    <input type="text" class="clr-input" name="suffix" formControlName="suffix">
                </div>
                <div class="clr-col-sm-12">
                    <label for="tags">Separator</label>
                    <input type="text" class="clr-input" name="seperator" formControlName="seperator">
                </div>
                <div class="clr-col-sm-12">
                    <label for="tags">Starting No</label>
                    <input type="number" class="clr-input" name="starting_no" formControlName="starting_no">
                </div>
                <div class="clr-col-sm-12">
                    <label for="tags">Current No</label>
                    <input type="number" class="clr-input" formControlName="current_no">
                </div>

                <div class="clr-col-sm-12">
                    <label for="tags"> Size</label>
                    <input type="number" class="clr-input" name="sequence_size" formControlName="sequence_size">
                </div>
                <!-- <div class="clr-col-sm-12">
                    <label for="tags">Date Format</label>
                    <input type="text" class="clr-input" name="date_format" formControlName="date_format">
                </div> -->
            </div>
            <br>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" (click)="modaladd = false">Cancel</button>
                <button type="submit" class="btn btn-primary">ADD</button>
            </div>
        </form>
    </div>

</clr-modal>

<clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
    <h3 class="modal-title">Update Sequence Genarator</h3>
    <div class="modal-body" *ngIf="rowSelected.id">
        <h2 class="heading">{{rowSelected.id}}</h2>
        <form (ngSubmit)="onUpdate(rowSelected.id)">
            <div class="clr-row">
                <div class="clr-col-sm-12">
                    <label for="name">Name<span class="required-field">*</span></label>
                    <input type="text" class="clr-input" name="sequence_name" [(ngModel)]="rowSelected.sequence_name">
                </div>
                <div class="clr-col-sm-12">
                    <label for="name">Sequence Code</label>
                    <input type="text" class="clr-input" name="sequence_code" [(ngModel)]="rowSelected.sequence_code">
                </div>
                <!-- <div class="clr-col-sm-12">
                    <label for="name">Implementation</label>
                    <select name="implementation" class="clr-dropdown" [(ngModel)]="rowSelected.implementation">
                <option>standard</option>
                <option>shared</option>
              </select>
                </div> -->
                <!-- <div class="clr-col-sm-12">
                    <label for="name">Active</label>
                    <input type="checkbox" name="active" name="menuId" clrCheckbox [(ngModel)]="rowSelected.active">
                </div> -->

                <div class="clr-col-sm-12">
                    <label for="name">Prefix<span class="required-field">*</span></label>
                    <input type="text" class="clr-input" name="prefix" [(ngModel)]="rowSelected.prefix">
                </div>
                <div class="clr-col-sm-12">
                    <label for="tags">suffix</label>
                    <input type="text" class="clr-input" name="suffix" [(ngModel)]="rowSelected.suffix">
                </div>
                <div class="clr-col-sm-12">
                    <label for="tags">Separator</label>
                    <input type="text" class="clr-input" name="seperator" [(ngModel)]="rowSelected.seperator">
                </div>
                <div class="clr-col-sm-12">
                    <label for="tags">Starting No</label>
                    <input type="number" class="clr-input" name="starting_no" [(ngModel)]="rowSelected.starting_no">
                </div>
                <div class="clr-col-sm-12">
                    <label for="tags">Current No</label>
                    <input type="number" class="clr-input" name="current_no" [(ngModel)]="rowSelected.current_no"
                        readonly>
                </div>
                <div class="clr-col-sm-12">
                    <label for="tags">Demonstration</label>
                    <input type="text" class="clr-input" name="demonstration" [(ngModel)]="rowSelected.demonstration"
                        readonly>
                </div>
                <div class="clr-col-sm-12">
                    <label for="tags">Sequence Size</label>
                    <input type="number" class="clr-input" name="sequence_size" [(ngModel)]="rowSelected.sequence_size">
                </div>
            </div>
            <br>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
        </form>
    </div>

</clr-modal>