{{-- payment method cards --}}
<div class="row modal-inputs">
    {{-- <div class="col-6 mb-4">
        @if($package['original'] != 0)
            <div class="p-1 px-3 limited-offerDiv">
                {{ round(($package['amount']/$package['original'])*100) }}%
                {{ __('modal.discount.text') }}
            </div>
        @endif
      <div class="mx-auto package-card-cyan card mb-4" style="min-height: 420px;">
        <div class="card-body d-flex flex-wrap justify-content-center py-4">
            <h5 class="text-center mb-0 mt-3">{{ __('modal.packages1.title') }}</h5>

            <div class="container d-flex justify-content-center my-2">
                @if($package['name'] == 'annual')
                    <img src="{{  asset('img/payment/packages_pig.png') }}" class="card-img-top w-100" alt="..." style="max-width: 120px !important; align-self: center;">
                @else
                    <img src="{{  asset('img/payment/packages_money.png') }}" class="card-img-top w-100" alt="..." style="max-width: 120px !important; align-self: center;">
                @endif
            </div>
            @if($package['original'] != 0)
                <div class="discount-price">
                    <span style="text-decoration: line-through">{{ $package['original'] }}</span> {{ __($package['currency']) }} {{ __('modal.discount.instead') }}
                </div>
            @endif
            <div>
                <div class="mx-auto" style="width: fit-content; width: -moz-fit-content;">
                    <h1 class="mb-0" style="color: #fff; position: relative;">
                        {{ $package['amount'] }} {{ __($package['currency']) }}
                    </h1>
                    <div>
                        {{ __($package['name']) }}
                    </div>
                </div>
                <p class="card-text my-3">{{ __('modal.packages1.description') }}</p>
                <div class="form-group mb-0">
                    <button type="button" class="btn btn-black w-100" onclick="show_packages();">{{  __('modal.purchases.changePackage') }}</button>
                </div>
            </div>
        </div>
      </div>
    </div> --}}
    <div class="col-12 mb-4">
      <div class="card" style="box-shadow: none">
        <div class="card-body d-flex flex-wrap align-content-center p-0">
          <input id="package_name" type="hidden" value="{{ $package['name'] }}">
          <input id="amount" type="hidden" value="{{ $package['amount']*100 }}">
          <input id="currency" type="hidden" value="{{ $package['currency'] }}">
          @if(!Session::has('loginToken'))
          <form id="signupForm" onkeydown="return event.key != 'Enter';" method="POST" action="{{ route('register') }}" class="mx-0 px-0 w-100">
            <input name="referral" type="hidden" value="{{ $payment_data['referral'] }}">
            
            <div class="form-group bmd-form-group">
              <label for="emailSignup" class="component-label">{{ __('modal.signup.emailAddress') }}</label>
              <input dusk="emailSignupInput" id="emailSignup" type="email" class="form-control" name="email" placeholder="{{ __('modal.signup.emailAddress.placeholder') }}" autocomplete="false">
              <span class="invalid-feedback" role="alert">
                  <strong></strong>
              </span>
            </div>

          <div class="form-group bmd-form-group">
              <label for="passwordSignup" class="component-label">{{ __('modal.signup.password') }}</label>
              <input dusk="passwordSignupInput" id="passwordSignup" type="password" class="form-control" name="password" placeholder="{{ __('modal.signup.password.placeholder') }}" autocomplete="false">
              <span class="invalid-feedback" role="alert">
                  <strong></strong>
              </span>
          </div>

            <div class="d-flex flex-nowrap my-4">
                <div class="mr-2">
                    <input type="checkbox" id="acceptedTermsReg" name="acceptedTermsReg" class="evp_checkbox" style="position: absolute;"/>
                    <label for="acceptedTermsReg" style=""></label>
                </div>
                <div class="">
                    <label for="checkbox-r" class="font-weight-normal" style="color: #333; line-height: 20px;">{!! __('signUp.termsAndPrivacy', [ 'policy' => route('policies').'#terms-and-conditions', 'aszf' => route('policies').'#privacy-policy' ]) !!}</label>
                </div>
            </div>
            
            <div class="form-group">
                <div class="g-recaptcha" style="overflow-x: auto; overflow-y: hidden;" name="g-recaptcha" data-sitekey="6LcNV-QZAAAAAKFJgr0ylhG9WOLLwgmUJsufNyzQ"></div>
                <span class="invalid-feedback" role="alert">
                    <strong></strong>
                </span>
            </div>

            {{-- <div class="form-group text-center mt-3 mb-2 w-100">
                <button type="button" id="submitSignup" class="submitSignup btn btn-primary w-100 buttonswidth-log-reg" disabled>{{ __('button.next') }}</button>
            </div> --}}
            <div class="form-group text-right mt-3 mb-2 w-100">
                <button type="button" id="submitSignup" class="submitSignup btn btn-primary buttonswidth-log-reg" disabled>{{ __('button.register') }}</button>
            </div>
          </form>
          @endif
          <form id="invoice_data" class="@if(!Session::has('loginToken')) d-none @endif">
            <div class="form-group bmd-form-group pt-0">
                <label for="iName" class="component-label">{{ __('modal.invoicedata.name') }}</label>
                <input dusk="iNameInput" id="iName" type="text" class="form-control user-success" name="iName" autocomplete="false" aria-invalid="false" placeholder="{{ __('modal.invoicedata.name.placeholder') }}" required  @if(Session::has('user')) value="{{ Session::get('user')['personalData']['name'] }}" @endif/>
                <span class="invalid-feedback" role="alert">
                    <strong></strong>
                </span>
            </div>

            <div class="row">
              <div class="col-7">
                <div class="form-group bmd-form-group">
                    <label for="iCity" class="component-label">{{ __('modal.invoicedata.city') }}</label>
                    <input dusk="iCityInput" id="iCity" type="text" class="form-control user-success" name="iCity" autocomplete="false" aria-invalid="false" placeholder="{{ __('modal.invoicedata.city.placeholder') }}" required @if(Session::has('user')) value="{{ Session::get('user')['personalData']['city'] }}" @endif/>
                    <span class="invalid-feedback" role="alert">
                        <strong></strong>
                    </span>
                </div>
              </div>
              <div class="col-5">
                <div class="form-group bmd-form-group">
                  <label for="iZip" class="component-label">{{ __('modal.invoicedata.zip') }}</label>
                  <input dusk="iZipInput" id="iZip" type="text" class="form-control user-success" name="iZip" autocomplete="false" aria-invalid="false" placeholder="{{ __('modal.invoicedata.zip.placeholder') }}" maxlength="4" required @if(Session::has('user')) value="{{ Session::get('user')['personalData']['post_code'] }}" @endif/>
                  <span class="invalid-feedback" role="alert">
                      <strong></strong>
                  </span>
                </div>
              </div>
            </div>

            <div class="form-group bmd-form-group">
                <label for="iAddress" class="component-label">{{ __('modal.invoicedata.address') }}</label>
                <input dusk="iAddressInput" id="iAddress" type="text" class="form-control user-success" name="iAddress" autocomplete="false" aria-invalid="false" placeholder="{{ __('modal.invoicedata.address.placeholder') }}" required @if(Session::has('user')) value="{{ Session::get('user')['personalData']['address'] }}" @endif/>
                <span class="invalid-feedback" role="alert">
                    <strong></strong>
                </span>
            </div>
            <div class="form-group bmd-form-group">
                <label for="iTaxno" class="component-label is-focused">{{ __('modal.invoicedata.taxno') }}</label>
                <input dusk="iTaxNoInput" id="iTaxno" type="text" class="form-control user-success" name="iTaxno" autocomplete="false" aria-invalid="false" placeholder="{{ __('modal.invoicedata.taxno.placeholder') }}" @if(Session::has('user')) value="{{ Session::get('user')['personalData']['tax_number'] }}" @endif>
                <span class="invalid-feedback" role="alert">
                    <strong></strong>
                </span>
            </div>

            <div class="form-group text-center w-100 mb-0 mt-4">
              <button id="subscribeButton" type="button" style="max-width: 100%" onClick="dataLayer.push({'category': 'Lead', 'action': 'Choose payment method', 'label': 'PayLike'}); saveInvoiceData();" class="btn btn-primary w-100 gtm-payment-paylike">
                {{ __('modal.paymentmethod.payButton') }}
              </button>
            </div>
          </form>
        </div>
      </div>
  </div>
