@inject('cart', 'App\Blueprint\Services\CartServices')
@extends(ucfirst(getScope()).'.Layout.master')
@section('content')
    <div class="col-md-12 PackageUpgradeErrorWrapper">
        <div class="PackageUpgrade error"></div>
    </div>
    <div class="row PackageUpgradeContainer">
        @if (!empty($errorMessage))
            <div class="alert alert-warning">
                {{ $errorMessage }}
            </div>
        @else
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="fixed PackageUpgrade cart">
                    <div class="bubble pulse-button animated hidden">
                        {{ currency($cartTotal) }}
                    </div>
                    <div class="summary"></div>
                </div>
                <div class="portlet light bordered">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class=" icon-layers font-green"></i>
                            <span class="caption-subject font-green bold uppercase">{{ _mt($moduleId,'PackagePurchase.package_purchase') }}
                    </span>
                        </div>
                    </div>
                    <div class="portlet-body form">
                        @if(loggedUser()->repoData)
                            @if($packages->count())
                                <form action="{{ route('user.packagePurchase') }}" method="POST" class="PackageUpgradeForm">
                                    <input type="hidden" name="context" value="{{ $operation }}">
                                    <div class="form-wizard">
                                        <div class="packageWrapper">
                                            <div class="packageCluster">
                                                @foreach ($packages->chunk(4) as $chunk)
                                                    <div class="packageRow row">
                                                        @foreach($chunk as $package)
                                                            <div class="col-md-3 col-sm-6">
                                                                <div class="product {{ strtolower($package->name) }}">
                                                                    @if($package->image != null)
                                                                        <div class="image">
                                                                            <img src="{{ asset($package->image) }}">
                                                                        </div>
                                                                    @else
                                                                        <div class="packageHeader">
                                                                            <div class="icon">
                                                                                <i class="fa fa-dropbox"></i>
                                                                            </div>
                                                                            <h4>{{ $package->name }}</h4>
                                                                        </div>
                                                                    @endif
                                                                    <div class="details">
                                                                        <div class="eachDetail name">
                                                                            <label>{{ _mt($moduleId,'PackagePurchase.name') }}</label>
                                                                            <span class="value">{{ $package->name }}</span>
                                                                        </div>
                                                                        <div class="eachDetail price">
                                                                            <label>{{ _mt($moduleId,'PackagePurchase.price') }}</label>
                                                                            <span class="value">
                                                                            {{ currency($package->price) }}
                                                                    </span>
                                                                        </div>
                                                                        {{--<div class="eachDetail mrp">
                                                                            <label>{{ _mt($moduleId,'PackagePurchase.mrp') }}</label>
                                                                            <span class="value">
                                                                                {{ $package->mrp }}</span>
                                                                        </div>--}}
                                                                        <div class="eachDetail pv">
                                                                            <label>{{ _mt($moduleId,'PackagePurchase.pv') }}</label>
                                                                            <span class="value">
                                                                        {{ $package->pv }}</span>
                                                                        </div>
                                                                        <div class="eachDetail description toggleable hidden">
                                                                            <label>{{ _mt($moduleId,'PackagePurchase.description') }}</label>
                                                                            <span class="value">
                                                                                    {!! html_entity_decode($package->description) !!}
                                                                                </span>
                                                                        </div>
                                                                        <div class="moreDetails closed">
                                                                            <span class="toogleText">{{ _mt($moduleId,'PackagePurchase.more') }}</span><i
                                                                                class="fa fa-angle-double-down"></i>
                                                                        </div>
                                                                        {{--                                                            @if($package->entry_level_package)--}}
                                                                        <div class="addToCart">
                                                                            <button type="button" data-id="{{ $package->id }}"
                                                                                    class="btn green ladda-button {{ $cartedPackage == $package->id ? 'selected' : '' }}"
                                                                                    data-style="contract">
                                                                        <span class="iconGroup">
                                                                            <i class="icon-basket"></i>
                                                                            <span class="fa fa-check"></span>
                                                                        </span>
                                                                                <span class="text">{{ $cartedPackage == $package->id ? 'Selected' : 'Select' }}</span>
                                                                            </button>
                                                                        </div>
                                                                        {{--                                                            @else--}}
                                                                        {{--                                                            <div class="lock-btn">--}}
                                                                        {{--                                                                <button type="button" class="btn grey">--}}
                                                                        {{--                                                                    <span class="iconGroup">--}}
                                                                        {{--                                                                        <span class="fa fa-lock"></span>--}}
                                                                        {{--                                                                    </span>--}}
                                                                        {{--                                                                    <span class="text">{{ 'Locked' }}</span>--}}
                                                                        {{--                                                                </button>--}}
                                                                        {{--                                                            </div>--}}
                                                                        {{--                                                           @endif--}}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @endforeach
                                                <input type="hidden" name="selectedPackage" value="{{ $cart->getCartedPackage() }}">
                                            </div>
                                        </div>
                                        <div class="paymentGatewaysWrapper"></div>
                                        <div class="form-actions actionButtons">
                                            <div class="row">
                                                <div class="col-offset-3 col-md-12">
                                                    <a href="javascript:" class="btn default button-previous" style="display: none">
                                                        <i class="fa fa-angle-left"></i>{{ _mt($moduleId,'PackagePurchase.back') }}
                                                    </a>
                                                    <a href="javascript:"
                                                       class="btn btn-outline green button-next">{{ _mt($moduleId,'PackagePurchase.continue') }}
                                                        <i class="fa fa-angle-right"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="successWrapper">
                                            <i class="fa fa-check-circle"></i>
                                            <h3> {{ $successMessage }} </h3>
                                        </div>
                                    </div>
                                </form>
                            @else
                                <h3 align="center"> {{ _mt($moduleId,'PackagePurchase.no_package_to_upgrade') }} </h3>
                            @endif
                        @else
                            <h3 align="center"> {{ _mt($moduleId,'PackagePurchase.you_are_not_active_in_tree') }} </h3>
                        @endif

                    </div>
                </div>
            </div>
        @endif
    </div>
    <style>
        .lock-btn .btn {
            width: 100%;
            padding: 8px 12px;
        }
        .lock-btn .btn:hover, .lock-btn .btn:focus {
            background-color: #9d9a9a !important;
            border-color: #9d9a9a !important;
        }
    </style>
    <script>
        $(function () {

            $('.fixed.cart .bubble').html('{{currency(0)}}');

            window.paymentSuccessCallback = function (response, wallet) {
                postPayment(response);
            };

            refreshSummary('.PackageUpgrade.cart .summary').done(function () {
                $('.fixed.cart .bubble').removeClass('hidden');
            });

            //Package selection
            $('body').on('click', '.product .addToCart button', function () {
                var target = $(this).closest('.packageWrapper').addClass('stickOverlay');
                $(this).addClass('selected').find('span.text').text('Selected');
                $('.product .addToCart button').not(this).removeClass('selected');
                $('.product .addToCart button').not(this).find('span.text').text('Select');
                addPackage(target, $(this).attr('data-id'));
            });

            function addPackage(elem, packageId) {
                var options = {};
                options.productId = packageId;
                options.quantity = 1;
                options.isPackage = true;

                return $.post("{{ route('cart.add') }}", options, function (response) {
                    $('.fixed.cart .bubble').html(response.total).removeClass('shake').addClass('shake');
                    setTimeout(function () {
                        $('.fixed.cart .bubble').removeClass('shake');
                        refreshSummary('.fixed.PackageUpgrade.cart .summary');
                    }, 500);

                    var dispatch = response.item;
                    dispatch.quantity = response.quantity;
                    dispatch.lang_you_have_added = $('#lang_you_have_added').val();
                    dispatch.lang_to_cart = $('#lang_to_cart').val();
                    Ladda.stopAll();
                    $('[name="selectedPackage"]').val(packageId);
                    $('[name="packageName"]').val(elem.find('.packageBasicInfo > h2').text());
                    $('p.packageNameReview').text(elem.find('.packageBasicInfo > h2').text());
                    $('[name="selectedPackage"]').attr('formnovalidate', true);
                    refreshSummary();
                }).fail(function () {
                    Ladda.stopAll();
                });
            }

            function refreshSummary(target) {
                target = target ? jQuerize(target) : $('.orderSummary');

                return $.get("{{ route('cart.summary') }}", function (response) {
                    target.html(response);
                });
            }

            $('body').on('click', '.fixed.cart .bubble', function () {
                if ($(this).hasClass('open')) {
                    $(this).removeClass('open');
                    $('.fixed.cart').removeClass('open');
                } else {
                    $(this).addClass('open');
                    $('.fixed.cart').addClass('open');
                }
            });

            $('body').on('click', '.moreDetails', function () {
                if ($(this).hasClass('closed'))
                    $(this).removeClass('closed').closest('.details').find('.eachDetail.toggleable').removeClass('hidden');
                else
                    $(this).addClass('closed').closest('.details').find('.eachDetail.toggleable').addClass('hidden');
            });

            $('.button-next').click(function () {
                $.post("{{ scopeRoute('packagePurchase.validate') }}", function (response) {
                    loadGateways();
                    $('.paymentGatewaysWrapper').show();
                    $('.packageWrapper').hide();
                    $('.button-next').hide();
                    $('.button-previous').show();

                }).fail(function (response) {
                    showError("{{ _mt($moduleId,"PackagePurchase.please_select_a_valid_package") }}");
                });
            });

            $('.button-previous').click(function () {
                $('.paymentGatewaysWrapper').hide();
                $('.packageWrapper').show();
                $('.button-next').show();
                $('.button-previous').hide();
            });

            function loadGateways() {
                simulateLoading('.paymentGatewaysWrapper');
                var context = '{{ $operation }}';
                return $.get("{{ scopeRoute('getGateways') }}", {'context': context}, function (response) {
                    window.targetForm = $('.PackageUpgradeForm');
                    $('.paymentGatewaysWrapper').html(response);
                    $('.paymentNavTab:first').addClass('active');
                    $('.paymentIco:first i').addClass('active');
                });
            }

            function postPayment() {
                $('.paymentGatewaysWrapper').hide();
                $('.actionButtons').hide();
                $('.successWrapper').show();
            }

            function showError(message) {
                $('.PackageUpgradeErrorWrapper').slideDown().find('.error').html(message);

                setTimeout(function () {
                    $('.PackageUpgradeErrorWrapper').slideUp();
                }, 5000);
            }

        });
    </script>
@endsection