@extends('principal::master')


@section('title')
	Registration
@stop

@section('content')
<div class="container-fluid section">
  <div class="container">
    <div class="row" role="tabpanel">
      <div class="col-xs-8">
        <div class="section-container">
          <div class="row content-text">
            <div class="tab-content">
              @foreach($articles as $key => $item)
                <div role="tabpanel" class="tab-pane {{ $key == 0 ? 'active':'' }}" id="{{ $item->id }}">
                  {{ $item->full_text }}
                </div>
              @endforeach
              <div role="tabpanel" class="tab-pane" id="signup">
                @if(isset($show_form) && $show_form == true)
                    @include('principal::signup_form_new')
                @else
                    <h3>Online Registration is now closed</h3>
                    <p>All participants must register in person at the hotel.</p>
                @endif
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-4">
        <ul class="nav nav-tabs menu-tournaments" role="tablist">
          @foreach($articles as $key => $item)
            <li class="{{ $key == 0 ? 'active':'' }}"><a href="#{{ $item->id }}" class="list-group-item" aria-controls="{{ $item->id }}" role="tab" data-toggle="tab">
              {{ $item->title }}
            </a></li>
          @endforeach
        @if(isset($show_form) && $show_form == true)
          <li class="signup"><a href="#signup" class="list-group-item" id="linkSignUp" aria-controls="signup" role="tab" data-toggle="tab">
            <span class="glyphicon glyphicon-ok"></span> Sign up
          </a></li>
        @endif
        </ul>

      </div>
    </div>
  </div>
</div>
@stop

@section('scripts')
@if(isset($show_form) && $show_form == true)
  <script>
    $(document).ready(function() {
      $('.jackpots').change(function(){
        var total = 700;
        $('.jackpots:checked').each(function(){
          total += parseFloat($(this).val());
        });
        $('#inputTotal').val(total.toFixed(2));
      });

      $('#inputAnglers').change(function(){
        toggleAnglers();
      });
      toggleAnglers();

      function toggleAnglers()
      {
        $('.angler-container').addClass('hide');
        $('.angler-container:nth-child(-n+' + $('#inputAnglers').val() + ')').removeClass('hide');
      }
    });
  </script>

    <script type="text/javascript">
      $(document).ready(function() {
        $('#linkSignUp').click();
      });
    </script>
    <script
        src="https://connect.transactiongateway.com/token/Collect.js"
        data-tokenization-key="4Zx7G4-ERM7r5-dgfATX-raw98q"
    ></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
          CollectJS.configure({
              /*'progress': function(value) {
                    console.log(value)
              },*/
              /*'fieldsAvailableCallback': function(value) {
                    console.log('fieldsAvailablecallback', value)  
              },
              'validationCallback': function(value) {
                  console.log("validationCallback", value)
              },*/
            /*'callback': function (response) {
              document.getElementById("paymentTokenInfo").innerHTML =
                '<b>Payment Token:</b> ' + response.token +
                '<br><b>Card:</b> ' + response.card.number +
                '<br><b>BIN/EIN:</b> ' + response.card.bin +
                '<br><b>Expiration:</b> ' + response.card.exp +
                '<br><b>Hash:</b> ' + response.card.hash +
                '<br><b>Card Type:</b> ' + response.card.type +
                '<br><b>Check Account Name:</b> ' + response.check.name +
                '<br><b>Check Account Number:</b> ' + response.check.account +
                '<br><b>Check Account Hash:</b> ' + response.check.hash +
                '<br><b>Check Routing Number:</b> ' + response.check.aba;
            },*/
            variant: 'inline',
            styleSniffer : "true",
              "customCss": {
                    "border": "none",
                    "color": "black"
            },
            focusCss: {
                "background-color": "transparent"
            },
            fields: {
              cvv: {
                placeholder: 'CVV'
              },
              ccnumber: {
                  placeholder: 'Credit Card'
              },
              ccexp: {
                  placeholder: 'MM / YY'
              }
            }
          });
        });
    </script>
  @endif
@stop