<div class="container">
  <!-- Outer Row -->
  <div class="row justify-content-center">
    <div class="col-xl-10 col-lg-12 col-md-9">
      <div class="card o-hidden border-0 shadow-lg my-5">
        <div class="card-body">
          <!-- Nested Row within Card Body -->
          <div class="row" ng-show="!signUpSuccess">
            <div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
              <div class="text-center form-group">
                <img
                  alt=""
                  class="d-inline-block align-top"
                  height="auto"
                  src="images/logo1.png"
                  width="170"
                />
              </div>
              <form
                id="signUpPage"
                name="signUpForm"
                ng-show="signUpForm1"
                ng-submit="createUser(signUpForm.$valid)"
                novalidate
              >
                <div class="signup-main-body form-group">
                  <div class="modal-body bg-white">
                    <div class="row">
                      <!--first name-->
                      <div class="form-group col-12 col-lg-6" ng-if="language !== 'ja'">
                        <input
                          class="form-control"
                          name="firstName"
                          ng-class="{'is-invalid' : ((signUpForm.firstName.$touched || signUpForm.firstName.$dirty)
                                                            && signUpForm.firstName.$invalid)
                                                            || (showRequiredErr && signUpForm.firstName.$error.required)}"
                          ng-maxlength="64"
                          ng-model="createForm.first_name"
                          ng-pattern="script_pattern"
                          placeholder="{{'ACCOUNT.FIRST_NAME' | translate}}"
                          required
                          id="first_name"
                          type="text"
                        />
                        <div class="invalid-feedback">
                          <div
                            ng-show="signUpForm.firstName.$error.required
                                                        || (showRequiredErr && signUpForm.firstName.$error.required)"
                          >
                            {{'INPUT_ERROR.REQUIRED' | translate}}
                          </div>
                          <div ng-show="signUpForm.firstName.$error.maxlength">
                            {{ 'INPUT_ERROR.MAX_LENGTH' | translate : '{value: "64" }' }}
                          </div>
                          <div ng-show="signUpForm.firstName.$error.pattern">
                            {{'INPUT_ERROR.SPECIAL_CHARACTERS' | translate}}
                          </div>
                        </div>
                      </div>
                      <!--last name-->
                      <div class="form-group col-12 col-lg-6">
                        <input
                          class="form-control"
                          name="lastName"
                          ng-class="{'is-invalid' : ((signUpForm.lastName.$touched || signUpForm.lastName.$dirty)
                                                           && signUpForm.lastName.$invalid)
                                                           || (signUpForm.lastName.$error.required && showRequiredErr)}"
                          ng-maxlength="64"
                          ng-model="createForm.last_name"
                          ng-pattern="script_pattern"
                          placeholder="{{'ACCOUNT.LAST_NAME' | translate}}"
                          required
                          id="last_name"
                          type="text"
                        />
                        <div class="invalid-feedback">
                          <div
                            ng-show="signUpForm.lastName.$error.required
                                                        || (signUpForm.lastName.$error.required && showRequiredErr)"
                          >
                            {{'INPUT_ERROR.REQUIRED' | translate}}
                          </div>
                          <div ng-show="signUpForm.lastName.$error.maxlength">
                            {{ 'INPUT_ERROR.MAX_LENGTH' | translate : '{value: "64" }' }}
                          </div>
                          <div ng-show="signUpForm.lastName.$error.pattern">
                            {{'INPUT_ERROR.SPECIAL_CHARACTERS' | translate}}
                          </div>
                        </div>
                      </div>
                      <!--first name-->
                      <div class="form-group col-12 col-lg-6" ng-if="language === 'ja'">
                        <input
                          class="form-control"
                          name="firstName"
                          ng-class="{'is-invalid' : ((signUpForm.firstName.$touched || signUpForm.firstName.$dirty)
                                                            && signUpForm.firstName.$invalid)
                                                            || (showRequiredErr && signUpForm.firstName.$error.required)}"
                          ng-maxlength="64"
                          ng-model="createForm.first_name"
                          ng-pattern="script_pattern"
                          placeholder="{{'ACCOUNT.FIRST_NAME' | translate}}"
                          required
                          id="first_name_ja"
                          type="text"
                        />
                        <div class="invalid-feedback">
                          <div
                            ng-show="signUpForm.firstName.$error.required
                                                        || (showRequiredErr && signUpForm.firstName.$error.required)"
                          >
                            {{'INPUT_ERROR.REQUIRED' | translate}}
                          </div>
                          <div ng-show="signUpForm.firstName.$error.maxlength">
                            {{ 'INPUT_ERROR.MAX_LENGTH' | translate : '{value: "64" }' }}
                          </div>
                          <div ng-show="signUpForm.firstName.$error.pattern">
                            {{'INPUT_ERROR.SPECIAL_CHARACTERS' | translate}}
                          </div>
                        </div>
                      </div>
                      <!--email-->
                      <div class="form-group col-12">
                        <input
                          class="form-control"
                          name="email"
                          ng-class="{'is-invalid' : ((signUpForm.email.$touched || signUpForm.email.$dirty)
                                                           && signUpForm.email.$invalid)
                                                           || (signUpForm.email.$error.required && showRequiredErr)}"
                          ng-maxlength="64"
                          ng-minlength="6"
                          ng-model="createForm.email"
                          ng-pattern="email_pattern"
                          placeholder="{{'ACCOUNT.MAIL_ADDRESS' | translate}}"
                          required
                          type="text"
                        />
                        <div class="invalid-feedback">
                          <div
                            ng-show="signUpForm.email.$error.required
                                                        || (signUpForm.email.$error.required && showRequiredErr)"
                          >
                            {{'INPUT_ERROR.REQUIRED' | translate}}
                          </div>
                          <div ng-show="signUpForm.email.$error.maxlength">
                            {{'INPUT_ERROR.MAX_LENGTH' | translate :'{value: "64" }'}}
                          </div>
                          <div ng-show="signUpForm.email.$error.pattern">
                            {{'COMMON.INVALID_EMAIL' | translate}}
                          </div>
                        </div>
                      </div>
                      <!--password-->
                      <div class="form-group col-12 col-lg-6">
                        <input
                          class="form-control"
                          disallow-space
                          ng-trim="false"
                          id="new-pass"
                          name="newPass"
                          ng-class="{'is-invalid' : ((signUpForm.newPass.$touched || signUpForm.newPass.$dirty)
                                                           &&  signUpForm.newPass.$invalid)
                                                           || (signUpForm.newPass.$error.required && showRequiredErr)}"
                          ng-maxlength="64"
                          ng-minlength="6"
                          ng-model="createForm.password"
                          placeholder="{{'ACCOUNT.PASSWORD' | translate}}"
                          required
                          type="password"
                        />

                        <div class="invalid-feedback">
                          <div
                            ng-show="signUpForm.newPass.$error.required
                                                        || (signUpForm.newPass.$error.required && showRequiredErr)"
                          >
                            {{'INPUT_ERROR.REQUIRED' | translate}}
                          </div>
                          <div ng-show="signUpForm.newPass.$error.maxlength">
                            {{ 'USER.PASSWORD_POLICY.DEFAULT' | translate : '{min: "6", max: "64"}'
                            }}
                          </div>
                          <div ng-show="signUpForm.newPass.$error.minlength">
                            {{ 'USER.PASSWORD_POLICY.DEFAULT' | translate : '{min: "6", max: "64"}'
                            }}
                          </div>
                        </div>
                      </div>
                      <!--confirm password-->
                      <div class="form-group col-12 col-lg-6">
                        <input
                          class="form-control"
                          disallow-space
                          ng-trim="false"
                          compare-to="signUpForm.newPass"
                          id="input_confirm_password"
                          name="confirmPass"
                          ng-class="{'is-invalid' : ((signUpForm.confirmPass.$dirty || signUpForm.confirmPass.$touched)
                                                           && signUpForm.confirmPass.$invalid) ||
                                                           (signUpForm.confirmPass.$error.required && showRequiredErr)}"
                          ng-model="createForm.confirm_password"
                          placeholder="{{'ACCOUNT.CONFIRM_PASSWORD' | translate}}"
                          required
                          type="password"
                        />
                        <div class="invalid-feedback">
                          <div
                            ng-show="signUpForm.confirmPass.$error.required
                                                        || (signUpForm.confirmPass.$error.required && showRequiredErr)"
                          >
                            {{'INPUT_ERROR.REQUIRED' | translate}}
                          </div>
                          <div
                            ng-show="signUpForm.confirmPass.$dirty && signUpForm.confirmPass.$viewValue
                                                         && signUpForm.confirmPass.$viewValue!=='' && signUpForm.confirmPass.$error.repeat"
                          >
                            {{'ACCOUNT.INVALID_CONFIRM_PASSWORD' | translate}}
                          </div>
                        </div>
                      </div>
                      <!--reCaptcha-->
                      <!-- <div class="form-group col-12">
                        <div
                          key="recaptchaKey"
                          ng-class="{'is-invalid': showRequiredErr}"
                          ng-model="gRecaptchaResponse"
                          vc-recaptcha
                          lang="language"
                        ></div>
                        <div class="invalid-feedback">
                          <div ng-show="gRecaptchaResponse === ''">
                            {{'INPUT_ERROR.REQUIRED' | translate}}
                          </div>
                        </div>
                      </div> -->
                      <!--Actions -->
                      <div class="form-group col-12">
                        <button
                          class="btn btn-block btn-primary"
                          ng-class="{'cursor-disabled': submitting || acceptPolicy === 0}"
                          ng-disabled="submitting || acceptPolicy === 0"
                          type="submit"
                        >
                          {{'COMMON.BUTTON_REGISTER' | translate}}
                        </button>
                      </div>
                      <!--Privacy Policy-->
                      <div class="col-12 order-sm-9 order-9 text-center mt-1">
                        <span class="font-size opacity-5">
                          {{'ACCOUNT.SIGN_UP_POLICY_PRE' | translate}}
                        </span>
                        <a
                          class="font-size font-weight-bold pointer-cursor text-gray-600"
                          ng-click="openModal(true)"
                          >{{'ACCOUNT.SIGN_UP_SERVICE_LINK' | translate}}</a
                        >
                        <span class="font-size opacity-5">{{'ACCOUNT.AND' | translate}}</span>
                        <a
                          class="font-size font-weight-bold pointer-cursor text-gray-600"
                          ng-click="openModal(false)"
                          >{{'ACCOUNT.SIGN_UP_POLICY_LINK' | translate}}</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </form>
              <form id="signUpForm2" name="signUpForm2" ng-show="signUpFormAddCard" novalidate>
                <div class="signup-main-body form-group">
                  <div class="modal-body bg-white">
                    <div class="row">
                      <div class="form-group col-12">
                        <label class="small" for="card-element"
                          >{{'TEAM_PAYMENT.ADD' | translate}}</label
                        >
                        <input
                          class="form-control"
                          name="cardholderName"
                          type="text"
                          placeholder="{{'CARD_INFO.PAYMENT_INFORMATION.CARD_NAME' | translate}}"
                          ng-disabled="submitting"
                          ng-model="cardInfo.cardholderName"
                          ng-class="{'is-invalid' : (signUpForm2.cardholderName.$touched || signUpForm2.cardholderName.$dirty) &&  signUpForm2.cardholderName.$invalid}"
                          ng-maxlength="64"
                          ng-pattern="script_pattern"
                          required
                        />
                        <div class="invalid-feedback text-left">
                          <div ng-show="signUpForm2.cardholderName.$error.required">
                            {{'INPUT_ERROR.REQUIRED' | translate}}
                          </div>
                          <div ng-show="signUpForm2.cardholderName.$error.maxlength">
                            {{'INPUT_ERROR.MAX_LENGTH' | translate :'{value: "64" }'}}
                          </div>
                          <div ng-show="signUpForm2.cardholderName.$error.pattern">
                            {{'INPUT_ERROR.SPECIAL_CHARACTERS' | translate}}
                          </div>
                        </div>
                      </div>
                      <div class="form-group col-12">
                        <div id="card-element" class="h-38">
                          <!-- A Stripe Element will be inserted here. -->
                        </div>
                        <!-- Used to display form errors. -->
                        <div id="card-errors" class="error-text" role="alert"></div>
                      </div>
                      <div class="form-group col-12">
                        <input
                          class="form-control"
                          name="address1"
                          type="text"
                          placeholder="{{'CARD_INFO.ADDRESS' | translate}}"
                          ng-disabled="submitting"
                          ng-model="cardInfo.address1"
                          ng-class="{'is-invalid' : (signUpForm2.address1.$touched || signUpForm2.address1.$dirty) &&  signUpForm2.address1.$invalid}"
                          ng-maxlength="255"
                        />
                        <div class="invalid-feedback text-left">
                          <div ng-show="signUpForm2.address1.$error.maxlength">
                            {{'INPUT_ERROR.MAX_LENGTH' | translate :'{value: "255" }'}}
                          </div>
                        </div>
                      </div>
                      <!--BUTTON-->
                      <div class="col-12 text-right d-flex justify-content-end" style="gap: 8px">
                        <button
                          type="button"
                          class="btn btn-outline-dark w-100"
                          ng-click="cancelAddCard()"
                        >
                          {{'COMMON.BUTTON_BACK' | translate}}
                        </button>
                        <button
                          id="payment-card"
                          class="btn btn-primary w-100"
                          ng-class="{'cursor-disabled': submittingCard || !isComplete || !signUpForm2.$valid}"
                          ng-disabled="submittingCard || !isComplete || !signUpForm2.$valid"
                          type="submit"
                        >
                          {{'COMMON.BUTTON_SAVE' | translate}}
                          <span ng-if="submittingCard"><i class="fa fa-spin fa-spinner"></i></span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </form>

              <!-- FOOTER -->
              <hr />
              <div class="text-center">
                <a class="small opacity-5">{{'LOGIN.ALREADY_HAVE_ACCOUNT' | translate}}</a>
                <a class="small" ui-sref="login">{{'LOGIN.LOGIN_LINK' | translate}}</a>
              </div>
              <div class="text-center" ng-show="submitting">
                <div class="lds-facebook">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
            </div>
            <div
              class="col-12 col-md-1 d-none d-md-flex d-md-justify-content-center d-md-align-items-stretch"
              style="margin: 0 12px"
            >
              <div
                style="
                  width: 1px;
                  background: #e0e0e0;
                  height: 100%;
                  min-height: 350px;
                  margin: 0 12px;
                "
              ></div>
            </div>
            <!-- Right: Plan summary -->
            <div class="col-12 col-md-4 mb-3 md-md-0">
              <h6 class="mb-2" style="font-size: 1rem">
                {{ 'LABEL.YOUR_CURRENT_PLAN' | translate}}:
              </h6>
              <div class="d-flex align-items-center mb-2">
                <span class="h5 mb-0 font-weight-bold">{{packageName}}</span>
                <!-- <span class="badge badge-primary ml-2" style="font-size: 0.9em;">DISCOUNT</span> -->
              </div>
              <div class="mb-2">
                <!-- <span class="text-muted" style="text-decoration: line-through;">$24</span> -->
                <span class="h5 font-weight-bold text-dark">
                  {{ 'ACCOUNT.PRICE' | translate:{ currency: currencyInfo, price: price} }}
                </span>
                <span class="text-muted"> {{ 'ACCOUNT.PRICE_USER_MONTH' | translate }}</span>
              </div>
              <ul class="pl-0 mb-2 features" style="font-size: 15px">
                <li ng-repeat="feature in visibleFeatures">
                  {{ feature.key | translate: feature.params ? feature.params : {} }}
                </li>
              </ul>
              <a
                class="d-block mb-3 text-primary"
                style="font-size: 15px; cursor: pointer"
                ng-click="toggleFeatures()"
              >
                <span ng-if="!showAllFeatures"
                  >{{ "FEATURES.show_more_features" | translate }}</span
                >
                <span ng-if="showAllFeatures">{{ "FEATURES.show_less_features" | translate }}</span>
              </a>
              <div class="border-top pt-3 mt-3">
                <div
                  ng-if="billingCycle === 'ANNUALLY'"
                  class="mb-2 text-uppercase"
                  style="font-size: 13px; letter-spacing: 1px"
                >
                  {{'LABEL.RECURRING_ANNUAL_COST' | translate}}
                </div>
                <div
                  ng-if="billingCycle !== 'ANNUALLY'"
                  class="mb-2 text-uppercase"
                  style="font-size: 13px; letter-spacing: 1px"
                >
                  {{'LABEL.RECURRING_MONTH_COST' | translate}}
                </div>
                <div class="mb-2">
                  <input
                    class="form-control"
                    name="numberOfUsers"
                    ng-model="numberOfUsers"
                    ng-disabled="package === 'FREE' || package === 'PERSONAL'"
                    ng-maxlength="64"
                    ng-pattern="script_pattern"
                    placeholder="{{'ACCOUNT.NUMBER_OF_USER' | translate}}"
                    required
                    id="number_user"
                    type="number"
                  />
                </div>
                <div class="d-flex justify-content-between">
                  <span>{{packageName}}</span>
                  <span>
                    {{ 'ACCOUNT.TOTAL_PRICE' | translate:{ currency: currencyInfo, price: price} }}
                  </span>
                </div>
                <div class="d-flex justify-content-start text-muted">
                  <span style="font-size: 14px">
                    {{ 'ACCOUNT.SUMMARY_SUB_TEXT' | translate:{ currency: currencyInfo, price:
                    price, number_user: numberOfUsers } }}
                    <span ng-if="billingCycle === 'ANNUALLY'">
                      x {{ 'ACCOUNT.ANNUALLY_BILLING_CYCLE' | translate:{ number_months: '12'} }}
                    </span>
                  </span>
                </div>
                <!-- <div class="d-flex justify-content-between mt-2">
                    <span>Discount</span>
                    <span class="text-primary">- $241.20</span>
                  </div> -->
                <!-- <div class="d-flex justify-content-between text-muted" style="font-size: 14px;">
                    <span>Annual (Promotion)</span>
                  </div> -->
                <hr />
                <div
                  class="d-flex justify-content-between font-weight-bold"
                  style="font-size: 18px"
                >
                  <span>{{'ACCOUNT.TODAY_TOTAL' | translate}}</span>
                  <span>
                    {{ 'ACCOUNT.TOTAL_PRICE' | translate:{ currency: currencyInfo, price:
                    totalPackagePrice} }}
                  </span>
                </div>
              </div>
            </div>
            <!-- End right -->
          </div>
          <div class="row" ng-if="signUpSuccess">
            <div class="col-12 text-center pt-3 pb-5">
              <img
                alt=""
                class="d-inline-block align-top"
                height="auto"
                src="images/logo1.png"
                width="170"
              />
            </div>
            <div class="col-12 form-group">
              <div class="card-deck">
                <div
                  class="card shadow bg-gradient-light border-left-warning pointer-cursor custom-hover"
                  ng-click="doRedirect('login')"
                >
                  <div class="card-img-top text-center pt-4 pb-2">
                    <i class="fa fa-desktop fa-5x text-warning"></i>
                  </div>
                  <div class="card-body text-center">
                    <h5 class="card-title font-weight-bold text-primary">
                      {{'ACCOUNT.SECURE_MAIL_CONSOLE' | translate}}
                    </h5>
                  </div>
                </div>
                <div
                  class="card shadow bg-gradient-light border-left-danger pointer-cursor custom-hover"
                  ng-click="openNewTab('https://chrome.google.com/webstore/detail/689cloud-securemail/gmhicblngdcdiplilpaejmkfkinfipmb')"
                >
                  <div class="card-img-top text-center pt-4 pb-2">
                    <i class="fa fa-envelope fa-5x text-danger"></i>
                  </div>
                  <div class="card-body text-center">
                    <h5 class="card-title font-weight-bold text-primary">
                      {{'ACCOUNT.GMAIL_ADD_INS' | translate}}
                    </h5>
                  </div>
                </div>
                <div
                  class="card shadow bg-gradient-light border-left-primary pointer-cursor custom-hover"
                  ng-click="openNewTab('https://appsource.microsoft.com/en-us/marketplace/apps?src=Office&search=689cloud')"
                >
                  <div class="card-img-top text-center pt-4 pb-2">
                    <i class="fab fa-microsoft fa-5x text-primary"></i>
                  </div>
                  <div class="card-body text-center">
                    <h5 class="card-title font-weight-bold text-primary">
                      {{'ACCOUNT.OUTLOOK_EXTENSION' | translate}}
                    </h5>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12 text-center">
              <span class="font-weight-bold">{{'ACCOUNT.SIGNED_UP_SUCCESS' | translate}}</span>
              <p>{{'ACCOUNT.PLEASE_PICK_THE_PAGE' | translate}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
