@extends('layouts/default')
{{-- Page title --}}
@section('title')
    {{ trans('general.upgradeplan') }}
    @parent
@stop


{{-- Page content --}}
@section('content')

    <style>
        .pricing .card {
            border: none;
            border-radius: 1rem;
            transition: all 0.2s;
            box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
        }

        .pricing hr {
            margin: 1.5rem 0;
        }

        .pricing .card-title {
            margin: 0.5rem 0;
            /* font-size: 0.9rem; */
            letter-spacing: .1rem;
            font-weight: bold;
        }

        .pricing .card-price {
            font-size: 3rem;
            margin: 0;
        }

        .pricing .card-price .period {
            /* font-size: 0.8rem; */
        }

        .pricing ul li {
            margin-bottom: 1rem;
        }

        .pricing .text-muted {
            opacity: 0.7;
        }

        .pricing .btn {
            font-size: 80%;
            border-radius: 5rem;
            letter-spacing: .1rem;
            font-weight: bold;
            padding: 1rem;
            opacity: 0.7;
            transition: all 0.2s;
        }

        /* Hover Effects on Card */

        @media (min-width: 992px) {
            .pricing .card:hover {
                margin-top: -.25rem;
                margin-bottom: .25rem;
                box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
            }

            .pricing .card:hover .btn {
                opacity: 1;
            }
        }

        .plan-period {
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 5px;
            margin-bottom: 20px;
        }
    </style>


    @if ($snipeSettings->dashboard_message != '')
        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-12">
                                {!! Helper::parseEscapedMarkedown($snipeSettings->dashboard_message) !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif


    <div class="db-main mt-3">
        @if ($tenant && $tenant->is_trial == 0 && \Carbon\Carbon::parse($tenant->plan_ends_at)->timestamp > time())
          <div class="row">
            <div class="col-md-5 mx-auto">
              <div class="d-flex align-items-center justify-content-center w-100 text-center">
                <div>
                  <h3 class="lh-base text-danger">You have an active plan running. Please Cancel the current plan before upgrading or it will be automatically cancelled during upgradtion.</h3>
                  <a href="{{ route('subscription.cancel') }}" class="btn btn-danger">Cancel Subscription</a>
                </div>
              </div>
            </div>
          </div>
        @endif
        <section class="pricing py-5 w-100">
            <div class="d-flex align-items-center justify-content-center">
                <div class="plan-period">
                    <button type="button" id="monthly" class="btn btn-primary">Monthly</button>
                    <button type="button" id="yearly" class="bg-transparent border-0">Yearly</button>
                </div>
            </div>
            <div class="container-fluid" id="monthly-container">
                <div class="row d-flex justify-content-center">
                    @foreach ($subscriptionPlans as $subscriptionPlan)
                        {{-- Trial Plan --}}
                        @if ($subscriptionPlan->stripe_product_id == null && $tenant->is_trial)
                            <div class="col-lg-3 mb-3">
                                <div class="card mb-5 mb-lg-0">
                                    <div class="card-body">
                                        <h5 class="card-title text-muted text-uppercase text-center">
                                            {{ $subscriptionPlan->name }}</h5>
                                        <h6 class="card-price text-center">Free</h6>
                                        <hr>
                                        <ul class="fa-ul">
                                            @foreach ($subscriptionPlan->subscription_features as $feature)
                                                <li><span class="fa-li"><i
                                                            class="fas {{ $feature->pivot->consumable ? 'fa-check' : 'fa-times' }}"></i></span><strong>{{ $feature->pivot->data == -1 ? 'Unlimited' : $feature->pivot->data }}
                                                        {{ $feature->title }}</strong></li>
                                            @endforeach
                                        </ul>
                                        <div class="d-grid mt-5">
                                            <a href="#" class="btn btn-primary text-uppercase disabled opacity-50">Subscribed</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        {{-- Paid Plan --}}
                        @php
                            $prices = [];
                            if ($subscriptionPlan->stripe_product_id) {
                                $stripe = new \Stripe\StripeClient(config('services.stripe.secret'));
                                $pricesResponse = $stripe->prices->search([
                                    'query' => 'product: ' . "'$subscriptionPlan->stripe_product_id'",
                                ]);
                                $prices = $pricesResponse->data;
                                // $stripePrice = $prices[0];
                            }
                        @endphp
                        @foreach ($prices as $stripePrice)
                            <div class="col-lg-3 mb-3 plan-{{ $stripePrice->recurring->interval }}"
                                @if ($stripePrice->recurring->interval == 'year') style="display: none;" @endif>
                                <div class="card mb-5 mb-lg-0">
                                    <div class="card-body">
                                        <h5 class="card-title text-muted text-uppercase text-center">
                                            {{ $subscriptionPlan->name }}</h5>
                                        <h6 class="card-price text-center">{{ strtoupper($stripePrice->currency) }}
                                            {{ $stripePrice->unit_amount / 100 }}<span
                                                class="period">/{{ $stripePrice->recurring->interval }}</span></h6>
                                        <hr>
                                        <ul class="fa-ul">
                                            @foreach ($subscriptionPlan->subscription_features as $feature)
                                                <li><span class="fa-li"><i
                                                            class="fas {{ $feature->pivot->consumable ? 'fa-check' : 'fa-times' }}"></i></span><strong>{{ $feature->pivot->data == -1 ? 'Unlimited' : $feature->pivot->data }}
                                                        {{ $feature->title }}</strong></li>
                                            @endforeach
                                            {{-- <li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li>
                                            <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
                                            <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
                                            <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>
                                            <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>
                                            <li><span class="fa-li"><i class="fas fa-check"></i></span>Free Subdomain</li>
                                            <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status
                                              Reports</li> --}}
                                        </ul>
                                        <div class="d-grid mt-5">
                                            <a href="{{ route('checkout', ['stripe_price_id' => $stripePrice->id, 'tenant_id' => $tenant->id]) }}"
                                                class="btn btn-primary text-uppercase">Subscribe</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endforeach

                </div>
            </div>
        </section>

    </div>


    </div>




@stop

@section('moar_scripts')
    @include ('partials.bootstrap-table', ['simple_view' => true, 'nopages' => true])
@stop

@push('js')
    <script nonce="{{ csrf_token() }}">
        $(document).ready(function() {

            $(document).on("click", "#monthly", function() {

                $(".plan-month").show();
                $(".plan-year").hide();

                $("#yearly").removeClass("btn btn-primary");
                $("#yearly").addClass("bg-transparent border-0");

                $(this).removeClass("bg-transparent border-0");
                $(this).addClass("btn btn-primary");

            });

            $(document).on("click", "#yearly", function() {

                $(".plan-year").show();
                $(".plan-month").hide();

                $("#monthly").removeClass("btn btn-primary");
                $("#monthly").addClass("bg-transparent border-0");

                $(this).removeClass("bg-transparent border-0");
                $(this).addClass("btn btn-primary");

            });

        });
    </script>
@endpush