@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')
@php
    $minChild = $activeChildrenNum < 5 ? 5 : $activeChildrenNum;
@endphp
<div class="account-pages my-2">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12">
                <form action="{{ route('billing.create-checkout-session') }}" method="POST">
                    @csrf
                    <h5 class="pb-3">Purchase a 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">The number of active children is {{$activeChildrenNum}}.</p>
                                    <p class="text-danger font-size-16">Add or delete child profiles to change the number of active children.</p>
                                    <hr>
                                    <h5 class="font-size-18 pt-3 pb-3">Select a plan</h5>
                                    <div class="custom-control-inline mb-3">
                                        <div class="custom-control custom-radio mb-2 mr-3">
                                            <input type="radio" id="customRadio110" name="interval" class="custom-control-input" value="monthly" checked>
                                            <label class="custom-control-label" for="customRadio110">Monthly</label>
                                        </div>
                                        <div class="custom-control custom-radio mb-2 mr-3">
                                            <input type="radio" id="customRadio111" name="interval" class="custom-control-input" value="yearly">
                                            <label class="custom-control-label" for="customRadio111">Yearly
                                                @php $is_show = false; $currentSchool1 = Session::get('currentSchool'); @endphp
                                                @if( isset($currentSchool1->country) && !empty($currentSchool1->country) && ($currentSchool1->country->reference == '5ef4effb725c4f45b002334e')) {{-- Ireland --}}
                                                    @php $is_show = true; @endphp
                                                @endif
                                                @if( $is_show )
                                                <span class="text-success">(15% discount when you pay yearly)</span>
                                                @endif
                                            </label>
                                        </div>
                                    </div>
                                    <h5 class="font-size-18 py-3">0-5 children is charged at one rate</h5>
                                    <div class="col-3">
                                        <div class="form-group">
                                            <input type="text" class="form-control input-sm" id="childrenNum" name="childrenNum" value="{{$minChild}}" required>
                                        </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>
    var activeChildrenNum = parseInt({{$activeChildrenNum}});
    var minChild = parseInt({{$minChild}});

    function calculatePrice(interval, childrenNum, coupon=null){

        if(childrenNum <= activeChildrenNum) {
            $('.bootstrap-touchspin-down').attr('data-toggle', 'tooltip').attr('title', `You have added ${activeChildrenNum} children in your school. \n Therefore, you can't decrease this`).attr('data-placement', 'bottom');
            $('[data-toggle="tooltip"]').tooltip();
        } else if(minChild >= childrenNum && minChild > activeChildrenNum) {
            $('.bootstrap-touchspin-down').attr('data-toggle', 'tooltip').attr('title', `You are charged for a minimum of ${minChild} children per month or per year. \n Therefore, you can't decrease this`).attr('data-placement', 'bottom');
            $('[data-toggle="tooltip"]').tooltip();
        } else {
            $('[data-toggle="tooltip"]').tooltip('dispose');
        }

        $.ajax({
            method: "POST",
            url: "{{route('billing.calculate-price')}}",
            data: { 
                "_token": "{{ csrf_token() }}",
                route: "{{ request()->route()->getName() }}",
                interval: interval,
                childrenNum: childrenNum, 
                coupon: coupon
            }
        })
        .done(function( response ) {
            console.log(response);
            $("#summary").show();
            $("#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);
            $("#payButtonText").text("Pay "+response.total);
            if (response.discount){
                $("#couponDiscount").html("Coupon applied: "+response.discountPromo+' <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();
            }
        })
        .fail(function( error ) {
            errorToast(error.responseJSON.error)
        })
    }

    $(document).ready(function(){
        calculatePrice($("input[name='interval']:checked").val(), $("#childrenNum").val(), null)
        
        $("#childrenNum").TouchSpin({
            initval: activeChildrenNum,
            min: minChild,
            max: 10000,
            step: 1,
            boostat: 5,
            maxboostedstep: 10,
            buttondown_class: 'btn btn-light-green',
            buttonup_class: 'btn btn-light-green',
        }).on('touchspin.on.stopspin', function (){
            calculatePrice($("input[name='interval']:checked").val(), $("#childrenNum").val(), $("#coupon").val())
        }).on('touchspin.on.min', function (){
            calculatePrice($("input[name='interval']:checked").val(), $("#childrenNum").val(), $("#coupon").val())
        })

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

        $("input[name='interval']").change(function(e){
            calculatePrice($("input[name='interval']:checked").val(), $("#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($("input[name='interval']:checked").val(), $("#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($("input[name='interval']:checked").val(), $("#childrenNum").val(), null)
        })
    });
</script>
@endsection