@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-upgrade-plan-session') }}" method="POST">
                    @csrf
                    <h5 class="pb-3">Upgrade from Monthly to Yearly 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="font-size-16">There are 15 days left in yor monthly plan and therefore, we will only charge you for 350 days.</p>
                                    <p class="font-size-16">You can also add more children when upgrading to yearly plan.</p>
                                    <hr>
                                    <h5 class="font-size-18 py-3">Add more children to yearly plan</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>
                                    <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>
                                    <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"));
            $("#subTotal").html(response.childrenNum+' children <span class="pull-right">'+response.subTotal+'</span>');
            $("#total").text(response.total);
            $("#totalRaw").val(response.totalRaw);
            $("#currency").val(response.currency);
            $("#payButtonText").text("Pay "+response.total);
            if (response.discount){
                $("#couponDiscount").html('Discount <span class="pull-right text-danger">'+response.discount+'</span>');
                $("#couponDiscount").show();
            } else {
                $("#couponDiscount").hide();
            }
            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();
            }
            // console.log( "Data Saved: " + response );
        })
        .fail(function( error ) {
            errorToast(error.responseJSON.error)
        })
    }
    $(document).ready(function(){
        calculatePrice(0, null)

        $("#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