</div>

<script src="https://www.google.com/recaptcha/api.js?hl=hu"></script>

<script>
      $( document ).ready(function() {
        $( 'html' ).on( 'click', '#acceptedTermsReg, #acceptedTerms', function() {
            if($('#acceptedTermsReg').prop("checked") == true) {
                $('.submitSignup').prop( "disabled", false );
                $('#sign_up_accept_msg').css('visibility', 'hidden');;
                set_cookie( 'acceptedTerms', true, 40 );
            }
            else if ($('#acceptedTerms').prop("checked") == true)
            {
                $('.submitSignup').prop( "disabled", false );
                $('#sign_up_accept_msg').css('visibility', 'hidden');;
                set_cookie( 'acceptedTerms', true, 40 );
            }
            else
            {
                $('.submitSignup').prop( "disabled", true );
                $('#sign_up_accept_msg').css('visibility', 'visible');
                delete_cookie( 'acceptedTerms' );
            }
        });

        $( 'html' ).on('click', '#acceptNewsLetterReg, #acceptNewsLetter', function() {
            if($(this).prop("checked") == true) {
                set_cookie( 'acceptNewsLetter', true, 40 );
            } else {
                delete_cookie( 'acceptNewsLetter' );
            }
        });
    })

    function saveInvoiceData() {
      if(!$('#iName')[0].checkValidity())
      {
          $('#iName').next().children().html('{{ __('modal.requiredfield') }}');
          $('#iName').next().show();
      }
      else $('#iName').next().hide();
      if(!$('#iZip')[0].checkValidity())
      {
          $('#iZip').next().children().html('{{ __('modal.requiredfield') }}');
          $('#iZip').next().show();
      }
      else $('#iZip').next().hide();
      if(!$('#iCity')[0].checkValidity())
      {
          $('#iCity').next().children().html('{{ __('modal.requiredfield') }}');
          $('#iCity').next().show();
      }
      else $('#iCity').next().hide();
      if(!$('#iAddress')[0].checkValidity())
      {
          $('#iAddress').next().children().html('{{ __('modal.requiredfield') }}');
          $('#iAddress').next().show();
      }
      else $('#iAddress').next().hide();

      if(!$('#invoice_data')[0].checkValidity())
          return;

      $("input[name=setInvoice]").val(1);
      $("input[name=invoiceName]").val($("input[name=iName]").val());
      $("input[name=invoiceZip]").val($("input[name=iZip]").val());
      $("input[name=invoiceCity]").val($("input[name=iCity]").val());
      $("input[name=invoiceAddress]").val($("input[name=iAddress]").val());
      $("input[name=invoiceTaxNo]").val($("input[name=iTaxno]").val());

      pay();
    }
</script>