@extends('layout.user')
@section('content')

<div class="page-title">
    <div class="left-column">
        <h4>Current Plan: {{ucwords(str_replace ('_', ' ', $subscription?->plan ?? ''))}}</h4>
        @if(\Carbon\Carbon::parse($subscription->ends_at)->format('m/d/y') > now()->format('m/d/Y'))
            <p>Status: <span   style="color: #449D44">ACTIVE</span></p>
        @else
            <p>Status: <span   style="color: #FF5D5C">EXPIRED</span></p>
        @endif
{{--        <h5>Status: {{\Carbon\Carbon::parse($subscription?->ends_at)->format('m/d/y') > now()->format('m/d/Y') ? 'ACTIVE' : 'EXPIRED'}}</h5>--}}
        <h6>Expiration Date: {{\Carbon\Carbon::parse($subscription?->ends_at)->format('m/d/y')}}</h6>
    </div>
</div>
<section class="contact-form">
    <div class="member-plan row">


        @if(count($memberships)>0)
             @foreach($memberships as $membership)
                @if($membership->is_active == 1)
                    <div class="col-md-4">
                         <div class="plan-column text-center">
                        <div class="plan-inner-colum">
                            <div class="plan-saving">
                                @if($membership->top_bar_text != '')
                                    <span>{{$membership->top_bar_text}}</span>
                                @endif
                            </div>
                            <div class="plan-head">
                                <h6>{{$membership->name}}</h6>

                                    @if($membership->amount == 0)
                                    <h1 class="frees">
                                        Free
                                    </h1>
                                    @else
                                    <h1>${{$membership->amount}}</h1>
                                    <p>{{ucwords($membership->interval)}}</p>
                                    @endif

                            </div>
                            <div class="plan-body">
                                <p>
                                    {{ucwords($membership->description)}}
                                </p>
                            </div>

                            <div class="planfooter">
                                @if($subscription->plan == $membership->interval)
                                    @if(\Carbon\Carbon::parse($subscription->ends_at)->format('m/d/y') > now()->format('m/d/Y'))
                                    @if($subscription->plan == \App\AppConstants::PLAN_RENEWAL)
                                            <button class="btn-blue" onclick="paymentForm('{{$membership->interval}}', '{{($membership->id)}}')" data-toggle="modal"data-target="#payment_modal" >Renew</button>
                                        @else
                                            <button class="btn-add ">Subscribed</button>
                                        @endif
                                    @else
                                        <button class="btn-blue ">Expired</button>
                                    @endif
                                @else
                                    @if($membership->interval == \App\AppConstants::PLAN_FREE)
                                        <button class="btn-blue ">Expired</button>
                                    @else
                                        <button class="btn-blue" onclick="paymentForm('{{$membership->interval}}', '{{($membership->id)}}')" data-toggle="modal"data-target="#payment_modal" >Buy Now</button>
                                    @endif
                                @endif
                            </div>
                        </div>
                    </div>
                    </div>


                @endif
            @endforeach
        @endif

    </div>
{{--    <div class="memer-quote">--}}
{{--        <p>Licenses do not expire , If you don't use all of them on your <br/>current deployment, they will be available on your next one.</p>--}}
{{--        <ul>--}}
{{--            <li>Each license is good for one claim.</li>--}}
{{--            <li>License are non-refundable.</li>--}}
{{--            <li>Licenses cannot be transferred.</li>--}}
{{--        </ul>--}}
{{--    </div>--}}
</section>
@include('modal.payment_modal')


<script nonce="{{config('app.nonce')}}">

    function paymentForm(type, priceId){
        var stripe = Stripe('{{env('STRIPE_PUBLIC_KEY')}}');
        var elements = stripe.elements();

        var style = {
            base: {
                iconColor: '#666EE8',
                color: '#31325F',
                lineHeight: '20px',
                fontWeight: 300,
                fontFamily: 'Helvetica Neue',
                fontSize: '15px',

                '::placeholder': {
                    color: '#CFD7E0',
                },
            },
        };

        var cardNumberElement = elements.create('cardNumber', {
            style: style
        });
        cardNumberElement.mount('#card-number-element');

        var cardExpiryElement = elements.create('cardExpiry', {
            style: style
        });
        cardExpiryElement.mount('#card-expiry-element');

        var cardCvcElement = elements.create('cardCvc', {
            style: style
        });
        cardCvcElement.mount('#card-cvc-element');


        function setOutcome(result) {
            console.log(result);
            // var successElement = document.querySelector('.success');
            var errorElement = document.querySelector('.error');
            // successElement.classList.remove('visible');
            errorElement.classList.remove('visible');

            if (result != null){
                if (result.token) {
                    if(result.token.id) {
                        // successElement.querySelector('.token').textContent = result.id;
                        // successElement.classList.add('visible');
                        var form = document.querySelector('#payment-form-final');
                        form.querySelector('input[name="stripe_token"]').setAttribute('value', result.token.id);
                        form.querySelector('input[name="type"]').setAttribute('value', type);
                        form.querySelector('input[name="priceId"]').setAttribute('value', priceId);
                        form.submit();
                    }else{
                        $('#spinner').modal('hide');
                        errorElement.textContent = 'Invalid Card Entered.';
                        errorElement.classList.add('visible');
                    }
                } else if (result.error) {
                    $('#spinner').modal('hide');

                    errorElement.textContent = result.error.message;
                    errorElement.classList.add('visible');
                }else{
                    $('#spinner').modal('hide');
                }
            }else{
                $('#spinner').modal('hide');
                errorElement.textContent = 'No response from stripe.';
                errorElement.classList.add('visible');
            }


        }

        var cardBrandToPfClass = {
            'visa': 'pf-visa',
            'mastercard': 'pf-mastercard',
            'amex': 'pf-american-express',
            'discover': 'pf-discover',
            'diners': 'pf-diners',
            'jcb': 'pf-jcb',
            'unknown': 'pf-credit-card',
        }

        function setBrandIcon(brand) {
            var brandIconElement = document.getElementById('brand-icon');
            var pfClass = 'pf-credit-card';
            if (brand in cardBrandToPfClass) {
                pfClass = cardBrandToPfClass[brand];
            }
            for (var i = brandIconElement.classList.length - 1; i >= 0; i--) {
                brandIconElement.classList.remove(brandIconElement.classList[i]);
            }
            brandIconElement.classList.add('pf');
            brandIconElement.classList.add(pfClass);
        }

        cardNumberElement.on('change', function(event) {
            // Switch brand logo
            if (event.brand) {
                setBrandIcon(event.brand);
            }

            setOutcome(event);
        });

        document.querySelector('form').addEventListener('submit', function(e) {
            e.preventDefault();
            let code =$('#promo_code').val();
            if(code != ''){

                $('#payment_button').attr('disable',true);
                $('#spinner').modal('show');

                $.ajax({
                    type: "GET",
                    url: `${baseUrl}policyholder/promo_code_validate/${code}`,
                    success: function(data) {
                        // showSuccessToaster(`<p>${data.successMessage}</p>`);

                        stripe.createToken(
                            // type: 'card',
                          cardNumberElement
                            // billing_details: options
                        ).then(setOutcome);
                    },
                    error: function (err) {
                        $('#spinner').modal('hide');
                        var err = err.responseJSON;
                        showErrorToaster(`<p>${err.errorMessage}</p>`);
                    }
                });
            }
            else{
                $('#spinner').modal('show');

                stripe.createToken(
                    // type: 'card',
                  cardNumberElement
                    // billing_details: options
                ).then(setOutcome);
            }
        });


        setTimeout(function(){

            $('#payment_modal').modal('show');

        },3000);
    }
</script>
@endsection