<div class="summary-header">
  <div class="row summary-header__section-top">
    <div class="col-4 summary-header__price">
      {{vehicleLabelsData?.vehicleTotalPrice}}
      <span>{{vehicleHeaderData?.baseModelPrice?.amount}}
        <b>{{vehicleHeaderData?.vehicleTotalPrice?.currency}}</b></span>
      <div *ngIf="pageType === 'quotation'">{{quoteData?.quoteNumber}}</div>
      <div *ngIf="pageType === 'contract'">{{contractData?.contract?.contractNumber}}</div>
    </div>
    <div class="col-8 summary-header__title">
      <div *ngIf="pageType !== 'vehicleSummary'"><span class="user">Michelle Yeo /</span> Lead l-{{quoteData?.id}}
      </div>
      <div *ngIf="pageType === 'vehicleSummary'" class="empty"></div>
      {{vehicleLabelsData?.vehicle_your}} {{vehicleHeaderData?.modelName}}
    </div>
  </div>
  <div class="row">
    <!-- Vehicle Summary Page Starts -->
    <div class="col-6 summary-header__button-left" *ngIf="pageType === 'vehicleSummary'">
      <a class="summary-header__btn-test" (click)="drive()">{{vehicleLabelsData?.vehicle_testDrive}}</a>
      <a class="summary-header__btn-edit" *ngIf="pageType"
        (click)="editInformation()">{{vehicleLabelsData?.vehicle_editFinanceOption}}</a>
      <a class="summary-header__btn-mail" (click)="mailToSelf()">{{vehicleLabelsData?.vehicle_mailToCustomer}}</a>
    </div>
    <div class="col-6 summary-header__button-right" *ngIf="pageType === 'vehicleSummary'">
      <a class="summary-header__btn-wishlist"
        (click)="saveToCustomer()">{{vehicleLabelsData?.vehicle_saveToCustomer}}</a>
      <a class="summary-header__btn-finoption"
        (click)="createQuotationMethod()">{{vehicleLabelsData?.vehicle_quotation}}</a>
    </div>
    <!-- Vehicle Summary Page Ends -->
    <!-- Quotation Page Starts -->
    <div class="col-8 summary-header__button-left" *ngIf="pageType === 'quotation'">
      <a class="summary-header__btn-test" (click)="drive()">{{vehicleLabelsData?.vehicle_testDrive}}</a>
      <a class="summary-header__btn-editQuote" [ngClass]="disableEdit ? 'summary-header__btn-editQuoteDisabled':''"
        (click)="editInformation()">Edit Quotation</a>
      <a class="summary-header__btn-mail" (click)="optionsMenu()">Options</a>
      <a class="summary-header__btn-save" (click)="saveChanges()">Save Changes</a>
    </div>
    <div class="col-4 summary-header__button-right" *ngIf="pageType === 'quotation'">
      <a class="summary-header__btn-finoption" (click)="initiateCreateContract()">Create Contract</a>
    </div>
    <!-- Quotation Page Ends -->
    <!-- Contract Page Starts -->
    <div class="col-8 summary-header__button-left" *ngIf="pageType === 'contract'">
      <a class="summary-header__btn-mail" (click)="drive()">Send to Customer</a>
      <a class="summary-header__btn-editQuote" (click)="editContract()">Edit Contract</a>
      <a class="summary-header__btn-mail" (click)="carInfo()">Car Info</a>
      <a class="summary-header__btn-save" (click)="options()">Options</a>
    </div>
    <!-- Contract Page Starts -->

  </div>
</div>


