@extends('layouts.app')
@section('title') {{'Subscription Plan'}} @endsection
@section('content')
@push('styles')
<link href="{{ asset('/css/pricing-plan.css') }}" rel="stylesheet" />
@endpush
<style>
    .dataTables_scrollHeadInner {
        width: 100% !important;
    }

    .table {
        width: 100% !important;
    }
</style>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<div class="page-wrapper">
    <div class="page-content-tab">
        <div class="col-12">
            <div class="breadcrumb-header justify-content-between">
                <div class="my-auto">
                    <h4 class="page-title">Choose Your Subscription Plan</h4>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Subscription Plan</li>
                    </ol>
                </div>
            </div>
            @if(!empty($showPlanPurchaseMessage))
            <div class="alert alert-solid-warning text-center" role="alert">
                <button aria-label="Close" class="close" data-bs-dismiss="alert" type="button">
                    <span aria-hidden="true">&times;</span></button>
                    {{$showPlanPurchaseMessage}}
            </div>
            @endif
            @if(!empty($showPLanExpireMessage))
            <div class="alert alert-solid-success text-center" role="alert">
                <button aria-label="Close" class="close" data-bs-dismiss="alert" type="button">
                    <span aria-hidden="true">&times;</span></button>
                    {{$showPLanExpireMessage}}
            </div>
            @endif
            @if(empty($userSubscriptionPlan))
            <div class="alert alert-solid-info text-center" role="alert">
                <button aria-label="Close" class="close" data-bs-dismiss="alert" type="button">
                    <span aria-hidden="true">&times;</span></button>
                <strong>Heads up!</strong> No plan subscribed please purchase subscription for further process.
            </div>
            @endif
            @if(empty($ifUserHasPaymentMethod['data']))
                @if(Auth::user()->hasRole('business_super_admin'))
                    <div class="alert alert-solid-danger text-center" role=" alert">
                        <button aria-label="Close" class="close" data-bs-dismiss="alert" type="button">
                            <span aria-hidden="true">&times;</span></button>
                        <a class="" id="nopayment" data-message="payment_not_found" aria-expanded="true">
                            <strong>Oh snap!</strong> No payment methods found! Please add a payment method to your account.
                        </a>
                    </div>
                @endif
            @endif
