@php
    \Session::set('discountOptions', '');
    if(\Auth::user()->plan == 'Free' && \Auth::user()->is_new_trial == 1){
        $planSub = '';
    }else{
        $planSub = \Auth::user()->planSubscriptions();
        if(!$planSub){
            $planSub = \Auth::user()->planOldSubscription();
        }
    }
    $plan = $planSub ? $planSub->plan : 'trial';
@endphp
<h2>{{ trans('account_settings.plans') }} 
    @if(\Carbon::parse(\Auth::user()->verify_at)->addDays(7) > \Carbon::now())
        <small style="color: #0cc5d1; ">({{ trans('account_settings.plan.you_are_on_trial_perion') }})</small>
    @endif
</h2>

<a href="/freelancer/billing-subscriptions" class="tu-btn transparent account-setting__managePayment">{{ trans('account_settings.plan.manage_payments') }}</a>

<input type="hidden" name="plan" id="plan" value="{{ $plan }}">
<div class="account-setting__plans">
    
    <ul class="nav nav-tabs account-setting__plan--nav" id="myTab" role="tablist">
        <li class="nav-item" ng-click="plan = 'yearly'">
            <a class="nav-link tab-navigation yearly active" id="annual-tab" data-toggle="tab" href="#yearly" role="tab">
                {{ trans('account_settings.plan.yearly') }}
            </a>
        </li>
        @if($plan == 'six-month')
        <li class="nav-item" ng-click="plan = 'six-month'">
            <a class="nav-link tab-navigation six-month" id="sixmonths-tab" data-toggle="tab" href="#sixmonths" role="tab">
                {{ trans('account_settings.plan.six_months') }}
            </a>
        </li>
        @endif
        <li class="nav-item" ng-click="plan = 'monthly'">
            <a class="nav-link tab-navigation monthly" id="profile-tab" data-toggle="tab" href="#monthly" role="tab">
                {{ trans('account_settings.plan.monthly') }}
            </a>
        </li>
    </ul>

    <div class="account-setting__plan">
        <div class="tab-content account-setting__plan--tab" id="myTabContent">

            <div class="tab-pane fade show active" id="yearly" role="tabpanel" aria-labelledby="home-tab">
                <div class="plans-main-content">
                    <div class="plans-box">
                        <div class="account-setting__plan--bar">
                            <span class="account-setting__plan--bar--title">{{ trans('account_settings.plan.basic') }}<small></small></span>
                            <span class="account-setting__plan--bar--price">800 {{ trans('account_settings.plan.sar') }} </span>
                        </div>

                        <ul>
                            <li>{{ trans('account_settings.plan.available_basic_features.features_1') }}</li>
                            <li>{{ trans('account_settings.plan.available_basic_features.features_2') }}</li>
                            <li>{{ trans('account_settings.plan.available_basic_features.features_3') }}</li>
                            <li>{{ trans('account_settings.plan.available_basic_features.features_4') }}</li>
                            <li>{{ trans('account_settings.plan.available_basic_features.features_5') }}</li>
                            <li>{{ trans('account_settings.plan.available_basic_features.features_6') }}</li>
                            <li>{{ trans('account_settings.plan.available_basic_features.features_7') }}</li>
                            <li>{{ trans('account_settings.plan.available_basic_features.features_8') }}</li>
                        </ul>

                        <!-- <div class="account-setting__plan--promo">
                            <input type="text" name="promo" placeholder="Promo Code" />
                            <input type="submit" value="Apply" />
                        </div>
                        <button class="tu-btn pink select-plan">Select</button> -->

                        @if(Session::has('plan-expire') || ($plan != 'yearly'))
                            <div class="account-setting__plan--promo" ng-if="validPromocode == ''">
                                <div  style="display: contents;">
                                    <form style="display: inherit;" ng-submit="applyDiscountCode()">
                                        <input type="hidden" name="freelancer_id" ng-model="discount.freelancer_id">
                                        <fieldset class="no-label" ng-class="{'has-error':errors.coupon_code}">
                                            <input type="text" name="coupon_code" ng-model="discount.coupon_code"  placeholder="{{ trans('account_settings.plan.promocode') }}">
                                            <span class="field-error" ng-if="errors.coupon_code">Please enter code</span>
                                            <span class="field-error" ng-show="( errors.msg )" ng-bind="errors.msg[ 0 ]"></span>
                                        </fieldset>
                                        <input type="submit" name="" value="{{ trans('account_settings.plan.apply') }}">
                                    </form>
                                </div>
                            </div>
                            <div class="account-setting__plan--promo-apply" ng-if="validPromocode != ''">
                                <span>Promocode <strong> @{{ validPromocode.coupon_code }} (@{{ validPromocode.percentage }}%)</strong></span>
                                <button ng-click="removeDiscount()" class="cancel-payment-update"></button>
                            </div>
                        @endif
                        @if(Session::has('plan-expire') && ($plan != 'yearly'))
                            @if($subsciption)
                                <button class="tu-btn pink select-plan has-subscription">{{ trans('account_settings.plan.select') }}</button>
                            @else
                                <a href="javascript:;" class="tu-btn pink select-plan" ng-click="sub_type = 'basic'" data-toggle="modal" data-target="#add-card">{{ trans('account_settings.plan.select') }}</a>
                            @endif
                        @elseif($plan != 'yearly')
                            <button class="tu-btn pink select-plan unable-to-select">{{ trans('account_settings.plan.select') }}</button>
                        @else
                            <div ng-if="subscription.started_at <= today">
                                <button class="tu-btn transparent select-plan btn-disable" style="margin-top: 30px; position: unset;" ng-if="((subscription.plan == 'yearly') && (subscription.subscription_type == 'basic'))">
                                    {{ trans('account_settings.plan.your_current_active_plan') }}
                                </button>

                                <button class="tu-btn pink select-plan" style="margin-top: 30px;" ng-if="((subscription.plan == 'yearly') && (subscription.subscription_type != 'basic'))" ng-click="downgradePlan()">
                                    {{ trans('account_settings.plan.downgrade') }}
                                </button>
                            </div>
                            <div ng-if="subscription.started_at > today">
                                <button class="tu-btn transparent select-plan btn-disable" style="margin-top: 30px; position: unset;">
                                    You are on trial period
                                </button>
                            </div>
                            <!-- <button class="tu-btn pink select-plan btn-disable" style="margin-top: 30px;">{{ ($plan == 'yearly') ? 'Selected' : trans('account_settings.plan.select') }}</button> -->
                        @endif
                    </div>
                    <div class="plans-box">
                        <div class="account-setting__plan--bar">
                            <span class="account-setting__plan--bar--title">Pro<small></small></span>
                            <span class="account-setting__plan--bar--price">1000 {{ trans('account_settings.plan.sar') }}</span>
                        </div>
                        <span class="account-setting__plan--pro--plus">{{ trans('account_settings.plan.available_pro_features.basic_plus') }}</span>
                        <ul>
                            <li>{{ trans('account_settings.plan.available_pro_features.features_1') }}</li>
                            <li>{{ trans('account_settings.plan.available_pro_features.features_2') }}</li>
                            <li>{{ trans('account_settings.plan.available_pro_features.features_3') }}</li>
                            <li>{{ trans('account_settings.plan.available_pro_features.features_4') }}</li>
                        </ul>

                        <!-- <div class="account-setting__plan--promo">
                            <input type="text" name="promo" placeholder="Promo Code" />
                            <input type="submit" value="Apply" />
                        </div>
                        <button class="tu-btn pink select-plan">Select</button> -->
                        <div class="bottom-promo">
                        @if(Session::has('plan-expire') || ($plan != 'yearly'))
                            <div class="account-setting__plan--promo" ng-if="validPromocode == ''">
                                <div  style="display: contents;">
                                    <form style="display: inherit;" ng-submit="applyDiscountCode()">
                                        <input type="hidden" name="freelancer_id" ng-model="discount.freelancer_id">
                                        <fieldset class="no-label" ng-class="{'has-error':errors.coupon_code}">
                                            <input type="text" name="coupon_code" ng-model="discount.coupon_code"  placeholder="{{ trans('account_settings.plan.promocode') }}">
                                            <span class="field-error" ng-if="errors.coupon_code">Please enter code</span>
                                            <span class="field-error" ng-show="( errors.msg )" ng-bind="errors.msg[ 0 ]"></span>
                                        </fieldset>
                                        <input type="submit" name="" value="{{ trans('account_settings.plan.apply') }}">
                                    </form>
                                </div>
                            </div>
                            <div class="account-setting__plan--promo-apply" ng-if="validPromocode != ''">
                                <span>Promocode <strong> @{{ validPromocode.coupon_code }} (@{{ validPromocode.percentage }}%)</strong></span>
                                <button ng-click="removeDiscount()" class="cancel-payment-update"></button>
                            </div>
                        @endif
                        @if(Session::has('plan-expire') && ($plan != 'yearly'))
                            @if($subsciption)
                                <button class="tu-btn pink select-plan has-subscription">{{ trans('account_settings.plan.select') }}</button>
                            @else
                                <a href="javascript:;" class="tu-btn pink select-plan" ng-click="sub_type = 'pro'" data-toggle="modal" data-target="#add-card">{{ trans('account_settings.plan.select') }}</a>
                            @endif
                        @elseif($plan != 'yearly')
                            <button class="tu-btn pink select-plan unable-to-select">{{ trans('account_settings.plan.select') }}</button>
                        @else
                            <div ng-if="subscription.started_at < today">
                                <button class="tu-btn transparent select-plan btn-disable" style="margin-top: 30px;  position: unset;" ng-if="((subscription.plan == 'yearly') && (subscription.subscription_type == 'pro'))">
                                    {{ trans('account_settings.plan.your_current_active_plan') }}
                                </button>

                                <button class="tu-btn pink select-plan" style="margin-top: 30px;" ng-if="((subscription.plan == 'yearly') && (subscription.subscription_type != 'pro'))" ng-click="upgradePlan()">
                                    {{ trans('account_settings.plan.upgrade') }}
                                </button>
                            </div>
                            <div ng-if="subscription.started_at >= today">
                                <button class="tu-btn transparent select-plan btn-disable" style="margin-top: 30px; position: unset;">
                                    You are on trial period
                                </button>
                            </div>
                            <!-- <button class="tu-btn pink select-plan btn-disable" style="margin-top: 30px;">{{ ($plan == 'yearly') ? 'Selected' : trans('account_settings.plan.select') }}</button> -->
                        @endif
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="monthly" role="tabpanel" aria-labelledby="home-tab">
                <div class="plans-main-content">
                    <div class="plans-box">
                        <div class="account-setting__plan--bar">
                            <span class="account-setting__plan--bar--title">{{ trans('account_settings.plan.basic') }}<small></small></span>
                            <span class="account-setting__plan--bar--price">75 {{ trans('account_settings.plan.sar') }} </span>
                        </div>

                        <ul>
                            <li>{{ trans('account_settings.plan.available_basic_features.features_1') }}</li>
                            <li>{{ trans('account_settings.plan.available_basic_features.features_2') }}</li>
                            <li>{{ trans('account_settings.plan.available_basic_features.features_3') }}</li>
                            <li>{{ trans('account_settings.plan.available_basic_features.features_4') }}</li>
                            <li>{{ trans('account_settings.plan.available_basic_features.features_5') }}</li>
                            <li>{{ trans('account_settings.plan.available_basic_features.features_6') }}</li>
                            <li>{{ trans('account_settings.plan.available_basic_features.features_7') }}</li>
                            <li>{{ trans('account_settings.plan.available_basic_features.features_8') }}</li>
                        </ul>

                        <!-- <div class="account-setting__plan--promo">
                            <input type="text" name="promo" placeholder="Promo Code" />
                            <input type="submit" value="Apply" />
                        </div>
                        <button class="tu-btn pink select-plan">Select</button> -->

                        @if(Session::has('plan-expire') || ($plan != 'monthly'))
                            <div class="account-setting__plan--promo" ng-if="validPromocode == ''">
                                <div style="display: contents;">
                                    <form style="display: inherit;" ng-submit="applyDiscountCode()">
                                        <input type="hidden" name="freelancer_id" ng-model="discount.freelancer_id">
                                        <fieldset class="no-label" ng-class="{'has-error':errors.coupon_code}">
                                            <input type="text" name="coupon_code" ng-model="discount.coupon_code"  placeholder="{{ trans('account_settings.plan.promocode') }}">
                                            <span class="field-error" ng-if="errors.coupon_code">Please enter code</span>
                                            <span class="field-error" ng-show="( errors.msg )" ng-bind="errors.msg[ 0 ]"></span>
                                        </fieldset>
                                        <input type="submit" name="" value="{{ trans('account_settings.plan.apply') }}">
                                    </form>
                                </div>
                            </div>
                            <div class="account-setting__plan--promo-apply" ng-if="validPromocode != ''">
                                <span>Promocode <strong> @{{ validPromocode.coupon_code }} (@{{ validPromocode.percentage }}%)</strong></span>
                                <button ng-click="removeDiscount()" class="cancel-payment-update"></button>
                            </div>
                        @endif
                        @if(Session::has('plan-expire') && ($plan != 'monthly'))
                            @if($subsciption)
                                <button class="tu-btn pink select-plan has-subscription">{{ trans('account_settings.plan.select') }}</button>
                            @else
                                <a href="javascript:;" class="tu-btn pink select-plan" ng-click="sub_type = 'basic'" data-toggle="modal" data-target="#add-card">{{ trans('account_settings.plan.select') }}</a>
                            @endif
                        @elseif($plan != 'monthly')
                            <button class="tu-btn pink select-plan unable-to-select">{{ trans('account_settings.plan.select') }}</button>
                        @else
                            <div ng-if="subscription.started_at <= today">
                                <button class="tu-btn transparent select-plan btn-disable" style="margin-top: 30px;  position: unset;" ng-if="((subscription.plan == 'monthly') && (subscription.subscription_type == 'basic'))">
                                    {{ trans('account_settings.plan.your_current_active_plan') }}
                                </button>

                                <button class="tu-btn pink select-plan" style="margin-top: 30px;" ng-if="((subscription.plan != 'monthly') || (subscription.subscription_type != 'basic'))" ng-click="downgradePlan()">
                                    {{ trans('account_settings.plan.downgrade') }}
                                </button>
                            </div>
                            <div ng-if="subscription.started_at > today">
                                <button class="tu-btn transparent select-plan btn-disable" style="margin-top: 30px; position: unset;">
                                    You are on trial period
                                </button>
                            </div>   

                            {{-- <button class="tu-btn pink select-plan btn-disable" style="margin-top: 30px;">{{ ($plan == 'monthly') ? 'Selected' : trans('account_settings.plan.select') }}</button> --}}
                        @endif


                    </div>
                    <div class="plans-box">
                        <div class="account-setting__plan--bar">
                            <span class="account-setting__plan--bar--title">Pro<small></small></span>
                            <span class="account-setting__plan--bar--price">100 {{ trans('account_settings.plan.sar') }}</span>
                        </div>
                        <span class="account-setting__plan--pro--plus">{{ trans('account_settings.plan.available_pro_features.basic_plus') }}</span>
                        <ul>
                            <li>{{ trans('account_settings.plan.available_pro_features.features_1') }}</li>
                            <li>{{ trans('account_settings.plan.available_pro_features.features_2') }}</li>
                            <li>{{ trans('account_settings.plan.available_pro_features.features_3') }}</li>
                            <li>{{ trans('account_settings.plan.available_pro_features.features_4') }}</li>
                        </ul>

                        <!-- <div class="account-setting__plan--promo">
                            <input type="text" name="promo" placeholder="Promo Code" />
                            <input type="submit" value="Apply" />
                        </div>
                        <button class="tu-btn pink select-plan">Select</button> -->
                        <div class="bottom-promo">
                        @if(Session::has('plan-expire') || ($plan != 'monthly'))
                            <div class="account-setting__plan--promo" ng-if="validPromocode == ''">
                                <div style="display: contents;">
                                    <form style="display: inherit;" ng-submit="applyDiscountCode()">
                                        <input type="hidden" name="freelancer_id" ng-model="discount.freelancer_id">
                                        <fieldset class="no-label" ng-class="{'has-error':errors.coupon_code}">
                                            <input type="text" name="coupon_code" ng-model="discount.coupon_code"  placeholder="{{ trans('account_settings.plan.promocode') }}">
                                            <span class="field-error" ng-if="errors.coupon_code">Please enter code</span>
                                            <span class="field-error" ng-show="( errors.msg )" ng-bind="errors.msg[ 0 ]"></span>
                                        </fieldset>
                                        <input type="submit" name="" value="{{ trans('account_settings.plan.apply') }}">
                                    </form>
                                </div>
                            </div>
                            <div class="account-setting__plan--promo-apply" ng-if="validPromocode != ''">
                                <span>Promocode <strong> @{{ validPromocode.coupon_code }} (@{{ validPromocode.percentage }}%)</strong></span>
                                <button ng-click="removeDiscount()" class="cancel-payment-update"></button>
                            </div>
                        @endif
                        @if(Session::has('plan-expire') && ($plan != 'monthly'))
                            @if($subsciption)
                                <button class="tu-btn pink select-plan has-subscription">{{ trans('account_settings.plan.select') }}</button>
                            @else
                                <a href="javascript:;" class="tu-btn pink select-plan" ng-click="sub_type = 'pro'" data-toggle="modal" data-target="#add-card">{{ trans('account_settings.plan.select') }}</a>
                            @endif
                        @elseif($plan != 'monthly')
                            <button class="tu-btn pink  select-plan unable-to-select">{{ trans('account_settings.plan.select') }}</button>
                        @else
                            <div ng-if="subscription.started_at <= today">
                                <button class="tu-btn transparent select-plan btn-disable" style="margin-top: 30px;  position: unset;" ng-if="((subscription.plan == 'monthly') && (subscription.subscription_type == 'pro'))">
                                    {{ trans('account_settings.plan.your_current_active_plan') }}
                                </button>

                                <button class="tu-btn pink select-plan" ng-click="upgradePlan()" style="margin-top: 30px;" ng-if="((subscription.plan == 'monthly') && (subscription.subscription_type != 'pro'))">
                                    {{ trans('account_settings.plan.upgrade') }}
                                </button>
                            </div>
                            <div ng-if="subscription.started_at > today">
                                <button class="tu-btn transparent select-plan btn-disable" style="margin-top: 30px; position: unset;">
                                    You are on trial period
                                </button>
                            </div>
                            {{--<button class="tu-btn pink select-plan btn-disable" style="margin-top: 30px;">{{ ($plan == 'monthly') ? 'Selected' : trans('account_settings.plan.select') }}</button>--}}
                        @endif
                        </div>
                    </div>
                </div>
            </div>


            @if($plan == 'six-month')
                <div class="tab-pane fade" id="sixmonths" role="tabpanel" aria-labelledby="home-tab">
                    <div class="plans-main-content">
                        <div class="plans-box">
                            <div class="account-setting__plan--bar">
                                <span class="account-setting__plan--bar--title">{{ trans('account_settings.plan.basic') }}<small></small></span>
                                <span class="account-setting__plan--bar--price">${{ config('teamup.subscription.six-month.basic') }}</span>
                            </div>

                            <ul>
                                <li>{{ trans('account_settings.plan.available_features.features_1') }}</li>
                                <li>{{ trans('account_settings.plan.available_features.features_2') }}</li>
                                <li>{{ trans('account_settings.plan.available_features.features_3') }}</li>
                                <li>{{ trans('account_settings.plan.available_features.features_4') }}</li>
                            </ul>

                            @if(Session::has('plan-expire') || ($plan != 'six-month'))
                                <div class="account-setting__plan--promo" ng-if="validPromocode == ''">
                                    <div  style="display: contents;">
                                        <form style="display: inherit;" ng-submit="applyDiscountCode()">
                                            <input type="hidden" name="freelancer_id" ng-model="discount.freelancer_id">
                                            <fieldset class="no-label" ng-class="{'has-error':errors.coupon_code}">
                                                <input type="text" name="coupon_code" ng-model="discount.coupon_code"  placeholder="{{ trans('account_settings.plan.promocode') }}">
                                                <span class="field-error" ng-if="errors.coupon_code">Please enter code</span>
                                                <span class="field-error" ng-show="( errors.msg )" ng-bind="errors.msg[ 0 ]"></span>
                                            </fieldset>
                                            <input type="submit" name="" value="{{ trans('account_settings.plan.apply') }}">
                                        </form>
                                    </div>
                                </div>
                                <div class="account-setting__plan--promo-apply" ng-if="validPromocode != ''">
                                    <span>Promocode <strong> @{{ validPromocode.coupon_code }} (@{{ validPromocode.percentage }}%)</strong></span>
                                    <button ng-click="removeDiscount()" class="cancel-payment-update"></button>
                                </div>
                            @endif
                            @if(Session::has('plan-expire') || ($plan != 'six-month'))
                                @if($subsciption)
                                    <button class="tu-btn pink select-plan has-subscription">{{ trans('account_settings.plan.select') }}</button>
                                @else
                                    <a href="javascript:;" class="tu-btn pink select-plan" data-toggle="modal" data-target="#add-card">{{ trans('account_settings.plan.select') }}</a>
                                @endif
                            @else
                                <button class="tu-btn pink select-plan btn-disable" style="margin-top: 30px;">{{ ($plan == 'six-month') ? 'Selected' : trans('account_settings.plan.select') }}</button>
                            @endif
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@include('theme.freelancer.account-setting.modal-add-card-info')