<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;"> Customer Information</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/Add Customer Information<br> Information Of
                Customer</span></clr-timeline-step-description>
          </clr-timeline-step>

          <clr-timeline-step [clrState]="timelineStyle.step1.state">
            <clr-timeline-step-header>Step 1</clr-timeline-step-header>
            <clr-timeline-step-title>Document Upload</clr-timeline-step-title>
            <clr-timeline-step-description> <span>Upload Your <br>
                Document.</span></clr-timeline-step-description>

          </clr-timeline-step>


          <clr-timeline-step [clrState]="timelineStyle.step2.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">Customer Information Form</h3>
        <h3 style="text-align: center;" *ngIf="appToUpdate"> Update {{entryForm.name}}</h3>
        <div class="container">

          <br />

          <!-- entry form-->
          <!-- <form #contactForm="ngForm" (ngSubmit)="onSave()"> -->
          <form [formGroup]="entryForm">

            <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 class="clr-col-sm-12">
                  <label> Description</label>
                  <textarea cols="10" rows="2" formControlName="description" placeholder="Textarea">  </textarea>
                </div>

                <div class="clr-col-sm-12">
                  <label> Active</label>
                  <input type="checkbox" formControlName="active" clrToggle />
                </div>



                <div class="clr-col-sm-12">
                  <label> Visa Entry Type</label>
                  <select formControlName="visa_entry_type">
                    <option [value]="null">Choose Visa Entry Type</option>
                    <option *ngFor="let item of selectvisa_entry_type" [value]="item.id">{{item.name}}</option>
                  </select>
                </div>





                <div class="clr-col-sm-12">
                  <label> Visa Duration</label>
                  <select formControlName="visa_duration">
                    <option [value]="null">Choose Visa Duration</option>
                    <option *ngFor="let item of selectvisa_duration" [value]="item.id">{{item.name}}</option>
                  </select>
                </div>





                <div class="clr-col-sm-12">
                  <label> Visa Processing</label>
                  <select formControlName="visa_processing">
                    <option [value]="null">Choose Visa Processing</option>
                    <option *ngFor="let item of selectvisa_processing" [value]="item.id">{{item.name}}</option>
                  </select>
                </div>



                <div class="clr-col-sm-12">
                  <label> Travel start date</label>
                  <input class="clr-input" type="date" formControlName="travel_start_date" />
                </div>

                <div class="clr-col-sm-12">
                  <label> Travel end date</label>
                  <input class="clr-input" type="date" formControlName="travel_end_date" />
                </div>

                <div class="clr-col-sm-12">
                  <label> passport Number</label>
                  <input class="clr-input" type="number" formControlName="passport_number" />
                  <div *ngIf="submitted && entryForm.controls.passport_number.errors" class="error_mess">
                    <div *ngIf="submitted && entryForm.controls.passport_number.errors.required" class="error_mess">
                      *This field
                      is Required</div>
                  </div>
                </div>

                <div class="clr-col-sm-12">
                  <label> Passport issue date</label>
                  <input class="clr-input" type="date" formControlName="passport_issue_date" />
                </div>

                <div class="clr-col-sm-12">
                  <label> Passport expiry date</label>
                  <input class="clr-input" type="date" formControlName="passport_expiry_date" />
                </div>

                <div class="clr-col-sm-12">
                  <label> Email</label>
                  <input class="clr-input" type="email" formControlName="email"
                    pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">
                  <div *ngIf="entryForm.controls['email'].errors" class="error_mess">
                    <div *ngIf="entryForm.controls['email'].hasError('pattern')" class="error_mess">* Email must be a
                      valid
                      email address
                    </div>
                  </div>
                </div>

                <div class="clr-col-sm-12">
                  <label> Phone Number</label>
                  <input class="clr-input" type="text" formControlName="phone_number"
                    pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$" />
                  <div *ngIf="submitted && entryForm.controls['phone_number'].errors" class="error_mess">
                    <div *ngIf="submitted && entryForm.controls['phone_number'].hasError('pattern')" class="error_mess">
                      * Please
                      Follow your pattern,+91 Enter 10 digit Mobile Number.
                    </div>
                  </div>
                </div>

                <div class="clr-col-sm-12">
                  <label> Birth Place</label>
                  <input class="clr-input" type="text" formControlName="birth_place" />
                </div>

                <div class="clr-col-sm-12">
                  <label> Date of Birth</label>
                  <input class="clr-input" type="date" formControlName="date_of_birth" />
                </div>



                <div class="clr-col-sm-12">
                  <label> Gender</label>
                  <select formControlName="gender">
                    <option [value]="null">Choose Gender</option>
                    <option *ngFor="let item of selectgender" [value]="item.id">{{item.name}}</option>
                  </select>
                </div>



                <div class="clr-col-sm-12">
                  <label> Profession</label>
                  <input class="clr-input" type="text" formControlName="profession" />
                </div>

                <!-- currency field start -->
                <div class="clr-col-sm-12">
                  <label> Visa cost</label>
                  <input type="number" class="clr-input" formControlName="visa_cost"
                    [value]="entryForm.value.visa_cost | number:'1.2-2' | removeCommas">
                </div>
                <!-- currency field end -->



                <div class="clr-col-sm-12">
                  <label> Referrer</label>
                  <select formControlName="referrer">
                    <option [value]="null">Choose Referrer</option>
                    <option *ngFor="let item of selectreferrer" [value]="item.id">{{item.name}}</option>
                  </select>
                </div>





                <div class="clr-col-sm-12">
                  <label> Nationality</label>
                  <select formControlName="nationality">
                    <option [value]="null">Choose Nationality</option>
                    <option *ngFor="let item of selectnationality" [value]="item.id">{{item.name}}</option>
                  </select>
                </div>





                <div class="clr-col-sm-12">
                  <label> Supplier</label>
                  <select formControlName="supplier">
                    <option [value]="null">Choose Supplier</option>
                    <option *ngFor="let item of selectsupplier" [value]="item.id">{{item.name}}</option>
                  </select>
                </div>

                <div class="clr-col-sm-12">
                  <label> Agent</label>
                  <select formControlName="agent">
                    <option [value]="null">Choose Agent</option>
                    <option *ngFor="let item of selectagent" [value]="item.id">{{item.name}}</option>
                  </select>
                </div>


              </div>

              <div class="clr-row">

              </div>
              <!-- end row -->
              <br>
              <div class="button">
                <button type="submit" class="btn btn-primary" (click)="onSave()">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">File Upload</h3>
        <div class="container">

          <!-- File upload form -->
          <form (ngSubmit)="onFileUpload()" #uploadForm="ngForm" enctype="multipart/form-data">
            <!-- <div class="clr-row">
              <div class="clr-col-12">
                <label for="fileInput">Choose File<span class="required-field">*</span></label>
                <input type="file" id="fileInput" (change)="onFileSelected($event)" required class="form-control">
              </div>
            </div>

            <div class="clr-row" *ngIf="selectedFile">
              <div class="clr-col-12 mt-2">
                <strong>Selected File:</strong> {{ selectedFile.name }}
              </div>
            </div> -->


            <h6> List of Uploaded file</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>

            <br>
            <div class="button">
              <button type="submit" class="btn btn-success" [disabled]="!selectedfileupload_field">Upload</button>

              <button type="button" class="btn btn-primary"
                (click)="timelineStyle.step1 = { state: 'success', open: false }; timelineStyle.step2 = { state: 'current', open: true }">Complete</button>

              <button class="btn btn-primary-outline"
                (click)="timelineStyle.step0 = { state: 'current', open: true }; timelineStyle.step1 = { state: 'not-started', open: false }">Back</button>
            </div>
          </form>

        </div>
      </div>
    </div>


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

          <!-- Customer Info -->
          <div class="clr-row mb-3">
            <div class="clr-col-12">
              <h5>Customer Details:</h5>
              <p><strong>Name:</strong> {{ rowSelected.name }}</p>
              <p><strong>Active:</strong> {{ rowSelected.active }}</p>
              <p><strong>Visa Entry Type:</strong> {{ rowSelected.visa_entry_typename }}</p>
              <p><strong>Visa Duration:</strong> {{ rowSelected.visa_durationname }}</p>
              <p><strong>Visa Processing:</strong> {{ rowSelected.visa_processingname }}</p>
              <p><strong>Travel Start Date:</strong> {{ rowSelected.travel_start_date }}</p>
              <p><strong>Travel End Date:</strong> {{ rowSelected.travel_end_date }}</p>
              <p><strong>Passport Number:</strong> {{ rowSelected.passport_number }}</p>
              <p><strong>Passport Issue Date:</strong> {{ rowSelected.passport_issue_date }}</p>
              <p><strong>Passport Expiry Date:</strong> {{ rowSelected.passport_expiry_date }}</p>
              <p><strong>Email:</strong> {{ rowSelected.email }}</p>
              <p><strong>Phone Number:</strong> {{ rowSelected.phone_number }}</p>
              <p><strong>Birth Place:</strong> {{ rowSelected.birth_place }}</p>
              <p><strong>Date of Birth:</strong> {{ rowSelected.date_of_birth }}</p>
              <p><strong>Gender:</strong> {{ rowSelected.gendername }}</p>
              <p><strong>Profession:</strong> {{ rowSelected.profession }}</p>
              <p><strong>Visa Cost:</strong> {{ rowSelected.visa_cost }}</p>
              <p><strong>Referrer:</strong> {{ rowSelected.referrername }}</p>
              <p><strong>Nationality:</strong> {{ rowSelected.nationalityname }}</p>
              <p><strong>Supplier:</strong> {{ rowSelected.suppliername }}</p>
              <p><strong>Agent:</strong> {{ rowSelected.agentname }}</p>

            </div>
          </div>

          <!-- Uploaded File -->
          <div class="clr-row mb-3" *ngIf="uploadedFileName">
            <div class="clr-col-12">
              <h5>Uploaded Document:</h5>
              <p>{{ uploadedFileName }}</p>
            </div>
          </div>

          <div class="button">
            <button class="btn btn-primary-outline"
              (click)="timelineStyle.step1 = { state: 'current', open: true }; timelineStyle.step2 = { state: 'not-started', open: false }">Back</button>

            <button class="btn btn-primary"
              (click)="timelineStyle.step2 = { state: 'success', open: false }; current(); alert('Process Finished Successfully!')">Finish</button>
          </div>

        </div>
      </div>
    </div>



  </div>
</div>