<ol class="breadcrumb breadcrumb-arrow font-trirong">
  <li><a href="javascript://" [routerLink]="['/']">Home</a></li>
  <li><a href="javascript://">stepper</a></li>
</ol>

<div class="button-bar">

  <span class="spacer"></span>
  <button class="btn btn-sm btn-primary" (click)="reset()">Reset</button>

  <button class="btn btn-sm btn-primary" (click)="changeToHorizonTal()"
    *ngIf="layout.direction === 'vertical'">HorizonTal Layout</button>
  <button class="btn btn-sm btn-primary" (click)="changeToVertical()" *ngIf="layout.direction === 'horizontal'">Vertical
    Layout</button>

</div>

<div class="clr-row">
  <div [class]="layout.block1">
    <div class="card">
      <div class="card-header">
        <h3 style="text-align: center;"> Workflow</h3>
      </div>

      <div class=" card-block container">

        <clr-timeline [clrLayout]="layout.direction">
          <clr-timeline-step [clrState]="timelineStyle.step0.state">
            <clr-timeline-step-header>step 0</clr-timeline-step-header>
            <clr-timeline-step-title> <span *ngIf="!appToUpdate">Application</span><span *ngIf="appToUpdate"> Update
                Datagrid</span> </clr-timeline-step-title>
            <clr-timeline-step-description> <span>Create/registration<br> Information Of
                Customer</span></clr-timeline-step-description>
          </clr-timeline-step>

          <clr-timeline-step [clrState]="timelineStyle.step1.state">
            <clr-timeline-step-header>Step 2</clr-timeline-step-header>
            <clr-timeline-step-title>Review And <br>Confirmation</clr-timeline-step-title>
            <clr-timeline-step-description>
              Finish .
            </clr-timeline-step-description>
          </clr-timeline-step></clr-timeline>
      </div>
    </div>
  </div>
  <div [class]="layout.block2">
    <!--STEP 0-->
    <div class="card" *ngIf="timelineStyle.step0.open">
      <div class="card-header">
        <h3 style="text-align: center;" *ngIf="!appToUpdate">registration</h3>
        <h3 style="text-align: center;" *ngIf="appToUpdate"> Update {{Test11entryForm.name}}</h3>
        <div class="container">

          <br />


          <form [formGroup]="Test11entryForm">

            <div class="container">

              <div class="clr-row">
                <div class="clr-col-sm-12">
                  <label> Name</label>
                  <input class="clr-input" type="text" formControlName="name" />
                </div>










              </div>



              <h6> List of picupload</h6>

              <div class="clr-row" style="margin-top: 10px;">
                <table class="table">
                  <thead>
                    <tr>
                      <th>No</th>
                      <th> File</th>
                      <th>File Name</th>
                      <th>Preview</th>
                      <th>Cancel</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let attach of FileDatapicupload; let i=index">
                      <td style="width: 70px;"><input type="text" class="clr-input" value={{i+1}} [readonly]="true">
                      </td>
                      <td><input type="file" (change)="onFileChangedpicupload($event, i)"
                          accept="image/*" /><!--accept=".pdf,.doc,.docx,.jpg,.msg"-->
                      </td>
                      <td>{{attach.uploadedfile_name}}</td>
                      <td> <img [src]="attach.filePreview" alt="File Preview" [ngModelOptions]="{standalone: true}"
                          name="filePreview" width="100px" height="100px"></td>
                      <td>
                        <a (click)="deleteRowpicupload(i)">
                          <clr-icon shape="trash" class="is-error"></clr-icon>
                        </a>
                      </td>
                    </tr>


                  </tbody>
                  <button type="button" class="btn btn-primary button1" style="margin-left: 20px;"
                    (click)="onAddLinespicupload()">
                    <clr-icon shape="plus"></clr-icon>
                  </button>

                </table>
              </div>

              <h6> List of fileupload_field</h6>

              <div class="clr-row" style="margin-top: 10px;">
                <table class="table">
                  <thead>
                    <tr>
                      <th>No</th>
                      <th> File</th>
                      <th>File Name</th>
                      <th>Preview</th>
                      <th>Cancel</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let attach of FileDatafileupload_field; let i=index">
                      <td style="width: 70px;"><input type="text" class="clr-input" value={{i+1}} [readonly]="true">
                      </td>
                      <td><input type="file" (change)="onFileChangedfileupload_field($event, i)"
                          accept="application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" /><!--accept=".pdf,.doc,.docx,.jpg,.msg"-->
                      </td>
                      <td>{{attach.uploadedfile_name}}</td>
                      <td> <img [src]="attach.filePreview" alt="File Preview" [ngModelOptions]="{standalone: true}"
                          name="filePreview" width="100px" height="100px"></td>
                      <td>
                        <a (click)="deleteRowfileupload_field(i)">
                          <clr-icon shape="trash" class="is-error"></clr-icon>
                        </a>
                      </td>
                    </tr>


                  </tbody>
                  <button type="button" class="btn btn-primary button1" style="margin-left: 20px;"
                    (click)="onAddLinesfileupload_field()">
                    <clr-icon shape="plus"></clr-icon>
                  </button>

                </table>
              </div>

              <h6> List of audio_field</h6>

              <div class="clr-row" style="margin-top: 10px;">
                <table class="table">
                  <thead>
                    <tr>
                      <th>No</th>
                      <th> File</th>
                      <th>File Name</th>
                      <th>Preview</th>
                      <th>Cancel</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let attach of FileDataaudio_field; let i=index">
                      <td style="width: 70px;"><input type="text" class="clr-input" value={{i+1}} [readonly]="true">
                      </td>
                      <td><input type="file" (change)="onFileChangedaudio_field($event, i)"
                          accept="audio/*" /><!--accept="audio file"-->
                      </td>
                      <td>{{attach.uploadedfile_name}}</td>
                      <td> <audio *ngIf="attach.filePreview" [src]="attach.filePreview" controls></audio></td>
                      <td>
                        <a (click)="deleteRowaudio_field(i)">
                          <clr-icon shape="trash" class="is-error"></clr-icon>
                        </a>
                      </td>
                    </tr>


                  </tbody>
                  <button type="button" class="btn btn-primary button1" style="margin-left: 20px;"
                    (click)="onAddLinesaudio_field()">
                    <clr-icon shape="plus"></clr-icon>
                  </button>

                </table>
              </div>

              <h6> List of video_field</h6>

              <div class="clr-row" style="margin-top: 10px;">
                <table class="table">
                  <thead>
                    <tr>
                      <th>No</th>
                      <th> File</th>
                      <th>File Name</th>
                      <th>Preview</th>
                      <th>Cancel</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let attach of FileDatavideo_field; let i=index">
                      <td style="width: 70px;"><input type="text" class="clr-input" value={{i+1}} [readonly]="true">
                      </td>
                      <td><input type="file" (change)="onFileChangedvideo_field($event, i)"
                          accept="video/*" /><!--accept=".mp4,.mpeg4"-->
                      </td>
                      <td>{{attach.uploadedfile_name}}</td>
                      <td> <video *ngIf="attach.filePreview" [src]="attach.filePreview" width="100px" height="100px"
                          controls></video></td>
                      <td>
                        <a (click)="deleteRowvideo_field(i)">
                          <clr-icon shape="trash" class="is-error"></clr-icon>
                        </a>
                      </td>
                    </tr>


                  </tbody>
                  <button type="button" class="btn btn-primary button1" style="margin-left: 20px;"
                    (click)="onAddLinesvideo_field()">
                    <clr-icon shape="plus"></clr-icon>
                  </button>

                </table>
              </div>

              <div class="clr-row">

              </div>
              <!-- end row -->
              <br>
              <div class="button">
                <button type="submit" class="btn btn-primary" (click)="onregistrationSave()">Submit</button>
                <button type="button" class="btn btn-primary" (click)="this.timelineStyle.step0 = { state: 'success', open: false };
             this.timelineStyle.step1 = { state: 'current', open: true }; this.current()">Complete</button>
                <button type="button" class="btn btn-primary" (click)="this.timelineStyle.step0 = { state: 'current', open: false };
             this.timelineStyle.step1 = { state: 'not-started', open: true }">Next</button>
              </div>
            </div>
          </form>

        </div>

      </div>
    </div>
    <!--STEP 1-->
    <div class="card" *ngIf="timelineStyle.step1.open">
      <div class="card-header">
        <h3 style="text-align: center;" *ngIf="!appToUpdate"> Review And Confirmation</h3>
        <div class="container">

          <!--  Info -->
          <div class="clr-row mb-3">
            <div class="clr-col-12">
              <h5>Registration Summary:</h5>
              <p><strong>Name : </strong> {{ Test11entryForm.get('name')?.value | json}}</p>

              <div>
                <p><strong>Uploaded Images Preview:</strong></p>
                <div class="clr-row" *ngIf="FileDatapicupload.length > 0">
                  <div class="clr-col" *ngFor="let img of FileDatapicupload">
                    <img [src]="img.filePreview" width="100" height="100" style="margin: 10px; border: 1px solid #ccc;"
                      *ngIf="img.filePreview" />
                    <p style="font-size: 12px;">{{ img.uploadedfile_name }}</p>
                  </div>
                </div>
              </div>

              <div>
                <p><strong>Uploaded Files Preview:</strong></p>
                <div class="clr-row" *ngIf="FileDatafileupload_field.length > 0">
                  <div class="clr-col" *ngFor="let file of FileDatafileupload_field">
                    <a *ngIf="file.filePreview" [href]="file.filePreview" target="_blank">
                      <img src="assets/icons/file-icon.png" width="40" height="40" style="margin: 10px;" />
                    </a>
                    <p style="font-size: 12px;">{{ file.uploadedfile_name }}</p>
                  </div>
                </div>
              </div>


              <div>
                <p><strong>Uploaded Audios Preview:</strong></p>
                <div class="clr-row" *ngIf="FileDataaudio_field.length > 0">
                  <div class="clr-col" *ngFor="let audio of FileDataaudio_field">
                    <audio *ngIf="audio.filePreview" [src]="audio.filePreview" controls style="margin: 10px;"></audio>
                    <p style="font-size: 12px;">{{ audio.uploadedfile_name }}</p>
                  </div>
                </div>
              </div>


              <div>
                <p><strong>Uploaded Videos Preview:</strong></p>
                <div class="clr-row" *ngIf="FileDatavideo_field.length > 0">
                  <div class="clr-col" *ngFor="let video of FileDatavideo_field">
                    <video *ngIf="video.filePreview" [src]="video.filePreview" width="120" height="90" controls
                      style="margin: 10px;"></video>
                    <p style="font-size: 12px;">{{ video.uploadedfile_name }}</p>
                  </div>
                </div>
              </div>



            </div>
          </div>
          <div class="button">
            <button class="btn btn-primary-outline" (click)="this.timelineStyle.step0 = { state: 'current', open: true };
             this.timelineStyle.step1 = { state: 'not-started', open: false }">Back</button>
            <button class="btn btn-primary" (click)="timelineStyle.step1 = { state: 'success', open: false }; current();
             alert('Process Finished Successfully!')">Finish</button>
          </div>
        </div>
      </div>
    </div>