@extends('layouts.horizontal', ['withLoader' => true])
@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.2.5/jquery.bootstrap-touchspin.min.css">
<style>
    /* .btn {
        color: #1e9f5c !important;
    } */

    .btn-light-green {
        color: #1e9f5c !important;
        background-color: #e7f6ef !important;
    }

    .btn-light-green:hover {
        background-color: #e2e6ea !important;
        border-color: #dae0e5 !important;
    }

    .card-price {
        font-size: 24px;
        font-weight: 500;
    }

    .plan-title{
        font-size: 18px;
        font-weight: 500;
    }

    .card-special {
        position: absolute;
        background-color: white;
        color: #1e9f5c;
        padding: 5px 10px 5px 10px;
        border-radius: 30px;
        width: 285px;
        left: 50%;
        margin-left: -142px;
        /* left: 28px;
        right: 28px; */
        top: -15px;
        font-weight: 500;
    }
    #childrenNum {
        font-size: 22px;
        text-align: center;
    }
</style>
@endsection

@section('content')
<div class="account-pages my-2">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12">
                <form action="{{ route('billing.create-add-children-session') }}" method="POST">
                    @csrf
                    <h5 class="pb-3">Add more children to existing plan</h5>
                    <div class="row">
                        <div class="col-12 col-md-6 col-lg-8">
                            <div class="card h-100">
                                <div class="card-body">
                                    <p class="text-success font-size-16">You can add more children but they will be added to your existing plan.</p>
                                    <p class="font-size-16">Example: If there are 15 days left for in yor existing monthly plan then you will only be charged 50% of the amount for the new children you're adding.</p>
                                    <hr>
                                    <h5 class="font-size-18 py-3">Number of new children</h5>
                                    <div class="col-3">
                                        <div class="form-group">
                                            <input type="text" class="form-control input-sm" id="childrenNum" name="childrenNum">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-lg-4" id="summary" style="display:none">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h5 class="font-size-18 py-3">Summary</h5>
                                    <p class="">Plan: <span class="pull-right" id="plan"></span></p>
                                    <p class="">Price: <span class="pull-right" id="price"></span></p>
                                    <p class="pb-2">Billing date: <span class="pull-right" id="billingDate"></span></p>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control pb-2" id="couponInput" placeholder="Enter code" aria-label="Enter code" aria-describedby="basic-addon2">
                                        <input type="hidden" id="coupon" name="coupon">
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-success addCouponButton" type="button">Apply</button>
                                        </div>
                                    </div>
                                    <hr class="hr-line">
                                    <p class="py-2" id="subTotal"><span class="pull-right"></span></p>
                                    <p class="pb-2" style="display: none" id="proration"></p>
                                    <p class="pb-2" style="display: none" id="couponDiscount"></p>
                                    <p class="pb-2" style="display: none" id="tax"></p>
                                    <input type="hidden" id="totalRaw" name="totalRaw">
                                    <input type="hidden" id="currency" name="currency">
                                    <hr>
                                    <p class="py-2 text-bold">Total <span class="pull-right text-success text-bold" id="total"></span></p>
                                    <!-- <form action="{{ route('billing.create-checkout-session') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="priceId" value="price_1JPZgJKZqAoUURWpVP16Gxrg"> -->
                                        <button type="submit" class="btn btn-success"><span class="px-3" id="payButtonText"></span></button>
                                    <!-- </form> -->
                                    <p class="pt-4 font-size-12 text-muted">Please Note: Your subscription will be set to renew automatically at the end of your subscription period for the same length as your current subscription. For example, if you choose a monthly subscription, you will be billed monthly and it will automatically continue, unless you notify us (<a href="mailto:hello@teachkloud.com">hello@teachkloud.com</a>), at least 72 hours before the renewal date AND cancel the subscription in the "TeachKloud Subscription" section. For all subscriptions, you must either change or cancel your subscription before it renews, in order to avoid billing of subscription fees for the renewal term. Your subscription can be managed at any time in the "TeachKloud Subscription" section.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
    <!-- end container -->
