@extends('master.team-registration')

@push('footer.scripts')

    <script>
        function calculateCreditCardFee(amount) {
            return parseFloat(amount * 0.03).toFixed(2);
        }

        function updateDisplay(price, discount, discountedSubtotal, creditCardFee, finalTotal) {
            $('#price').val(price.toFixed(2));
            $('#discount_amount').val(discount.toFixed(2));
            $('#discounted_subtotal').val(discountedSubtotal.toFixed(2));
            $('#credit_card_fee').val(creditCardFee);
            $('#final_price').val(finalTotal.toFixed(2));
        }

        $(function() {
            $('.price_options').change(function(){
                let price = parseFloat($(this).val()) || 0;
                $('#price').val(price);

                // Reset everything to base price with fee
                let discountedSubtotal = price;
                let fee = calculateCreditCardFee(discountedSubtotal);
                let final = discountedSubtotal + parseFloat(fee);

                updateDisplay(price, 0, discountedSubtotal, fee, final);                           
            });

            $('.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();
                }
            });

            $(".calculate_discount_coupon_btn").click(function(e){
                e.preventDefault();
                
                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) {
                            $('.calculate_discount_coupon_btn').show();
                            $('#calculate_discount_coupon_loading').hide();
                                
                            let price = parseFloat($('#price').val()) || 0;
                            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('0.00');
                                    $('#discount_coupon_code_hidden').val('');
                                    
                                    let discountedSubtotal = price;
                                    let fee = calculateCreditCardFee(discountedSubtotal);
                                    let final = discountedSubtotal + parseFloat(fee);

                                    updateDisplay(price, 0, discountedSubtotal, fee, final);
                                }else{
                                    let discountAmount = parseFloat(response.data.discount_amount) || 0;
                                    let discountedSubtotal = parseFloat(response.data.final_price) || 0;
                                    let fee = calculateCreditCardFee(discountedSubtotal);
                                    let final = discountedSubtotal + parseFloat(fee);

                                    $('#discount_amount_div').show();
                                    $('#creditrefferel_error_div').hide();

                                    updateDisplay(price, discountAmount, discountedSubtotal, fee, final);
                                }
                                
                                if (parseFloat(final) === 0) {
                                    $('#credit_card_section').hide();
                                } else {
                                    $('#credit_card_section').show();
                                }
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.log(jqXHR);
                            return false;
                        }
                    });
                }
            });
            
             // Initial on load
            let price = parseFloat($('#price').val()) || 0;
            let discount = parseFloat($('#discount_amount').val()) || 0;
            let discountedSubtotal = price - discount;
            let fee = calculateCreditCardFee(discountedSubtotal);
            let final = discountedSubtotal + parseFloat(fee);

            updateDisplay(price, discount, discountedSubtotal, fee, final);
        });
    </script>

@stop

@section('content')

    <style>
        #discount_amount_div{ display: none;}
        #calculate_discount_loading{ display: none; padding-top: 35px;}
        .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/checkout/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="discount_coupon" id="discount_options" value="discount_coupon"/>

                                    <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>
                                                            @if ($teamCategoryObj->early_date_pp > 0)
                                                                <strong><em>&nbsp;&nbsp;&nbsp;(${{ $teamCategoryObj->early_date_pp }} pp)</em></strong>
                                                            @endif
                                                        </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>
                                                            @if ($teamCategoryObj->normal_date_pp > 0)
                                                                <strong><em>&nbsp;&nbsp;&nbsp;(${{ $teamCategoryObj->normal_date_pp }} pp)</em></strong>
                                                            @endif
                                                        </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>
                                                            @if ($teamCategoryObj->late_date_pp > 0)
                                                                <strong><em>&nbsp;&nbsp;&nbsp;(${{ $teamCategoryObj->late_date_pp }} pp)</em></strong>
                                                            @endif
                                                        </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 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" id="discounted_subtotal_div">
                                                    <label for="discounted_subtotal">Subtotal (After Discount)</label>
                                                    <input type="text" id="discounted_subtotal" name="discounted_subtotal" readonly class="form-control" value="{{ $price }}">
                                                </div>

                                                <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" readonly class="form-control" 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-->
                                            </div>
                                        </div>
                                    </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='{{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