<div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title w-100" id="myModalLabel">{{vehicleLabelsData?.vehicle_financeOption}}</h4>
      </div>
      <div class="modal-body">
        <div class="form-head">{{vehicleLabelsData?.vehicle_basicTaxInfo}}</div>

        <form>
          <div class="p-4">
            <div class="form-greybg">
              <div class="form-row mb-4">
                <div class="col">
                  <label>{{vehicleLabelsData?.vehicle_formLabelState}}</label>
                  <select class="browser-default custom-select mb-4">
                    <option value="" disabled>Choose option</option>
                    <option value="1" selected>Busan</option>
                    <option value="2">Jurong</option>
                    <option value="3">Bugis</option>
                    <option value="4">Outram</option>
                  </select>
                </div>
                <div class="col">
                  <label>{{vehicleLabelsData?.vehicle_formLabelPostal}}<span
                      class="warning financial-msg">{{vehicleLabelsData?.vehicle_formValidationPostal}}</span></label>
                  <input type="text" id="defaultRegisterFormLastName" class="form-control" placeholder="Last name">
                </div>
              </div>
              <div class="form-row">
                <div class="col">
                  <label>{{vehicleLabelsData?.vehicle_formLabelPrivate}}</label>
                  <div class="custom-control custom-checkbox">
                    <span class="fixwidth">
                      <input type="checkbox" class="custom-control-input" id="privateCheckbox">
                      <label class="custom-control-label" for="privateCheckbox">Private</label>
                    </span>
                    <span class="fixwidth">
                      <input type="checkbox" class="custom-control-input" id="businessCheckbox">
                      <label class="custom-control-label" for="businessCheckbox">Business</label>
                    </span>
                  </div>
                </div>
                <div class="col">
                  <label>{{vehicleLabelsData?.vehicle_formLabelInsurer}}</label>
                  <select class="browser-default custom-select mb-4">
                    <option value="" disabled>Choose option</option>
                    <option value="1" selected>43</option>
                    <option value="2">22</option>
                    <option value="3">23</option>
                    <option value="4">56</option>
                  </select>
                  <!-- <input type="text" id="defaultRegisterFormLastName" class="form-control" placeholder="Last name" aria-describedby="defaultRegisterFormPasswordHelpBlock"> 
                          <small id="defaultRegisterFormPasswordHelpBlock" class="form-text text-muted mb-4">
                            At least 8 characters and 1 digit
                          </small> -->
                </div>
              </div>
            </div>
            <div class="financial-head">{{vehicleLabelsData?.vehicle_selectFinanceOption}}<span
                class="warning financial-msg">{{vehicleLabelsData?.vehicle_formValidationfinanceOption}}</span></div>

            <app-financing-options-list class="financial-body"
              *ngIf="financingOptionsItems && financingOptionsItems.length !== 0"
              [financingOptionsItems]="financingOptionsItems"
              (financialOptionSelected)="financialOptionsSelected($event)">
            </app-financing-options-list>
            <!-- <div class="row financial-body" *ngIf="financingOptionsItems.length != 0">
                    <div class="col-3" *ngFor="let fo of financingOptionsItems; index as i">
                        <app-financing-options [financingOptionsItem]="fo">
                        </app-financing-options>
                    </div>
                </div> -->
            <div class="finance-options-img" #financeOptions>
            </div>

            <div class="finance-options-other-options" #otherOptions>
              Data Not Available
            </div>

            <div class="form-greybg p-4 terms-conditions">
              <div class="terms-conditions-box">
                {{vehicleLabelsData?.vehicle_termsConditionsText}}
              </div>
            </div>

            <div class="custom-control custom-checkbox">
              <span>
                <input type="checkbox" class="custom-control-input" id="termsconditions">
                <label class="custom-control-label"
                  for="termsconditions">{{vehicleLabelsData?.vehicle_termsConditions}}</label>
              </span>
            </div>
          </div>

          <div class="info-box">
            <span class="info-icon"></span>
            <label>{{vehicleLabelsData?.vehicle_completeTaxLabel}}</label>
          </div>
          <div class="modal-footer">
            <div class="col">
              <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close"
                (click)="basicModal.hide()" mdbWavesEffect>{{vehicleLabelsData?.vehicle_buttonCancel}}</button>
            </div>
            <div class="col text-right">
              <button mdbBtn color="info"
                (click)="submitFinanceOption()">{{vehicleLabelsData?.vehicle_buttonApply}}</button>
            </div>
          </div>


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

