<style type="text/css">
    @import url(https://fonts.googleapis.com/css?family=Roboto:300);

    .login-page {
      padding: 3% 0 0;
      margin: auto;
    }

    .header {
      display: flex;
      border-bottom: 0.3px solid lightgrey;
      text-align: center;
    }

    .box-header {
      text-align: justify;
    }

    .form {
      position: relative;
      z-index: 1;
      background: #FFFFFF;
      max-width: 360px;
      padding: 10px;
      /* text-align: center; */
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
      border-radius: 4px;
    }

    .form input {
      font-family: "Roboto", sans-serif;
      outline: 0;
      background: #f2f2f2;
      width: 100%;
      border: 0;
      margin: 0 0 15px;
      padding: 15px;
      box-sizing: border-box;
      font-size: 14px;
    }

    .form button {
      text-transform: capitalize;
      outline: 0;
      width: 100%;
      border: 0;
      padding: 15px;
      color: #FFFFFF;
      font-size: 14px;
      -webkit-transition: all 0.3 ease;
      transition: all 0.3 ease;
      cursor: pointer;
      border-radius: 4px;
      font-weight: bold;
      font-size: 18px;
    }

    .form button:hover,
    .form button:active,
    .form button:focus {
      background: #404040;
    }

    .form .message {
      margin: 15px 0 0;
      color: #b3b3b3;
      font-size: 12px;
    }

    .form .message a {
      color: #4CAF50;
      text-decoration: none;
    }

    .form .register-form {
      display: none;
    }

    .form label {
      text-align: start;
      font-weight: bold;
    }

    .container {
      position: relative;
      z-index: 1;
      max-width: 300px;
      margin: 0 auto;
    }

    .container:before,
    .container:after {
      content: "";
      display: block;
      clear: both;
    }

    .container .info {
      margin: 50px auto;
      text-align: center;
    }

    .container .info h1 {
      margin: 0 0 15px;
      padding: 0;
      font-size: 36px;
      font-weight: 300;
      color: #1a1a1a;
    }

    .container .info span {
      color: #4d4d4d;
      font-size: 12px;
    }

    .container .info span a {
      color: #000000;
      text-decoration: none;
    }

    .container .info span .fa {
      color: #EF3B3A;
    }

    .gateway {
      display: flex;
      margin-top: 30px;
    }

    .imgGateway {
      display: block;
      margin: auto;
      border-radius: 4px;
    }

    body {
      background: rgba(0, 0, 0, 0.62);
      font-family: "Roboto", sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      display: flex;
    }
  </style>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <div class="box login-page">
    <div class="form">
      <div class="header with-border">
        <img src="{{ $team->logo ?? '' }}" width="150" height="auto" />
        <h1>{{ Lang::get('messages.paymentForms.webcheckout_form_1') }} {{ $team->name ?? '' }}</h1>
      </div>
      <div class="box-header with-border">
        <h4 class="box-title">
          {{ Lang::get('messages.paymentForms.webcheckout_form_2', ['value' => $total_price]) }}
        </h4>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        {{-- @include('flash::message') --}}
        <form role="form" id="payment_information" action="{{$form_action}}" data-toggle="validator" method="POST" onsubmit="btnGateway.disabled = true; return true;">
          <div class="row">
            <div class="col-3 col-md-3" hidden>
              <div class="form-group">
                <input type="text" class="form-control" maxlength="45" name="amount" placeholder="" value="{{$total_price}}" disabled required>
              </div>
            </div>

            <div class="col-3 col-md-3">
              <div class="form-group">
                <label for=" billing-cc-number">{{ Lang::get('messages.paymentForms.webcheckout_form_4') }}</label>
                <input type="text" class="form-control" onpaste="return false;" onkeypress="return formats(this,event) && /[0-9]/i.test(event.key)" maxlength="19" name="billing-cc-number" placeholder="XXXX XXXX XXXX XXXX" required>
              </div>
            </div>

            <div class="col-3 col-md-3">
              <div class="form-group">
                <label for="billing-cc-exp">{{ Lang::get('messages.paymentForms.webcheckout_form_5') }}</label>
                <input type="text" class="form-control" onpaste="return false;" onkeypress="return formatsExp(this,event) && /[0-9]/i.test(event.key)" maxlength="5" name="billing-cc-exp" placeholder="MM/YY" data-inputmask="'mask': '9999 9999 9999 9999'" required>
              </div>
            </div>

            <div class="col-3 col-md-3">
              <div class="form-group">
                <label for="billing-cvv">{{ Lang::get('messages.paymentForms.webcheckout_form_6') }}</label>
                <input type="text" class="form-control" onpaste="return false;" onkeypress="return /[0-9]/i.test(event.key)" maxlength="4" name="billing-cvv" placeholder="CVV" required>
              </div>
            </div>

          </div>
          <button type="submit" id="btnGateway" class="btn btn-primary" style="background-color: {{ $team->color ?? '#505050' }}" value="Submit Step two">{{ Lang::get('messages.paymentForms.webcheckout_form_7', ['value' => $total_price]) }}</button>
          <div class="gateway">
            <img class="imgGateway" src="{{$gatewayImageUrl}}" width="150" height="auto" />
          </div>
          <input type="hidden" name="DO_STEP_2" value="true">
          <input type="hidden" class="form-control" name="order-id" value="{{request()->get('ticket_id')}}">
          {{ csrf_field() }}
        </form>
      </div>
    </div>
  </div>

  <script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
  <script src="{{ asset('js/direction.js') . '?v=' . time() }}"></script>
  <script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.0.1/jquery.payment.min.js'></script>

  <script type="text/javascript">
    function formats(ele, e) {
      if (ele.value.length < 19) {
        ele.value = ele.value.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ');
        return true;
      } else {
        return false;
      }
    }

    function formatsExp(ele, e) {
      if (ele.value.length < 5) {
        ele.value = ele.value.replace(/\W/gi, '').replace(/(.{2})/g, '$1/');
        return true;
      } else {
        return false;
      }
    }
  </script>