@extends((isset($useProtecht)&&$useProtecht==true) ? 'master.team-registration': 'master.team-registration', (isset($useProtecht)&&$useProtecht==true) ? ['useProtecht'=>'true'] : [])

@push('footer.scripts')

    <script>
        $(function() {
            $('.price_options').change(function(){
                $('#price').val($(this).val());
                if( $('#discount_amount').val() != '' ){
                    let final_price = parseFloat($(this).val()) - parseFloat($('#discount_amount').val());
                    $('#final_price').val(final_price);
                }else{
                    $('#final_price').val($(this).val());
                }
            });

            $('.discount_options_class').change(function(){
                console.log($(this).val());
                if( $(this).val() == 'credit_deferral' ){
                    $('.credit_deferrals_container_div').show();
                    $('.discount_coupon_container_div').hide();
                }else{
                    $('.credit_deferrals_container_div').hide();
                    $('.discount_coupon_container_div').show();
                }
            });

            $(".send_my_credit_deferrals_btn").click(function(e){
                if($('#credit_deferral_code').val() == ''){
                    alert('Credit/Deferral Code is required');
                    return false;
                }else{
                    $('#credit_deferral_code_hidden').val($('#credit_deferral_code').val());
                    $('.send_my_credit_deferrals_btn').hide();
                    $('#calculate_discount_loading').show();

                    $('#creditrefferel_error_div').hide();
                    $('#creditrefferel_success_div').hide();
                    let token = $('#register_checkout_form #token_csrf').val();
                    $.ajax({
                        url : '{!! url("registration/checkout/calculatediscount") !!}',
                        headers: {'X-CSRF-TOKEN': token},
                        type: 'post',
                        data : $('#register_checkout_form').serialize(),
                        dataType: 'json',
                        success:function(response) {
                            if(response.status){
                                if( response.status == '0' ){
                                    $('#discount_amount_div').hide();
                                    $('#creditrefferel_success_div').hide();
                                    $('#creditrefferel_error_div').show();
                                    $('#creditrefferel_error_msg').html(response.message);
                                    $('#final_price').val($('#price').val());
                                    $('#discount_amount').val('');
                                    $('#credit_deferral_code_hidden').val('');
                                }else{
                                    $('#discount_amount_div').show();
                                    $('#creditrefferel_error_div').hide();
                                    $('#discount_amount').val(response.data.discount_amount);
                                    $('#final_price').val(response.data.final_price);
                                    
                                    //update tg
                                    var newPrice = response.data.final_price;
                                    tg('update', {
                                        costsOfItems: [newPrice],
                                        updatedCb: function() { 
                                          console.log('update callback');
                                        }
                                    });
                                }

                                $('.send_my_credit_deferrals_btn').show();
                                $('#calculate_discount_loading').hide();
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.log(jqXHR);
                            return false;
                        }
                    });
                }
                e.preventDefault(); //STOP default action
            });

            $(".calculate_discount_coupon_btn").click(function(e){
                if($('#discount_coupon_code').val() == ''){
                    alert('Discount Coupon Code is required');
                    return false;
                }else{
                    $('#discount_coupon_code_hidden').val($('#discount_coupon_code').val());
                    $('.calculate_discount_coupon_btn').hide();
                    $('#calculate_discount_coupon_loading').show();

                    $('#creditrefferel_error_div').hide();
                    $('#creditrefferel_success_div').hide();

                    let token = $('#register_checkout_form #token_csrf').val();
                    $.ajax({
                        url : '{!! url("registration/checkout/calculatecoupondiscount") !!}',
                        headers: {'X-CSRF-TOKEN': token},
                        type: 'post',
                        data : $('#register_checkout_form').serialize(),
                        dataType: 'json',
                        success:function(response) {
                            if(response.status){
                                if( response.status == '0' ){
                                    $('#discount_amount_div').hide();
                                    $('#creditrefferel_success_div').hide();
                                    $('#creditrefferel_error_div').show();
                                    $('#creditrefferel_error_msg').html(response.message);
                                    $('#final_price').val($('#price').val());
                                    $('#discount_amount').val('');
                                    $('#discount_coupon_code_hidden').val('');
                                    $('#credit_card_section').show();
                                }else{
                                    $('#discount_amount_div').show();
                                    $('#creditrefferel_error_div').hide();
                                    $('#discount_amount').val(response.data.discount_amount);
                                    $('#final_price').val(response.data.final_price);
                                    var payment_price = response.data.final_price;
                                    if (payment_price=='0')
                                        $('#credit_card_section').hide();
                                    else
                                        $('#credit_card_section').show();
                                    
                                    //update tg                                    
                                    var newPrice = payment_price;
                                    tg('update', {
                                        costsOfItems: [newPrice],
                                        updatedCb: function() { 
                                          console.log('update callback');
                                        }
                                    });
                                }
                                $('.calculate_discount_coupon_btn').show();
                                $('#calculate_discount_coupon_loading').hide();
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.log(jqXHR);
                            return false;
                        }
                    });
                }
                e.preventDefault(); //STOP default action
            });
        });
    </script>

    <script>
        tg('configure', {
          apiKey: 'pk_sandbox_2d97f7571c1a0d283bf56f95424160f8c1a5c91a',
          locale: 'en_US',
          currency: 'USD',
          costsOfItems: ['{{ $price }}'],
          loadedCb: function() {
              console.log('update callback');
          },
          optInCb: function() {
              var quoteToken = tg.get("token");
              document.getElementById('opt_in_protecht_hidden').value='1';              
              document.getElementById('protecht_quote_token_hidden').value=quoteToken;              
              console.log(quoteToken);
              console.log('opted in callback');
          },
          optOutCb: function() {
              var quoteToken = tg.get("token");
              document.getElementById('opt_in_protecht_hidden').value='0';
              document.getElementById('protecht_quote_token_hidden').value=quoteToken; 
              console.log(quoteToken);
              console.log('opted out callback');
          },
          onErrorCb: function(object){
              console.log(object);
          }
        });                
    </script>

@stop

@section('content')

    <style>
        #discount_amount_div{ display: none;}
        #calculate_discount_loading{ display: none; padding-top: 35px;}
        .send_my_credit_deferrals_btn{width: 250px !important;}
        .calculate_discount_coupon_btn{width: 250px !important;}
        .pt-50{ padding-top: 50px;}
    </style>

    <main class="page__wrap header_height-top">
        <section class="sec_space">
            <div class="container">
                <div class="lead__wrap mb_2r">
                    <h2>{{ $eventObj->name  }} - Checkout</h2>
                </div><!--/.lead__wrap-->
            </div><!--/.container-->

            <div class="registration__tabs-wrap">
                <ul class="nav nav__tabs">
                    @if($eventObj->logo != '')
                    <li class="nav-item">
                        <a class="nav-link active" href="#tab1" data-toggle="tab" aria-selected="true">
                            <img src="{{asset('public/uploads/events/logo/'.$eventObj->logo)}}" alt="">
                            @if($eventObj->race_date != '' && $eventObj->race_date != '0000-00-00 00:00:00')
                                <time>{{ date('F d D, Y', strtotime($eventObj->race_date))  }}</time>
                            @endif
                        </a>
                    </li>
                    @endif
                </ul><!--/.nav-tabs-->

                <div class="container">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="tab1" role="tabpanel">
                            <div class="registration__tab-pane">
                                @if (count($errors) > 0)
                                    <div class="alert alert-danger">
                                        <button type="button" class="close" data-dismiss="alert"></button>
                                        <h4 class="alert-heading"><strong>Validation Errors!</strong></h4>
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li> {{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif

                                {!! Form::open(array('id' => 'register_checkout_form', 'url' => 'registration/checkouttest/process', 'method'=>'POST', 'class'=> 'subscription_form')) !!}
                                    <input type="hidden" name="token_csrf" id="token_csrf" value="{{ csrf_token() }}"/>
                                    <input type="hidden" name="event_id" id="event_id" value="{{ $event_id }}"/>
                                    <input type="hidden" name="category_id" id="category_id" value="{{ $tempTeamObj->category_id }}"/>
                                    <input type="hidden" name="uid" id="uid" value="{{ $uid }}"/>
                                    <input type="hidden" name="credit_deferral_code_hidden" id="credit_deferral_code_hidden" value=""/>
                                    <input type="hidden" name="discount_coupon_code_hidden" id="discount_coupon_code_hidden" value=""/>
                                    <input type="hidden" name="opt_in_protecht_hidden" id="opt_in_protecht_hidden" value="0"/>
                                    <input type="hidden" name="protecht_quote_token_hidden" id="protecht_quote_token_hidden" value="0"/>

                                    <h3>Payment Options:</h3>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row justify-content-end">
                                                <div class="col-sm-12">
                                                    <div class="radio-list">
                                                        <label class="radio-inline">
                                                            <input type="radio" id="price_early_date" name="price_option" class="price_options" value="{{ $teamCategoryObj ->early_date_price }}" required {{{ ($checkedPriceOption == 'price_early_date')?'checked':'disabled'  }}}> Early Date Registration - {{ date('F d D, Y', strtotime($eventObj->early_date))  }} - <strong>${{ $teamCategoryObj ->early_date_price }}</strong>
                                                        </label>
                                                    </div>
                                                </div><!--/.col-sm-12-->

                                                <div class="col-sm-12">
                                                    <div class="radio-list">
                                                        <label class="radio-inline">
                                                            <input type="radio" id="price_normal_date" name="price_option"  class="price_options" value="{{ $teamCategoryObj ->normal_date_price }}" required {{{ ($checkedPriceOption == 'price_normal_date')?'checked':'disabled'  }}}> Normal Date Registration - {{ date('F d D, Y', strtotime($eventObj->normal_date))  }} - <strong>${{ $teamCategoryObj ->normal_date_price }}</strong>
                                                        </label>
                                                    </div>
                                                </div><!--/.col-sm-12-->

                                                <div class="col-sm-12">
                                                    <div class="radio-list">
                                                        <label class="radio-inline">
                                                            <input type="radio" id="price_late_date" name="price_option"  class="price_options" value="{{ $teamCategoryObj ->late_date_price }}" required {{{ ($checkedPriceOption == 'price_late_date')?'checked':'disabled'  }}}> Late Registration - {{ date('F d D, Y', strtotime($eventObj->late_date))  }} - <strong>${{ $teamCategoryObj ->late_date_price }}</strong>
                                                        </label>
                                                    </div>
                                                </div><!--/.col-sm-12-->
                                            </div><!--/.row-->
                                        </div><!--/.col-md-6-->
                                    </div><!--/.row-->

                                    <h3 class="pt-50">Calculate Price:</h3>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row justify-content-end">
                                                <div class="col-sm-12">
                                                    <label for="price">Price</label>
                                                    <input type="text" id="price" name="price" readonly class="form-control" required value="{{ $price }}" >
                                                </div><!--/.col-sm-12-->

                                                <div class="col-sm-12" style="margin: 10px 0px 25px 0px;">
                                                    <label for="price">Discount Type</label>
                                                    <div class="radio-list">
                                                        <label class="radio-inline">
                                                            <input type="radio" id="discount_coupon" name="discount_options"  class="discount_options_class" value="discount_coupon" checked> Discount Coupon
                                                        </label>
                                                        <br/>
                                                        <label class="radio-inline">
                                                            <input type="radio" id="credit_deferral" name="discount_options"  class="discount_options_class" value="credit_deferral"> Credit Deferral
                                                        </label>
                                                    </div>
                                                </div><!--/.col-sm-12-->

                                                <div class="col-sm-12 send_my_credit_deferrals_div">
                                                    <div id="creditrefferel_success_div" class="error-block form-group" style="display:none; ">
                                                        <div id="creditrefferel_success_msg" class="alert alert-success col-md-12"></div>
                                                    </div>
                                                    <div id="creditrefferel_error_div" class="error-block form-group" style="display:none; ">
                                                        <div id="creditrefferel_error_msg" class="alert alert-danger col-md-12"></div>
                                                    </div>
                                                </div><!--/.col-sm-12-->

                                                <div class="col-sm-6 credit_deferrals_container_div" style="display: none;">
                                                    <label for="credit_deferral_code">Credit/Deferral Code</label>
                                                    <input type="text" id="credit_deferral_code" name="credit_deferral_code" class="form-control" >
                                                </div><!--/.col-sm-6-->

                                                <div class="col-sm-6 credit_deferrals_container_div send_my_credit_deferrals_div" style="display: none;">
                                                    <label for="">&nbsp;</label>
                                                    <button type="button" class="btn btn-block btn-theme1 send_my_credit_deferrals_btn">Calculate Discount</button>
                                                    <img id="calculate_discount_loading" src="{{asset('resources/views/public/templates/teams/assets/images/ajax-loader.gif')}}" alt="">
                                                </div><!--/.col-sm-6-->
                                                <div class="col-sm-6 discount_coupon_container_div">
                                                    <label for="credit_deferral_code">Discount Coupon Code</label>
                                                    <input type="text" id="discount_coupon_code" name="discount_coupon_code" class="form-control" >
                                                </div><!--/.col-sm-6-->
                                                <div class="col-sm-6 discount_coupon_container_div">
                                                    <label for="">&nbsp;</label>
                                                    <button type="button" class="btn btn-block btn-theme1 calculate_discount_coupon_btn">Calculate Discount</button>
                                                    <img id="calculate_discount_coupon_loading" src="{{asset('resources/views/public/templates/teams/assets/images/ajax-loader.gif')}}" style="display: none;" alt="">
                                                </div><!--/.col-sm-6-->

                                                <div id="discount_amount_div" class="col-sm-12">
                                                    <label for="discount_amount">Discount Amount</label>
                                                    <input type="text" id="discount_amount" name="discount_amount" readonly class="form-control" >
                                                </div><!--/.col-sm-12-->

                                                <div class="col-sm-12">
                                                    <label for="final_price">Final Price</label>
                                                    <input type="text" id="final_price" name="final_price" class="form-control" readonly required value="{{ $price }}" >
                                                </div><!--/.col-sm-12-->
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div id="tg-placeholder"></div>

                                    <div id="credit_card_section">
                                    <h3 class="pt-50">Credit Card Information:</h3>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row justify-content-end">
                                                <div class="col-sm-6">
                                                    <label for="">Type</label>
                                                    <select class="form-control" id="credit_card_type" name="credit_card_type">
                                                        <option value="Visa">Visa</option>
                                                        <option value="Mastercard">Mastercard</option>
                                                        <option value="American Express">American Express</option>
                                                        <option value="Discover">Discover</option>
                                                        <option value="Diners Club/ Carte Blanche">Diners Club/ Carte Blanche</option>
                                                        <option value="JCB">JCB</option>
                                                    </select>
                                                </div><!--/.col-sm-6-->

                                                <div class="col-sm-6">
                                                    <label for="">Credit Card</label>
                                                    <input type="text" name="card_number" class="form-control" placeholder="Card Number*" value='4111111111111111'>
                                                </div><!--/.col-sm-6-->

                                                <div class="col-sm-6">
                                                    <label for="">Expiry Month</label>
                                                    <select name="month" id="month"  class="form-control">
                                                        <option value="01">01</option>
                                                        <option value="02">02</option>
                                                        <option value="03">03</option>
                                                        <option value="04">04</option>
                                                        <option value="05">05</option>
                                                        <option value="06">06</option>
                                                        <option value="07">07</option>
                                                        <option value="08">08</option>
                                                        <option value="09">09</option>
                                                        <option value="10">10</option>
                                                        <option value="11" selected>11</option>
                                                        <option value="12">12</option>
                                                    </select>
                                                </div><!--/.col-sm-6-->

                                                <div class="col-sm-6">
                                                    <label for="">Expiry Year</label>
                                                    <select name="year" id="year"  class="form-control">
                                                        <option value="2021">2021</option>
                                                        <option value="2022">2022</option>
                                                        <option value="2023">2023</option>
                                                        <option value="2024">2024</option>
                                                        <option value="2025" selected>2025</option>
                                                        <option value="2026">2026</option>
                                                        <option value="2027">2027</option>
                                                        <option value="2028">2028</option>
                                                        <option value="2029">2029</option>
                                                        <option value="2030">2030</option>
                                                    </select>
                                                </div><!--/.col-sm-6-->

                                                <div class="col-sm-6">
                                                    <label for="">CVV</label>
                                                    <input type="text" name="cvv" class="form-control" placeholder="CVV" value='123'>
                                                </div><!--/.col-sm-6-->
                                                <div class="col-sm-6">

                                                </div><!--/.col-sm-6-->                                               
                                            </div><!--/.row-->
                                        </div><!--/.col-md-6-->
                                    </div><!--/.row-->
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row justify-content-end">
                                                <div class="col-sm-6">
                                                    <button type="submit" class="btn btn-block btn-theme1">Submit</button>
                                                </div><!--/.col-sm-6-->
                                            </div>
                                        </div>
                                    </div>
                                    
                                </form>
                            </div><!--/.registration__tab-pane-->
                        </div><!--/.tab-pane-->
                    </div><!--/.tab-content-->
                </div><!--/.container-->
            </div><!--/.registration__tabs-wrap-->
        </section><!--/.end-section-->
    </main><!--/.page__wrap-->

@stop