<div mdbModal #quotationModal="mdbModal" class="modal quotation-modal fade" tabindex="-1" role="dialog"
  aria-labelledby="myBasicModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header row">
        <h4 class="modal-title col-12" id="myModalLabel">Create Quotation</h4>
        <div class="quotation-modal-subheading">Add this Vehicle as a <strong>Summary</strong> to a selected
          <strong>Customer's Lead.</strong></div>


        <div class="quotation-vehiclesummary col-12">
          <div class="row">
            <div class="quotation-vehiclesummary-left col-2">
              <img src="../../../../../assets/images/basecar-customer.png" />
            </div>
            <div class="row quotation-vehiclesummary-right col-10">
              <div class="col-5 quotation-vehiclesummary__price">
                {{vehicleLabelsData?.vehicleTotalPrice}}
                <span>{{vehicleHeaderData?.baseModelPrice?.amount}}
                  <b>{{vehicleHeaderData?.baseModelPrice?.currency}}</b></span>
              </div>
              <div class="col-7 quotation-vehiclesummary__title">
                {{vehicleLabelsData?.vehicle_your}} {{vehicleHeaderData?.modelName}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-body quotation-modal-body">

        <div class="quotation-modal-customertable" #customerTable>
          <div class="form-head">{{vehicleLabelsData?.vehicle_basicTaxInfo}}</div>
          <form (ngSubmit)="customerSearchform.form.valid && onCustomerFormSubmit()" #customerSearchform="ngForm">
            <div class="form-row mb-4 quotation-modal-customertableform">
              <div class="form-group customers-form-columns col-10">
                <label for="firstName"><b>Search</b></label>
                <input type="text" class="form-control" name="firstName" [(ngModel)]="customerModel.firstName"
                  #firstName="ngModel" placeholder="Search for Customer Name here"
                  [ngClass]="{ 'is-invalid': customerSearchform.submitted && firstName.invalid }" required />
                <div *ngIf="customerSearchform.submitted && firstName.invalid" class="invalid-feedback">
                  <div *ngIf="firstName.errors.required">Customer Name is required</div>
                </div>
              </div>
              <div class="col-2 btn-container">
                <button class="btn-grey" type="submit">Search</button>
              </div>
            </div>
          </form>

          <ng-container *ngIf="showSpinner">
            <app-spinner [message]="'Loading Customers Data...'"></app-spinner>
          </ng-container>
          <ng-container *ngIf="vehicleCustomerData && !showSpinner">
            <div *ngIf="vehicleCustomerData?.O_customerdetails.length === 0">
              No Records Found
            </div>
            <div class="col-12 btn-container">
              <button class="btn-primary" (click)="navigateToCustomerCreate()" type="submit">Create New
                Customer</button>
            </div>
            <div *ngIf="!showSpinner && vehicleCustomerData?.O_customerdetails.length > 0">
              <label><b>Recent Customers</b></label>
              <app-search-customertable [vehicleCustomerData]="vehicleCustomerData" (viewlead)="viewLeads($event)">
              </app-search-customertable>
            </div>
          </ng-container>
        </div>

        <ng-container class="quotation-modal-leadtable" *ngIf="showCustomerForm">
          <app-dailog-create-customer (ignoreCustomerForm)="ignoreCustomerForm()" [customerLabels]="customerLabels"></app-dailog-create-customer>
        </ng-container>

        <ng-container class="quotation-modal-leadtable" *ngIf="showLeadForm">
          <app-dailog-create-lead (ignoreCustomerForm)="ignoreLeadForm()" [leadLabels]="leadLabels" (redirectToLeadsView)="redirectToLeadsView()"></app-dailog-create-lead>
        </ng-container>

        <ng-container *ngIf="showSpinnerLeadTable">
          <div class="align-spinner">
            <app-spinner [message]="'Loading Leads Data...'"></app-spinner>
          </div>
        </ng-container>
        <div class="quotation-modal-leadtable" #leadTable>
          <div class="quotation-modal-leadtable--header">
            <div class="row">
              <div class="col-3">
                <button class="back__btn" (click)="goBackToCustomer()">Back</button>
              </div>
              <div class="col-9 row">
                <div class="col">
                  <label>Name</label>
                  <b>{{customerDetailData?.LastName}}</b>
                </div>
                <div class="col">
                  <label>Contact</label>
                  <b>{{customerDetailData?.PersonMobilePhone}}</b>
                </div>
                <div class="col">
                  <label>Email</label>
                  <b>{{customerDetailData?.PersonEmail}}</b>
                </div>
              </div>
            </div>
          </div>
          <div class="quotation-modal-leadtable--body">
            <div class="col-12 btn-container">
              <button class="btn-primary btn-addcustomer" type="submit"
                (click)="navigateToCreateLead()"><span></span>Create New Lead</button>
            </div>
            <div *ngIf="!customerLeadData">
              Some Error Occurred !!!
            </div>
            <div *ngIf="customerLeadData && customerLeadData.length === 0">
              No Records Found
            </div>
            <div *ngIf="customerLeadData && customerLeadData.length > 0">
              <app-search-leadstable [customerLeadData]="customerLeadData" (linklead)="linkLead($event)">
              </app-search-leadstable>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div mdbModal #mailModal="mdbModal" class="modal fade mailModel" tabindex="-1" role="dialog"
  aria-labelledby="myBasicModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title w-100" id="myModalLabel">{{vehicleLabelsData?.vehicle_mailToMyself}}</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-body">
            <div class="form-head">{{vehicleLabelsData?.vehicle_mailMyselfHeadingPrefix}}
              {{vehicleHeaderData?.ModelName}} {{vehicleLabelsData?.vehicle_mailMyselfHeadingSuffix}}</div>
            <div class="form-email">
              <!-- <label>{{vehicleLabelsData?.vehicle_formLabelEmail}}<span
                  class="warning financial-msg">{{vehicleLabelsData?.vehicle_formValidationEmail}}</span></label> -->
              <input type="text" id="mailtomyselfemail" class="form-control"
                placeholder=" {{vehicleLabelsData?.vehicle_formPlaceholderEmail}}">
            </div>
          </div>

          <div class="modal-footer">
            <div class="col">
              <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close"
                (click)="mailModal.hide()" mdbWavesEffect>{{vehicleLabelsData?.vehicle_buttonCancel}}</button>
            </div>
            <div class="col text-right">
              <button mdbBtn color="info" type="button" (click)="sendEmailEmit()">{{vehicleLabelsData?.vehicle_buttonSubmit}}</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>