@extends('frontend.layouts.app_minimal')

@section('title', app_name() . ' | ' . __('labels.frontend.auth.register_box_title'))

@section('content')

    <div class="row justify-content-center align-items-center">
        <div class="col col-sm-8 align-self-center">

            <div class="card card-body" style="margin-bottom: 10px">
                <div class="g_et_al_header2 text-center" style="padding-bottom:20px; color: orangered">
                    Cancel plan
                </div>
                <div class="g_et_al_header3 text-center" style="padding-bottom:20px">
                    Plan details-
                    currently {{$plan?$logged_in_user->subscriptions->first()->name:' Free plan'}}
                </div>

                <div class="row">

                    <div class="{{$plan?'col':'col-md-6'}}">

                        <a href="{{route('frontend.user.account')}}"
                           class="btn btn-outline-success btn-block"><i class="fas fa-arrow-left">

                            </i>Stay on current plan</a>
                    </div>
                    @if($plan)

                        <div class="col-md-6">
                            <button data-toggle="modal" data-target="#disclaimer" class="btn btn-danger btn-block"
                                    id="update_plan_but">
                                Cancel plan<i class="fas fa-arrow-right"></i></button>
                        </div>

                    @endif
                </div>
            </div>


        </div><!-- row -->
        {{ html()->form('POST', route('frontend.user.cancelplan'))->id('cancel-form')->open() }}
        {{ html()->form()->close() }}
    </div>


@endsection

@section('dialogs')

    <div id="disclaimer" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="additemtitle">Are you sure?</h4>

                </div>
                <div class="modal-body">
                    <div class="row" style="padding-bottom: 20px">
                        <div class="col">
                            By cancelling, you will still have read-only access to all your current boards, but you will
                            lose access to forums unless you are a member of a lab.<br/>
                            Some other info here.<br/>Payment should cease immediately
                        </div>
                    </div>
                    <div class="row">
                    </div>
                    <div class="row">
                        <div class="col">
                            <button class="btn btn-danger btn-block" onclick="handleConfirmation()">Yes, I want to
                                cancel
                            </button>
                        </div>
                        <div class="col">
                            <button class="btn btn-primary btn-block" onclick="handleCancel()">Keep my subscription
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{{--    <div id="confirmation" class="modal fade" data-backdrop="static" role="dialog">--}}
{{--        <div class="modal-dialog">--}}
{{--            <div class="modal-content">--}}
{{--                <div class="modal-header">--}}
{{--                    <h4 class="modal-title">Plan update <span id="plan_update_status"></span></h4>--}}

{{--                </div>--}}
{{--                <div class="modal-body">--}}
{{--                    <button class="btn btn-primary" onclick="handleConfirmationClose()">OK</button>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}


    <div class="modal fade load-spinner" data-backdrop="static" data-keyboard="false" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <i class="fas fa-circle-notch fa-spin fa-3x mx-auto"></i>
            </div>
        </div>
    </div>
@endsection

@push('after-scripts')

    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>

    <script>

        var selected_plan = '';
        var success_status = false;
        //@TODO use config for this

        $(document).ready(function () {
            $

        });

        function handleConfirmation() {
            loading = true;
            wait(true);
            var form = document.getElementById('cancel-form');
            wait(true);
            form.submit();
            {{--$.ajax(--}}
            {{--    {--}}
            {{--        url: '{{URL::to('cancelplan')}}',--}}
            {{--        type: "post",--}}
            {{--        datatype: "json"--}}
            {{--    }).done(function (data) {--}}
            {{--    wait(false);--}}
            {{--    //remove the loading indicator, indicate success--}}
            {{--    if (data.status == '0') {--}}
            {{--        $("#plan_update_status").html('success');--}}
            {{--        success_status = true;--}}
            {{--    } else {--}}
            {{--        $("#plan_update_status").html('failed');--}}
            {{--    }--}}

            {{--    $("#confirmation").modal('show');--}}
            {{--    loading = false;--}}

            {{--}).fail(function (jqXHR, ajaxOptions, thrownError) {--}}
            {{--    wait(false);--}}
            {{--    console.log('no data');--}}
            {{--    loading = false;--}}
            {{--    $("#plan_update_status").html('failed');--}}
            {{--    success_status = false;--}}
            {{--    $("#confirmation").modal('show');--}}
            {{--});--}}
        }

        // just return to the account page
        function handleCancel() {
            window.location.replace('{{route('frontend.user.account')}}');
        }

        function handleConfirmationClose() {
            if (success_status) {
                window.location.replace('{{route('frontend.user.account')}}');
            } else {
                window.location.reload();
            }
        }

        // waiting indicator
        function wait(on) {
            console.log(on)
            if (on) {
                $('.load-spinner').modal('show');
            } else {
                setTimeout(function () {
                    $('.load-spinner').modal('hide');
                }, 500)

            }
        }

    </script>

@endpush

@push('after-styles')
    <style>


    </style>
@endpush