</div>
<!-- end account-pages -->
@endsection

@section('script-bottom')

<script defer src="{{ Helper::assets('assets/libs/moment/moment.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/sweetalert/sweetalert.min.js') }}" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.2.5/jquery.bootstrap-touchspin.min.js"></script>
<script>
    function calculatePrice( childrenNum, coupon=null){
        $.ajax({
            method: "POST",
            url: "{{route('billing.calculate-price')}}",
            data: { 
                "_token": "{{ csrf_token() }}",
                route: "{{ request()->route()->getName() }}",
                childrenNum: childrenNum, 
                coupon: coupon
            }
        })
        .done(function( response ) {
            $("#summary").show();
            console.log(response);
            $("#plan").text(response.interval[0].toUpperCase() + response.interval.slice(1));
            $("#price").text(response.unitPrice+' per '+response.unitLabel);
            $("#billingDate").text(moment(response.startBillingPeriod).format("DD/MM/YYYY")+" to "+moment(response.endBillingPeriod).format("DD/MM/YYYY"));
            $("#total").text(response.total);
            $("#totalRaw").val(response.totalRaw);
            $("#currency").val(response.currency);
            $("#payButtonText").text("Pay "+response.total);

            if(response.priceAdjusted == true){
                $("#proration").hide();
                $("#subTotal").hide();
                $("#tax").hide();
                $(".hr-line").hide();
            } else {
                $("#subTotal").html(response.childrenNum+' children <span class="pull-right">'+response.subTotal+'</span>').show();
                if (response.proratedAmount){
                    $("#proration").html("Proration: "+response.proratedPercent+' <span class="pull-right text-danger">'+response.proratedAmount+'</span>');
                    $("#proration").show();
                } else {
                    $("#proration").hide();
                }

                if (response.taxAmount){
                    $("#tax").html("Tax: "+response.taxPercent+' <span class="pull-right">'+response.taxAmount+'</span>');
                    $("#tax").show();
                } else {
                    $("#tax").hide();
                }
                $(".hr-line").show();
            }

            if (response.discount){
                $("#couponDiscount").html("Coupon applied: "+response.discountPromo+' <span class="pull-right text-danger">'+response.discount+'</span>');
                $("#couponDiscount").show();
                $(".hr-line").show();
            } else {
                $("#couponDiscount").hide();
            }
        })
        .fail(function( error ) {
            errorToast(error.responseJSON.error)
        })
    }

    $(document).ready(function(){
        $("#childrenNum").TouchSpin({
            initval: 0,
            min: 0,
            max: 10000,
            step: 1,
            boostat: 5,
            maxboostedstep: 10,
            buttondown_class: 'btn btn-light-green',
            buttonup_class: 'btn btn-light-green',
        });

        $("#childrenNum").change(function(e){
            calculatePrice($("#childrenNum").val(), $("#coupon").val())
        })

        $("input[name='interval']").change(function(e){
            calculatePrice($("#childrenNum").val(), $("#coupon").val())
        })

        $(document).on('click', ".addCouponButton", function(e){
            e.preventDefault()
            var couponValue = $('#couponInput').val().trim().toUpperCase()
            if (couponValue.length > 0){
                $('#coupon').val(couponValue)
                $(this).removeClass('addCouponButton')
                $(this).removeClass('btn-outline-success')
                $(this).addClass('removeCouponButton')
                $(this).addClass('btn-outline-danger')
                $(this).text('Remove')
                calculatePrice($("#childrenNum").val(), couponValue)
            }
        })
        
        $(document).on('click', ".removeCouponButton", function(e){
            e.preventDefault()
            $('#couponInput').val('')
            $('#coupon').val('')
            $(this).removeClass('removeCouponButton')
            $(this).removeClass('btn-outline-danger')
            $(this).addClass('addCouponButton')
            $(this).addClass('btn-outline-success')
            $(this).text('Apply')

            calculatePrice($("#childrenNum").val(), null)
        })
    });
</script>
@endsection