@extends('master.team-registration')

@push('footer.scripts')
    <script>

function calculateFinalTotal() {
    let base = parseFloat($('#price').val()) || 0;
    let discount = parseFloat($('#discount_amount').val()) || 0;
    let donation = parseFloat($('#donation_amount').val()) || 0;

    //Subtotal = base - discount
    let subtotal = base - discount;
    if (subtotal < 0) subtotal = 0;

    $('#subtotal_after_discount').val(subtotal.toFixed(2)); // show it

    //Add donation
    let subtotalWithDonation = subtotal + donation;

    //Credit card fee = 3% of subtotal with donation
    let cc_fee = +(subtotalWithDonation * 0.03).toFixed(2);

    //Final total
    let final_total = +(subtotalWithDonation + cc_fee).toFixed(2);

    $('#credit_card_fee').val(cc_fee.toFixed(2));
    $('#final_price').val(final_total.toFixed(2));

    // Show/hide card section
    if (final_total === 0) {
        $('#credit_card_section').hide();
    } else {
        $('#credit_card_section').show();
    }
}


        $(function() {
            $('#donation_amount').on('input', calculateFinalTotal);


            $('.price_options').change(function(){
                $('#price').val($(this).val());
                let donation_amount = 0;
                if( typeof $(this).val() !== 'undefined' && $(this).val() !== null && parseFloat($(this).val()) > 0 ){
                    donation_amount = $(this).val();
                }
                if( $('#discount_amount').val() != '' ){
                    let final_price = parseFloat($(this).val()) + parseFloat(donation_amount) - parseFloat($('#discount_amount').val());
                    $('#final_price').val(final_price);
                }else{
                    $('#final_price').val($(this).val() + parseFloat(donation_amount));
                }
            });

            $('.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();
                }
            });
            
            $('#donation_amount').blur(function(){
                calculateFinalTotal()
            });

            $(".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);
                                    $('#discount_amount').val('');
                                    $('#discount_coupon_code_hidden').val('');                                    
                                }else{
                                    $('#discount_amount_div').show();
                                    $('#creditrefferel_error_div').hide();
                                    $('#discount_amount').val(response.data.discount_amount);                                    
                                }
                                calculateFinalTotal();
                                $('#credit_deferral_code_hidden').val('');
                                $('.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
            });
            calculateFinalTotal();
        });
    </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/processindividualcheckout', '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="team_category_id" id="team_category_id" value="{{ $tempIndividualObj->team_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=""/>

                                <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-->
@if ($event_id !=14)
											<input type="hidden" id="discount_coupon" name="discount_options" value="discount_coupon"/>

                                            <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 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="subtotal_after_discount">Subtotal After Discount</label>
    <input type="text" id="subtotal_after_discount" name="subtotal_after_discount" class="form-control" readonly value="0.00">
</div>


                                            <div class="col-sm-12">
                                                <label for="donation_amount">
Make an additional donation
@if ($event_id==11)
<em>(all proceeds and donations benefit The Boys & Girls Club Of Bend)</em>
@elseif ($event_id==9)
<em><span style="color:#ff0000">*All proceeds benefit Boys and Girls Club of Bend</span></em>
@elseif ($event_id==15)
<em><span style="color:#ff0000">*All proceeds benefit xxx</span></em>
@endif
</label>
                                                <input type="number" min="0" id="donation_amount" name="donation_amount"  class="form-control" placeholder="$0.00" >
                                            </div><!--/.col-sm-12-->
@endif

@if ($event_id !=14)
<div class="col-sm-12">
    <label for="credit_card_fee">Credit Card Fee (3%)</label>
    <input type="text" id="credit_card_fee" name="credit_card_fee" class="form-control" readonly value="0.00">
</div>
                                            <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-->
@else
<input type="hidden" id="final_price" name="final_price" value="{{ $price }}" >
@endif
                                        </div>
                                    </div>
                                </div>

@if ($price==0)
                                <div id="credit_card_section" style="display:none">
@else
				<div id="credit_card_section">
@endif

@if ($event_id==9)
<div class="alert alert-danger">
    <p>You all blasted through a record 4,500 beanies (aka registrations) by 10 p.m. Wednesday — absolute legends! If you registered *after* that cutoff, good news: we already rush ordered 1,000 more!</p>
    <p>They’ll arrive next week, and you’ll be able to grab yours locally or have it shipped your way.</p>
</div>
@endif
                                <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='{{old('card-number')}}'>
                                            </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">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">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='{{old('cvvr')}}'>
                                            </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