@extends('layouts.master-voyo')

@section('header')
    <link rel="stylesheet" href="{{ URL::asset('site/css/custom.css')}}">
    <link rel="stylesheet" href="{{ URL::asset('site/css/custom-wizard.css')}}">
@stop

@section('content')
    <!-- Page Header --> 
    <header class="titlebar titlebar1">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-title pull-left page-title1">Processing Checkout</h1>
                    <ol class="breadcrumb pull-right">
                        <li><a href="#">Home</a></li>
                        <li class="active">Checkout</li>
                    </ol>
                </div>
            </div>
        </div>
    </header> <!-- END Page Header -->

    <section class="section-4"> 
        <div class="container">
            <div class="row mb35" id="rootwizard">
                @if( $errors->any() )
                    <div class="alert alert-danger alert-dismissable">
                        <ul>
                            @foreach( $errors->all() as $error )
                                <li>{{ $error }}</li>   
                            @endforeach
                        </ul>
                    </div>
                @endif
                @if( Auth::check() )
                    {!! Form::open(['action' => 'PaymentController@postCheckoutProcess', 
                        'class' => 'form-horizontal','id' => 'checkout']) 
                    !!}
                    <input type="hidden" name="so" value="{{ Request::get('so','normal') }}" />
                @endif

                <div class="col-sm-12 col-md-12 xs-box member_nav list-group">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs horizontal fw_icon" >
                        <li>
                            <a href="#tab1" data-toggle="tab">
                            <i class="fa fa-truck fa-fw"></i>&nbsp; Shipping Address</a>
                        </li>
                        <li >
                            <a href="#tab2"  data-toggle="tab">
                                <i class="fa fa-file-text fa-fw"></i>&nbsp; Billing Address 
                            </a>
                        </li>
                        <li>
                            <a href="#tab3" data-toggle="tab">
                                <i class="fa fa-check-square-o fa-fw"></i>&nbsp; Confirm your order
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="col-sm-12 col-md-12">
                    {{-- Wizard Controls --}}
                    <div class="text-right wizard">
                        <span class="btn button-previous">Previous</span>
                        <span class="btn button-next">Next</span>
                    </div>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        {{-- #shipping_address --}}                       
                        <div class="tab-pane active" id="tab1">
                            <div class="col-sm-12 col-md-12 sm-box">
                                <div>
                                    <h3 class="main-title mb20">Shipping Address</h3>
                                </div>
                                                                <div id="shipping-wrap">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-sm-12">
                                                    Block No <span class="required">*</span>
                                                </label>
                                                <div class="col-sm-12">
                                                    {{-- Start from here --}}
                                                    {!! Form::text('s_block', ($member_shipping) ? $member_shipping->block : '', ['class' => 'form-control', 'id' => 's_block']) !!}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-sm-12">
                                                    Street Name <span class="required">*</span> 
                                                </label>
                                                <div class="col-sm-12">
                                                    {!! Form::text('s_street', ($member_shipping) ? $member_shipping->street : '', ['class' => 'form-control', 'id' => 's_street']) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-sm-12">
                                                    Unit No <span class="required">*</span> 
                                                </label>
                                                <div class="col-sm-12">
                                                    {!! Form::text('s_unit', ($member_shipping) ? $member_shipping->unit : '', ['class' => 'form-control', 'id' => 's_unit']) !!}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-sm-12">
                                                    Building Name
                                                </label>
                                                <div class="col-sm-12">
                                                    {!! Form::text('s_building', ($member_shipping) ? $member_shipping->building : '', ['class' => 'form-control', 'id' => 's_building']) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-sm-12">
                                                    City <span class="required">*</span> 
                                                </label>
                                                <div class="col-sm-12">
                                                    {!! Form::text('s_city', ($member_shipping) ? $member_shipping->city : '', ['class' => 'form-control', 'id' => 's_city']) !!}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-sm-12">
                                                    State <span class="required">*</span> 
                                                </label>
                                                <div class="col-sm-12">
                                                    {!! Form::text('s_state', ($member_shipping) ? $member_shipping->state : '', ['class' => 'form-control', 'id' => 's_state']) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-sm-12">Country<span class="form-required"> *</span></label>
                                                <div class="col-sm-12">
                                                    {!! Form::select('s_country', $countries, ($member_shipping) ? $member_shipping->country : 193, ['class' => 'chosen-select selectcategory form-control', 'id' => 's_country', 'data-placeholder' => 'Choose a Country...']) !!}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-sm-12">
                                                    Postal Code
                                                </label> 
                                                <div class="col-sm-12">
                                                    {!! Form::text('s_postal', ($member_shipping) ? $member_shipping->postal : '', ['class' => 'form-control', 'id' => 's_postal']) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-sm-12">
                                                    Delivery Contact Name <span class="required">*</span> 
                                                </label>
                                                <div class="col-sm-12">
                                                    {!! Form::text('s_delivery_name', ($member_shipping) ? $member_shipping->delivery_name : '', ['class' => 'form-control', 'id' => 's_delivery_name']) !!}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-sm-12">
                                                    Delivery Contact No. <span class="required">*</span> 
                                                </label>
                                                <div class="col-sm-12">
                                                    {!! Form::text('s_delivery_contact', ($member_shipping) ? $member_shipping->delivery_contact : '', ['class' => 'form-control', 'id' => 's_delivery_contact']) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>                               
                                </div>
                            </div>
                        </div>

                        {{-- #billing --}}
                        <div class="tab-pane " id="tab2">
                            <div class="col-sm-12 col-md-12 sm-box">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h3 class="main-title mb20">Billing Address</h3>
                                    </div>                                    
                                </div>
                                @if ( $total_amount > 20 )
                                <div class="row">
                                    <div class="col-md-12 mb10">
                                        <div class="form-group">
                                            <div class="col-sm-12">
                                                <input type="checkbox" id="same-shipping"> 
                                                <label for="same-shipping">Same as Shipping Address</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-12">
                                                Block No. <span class="form-required">*</span>
                                            </label>
                                            <div class="col-sm-12">
                                                {!! Form::text('b_block', ( $member_billing ) ? $member->MemberBilling->block : '', ['class' => 'form-control', 'id' => 'b_block']) !!}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-12">
                                                Street Name <span class="form-required">*</span> 
                                            </label>
                                            <div class="col-sm-12">
                                                {!! Form::text('b_street', ( $member_billing ) ? $member->MemberBilling->street : '', ['class' => 'form-control', 'id' => 'b_street']) !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-12">
                                                Unit No. <span class="form-required">*</span> 
                                            </label>
                                            <div class="col-sm-12">
                                                {!! Form::text('b_unit', ( $member_billing ) ? $member->MemberBilling->unit : '', ['class' => 'form-control', 'id' => 'b_unit']) !!}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-12">
                                                Building Name
                                            </label>
                                            <div class="col-sm-12">
                                                {!! Form::text('b_building', ( $member_billing ) ? $member->MemberBilling->building : '', ['class' => 'form-control', 'id' => 'b_building']) !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-12">
                                                City <span class="form-required">*</span> 
                                            </label>
                                            <div class="col-sm-12">
                                                {!! Form::text('b_city', ( $member_billing ) ? $member->MemberBilling->city : '', ['class' => 'form-control', 'id' => 'b_city']) !!}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-12">
                                                State <span class="form-required">*</span> 
                                            </label>
                                            <div class="col-sm-12">
                                                {!! Form::text('b_state', ( $member_billing ) ? $member->MemberBilling->state : '', ['class' => 'form-control', 'id' => 'b_state']) !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">            
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-12">Country<span class="form-required"> *</span></label>
                                            <!-- 193 is default of singapore -->
                                            <div class="col-sm-12">
                                                {!! Form::select('b_country', $countries, ( $member_billing ) ? $member->MemberBilling->country : 193, ['class' => 'form-control', 'id' => 'b_country', 'data-placeholder' => 'Choose a Country...']) !!}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-12">
                                                Contact No. <span class="form-required">*</span> 
                                            </label>
                                            <div class="col-sm-12">
                                                {!! Form::text('b_contact', ( $member_billing ) ? $member->MemberBilling->contact : '', ['class' => 'form-control', 'id' => 'b_contact']) !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-12">
                                                Postal Code
                                            </label> 
                                            <div class="col-sm-12">
                                                {!! Form::text('b_postal', ( $member_billing ) ? $member->MemberBilling->postal : '', ['class' => 'form-control', 'id' => 'b_postal']) !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>                               
                            </div>
                        </div>

                        <div class="tab-pane fade" id="tab3">
                            <div class="col-sm-12 col-md-12">
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th class="col-md-2">Product Image</th>
                                                <th class="col-md-4">Product Name</th>
                                                <th class="col-md-1">Quantity</th>
                                                <th class="col-md-1"><span class="pull-right">Price</span></th>
                                                <th class="col-md-1"><span class="pull-right">Amount</span></th>
                                                <th class="col-md-3"><span class="pull-right">Delivery Option</span></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($cart_products as $key => $product)
                                                <tr>
                                                    <td class="col-md-2">
                                                        <div class="pd_img_border">
                                                            <div class="pd_img_wrap">
                                                                <a href="{{ action('ProductController@Detail', $product['id']) }}">
                                                                    <img src="{{ imagePath('products', $product['product']->ProductGallery[0]->gallery) }}" alt="" class="img-responsive">
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="cart-product-name cart-pd-name">
                                                        <a href="{{ action('ProductController@Detail', $product['id']) }}"><p class="cart-title">{{ $product['name']}}
                                                        <span>( {{$product['product']->Partner->reg_companyname}} )</span></p></a>
                                                        @foreach( $product['variation'] as $title => $value )
                                                            @if( $value )
                                                                <div class="variation-info">
                                                                    <span class="variation-text-title">{{ ucfirst($title) }}:</span> {{ $value }}
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                    </td>
                                                    <td class="text-center">
                                                        <span>{{ $product['quantity'] }}</span>
                                                    </td>
                                                    <td align="right">
                                                        <p>{{ $currency_code . " " . number_format($product['product']->partner_price, 2) }}</p>
                                                    </td>
                                                    <td align="right">
                                                        <p>{{ $currency_code . " " . number_format($product['product']->partner_price * $product['quantity'], 2) }}</p>
                                                    </td>
                                                    <td class="delivery-option">
                                                        @if( $product['product']->product_type == 'Service' )
                                                            <p><input data-product_id="{{ $product['product']->id }}" type="radio" name="{{ $product['product']->id }}_shipping_option" id="{{ $product['product']->id }}_self_collect" class="product-shipping" value="self" data-product_quantity="{{ $product['quantity'] }}" checked> <label for="{{ $product['product']->id }}_self_collect">Self Collect</label></p>
                                                        @else
                                                            @if($product['product']->free_shipping==false)
                                                                @if(in_array('Self Collect',$product['product']->delivery_type ))
                                                                    <p><input data-product_id="{{ $product['product']->id }}" type="radio" name="{{ $product['product']->id }}_shipping_option" id="{{ $product['product']->id }}_self_collect" class="product-shipping" value="self" data-product_quantity="{{ $product['quantity'] }}" checked> <label for="{{ $product['product']->id }}_self_collect">Self Collect</label></p>
                                                                @endif
                                                                @if(in_array('Normal',$product['product']->delivery_type ))
                                                                    <p><input data-product_id="{{ $product['product']->id }}" type="radio" name="{{ $product['product']->id }}_shipping_option" id="{{ $product['product']->id }}_standard_shipping" class="product-shipping" value="standard" data-product_quantity="{{ $product['quantity'] }}" checked> <label for="{{ $product['product']->id }}_standard_shipping">Standard Shipping</label></p>
                                                                @endif
                                                                @if(in_array('Express',$product['product']->delivery_type ))
                                                                    <p><input data-product_id="{{ $product['product']->id }}" type="radio" name="{{ $product['product']->id }}_shipping_option" id="{{ $product['product']->id }}_express_shipping" class="product-shipping" value="express" data-product_quantity="{{ $product['quantity'] }}" checked> <label for="{{ $product['product']->id }}_express_shipping">Express Shipping</label></p>
                                                                @endif
                                                            @else

                                                                <p>
                                                                    <input data-product_id="{{ $product['product']->id }}" type="radio" name="{{ $product['product']->id }}_shipping_option" id="{{ $product['product']->id }}_free_shipping" class="product-shipping" value="free" data-product_quantity="{{ $product['quantity'] }}" checked> <label for="{{ $product['product']->id }}_free_shipping">Free Shipping</label>
                                                                </p>

                                                            @endif
                                                        @endif
                                                    </td>
                                                </tr>
                                                
                                                <!-- if product type is Service , we have to show booking details modal box -->     

                                                @if($product['product']->product_type=='Service')
                                                    <tr>
                                                        <td colspan="7">
                                                            <a href="#booking-detail-{{ $key }}" data-toggle="modal" class="col-lg-12">
                                                                <i class="fa fa-edit"></i> Booking Detail
                                                            </a>
                                                            @include('payment.partials.booking-modal',['product'=>$product,'key' => $key, 'booking' => $product['booking']]) 
                                                        </td>
                                                    </tr>
                                                @endif

                                                <!-- check there is addon item for this product and iterate it -->
                                                @if(count($product["addons"])>0)
                                                    @foreach($product["addons"] as $key => $addon)
                                                        <tr class="addon-row">
                                                            <td class="text-right"> 
                                                                <strong style="color: #3d566e;font-size: 13px;font-weight: 600;text-decoration: underline;margin-bottom: 10px;">Add on</strong>
                                                            </td>
                                                            <td>
                                                                <span>{{$addon['addon']->product_name}}</span>
                                                            </td>
                                                            <td class="text-center"> 
                                                                <span>{{ $addon['quantity'] }}</span> 
                                                            </td>
                                                            <td align="right">
                                                                <span class="pull-right">
                                                                    @if(!$addon['addon']->is_complementary)
                                                                        <span>
                                                                            {{ $currency_code . " " . number_format($addon['addon']->up_price, 2) }}
                                                                        </span>
                                                                    @else
                                                                        {{ $currency_code }} 0.00
                                                                    @endif
                                                                </span>
                                                            </td>
                                                            <td align="right">
                                                                <span class="pull-right">
                                                                    <span>
                                                                        @if(!$addon['addon']->is_complementary)
                                                                           {{ $currency_code . " " . number_format(($addon['addon']->up_price * $addon['quantity']), 2) }}
                                                                        @else
                                                                            {{ $currency_code }} 0.00
                                                                        @endif
                                                                    </span>
                                                                </span>
                                                            </td>   
                                                            <td></td>                                                 
                                                        </tr>
                                                    @endforeach
                                                @endif
                                                
                                            @endforeach
                                            <tr class="total_price_border">
                                                <td colspan="5" align="right">
                                                    <span class="color_green"><b>Subtotal</b></span>
                                                </td>
                                                <td align="right">
                                                    <span>{{ $currency_code . " " . number_format($total_amount, 2) }}</span>
                                                </td>
                                            </tr>
                                            <tr class="">
                                                <td colspan="5" align="right">
                                                    <span class="color_green"><b>Shipping Fees</b></span>
                                                </td>
                                                <td align="right">
                                                    {{ $currency_code }} <span id="shipping-fee">{{ number_format($shipping_fees, 2) }}</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="5" align="right">
                                                    <span class="color_green"><b>Order Total</b></span>
                                                </td>
                                                <td align="right">
                                                    <span class="color_red"><strong>{{ $currency_code }} <span id="total-amount">{{ number_format($total_amount + $shipping_fees, 2) }}</span></strong></span>
                                                </td>
                                            </tr>

                                            @if( $currency_code != 'SGD' )
                                                <tr>
                                                    <td colspan="5" align="right">
                                                        <strong data-toggle="tooltip" data-placement="right" title="All purchases on this marketplace will be in SGD">Total Charged <i class="fa fa-question-circle"></i></strong>
                                                    </td>
                                                    <td align="right">
                                                                                                                <span class="color_red"><strong>SGD <span id="charged-sgd">{{ number_format(round($charged_sgd, 2), 2) }}</span></strong></span>
                                                    </td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>

                                    <div class="col-md-12 alert alert-danger alert-dismissable" id="error-insufficient-point">
                                        Your current points are insufficient to process your request.
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-new m-right rounded pull-right">Submit Order</button>
                                    <a href="{{ url('shop') }}" class="btn btn-new-o m-right rounded pull-right">Continue Shopping</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- <div class="col-md-12">       
                        <ul class="pager wizard">
                            <li class="previous first" style="display:none;"><a href="#">First</a></li>
                            <li class="previous"><a href="#">Previous</a></li>
                            <li class="next last" style="display:none;"><a href="#">Last</a></li>
                            <li class="next"><a href="#">Next</a></li>
                        </ul>
                    </div> --}}
                </div>
            </div>
        </div>
    </section>

    <!-- footer links -->
    @include('site.bottom-menu')

    <div class="ajax-loader-modal"><!-- Place at bottom of page --></div>

@stop

@section('footer')
    <script type="text/javascript" src="{{ asset('metronic/global/plugins/select2/select2.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('site/js/bootstrap-wizard-form.min.js') }}"></script>
    <script>
        $body = $("body");

        var _exchage_sgd   = {{ $currency_code == 'SGD' ? 'false' : 'true' }};
        var _exchage_rate   = {{ $exchange_rate ? $exchange_rate : 'false' }};
        var _exchage_amount   = {{ $exchange_amount ? $exchange_amount : 'false' }};

        $(document).ready(function() {

            $( document ).ajaxStart(function() {
                $body.addClass("loading");    
            });
            $( document ).ajaxStop(function() {
                $body.removeClass("loading"); 
            });
              

            $('#b_country, #s_country').select2();

            $('#error-insufficient-point').hide();

            shipping_fees = parseFloat("{{ $shipping_fees }}");

            function showInsufficientPointError() {
                $('#error-insufficient-point').show().delay(2000).fadeOut();
            }

            function resetSpendPoint() {
                $('#total-amount').html( "{{ number_format($total_amount + $shipping_fees, 2) }}" );
                $('#point-balance').html( parseFloat("{{ $member_poing = 0 }}") )
                $('#point-to-cash').html('');
                return;
            }

            var calculate= function(point) {
                var original_point = parseFloat("{{ $member_poing = 0 }}");
                var original_amount = parseFloat("{{ $total_amount }}");
                var shipping_fees = window.shipping_fees;
                var member_point = parseFloat("{{ $member_poing = 0 }}");
                var spend_points = parseFloat(point);
                var total_amount = parseFloat(original_amount+shipping_fees);
                if( spend_points > member_point ) {
                    // alert('Your current points are insufficient to process your request.');
                    showInsufficientPointError();
                    resetSpendPoint();
                    setTimeout(function(){
                        slider.update({
                            from: 0
                        });
                    },500);
                    return false;
                }

                if( isNaN(spend_points) || spend_points == 0 ) {
                    $('#total-amount').html( "{{ number_format($total_amount + $shipping_fees, 2) }}" );
                    $('#point-balance').html( original_point )
                    $('#point-to-cash').html('');
                    return;
                }

                var point_to_cash = ( spend_points * 0.01 ).toFixed(2);
                // point-to-cash
                // point-balance
                $('#point-to-cash').html( '$ ' + point_to_cash );
                $('#point-balance').html( member_point - spend_points )
                $('#total-amount').html( (total_amount - point_to_cash).toFixed(2) );
                $('#your-point');
            };
            $('#spend_points').on('change', function() {
                var original_point = parseFloat("{{ $member_poing = 0 }}");
                var original_amount = parseFloat("{{ $total_amount }}");
                var member_point = parseFloat("{{ $member_poing = 0 }}");
                var spend_points = parseFloat($(this).val());
                var total_amount = parseFloat($('#total-amount').html());
                {{-- var point_value  = parseFloat("{{ $point->point_value }}"); --}}
                var point_value  = parseFloat("{{ 0 }}");
                if( spend_points > member_point ) {
                    alert('Your current points are insufficient to process your request.');
                    $(this).val('');
                    return false;
                }

                if( isNaN(spend_points) || spend_points == 0 ) {
                    $('#total-amount').html( "{{ $total_amount }}" );
                    $('#point-balance').html( original_point )
                    $('#point-to-cash').html('');
                    return;
                }

                var point_to_cash = spend_points * point_value;
                // point-to-cash
                // point-balance
                $('#point-to-cash').html( '$ ' + (point_to_cash).toFixed(2) );
                $('#point-balance').html( (member_point - spend_points).toFixed(2) )
                $('#total-amount').html( (total_amount - point_to_cash).toFixed(2) );
                $('#your-point');
            });
            // Prevent alphanumeric character in point_spend
            $("#spend_points, #b_contact, #s_contact").keydown(function (e) {
                // Allow: backspace, delete, tab, escape, enter and .
                if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
                     // Allow: Ctrl+A, Command+A
                    (e.keyCode == 65 && ( e.ctrlKey === true || e.metaKey === true ) ) || 
                     // Allow: home, end, left, right, down, up
                    (e.keyCode >= 35 && e.keyCode <= 40)) {
                         // let it happen, don't do anything
                         return;
                }
                // Ensure that it is a number and stop the keypress
                if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                    e.preventDefault();
                }
            });

            /**
             * User select shipping option
             */
            $('.shipping-options').on('change', function() {
                var shipping_option = $(this).val();

                if( shipping_option == 'self_collect' ) {
                    window.location = baseurl + '/checkout/process?so=self';
                    // $('#shipping-wrap').fadeOut();
                } else if ( shipping_option == 'express_delivery'){
                    window.location = baseurl + '/checkout/process?so=express';
                } else {
                    window.location = baseurl + '/checkout/process';
                    // $('#shipping-wrap').fadeIn();
                }

            });

            $('#same-shipping').on('click', function() {
                if( $(this).is(':checked') ) {
                    var shipping = {
                        'block'    : $('#s_block').val(),
                        'street'   : $('#s_street').val(),
                        'unit'     : $('#s_unit').val(),
                        'building' : $('#s_building').val(),
                        'country'  : $('#s_country').val(),
                        'city'     : $('#s_city').val(),
                        'state'    : $('#s_state').val(),
                        'postal'   : $('#s_postal').val(),
                        'contact' : $('#s_delivery_contact').val(),
                    };
                    $('#b_contact').val( shipping.contact);
                    $('#b_block').val( shipping.block );
                    $('#b_street').val( shipping.street );
                    $('#b_unit').val( shipping.unit );
                    $('#b_building').val( shipping.building );
                    $('#b_postal').val( shipping.postal );
                    $("#b_country").select2("val", shipping.country);
                    $('#b_state').val( shipping.state );
                    $('#b_city').val( shipping.city );
                }
            });

            $.validator.addMethod(
                "regex",
                function(value, element, regexp) {
                    var re = new RegExp(regexp);
                    return this.optional(element) || re.test(value);
                },
                "Please check your input."
            );

            var $validator = $("#checkout").validate({
                rules: {
                    shipping:{
                        required: true
                    },
                    s_block: {
                        required: true
                    },
                    s_street: {
                        required: true
                    },
                    s_unit: {
                        required: true
                    },
                    s_city: {
                        required: true,
                        regex: /^[a-zA-Z\s]+$/
                    },
                    s_state: {
                        required: true,
                        regex: /^[a-zA-Z\s]+$/
                    },
                    s_delivery_name: {
                        required: true
                    },
                    s_delivery_contact: {
                        required: true,
                        number: true
                    },
                    b_block: {
                        required: true
                    },
                    b_street: {
                        required: true
                    },
                    b_unit: {
                        required: true
                    },
                    b_city: {
                        required: true,
                        regex: /^[a-zA-Z\s]+$/
                    },
                    b_state: {
                        required: true,
                        regex: /^[a-zA-Z\s]+$/
                    },
                    b_delivery_name: {
                        required: true
                    },
                    b_contact: {
                        required: true,
                        number: true
                    },
                    b_postal: {
                        number: true
                    }
                },
                messages: {
                    s_city: {
                        regex: "Please enter alphabets only."
                    },
                    s_state: {
                        regex: "Please enter alphabets only."
                    },
                    s_delivery_contact: {
                        number: "Please enter numeric only."
                    },
                    b_state: {
                        regex: "Please enter alphabets only."
                    },
                    b_contact: {
                        number: "Please enter numeric only."
                    },
                    b_postal: {
                        number: "Please enter numeric only."
                    }
                }
            });  

            /* Wizard plugin initialize */
            $('#rootwizard').bootstrapWizard({
                'onNext': function(tab, navigation, index) {
                    var $valid = $("#checkout").valid();
                    if(!$valid) {
                        $validator.focusInvalid();
                        return false;
                    }
                },
                'onTabClick': function(tab, navigation, index) {
                    var $valid = $("#checkout").valid();
                    if(!$valid) {
                        $validator.focusInvalid();
                        return false;
                    }
                },
                'nextSelector': '.button-next', 
                'previousSelector': '.button-previous'
            });

            function updateShippingFee(shipping) {
                var sub_total = parseFloat("{{ $total_amount }}"),
                    total_amount = sub_total + shipping;

                window.shipping_fees = shipping;

                $('#total-amount').html( (total_amount).toFixed(2) );
                $('#shipping-fee').html( (shipping).toFixed(2) );
                $('#spend_points').val(0);

                /**
                 * If currency exchange to SGD is required, need to do currency conversion.
                 */
                if( _exchage_sgd ) {
                    var charged_sgd = (total_amount * _exchage_rate) / _exchage_amount;
                    $('#charged-sgd').html((charged_sgd).toFixed(2));
                }
            }

            $('.product-shipping').on('change', function() {
                var selectedShipping = $('input:radio.product-shipping:checked');

                var products = [];

                selectedShipping.each(function() {
                    products.push({
                        product_id: $(this).data('product_id'),
                        shipping_option: $(this).val(),
                        quantity: $(this).data('product_quantity')
                    });
                });

                $.post( baseurl + '/get-shipping-fee', {_token: "{{ csrf_token() }}", products: JSON.stringify(products)})
                    .done(function( fee ) {
                        updateShippingFee(parseFloat(fee))
                });
            });

        });

    </script>
@stop