<div class="row">
<div class="col-12">
<div class="row">
<div id="app" class="gb-scope hosting-app">
<div class="gb-container">
<div id="tech-specs" class="scrollspy-anchor tech-specs-wrapper">
    <div class="tab-switcher tab-switcher--secondary">
        <input id="monthly" type="radio" name="planname" class="tab-switcher__input" {{ (!$userSubscriptionPlan || (!$userSubscriptionPlan['subscription_type'] && !$userSubscriptionPlan['subscription_type'])) || $userSubscriptionPlan['subscription_type'] == 'per_month' ? 'checked' : '' }}>
        <label for="monthly" class="tab-switcher__label">
            Monthly
        </label>
        <input id="yearly" type="radio" name="planname" class="tab-switcher__input" {{ $userSubscriptionPlan && $userSubscriptionPlan['subscription_type'] == 'per_year' ? 'checked' : '' }}>
        <label for="yearly" class="tab-switcher__label">
            Yearly
        </label>
    </div>    
    <div class="tech-specs__table-container">
        <div class="tech-specs__table-container-wrap">
            <table class="gb-table specs-table">
                <thead>
                    <tr>
                        <th><span class="specs-table__header-side-info"></span></th>
                        @foreach($allSubscriptionPlans as $plan)
                            <th class="text-center" style="position: relative;">
                            @if(!empty($userSubscriptionPlan) && $plan['id'] == $userSubscriptionPlan['subscription_id'])
                                <div class="ribbon ribbon-top-right"><span>Current Plan</span></div>
                            @endif
                                <div class="product-header">
                                    <div class="product-header__product-price">
                                        <p>{{$plan['name']}}</p>
                                        <p>
                                            <strong id="price_change_{{$plan['id']}}">${{ $plan['monthly_price'] }} /</strong>
                                            <span class="just_change_month" id="just_change_month_{{$plan['id']}}">month</span>
                                        </p>
                                    </div>
                                    <br>
                                    <div>
                                        {{-- <p class="product-header__product-price--old">
                                            {{ $plan['description'] }}
                                        </p> --}}
                                    </div>

                                    <div id="show_plan_button_month_{{$plan['id']}}">
                                        @if(auth()->user()->hasPermissionTo('can_manage_subscription_plan'))
                                            @if(empty($userSubscriptionPlan))
                                                <p>
                                                    <a href="#" class="btn btn-primary btn-rounded btn-block per_month" id="per_month" onclick="confirmationModelShow(this)" data-bs-target="#exampleModalPrimary" data-id="{{$plan['id']}}">Subscribe at {{ "$".$plan['discount_price'] }} per month </a>
                                                </p>
                                            @else
                                            @if(!empty($userSubscriptionPlan) && $plan['id'] != $userSubscriptionPlan['subscription_id']|| $userSubscriptionPlan['subscription_type'] != "per_month")
                                            <p>
                                                    <a href="#" class="btn btn-primary btn-rounded btn-block per_month" id="per_month" onclick="confirmUpgradeModelShow(this)" data-bs-target="#exampleModalPrimaryUpgrade" data-id="{{$plan['id']}}">Update subscription at {{ "$".$plan['discount_price'] }} per month </a>
                                                </p>
                                            @endif
                                            @endif

                                            @endif
                                        </div>
                                    <input type="hidden" name="plan_stripe_id_monthly" id="plan_stripe_id_monthly" value="{{$plan['plan_stripe_id_monthly']}}" />
                                    <input type="hidden" name="price_stripe_id_monthly" id="price_stripe_id_monthly" value="{{$plan['price_stripe_id_monthly']}}" />
                    
                                    
                                    <div id="show_plan_button_year_{{$plan['id']}}">
                                        @if(auth()->user()->hasPermissionTo('can_manage_subscription_plan'))
                                        @if(empty($userSubscriptionPlan))
                                            <p>
                                                <a href="#" class="btn btn-primary btn-rounded btn-block per_year" id="per_year" onclick="confirmationModelShow(this)" data-bs-target="#exampleModalPrimary" data-id="{{$plan['id']}}">Subscribe at {{ "$".$plan['monthly_price_first_year'] }} per year </a>
                                            </p>
                                        @else
                                        @if(!empty($userSubscriptionPlan) && $plan['id'] != $userSubscriptionPlan['subscription_id'] || $userSubscriptionPlan['subscription_type'] != "per_year")
                                            {{-- {{dd($userSubscriptionPlan);}} --}}
                                        <p>
                                                <a href="#" class="btn btn-primary btn-rounded btn-block per_year" id="per_year" onclick="confirmUpgradeModelShow(this)" data-bs-target="#exampleModalPrimaryUpgrade" data-id="{{$plan['id']}}">Update subscription at {{ "$".$plan['monthly_price_first_year'] }} per year </a>
                                                
                                        
                                            </p>
                                        @endif
                                        @endif
                                        @endif
                                    </div>

                                    <input type="hidden" name="plan_stripe_id_yearly" id="plan_stripe_id_yearly" value="{{$plan['plan_stripe_id_yearly']}}" />
                                    <input type="hidden" name="price_stripe_id_yearly" id="price_stripe_id_yearly" value="{{$plan['price_stripe_id_yearly']}}" />
                                </div>
                            </th>
                        @endforeach
                    </tr>
                    
            </thead>
            <tbody class="">
                <tr>
                    <th colspan="{{ count($plan) }}" class="gb-table__title"><span class="gb-table__toggle">Plan Features</span></th>
                </tr>
                {{-- <tr>
                    <th class="specs-table__first-column">
                        <div class="specs-table__first-column__container">
                            Price per Year
                        </div>
                    </th>
                    @foreach($allSubscriptionPlans as $plan)
                    <td><p><strong>{{ "$".$plan['annual_price'] }}</strong></p></td>
                    @endforeach
                </tr> --}}
                <tr>
                    <th class="specs-table__first-column">
                        <div class="specs-table__first-column__container">
                            Saving (by choosing the annual plan)
                        </div>
                    </th>
                    @foreach($allSubscriptionPlans as $plan)
                    <td><p><strong>{{ "$".$plan['saving_on_annual_plan'] }}</strong></p></td>
                    @endforeach
                </tr>
                <tr>
                    <th class="specs-table__first-column">
                        <div class="specs-table__first-column__container">
                            Discount for the first year
                        </div>
                    </th>
                    @foreach($allSubscriptionPlans as $plan)
                    <td><p><strong>{{ "$".$plan['first_year_discount'] }}</strong></p></td>
                    @endforeach
                </tr>
                <tr>
                    <th class="specs-table__first-column">
                        <div class="specs-table__first-column__container">
                            Discounted price
                        </div>
                    </th>
                    @foreach($allSubscriptionPlans as $plan)
                    <td><p>
                        <span class="discounted_price" id="discounted_price_{{ $plan['id'] }}">
                            {{ "$".$plan['discount_price'] }}
                        </span>
                        
                        {{-- <strong>{{ "$".$plan['discount_price'] }}</strong> --}}
                    </p></td>
                    @endforeach
                </tr>
                <tbody class="gb-is-collapsed">
                    <tr>
                        <th colspan="{{ count($plan) }}" class="gb-table__title"><span class="gb-table__toggle">Data Access</span></th>
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                            Demographics
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><strong>{!! $plan['can_access_demographics'] ? '<i class="fas fa-check text-success me-2" aria-hidden="true"></i>' : '<i class="fas fa-times text-danger me-2" aria-hidden="true"></i>' !!}</strong></td>
                        @endforeach
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                            Economy
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><strong>{!! $plan['can_access_economy'] ? '<i class="fas fa-check text-success me-2" aria-hidden="true"></i>' : '<i class="fas fa-times text-danger me-2" aria-hidden="true"></i>' !!}</strong></td>
                        @endforeach
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                            Infrastructure
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><strong>{!! $plan['can_access_infrastructure'] ? '<i class="fas fa-check text-success me-2" aria-hidden="true"></i>' : '<i class="fas fa-times text-danger me-2" aria-hidden="true"></i>' !!}</strong></td>
                        @endforeach
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                            Regulation
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><strong>{!! $plan['can_access_regulation'] ? '<i class="fas fa-check text-success me-2" aria-hidden="true"></i>' : '<i class="fas fa-times text-danger me-2" aria-hidden="true"></i>' !!}</strong></td>
                        @endforeach
                    </tr>
                </tbody>
                <tbody class="gb-is-collapsed">
                    <tr>
                        <th colspan="{{ count($plan) }}" class="gb-table__title"><span class="gb-table__toggle">Coverage access</span></th>
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                                US
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><strong>{!! $plan['can_access_us_data'] ? '<i class="fas fa-check text-success me-2" aria-hidden="true"></i>' : '<i class="fas fa-times text-danger me-2" aria-hidden="true"></i>' !!}</strong></td>
                        @endforeach
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                                Global
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><strong>{!! $plan['can_access_global_data'] ? '<i class="fas fa-check text-success me-2" aria-hidden="true"></i>' : '<i class="fas fa-times text-danger me-2" aria-hidden="true"></i>' !!}</strong></td>
                        @endforeach
                    </tr>
                </tbody>
                <tbody class="gb-is-collapsed">
                    <tr>
                        <th colspan="{{ count($plan) }}" class="gb-table__title"><span class="gb-table__toggle">Business Insights</span></th>
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                                Profiles
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><strong>{!! $plan['can_access_profile'] ? '<i class="fas fa-check text-success me-2" aria-hidden="true"></i>' : '<i class="fas fa-times text-danger me-2" aria-hidden="true"></i>' !!}</strong></td>
                        @endforeach
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                                Needs
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><strong>{!! $plan['can_access_need'] ? '<i class="fas fa-check text-success me-2" aria-hidden="true"></i>' : '<i class="fas fa-times text-danger me-2" aria-hidden="true"></i>' !!}</strong></td>
                        @endforeach
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                                Contacts
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><strong>{!! $plan['can_access_contact'] ? '<i class="fas fa-check text-success me-2" aria-hidden="true"></i>' : '<i class="fas fa-times text-danger me-2" aria-hidden="true"></i>' !!}</strong></td>
                        @endforeach
                    </tr>
                </tbody>
                <tbody class="gb-is-collapsed">
                    <tr>
                        <th colspan="{{ count($plan) }}" class="gb-table__title"><span class="gb-table__toggle">Engagement</span></th>
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                                Direct chat
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><strong>{!! $plan['can_access_chat'] ? '<i class="fas fa-check text-success me-2" aria-hidden="true"></i>' : '<i class="fas fa-times text-danger me-2" aria-hidden="true"></i>' !!}</strong></td>
                        @endforeach
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                                Book a Call
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><strong>{!! $plan['can_access_call'] ? '<i class="fas fa-check text-success me-2" aria-hidden="true"></i>' : '<i class="fas fa-times text-danger me-2" aria-hidden="true"></i>' !!}</strong></td>
                        @endforeach
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                                News
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><strong>{!! $plan['can_access_news'] ? '<i class="fas fa-check text-success me-2" aria-hidden="true"></i>' : '<i class="fas fa-times text-danger me-2" aria-hidden="true"></i>' !!}</strong></td>
                        @endforeach
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                                Ratings and Reviews
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><strong>{!! $plan['can_access_rating_review'] ? '<i class="fas fa-check text-success me-2" aria-hidden="true"></i>' : '<i class="fas fa-times text-danger me-2" aria-hidden="true"></i>' !!}</strong></td>
                        @endforeach
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                                Social media integration
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><strong>{!! $plan['can_access_social_media_integration'] ? '<i class="fas fa-check text-success me-2" aria-hidden="true"></i>' : '<i class="fas fa-times text-danger me-2" aria-hidden="true"></i>' !!}</strong></td>
                        @endforeach
                    </tr>
                </tbody>
                <tbody class="gb-is-collapsed">
                    <tr>
                        <th colspan="{{ count($plan) }}" class="gb-table__title"><span class="gb-table__toggle">Users</span></th>
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                                Free user seats
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><p><strong>{{ $plan['free_user_seat'] }}</strong></p></td>
                        @endforeach
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                                Price per seats
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><p><strong>{{ $plan['price_per_seat'] }}</strong></p></td>
                        @endforeach
                    </tr>
                </tbody>
                <tbody class="gb-is-collapsed">
                    <tr>
                        <th colspan="{{ count($plan) }}" class="gb-table__title"><span class="gb-table__toggle">Trial</span></th>
                    </tr>
                    <tr>
                        <th class="specs-table__first-column">
                            <div class="specs-table__first-column__container">
                                Sign up
                            </div>
                        </th>
                        @foreach($allSubscriptionPlans as $plan)
                        <td><p><strong>{{ $plan['trial_period_in_day'] }}</strong> day trial</p></td>
                        @endforeach
                    </tr>
                    </tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCPjm1zoTB7q-IFvG9A0oJIi2KwQyyHu_8&amp;libraries=places'></script>

@if (Session::has('message'))
<!-- <script>
    $(function() {
        toastr. {
            {
                Session::get('alert-class')
            }
        }('{{ Session::get('
            message ') }}');
    });
</script> -->
@endif
@push('scripts')
<!-- Your JavaScript code -->
<script>
   $(document).ready(function() {
        $('.per_year').hide();

        function updateRibbon() {
            var selectedTab = $('input[name="planname"]:checked').attr('id');
            var subscriptionType = '{{ ($userSubscriptionPlan) ? ($userSubscriptionPlan->subscription_type) : "" }}';

            if ((subscriptionType === 'per_year' && selectedTab === 'yearly') || (subscriptionType === 'per_month' && selectedTab === 'monthly')) {
                $('.ribbon').show();
            } else {
                $('.ribbon').hide();
            }
        }

        $('input[name="planname"]').on('change', updateRibbon);

        var SITE_URL = "