@extends('companyuser::layouts.master')
@use('App\Services\Date')
@section('title',__('tenant::subscription.subscription'))
@section('extra-styles')
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/table/table-custome-styles.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/custom/radio-buttons-custom.css')}}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    .float-right{
        float: right;
    }
    .float-left{
        float: left;
    }
    .plan-radio{
        width: 150px;
    }
    .radio_plan>input:checked+div label {
        color: white !important;
    }
    .radio_plan>input:checked+div {
        color: white !important;
        background-color: #179b87;
        padding: 14px;
        font-size: 17px;
        border-radius: 7px;
        font-weight: bold;
    }
    .radio_plan>div label{
        cursor: pointer;
    }
    .radio_plan>div {
        cursor: pointer;
        border: 1px solid #d6d4d4;
        padding: 14px;
        font-size: 17px;
        border-radius: 7px;
        font-weight: bold;
    }
    .v-hide{
        visibility: hidden;
    }
    .link-disable{
        cursor: not-allowed;
        color: #7c827c;
    }
    .link-enable:hover{
        cursor: pointer;
        color: #7c827c;
    }
    .link-enable{
        cursor: pointer;
        color: #7c827c;
    }
    .link-active{
        cursor: pointer;
        color: #179b87;
    }
    .swal-footer {
        text-align: center;
    }
    .circle {
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        display: -webkit-flex;
        -webkit-align-items: center;
        -webkit-justify-content: center;
        display: -moz-box;
        -moz-box-align: center;
        -moz-justify-content: center;
        text-align: center;
        vertical-align: middle;
        font-size: 15px;
        border-radius: 50%;
        bottom: 30px;
        color: #fff;
        margin: auto;
    }
    .no-sort-table.dataTable thead .sorting_desc:before,
    .no-sort-table.dataTable thead .sorting_desc:after {
        content: "";
    }
    .activeText {
        transition: all 2s;
        display: inline-block;
        border-bottom: 6px solid #16d5b4;
        color: #000;
        font-size: 30px;
        position: relative;
        font-family: "ar-bd";
        margin-bottom: 30px;
    }
    .package-properties{
        padding-bottom: 0.8rem;
        border-bottom: 1px solid #65d4c5 !important;
        color: #fff;
        margin-bottom: 0.5rem;
        font-size: 12px;
        padding-inline-start: 0 !important;
        background-color: #11b99f;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .package-values{
        border-bottom: 1px solid #dad9d9 !important;
        padding-bottom: 0.8rem;
        margin-bottom: 0.5rem;
        font-size: 12px;
        padding-inline-start: 0 !important;
    }

    .package-features .dataTables_wrapper .dataTables_length,
    .package-features .dataTables_wrapper .dataTables_filter,
    .package-features .dataTables_wrapper .dataTables_paginate
    {
        display: none;
    }
    li.check:before {
        content: '';
        background-image: url(../../landing_page/images/true.svg);
        background-repeat: no-repeat;
        width: 28px;
        height: 28px;
        display: inline-block;
    }
    li.not-check:before, li.check:before {
        width: 24px;
        height: 24px;
    }
    li.not-check:before {
        content: '';
        background-image: url(../../landing_page/images/false.svg);
        background-repeat: no-repeat;
        width: 28px;
        height: 28px;
        display: inline-block;
    }
    .hide{
   display: none;
}
    .old-subscription-note{
        font-size: 16px;
        font-style: italic;
        font-weight: bold;
        padding-right: 10px;
        padding-left: 10px;
    }
    s{text-decoration:none;position:relative;}
    s::before {
        top: 50%;
        background:red;
        opacity:.7;
        content: '';
        width: 110%;
        position: absolute;
        height:.1em;
        border-radius:.1em;
        left: -5%;
        white-space:nowrap;
        display: block;
        transform: rotate(-15deg);
    }
    .package-circle-note{
        font-size: 16px;
    }

     /* Adds-On */
     .close-btn{
        float: left;
        background-color: transparent;
        border: none;
    }
    .close-btn-ltr{
        float: right;
        background-color: transparent;
        border: none;
    }
    .dismiss-close{
        width: 12%;
        float: left;
    }
    .dismiss-close-ltr{
        width: 12%;
        float: right;
    }
    .checkBoxContainer {
        display: block;
        position: relative;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
    }
    /* Hide the browser's default checkbox */
    .checkBoxContainer input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    .checkmark {
        position: absolute;
        top: -8px;
        height: 35px;
        width: 35px;
        background-color: #fff;
        border: solid 1px #ccc;
    }
    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    /* Show the checkmark when checked */
    .checkBoxContainer input:checked ~ .checkmark:after {
        display: block;
    }
    /* Style the checkmark/indicator */
    .checkBoxContainer .checkmark:after {
        left: 10px;
        top: 1px;
        width: 12px;
        height: 24px;
        border: solid orange;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
     #addsOn_modal .modal-content {
        background: linear-gradient(#d9e7ed, #f8feff);
        border-radius: 2rem;
        width: 70%;
        margin: auto;
    }
    .addsOn-icon-1{
        width: 15%;
        display: flex;
        margin: 3% auto;
    }
    .addOnSubmitBtn{
        font-size: 20px !important;
        line-height: 10px !important;
        width: 175px !important;
        border-radius: 3em;
        margin-bottom: 1rem;
        padding-top: 15px;
    }
    .totalSection{
        color: #009c84c2;
    }
    .addsOnField{
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 10px;
        padding: 20px;
    }
    /* Adds-On */
    .progress-bar{
        border-radius: 4px;
        padding: 10px;
        background: #ebebeb;
    }
    .progress-bar-content{
        background-color: #11b99f;
        color: #fff;
        text-align: center;
        border-radius: 4px;
        padding: 3px;
    }
    .progress-bar-content-text{
        width: 100%;
    }
</style>
@endsection

@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">@lang('tenant::subscription.subscription')</a></li>
        </ol>
    </div>
</div>
@endsection
@section('content')
<section id="configuration">
    <div class="container-fluid">
        <div class="row my-1">
            <div class="col-xs-6 headTitle">
                <h3 class="d-inline">@lang('tenant::subscription.subscription')</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                @include('tenant::partials.payment_status')
                <div class="card ">
                    @php
                        $renewalDate = $data['subscription']->renewal_date;
                    @endphp
                    <div class="card-body collapse in">
                        <div class="row mb-1">
                            <div class="col-md-3">
                                <h4 class="text-bold-600">{{__('tenant::subscription.Plan')}}</h4>
                            </div>
                            <div class="col-md-5">
                                <h4 class="text-bold-600"> {{$data['subscription']->package->name}}</h4>
                            </div>
                        </div>
                        <div class="row mb-1">
                            <div class="col-md-3">
                                <h5 class="text-bold-600">{{__('tenant::subscription.until')}}</h5>
                            </div>
                            <div class="col-md-5">
                                <span>{{ Date::format($renewalDate, 'date') }}</span>
                            </div>
                        </div>
                        <div class="row mb-1">
                            <div class="col-xs-3">
                                <h4 class="text-bold-600">
                                    @if($data['subscription']->price == 0)
                                    <span>{{__('tenant::subscription.Free')}}</span>
                                    @elseif($data['subscription']->plan == \Modules\Tenant\Enums\PackagePlansEnum::MONTHLY)
                                    <span>{{$data['subscription']->price}} {!! __('tenant::subscription.SAR\mo') !!}</span>
                                    @elseif($data['subscription']->plan == \Modules\Tenant\Enums\PackagePlansEnum::ANNUAL)
                                    <span>{{$data['subscription']->price}} {!! __('tenant::subscription.SAR\year') !!}</span>
                                    @elseif($data['subscription']->plan == \Modules\Tenant\Enums\PackagePlansEnum::SEMI_ANNUAL)
                                    <span>{{$data['subscription']->price}} {!! __('tenant::subscription.SAR\semi_year') !!}</span>
                                    @endif
                                </h4>
                            </div>
                            <div class="col-md-5">
                                @if($data['subscription']->is_trial)
                                    <span class="warning text-bold-600">
                                        <span>{{__('tenant::subscription.trial till')}}</span> <span>{{ Date::format($renewalDate, 'date') }}</span>
                                    </span>
                                @elseif($data['subscription']->is_expired)
                                    <span class="danger text-bold-600">{{__('tenant::subscription.expired')}}</span>
                                @elseif($data['subscription']->is_active)
                                    <span class="success text-bold-600">{{__('tenant::subscription.active')}}</span>
                                @endif
                            </div>
                        </div>
                        <div class="row mb-1">
                            @if($data['subscription']->company_id <= env('LAST_COMPANY_ID_FOR_OLD_PRICE'))
                                @if($data['subscription']->plan == \Modules\Tenant\Enums\PackagePlansEnum::MONTHLY)
                                    <span class="old-subscription-note">{!! __('tenant::subscription.month_message_for_old_clients', ['old_price' => $data['subscription']->price]) !!}
                                        <s class="subscription-new-price-note">
                                            @if($data['subscription']->package_id == \Modules\Tenant\Enums\PackagesEnum::ADVANCED)
                                                ({{\Modules\Tenant\Enums\PackagesEnum::PACKAGES_DATA[\Modules\Tenant\Enums\PackagesEnum::NEW_ADVANCED]['monthly_price']}})
                                            @elseif($data['subscription']->package_id == \Modules\Tenant\Enums\PackagesEnum::UNLIMITED)
                                                ({{\Modules\Tenant\Enums\PackagesEnum::PACKAGES_DATA[\Modules\Tenant\Enums\PackagesEnum::NEW_UNLIMITED]['monthly_price']}})
                                            @endif
                                        </s>
                                    {!! __('tenant::subscription.SAR\mo') !!}</span>
                                @elseif($data['subscription']->plan == \Modules\Tenant\Enums\PackagePlansEnum::ANNUAL)
                                    <span class="old-subscription-note">{!! __('tenant::subscription.year_message_for_old_clients', ['old_price' => $data['subscription']->price]) !!}
                                        <s class="subscription-new-price-note">
                                            @if($data['subscription']->package_id == \Modules\Tenant\Enums\PackagesEnum::ADVANCED)
                                                ({{\Modules\Tenant\Enums\PackagesEnum::PACKAGES_DATA[\Modules\Tenant\Enums\PackagesEnum::NEW_ADVANCED]['annual_price']}})
                                            @elseif($data['subscription']->package_id == \Modules\Tenant\Enums\PackagesEnum::UNLIMITED)
                                                ({{\Modules\Tenant\Enums\PackagesEnum::PACKAGES_DATA[\Modules\Tenant\Enums\PackagesEnum::NEW_UNLIMITED]['annual_price']}})
                                            @endif
                                        </s>
                                    {!! __('tenant::subscription.SAR\year') !!}</span>
                                @endif
                            @endif
                        </div>
                        <div style="width:20%">
                            <a href="javascript:void(0)" class="d-block mb-half btn btn-primary btnWidth"
                                onclick="openRenewSubscriptionModal('{{$data['latestSubscription']->package_id}}', '{{$data['plans']['monthly']}}', '{{$data['plans']['annual']}}', '{{$data['plans']['semi_annual']}}', 'renew')">
                                {{__('tenant::subscription.Renew Your Subscription')}}
                            @if($data['growthProgramAllowed'] && $data['plans']['semi_annual'])
                                {{__('tenant::payments.for growth program')}}
                            @endif
                            </a>
                            @if(isset($data['paymentRegistrationId'])&&!is_null($data['paymentRegistrationId'])&&$data['paymentRegistrationId'])
                                <button data-url="{{route('company.payment-registrations.destroy', ['subdomain' => $subdomain, 'company' => $data['subscription']->company_id])}}"
                                    data-toggle="modal" data-target="#deletePaymentRegistrationModal"
                                    class="btn btn-sm btn-danger delete-entries"
                                    data-toggle="tooltip" data-placement="bottom"
                                    title="@lang('tenant::payments.cancel_auto_payment')"
                                >{{__('tenant::payments.cancel_auto_payment')}}</button>
                            @endif
                        </div>
                    <hr>
                    <input type="hidden" value="" id="taxable">
                    @if(isset($data['upcomingSubscriptions']) && count($data['upcomingSubscriptions']))
                    <div class="card">
                        <h3><b>{{__('tenant::subscription.upcoming subscriptions')}}</b></h3>
                        <br><br>
                            <table class="table table-striped table-column dataex-res-configuration prevent-init-sort
                                @if(app()->getlocale() == 'ar') ar-language-file @endif" style="width:100%;display: inline-table;">
                                <thead>
                                    <tr>
                                        <th>{{__('tenant::subscription.package')}}</th>
                                        <th>{{__('tenant::subscription.package_plan')}}</th>
                                        <th>{{__('tenant::subscription.price')}} ({!! __('tenant::payments.SAR') !!})</th>
                                        <th>{{__('tenant::subscription.from')}}</th>
                                        <th>{{__('tenant::subscription.to')}}</th>
                                        <th>{{__('tenant::subscription.status')}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @isset($data['upcomingSubscriptions'])
                                    @foreach($data['upcomingSubscriptions'] as $upcomingSubscription)
                                    @php
                                    if(app()->getLocale() == 'en'){
                                    $upcomingSubscriptionDate = Date::format($upcomingSubscription->subscription_date, 'date');
                                    $upcomingRenewalDate = Date::format($upcomingSubscription->renewal_date, 'date');
                                    }else{
                                    $upcomingSubscriptionDate = $upcomingSubscription->subscription_date;
                                    $upcomingRenewalDate = $upcomingSubscription->renewal_date;
                                    }
                                    @endphp
                                    <tr>
                                        <td>{{$upcomingSubscription->package->name}}</td>
                                        <td>{{__('tenant::payments.' . $upcomingSubscription->plan)}}</td>
                                        <td>{{$upcomingSubscription->price}}</td>
                                        <td>{{ Date::format($upcomingSubscription->subscription_date, 'date') }}</td>
                                        <td>{{ Date::format($upcomingSubscription->renewal_date, 'date') }}</td>
                                        <td>
                                            @if($upcomingSubscription->is_paid)
                                            <span class="text-bold-600">{{__('tenant::subscription.paid')}}</span>
                                            @else
                                            <span class="text-bold-600">{{__('tenant::subscription.Free')}}</span>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                    @endisset
                                </tbody>
                            </table>
                        </div>
                        @endif
                    </div>
                </div>
                @if(isset($data['subscriptionLimits']) && in_array($data['latestSubscription']->package->id, [\Modules\Tenant\Enums\PackagesEnum::ADVANCED, \Modules\Tenant\Enums\PackagesEnum::NEW_ADVANCED, \Modules\Tenant\Enums\PackagesEnum::STANDARD]))
                    <div class="card">
                        <div class="card-header">
                            <h3>@lang('tenant::subscription.subscription_limits_header')</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                @if(is_array($data['subscriptionLimits']))
                                    @forelse ($data['subscriptionLimits'] as $key => $subscriptionLimit)
                                    @if($subscriptionLimit['limit'] === null)
                                            <div class="col-md-6 mb-2">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <h5>{{ __('tenant::subscription.subscription_limits.'.$key) }}</h5>
                                                        <div class="progress-bar">
                                                            <span class="progress-bar-content-text">@lang('tenant::subscription.subscription_limits.unlimited')</span>
                                                            <div class="progress-bar-content" style="width: 100%;"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="col-md-6 mb-2">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <h5>{{ __('tenant::subscription.subscription_limits.'.$key) }}</h5>
                                                        <div class="progress-bar">
                                                            <span class="progress-bar-content-text">{{ $subscriptionLimit['remaining'] }} / {{ $subscriptionLimit['limit'] }}</span>
                                                            <div class="progress-bar-content" style="width: @if($subscriptionLimit['percentageUsed'] > 100) 100 @else {{ $subscriptionLimit['percentageUsed'] }}@endif%;"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @empty
                                    @endforelse
                                @endif
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <i style="color: #ababab;">@lang('tenant::subscription.subscription_limits_reset_date', ['date' => $data['nextResetDate']])</i>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        @if(!$data['growthProgramAllowed'] || ($data['growthProgramAllowed'] && !$data['plans']['semi_annual']))
            <div class="row">
                <div class="col-xs-12">
                    <div class="card package-features pt-15">
                        <div class="toogle-btns">
                            <div class="switch-button">
                                <input class="switch-button-checkbox" type="checkbox"/>
                                <label class="switch-button-label switch-button-monthly " for="monthly">
                                    <span class="switch-button-label-span">{{__('landing_page.monthly')}}</span>
                                </label>
                                <label class="switch-button-label switch-button-yearly active" for="yearly">
                                    <span class="switch-button-label-span">{{__('landing_page.yearly')}}</span>
                                </label>
                            </div>
                        </div>
                        <table class="table table-striped table-column dataex-res-configuration prevent-init-sort no-sort-table prevent-search
                                @if(app()->getlocale() == 'ar') ar-language-file @endif" style="width:100%;display: inline-table;">
                            <thead>
                            <tr>
                                <th class="@if(app()->getLocale() == 'en') text-left @else text-right @endif" data-orderable="false"><h3 class="activeText">{{__('landing_page.packages')}}</h3></th>
                                {{-- <th style="width: 25%" class="text-center" data-orderable="false">
                                    <div class="circle package-circle package-year" style="background-color: #bccce6;"> 1200<br>@lang('landing_page.currency') </div>
                                    <div class="circle package-circle package-month hide" style="background-color: #bccce6;"> 120<br>@lang('landing_page.currency') </div>
                                </th> --}}
                                <th class="text-center" data-orderable="false">
                                    @if($data['subscription']->company_id <= env('LAST_COMPANY_ID_FOR_OLD_PRICE'))
                                        <div class="package-circle-note package-year-note"><s>2000 + {{__('tenant::subscription.vat')}}</s></div>
                                        <div class="circle package-circle package-year" style="background-color: #11b99f;">900<br>@lang('landing_page.currency')</div>
                                        <div class="package-circle-note package-month-note invisible"><s>190 + {{__('tenant::subscription.vat')}}</s></div>
                                        <div class="circle package-circle package-month hide" style="background-color: #11b99f;">90<br>@lang('landing_page.currency')</div>
                                    @else
                                        <div class="circle package-circle package-year" style="background-color: #11b99f;">900 + {{__('tenant::subscription.vat')}}<br>@lang('landing_page.currency')</div>
                                        <div class="circle package-circle package-month hide" style="background-color: #11b99f;">90 + {{__('tenant::subscription.vat')}}<br>@lang('landing_page.currency')</div>
                                    @endif
                                </th>
                                <th class="text-center" data-orderable="false">
                                    @if($data['subscription']->company_id <= env('LAST_COMPANY_ID_FOR_OLD_PRICE'))
                                        <div class="package-circle-note package-year-note"><s>2700 + {{__('tenant::subscription.vat')}}</s></div>
                                        <div class="circle package-circle package-year" style="background-color: #11b99f;">1900<br>@lang('landing_page.currency')</div>
                                        <div class="package-circle-note package-month-note invisible"><s>270 + {{__('tenant::subscription.vat')}}</s></div>
                                        <div class="circle package-circle package-month hide" style="background-color: #11b99f;">239<br>@lang('landing_page.currency')</div>
                                    @else
                                        <div class="circle package-circle package-year" style="background-color: #11b99f;">2700 + {{__('tenant::subscription.vat')}}<br>@lang('landing_page.currency')</div>
                                        <div class="circle package-circle package-month hide" style="background-color: #11b99f;">270 + {{__('tenant::subscription.vat')}}<br>@lang('landing_page.currency')</div>
                                    @endif
                                </th>
                                <th class="text-center" data-orderable="false">
                                    @if($data['subscription']->company_id <= env('LAST_COMPANY_ID_FOR_OLD_PRICE'))
                                        <div class="package-circle-note package-year-note"><s>3500 + {{__('tenant::subscription.vat')}}</s></div>
                                        <div class="circle package-circle package-year" style="background-color:#0251d1 ;">2500 <br>@lang('landing_page.currency')</div>
                                        <div class="package-circle-note package-month-note invisible"><s>350 + {{__('tenant::subscription.vat')}}</s></div>
                                        <div class="circle package-circle package-month hide" style="background-color:#0251d1 ;">299 <br>@lang('landing_page.currency')</div>
                                    @else
                                        <div class="circle package-circle package-year" style="background-color:#0251d1 ;">3500 + {{__('tenant::subscription.vat')}}<br>@lang('landing_page.currency')</div>
                                        <div class="circle package-circle package-month hide" style="background-color:#0251d1 ;">350 + {{__('tenant::subscription.vat')}}<br>@lang('landing_page.currency')</div>
                                    @endif
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                                @foreach(\Modules\Tenant\Enums\PackagesFeaturesEnum::PACKAGES_LIMITS_FEATURES as $feature => $details)
                                    <tr>
                                        <td style="padding-right: 26px !important;padding-left: 26px !important;" class="@if(app()->getLocale() == 'en') text-left @else text-right @endif package-properties"> @lang('tenant::subscription.' . $feature) </td>

                                        @foreach($details as $featurePackage => $detail)
                                            @if(
                                                    $data['subscription']->company_id > env('LAST_COMPANY_ID_FOR_OLD_PRICE')
                                                    && ($featurePackage == \Modules\Tenant\Enums\PackagesEnum::NEW_ADVANCED || $featurePackage == \Modules\Tenant\Enums\PackagesEnum::NEW_UNLIMITED || $featurePackage == \Modules\Tenant\Enums\PackagesEnum::STANDARD)
                                                )
                                                @if($detail)
                                                    <td class="text-center package-values">{{$detail}}</td>
                                                @else
                                                    <td class="text-center package-values">@lang('landing_page.unlimited')</td>
                                                @endif
                                            @endif
                                        @endforeach

                                        @foreach($details as $featurePackage => $detail)
                                            @if(
                                                $data['subscription']->company_id <= env('LAST_COMPANY_ID_FOR_OLD_PRICE')
                                                && ($featurePackage == \Modules\Tenant\Enums\PackagesEnum::ADVANCED || $featurePackage == \Modules\Tenant\Enums\PackagesEnum::UNLIMITED || $featurePackage == \Modules\Tenant\Enums\PackagesEnum::STANDARD)
                                            )
                                                @if($detail)
                                                    <td class="text-center package-values">{{$detail}}</td>
                                                @else
                                                    <td class="text-center package-values">@lang('landing_page.unlimited')</td>
                                                @endif
                                            @endif
                                        @endforeach


                                    </tr>
                                @endforeach

                                @foreach(\Modules\Tenant\Enums\PackagesFeaturesEnum::PACKAGES_ALLOWED_OR_NOT_FEATURES as $feature => $details)
                                    <tr>
                                        <td style="padding-right: 26px !important;padding-left: 26px !important;" class="@if(app()->getLocale() == 'en') text-left @else text-right @endif package-properties"> @lang('tenant::subscription.' . $feature) </td>

                                        @foreach($details as $featurePackage => $detail)
                                            @if(
                                                    $data['subscription']->company_id > env('LAST_COMPANY_ID_FOR_OLD_PRICE')
                                                    && ($featurePackage == \Modules\Tenant\Enums\PackagesEnum::NEW_ADVANCED || $featurePackage == \Modules\Tenant\Enums\PackagesEnum::NEW_UNLIMITED || $featurePackage == \Modules\Tenant\Enums\PackagesEnum::STANDARD)
                                                )
                                                @if($detail && $detail == 'landing_page.the_free_reports')
                                                    <td style="padding-bottom: 0px;" class="text-center package-values">@lang($detail)</td>
                                                @elseif($detail)
                                                    <td style="padding-bottom: 0px;" class="text-center package-values"><li class="check"></li></td>
                                                @else
                                                    <td style="padding-bottom: 0px;" class="text-center package-values"><li class="not-check"></li></td>
                                                @endif
                                            @endif
                                        @endforeach

                                        @foreach($details as $featurePackage => $detail)
                                            @if(
                                                $data['subscription']->company_id <= env('LAST_COMPANY_ID_FOR_OLD_PRICE')
                                                && ($featurePackage == \Modules\Tenant\Enums\PackagesEnum::ADVANCED || $featurePackage == \Modules\Tenant\Enums\PackagesEnum::UNLIMITED || $featurePackage == \Modules\Tenant\Enums\PackagesEnum::STANDARD)
                                            )
                                                @if($detail && $detail == 'landing_page.the_free_reports')
                                                    <td style="padding-bottom: 0px;" class="text-center package-values">@lang($detail)</td>
                                                @elseif($detail)
                                                    <td style="padding-bottom: 0px;" class="text-center package-values"><li class="check"></li></td>
                                                @else
                                                    <td style="padding-bottom: 0px;" class="text-center package-values"><li class="not-check"></li></td>
                                                @endif
                                            @endif
                                        @endforeach
                                    </tr>
                                @endforeach
                                <tr>
                                <td></td>
                                {{-- Standard Package --}}
                                @if($data['subscription']->package_id == \Modules\Tenant\Enums\PackagesEnum::STANDARD)
                                    <td class="text-center">
                                        <button class="btn btn-md btn-default" type="button" style="background-color: #bccce6;" title="@lang('tenant::subscription.subscribed')">@lang('tenant::subscription.subscribed')</button>
                                    </td>
                                    @if($data['subscription']->company_id <= env('LAST_COMPANY_ID_FOR_OLD_PRICE'))
                                        @foreach($data['availablePackages']->whereIn('id', [\Modules\Tenant\Enums\PackagesEnum::ADVANCED, \Modules\Tenant\Enums\PackagesEnum::UNLIMITED]) as $package)
                                            <td class="text-center">
                                                <button class="btn btn-md btn-success" style="color: #0a0302" onclick="openRenewSubscriptionModal('{{$package->id}}', '{{$package->monthly_price}}', '{{$package->annual_price}}', '{{$package->semi_annual_price}}', 'upgrade')" title="@lang('tenant::subscription.downgrade')">@lang('tenant::subscription.upgrade')</button>
                                            </td>
                                        @endforeach
                                    @endif
                                    @if($data['subscription']->company_id > env('LAST_COMPANY_ID_FOR_OLD_PRICE'))
                                        @foreach($data['availablePackages']->whereIn('id', [\Modules\Tenant\Enums\PackagesEnum::NEW_ADVANCED, \Modules\Tenant\Enums\PackagesEnum::NEW_UNLIMITED]) as $package)
                                            <td class="text-center">
                                                <button class="btn btn-md btn-success" style="color: #0a0302" onclick="openRenewSubscriptionModal('{{$package->id}}', '{{$package->monthly_price}}', '{{$package->annual_price}}', '{{$package->semi_annual_price}}', 'upgrade')" title="@lang('tenant::subscription.downgrade')">@lang('tenant::subscription.upgrade')</button>
                                            </td>
                                        @endforeach
                                    @endif
                                @endif

                                {{-- Advanced Package --}}
                                @if($data['subscription']->package_id == \Modules\Tenant\Enums\PackagesEnum::ADVANCED || $data['subscription']->package_id == \Modules\Tenant\Enums\PackagesEnum::NEW_ADVANCED)
                                    @foreach($data['availablePackages']->where('id', \Modules\Tenant\Enums\PackagesEnum::STANDARD) as $package)
                                        <td class="text-center">
                                            <button class="btn btn-soundcloud btn-md" style="color: #0a0302" onclick="openRenewSubscriptionModal('{{$package->id}}', '{{$package->monthly_price}}', '{{$package->annual_price}}', '{{$package->semi_annual_price}}', 'downgrade')" title="@lang('tenant::subscription.downgrade')">@lang('tenant::subscription.downgrade')</button>
                                        </td>
                                    @endforeach
                                    <td class="text-center">
                                        <button class="btn btn-md btn-default" type="button" style="background-color: #bccce6;" title="@lang('tenant::subscription.subscribed')">@lang('tenant::subscription.subscribed')</button>
                                    </td>


                                    @if($data['subscription']->company_id <= env('LAST_COMPANY_ID_FOR_OLD_PRICE'))
                                        @foreach($data['availablePackages']->whereIn('id', [\Modules\Tenant\Enums\PackagesEnum::UNLIMITED]) as $package)
                                            <td class="text-center">
                                                <button class="btn btn-md btn-success" style="color: #0a0302" onclick="openRenewSubscriptionModal('{{$package->id}}', '{{$package->monthly_price}}', '{{$package->annual_price}}', '{{$package->semi_annual_price}}', 'upgrade')" title="@lang('tenant::subscription.downgrade')">@lang('tenant::subscription.upgrade')</button>
                                            </td>
                                        @endforeach
                                    @endif
                                    @if($data['subscription']->company_id > env('LAST_COMPANY_ID_FOR_OLD_PRICE'))
                                        @foreach($data['availablePackages']->whereIn('id', [\Modules\Tenant\Enums\PackagesEnum::NEW_UNLIMITED]) as $package)
                                            <td class="text-center">
                                                <button class="btn btn-md btn-success" style="color: #0a0302" onclick="openRenewSubscriptionModal('{{$package->id}}', '{{$package->monthly_price}}', '{{$package->annual_price}}', '{{$package->semi_annual_price}}', 'upgrade')" title="@lang('tenant::subscription.downgrade')">@lang('tenant::subscription.upgrade')</button>
                                            </td>
                                        @endforeach
                                    @endif
                                @endif

                                {{-- Unlimited Package --}}
                                @if($data['subscription']->package_id == \Modules\Tenant\Enums\PackagesEnum::UNLIMITED || $data['subscription']->package_id == \Modules\Tenant\Enums\PackagesEnum::NEW_UNLIMITED)
                                    @foreach($data['availablePackages']->where('id', \Modules\Tenant\Enums\PackagesEnum::STANDARD) as $package)
                                        <td class="text-center">
                                            <button class="btn btn-soundcloud btn-md" style="color: #0a0302" onclick="openRenewSubscriptionModal('{{$package->id}}', '{{$package->monthly_price}}', '{{$package->annual_price}}', '{{$package->semi_annual_price}}', 'downgrade')" title="@lang('tenant::subscription.downgrade')">@lang('tenant::subscription.downgrade')</button>
                                        </td>
                                    @endforeach

                                    @if($data['subscription']->company_id <= env('LAST_COMPANY_ID_FOR_OLD_PRICE'))
                                        @foreach($data['availablePackages']->whereIn('id', [\Modules\Tenant\Enums\PackagesEnum::ADVANCED]) as $package)
                                            <td class="text-center">
                                                <button class="btn btn-soundcloud btn-md" style="color: #0a0302" onclick="openRenewSubscriptionModal('{{$package->id}}', '{{$package->monthly_price}}', '{{$package->annual_price}}', '{{$package->semi_annual_price}}', 'downgrade')" title="@lang('tenant::subscription.downgrade')">@lang('tenant::subscription.downgrade')</button>
                                            </td>
                                        @endforeach
                                    @endif
                                    @if($data['subscription']->company_id > env('LAST_COMPANY_ID_FOR_OLD_PRICE'))
                                        @foreach($data['availablePackages']->whereIn('id', [\Modules\Tenant\Enums\PackagesEnum::NEW_ADVANCED]) as $package)
                                            <td class="text-center">
                                                <button class="btn btn-soundcloud btn-md" style="color: #0a0302" onclick="openRenewSubscriptionModal('{{$package->id}}', '{{$package->monthly_price}}', '{{$package->annual_price}}', '{{$package->semi_annual_price}}', 'downgrade')" title="@lang('tenant::subscription.downgrade')">@lang('tenant::subscription.downgrade')</button>
                                            </td>
                                        @endforeach
                                    @endif

                                    <td class="text-center">
                                        <button class="btn btn-md btn-default" type="button" style="background-color: #bccce6;" title="@lang('tenant::subscription.subscribed')">@lang('tenant::subscription.subscribed')</button>
                                    </td>
                                @endif
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endif
    </div>
</section>

{{-- Adds-on subscription for renewal/Upgrade --}}
@include('tenant::partials.adds-on')
<input type="hidden" id="lastClickedRenewalType">

{{---------------- popup to deletePaymentRegistrationModal supplier -------------------------------}}
<div class="modal fade" id="deletePaymentRegistrationModal" tabindex="-1" role="dialog"
     aria-labelledby="favoritesModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="favoritesModalLabel">@lang('tenant::payments.cancel_auto_payment')</h4>
            </div>
            <div class="modal-body">
                <p>
                    @lang('tenant::payments.confirmation_delete_auto_payment')
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default mx-1"
                        data-dismiss="modal">@lang('Cancel')</button>
                <span class="pull-right">
                    <form  action="" method="post" class="form delete-form">
                        @method('delete')
                        @csrf
                        <button type="submit" class="btn btn-primary">@lang('Continue')</button>
                    </form>
                </span>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="bankTransferModal" tabindex="-1" role="dialog"
     aria-labelledby="favoritesModalLabel"
     style="top:0;padding-right:0!important;">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"
                    id="bankTransferModalModalLabel">{{__('tenant::subscription.bank_transfer_title')}}</h4>
            </div>
            <div class="modal-body text-center">
                <p class="mb-half">{{__('tenant::subscription.bank_transfer_message')}}</p>
                <div class="row mb-half">
                    <div style="display: inline-flex">
                        <p class="m-0"> {{__('tenant::subscription.Phone')}}: </p>
                        <p class="m-0" style="direction: initial;"> {{ config('payment.manualPhone') }} </p>
                    </div>
                    <div>
                        {{__('tenant::subscription.Email')}}: <a href="{{ 'mailto:'.config('payment.manualEmail') }}">{{ config('payment.manualEmail') }}</a>
                    </div>
                    <div>
                        {{__('tenant::subscription.Bank')}}:
                        @if(app()->getLocale() == 'ar')
                            {{ config('payment.manualBankNameAr') }}
                        @else
                            {{ config('payment.manualBankName') }}
                        @endif
                    </div>
                    <div>
                        {{__('tenant::subscription.Bank account id')}}:
                        @if(app()->getLocale() == 'ar')
                            {{ config('payment.manualBankAccountAr') }}
                        @else
                            {{ config('payment.manualBankAccount') }}
                        @endif
                    </div>
                    <div> @lang('tenant::subscription.IBAN'): {{ config('payment.iban') }}</div>
                </div>
            </div>
            <div class="modal-footer text-center">
                <button
                    type="submit"
                    class="btn btn-primary btnWidth"
                    data-dismiss="modal"
                    aria-label="Close">@lang('Ok')</button>
            </div>
        </div>
    </div>
</div>
@isset($data['status'])
    @if($data['status'])
        {{---------------- START payment -------------------------------}}
        <div class="modal" id="favoritesModal" tabindex="-1" role="dialog"
             aria-labelledby="favoritesModalLabel"
             style="top:0;padding-right:0!important;">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title"
                            id="favoritesModalLabel">{{__('tenant::subscription.Payment Confirmation')}}</h4>
                    </div>
                    <div class="modal-body text-center">
                        <div id="tapPay">
                            <form id="form-container" method="POST" action="{{route('company.tap-payment-confirm', $subdomain)}}">
                                @csrf
                                <!-- Tap element will be here -->
                                <div id="element-container"></div>
                                <div id="error-handler" role="alert"></div>
                                <!-- Tap pay button -->
                                <button id="tap-btn"class="btn btn-primary">@lang('Continue')</button>
                                <a class="btn btn-danger" id="tap-cancel" href="{{ route('company.subscriptions.index',$subdomain) }}">@lang('Cancel')</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{---------------- END  payment -------------------------------}}

    @else
        @include('tenant::partials.manual_payment')
    @endif
@else

@if(config('payment.PaymentStatus'))
{{---------------- START data for checkout code -------------------------------}}
<div class="modal fade" id="favoritesModal" tabindex="-1" role="dialog"
     aria-labelledby="favoritesModalLabel"
     style="top:0;padding-right:0!important;overflow-y:auto;">
    <div class="modal-dialog" role="document" style="max-width: 800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"
                    id="favoritesModalLabel">{{__('tenant::subscription.Payment Confirmation')}}
                </h4>
            </div>
            <form id="checkout_form" method="get" action="{{ route('company.making.payment-transaction',$subdomain) }}">
                <div class="modal-body">
                    <div class="card-block">
                        <div class="form-body">
                            <div class="form-group">
                                <div class="alert alert-info fade in mr-2 ml-2 d-none" id="upgrade_desc_alert">
                                    <div class="error-header">
                                           <span class="text-dark" role="alert">
                                                <p class="pl-1 pr-1 pb-0 mb-0">@lang('tenant::subscription.upgrade_description_text')</p>
                                            </span>
                                    </div>
                                </div>
                                <div class="row plans_selection">
                                    @error('payment_plan')
                                        <div class="alert alert-danger fade in mr-2 ml-2">
                                            <div class="error-header">
                                                <a href="#" class="close font-medium-4" data-dismiss="alert" aria-label="close">&times;</a>
                                                   <span class="invalid-feedback" role="alert">
                                                        <p class="pl-1 pr-1 pb-0 mb-0">{{ $message }}</p>
                                                    </span>
                                            </div>
                                        </div>
                                    @enderror
                                     @error('package_id')
                                        <div class="alert alert-danger fade in mr-2 ml-2">
                                            <div class="error-header">
                                                <a href="#" class="close font-medium-4" data-dismiss="alert" aria-label="close">&times;</a>
                                                   <span class="invalid-feedback" role="alert">
                                                        <p class="pl-1 pr-1 pb-0 mb-0">{{ $message }}</p>
                                                    </span>
                                            </div>
                                        </div>
                                    @enderror
                                    <div class="col-md-3">
                                        <label for="payment_plan" class="pt-3">@lang('tenant::payments.Payment plan')</label>
                                    </div>
                                    <input type="hidden" name="package_id" id="package_id" value="{{old('package_id')}}">
                                    <input type="hidden" name="foodics_activation" id="foodics_activation" value="{{old('foodics_activation')}}">
                                    <input type="hidden" id="displayed_price" value="{{old('displayed_price')}}">
                                    <input type="hidden" id="is_renew" name="is_renew" value="{{old('is_renew')}}">
                                    <div class="col-md-9">
                                        <div class="row">
                                            <div class="col-md-1 col-xs-2"></div>
                                            @foreach($data['plans'] as $plan => $price)
                                                {{--
                                                    continue foreach if:
                                                     1- growth program allowed and the plan not semi annual to prevent rendering the other plans
                                                     2- if growth program is not allowed and the plan is semi annual to prevent rendering the semi
                                                            annual plan in the normal scenario
                                                     3- if the growth program is allowed but there is no price for the semi annual in the subscribed package
                                                            to prevent drawing the semi annual plan and let user select between monthly and annual plans
                                                --}}
                                                @if(($data['growthProgramAllowed'] && $data['plans']['semi_annual'] && $plan != \Modules\Tenant\Enums\PackagePlansEnum::SEMI_ANNUAL)
                                                      || (!$data['growthProgramAllowed'] && $plan == \Modules\Tenant\Enums\PackagePlansEnum::SEMI_ANNUAL)
                                                      || ($data['growthProgramAllowed'] && !$data['plans']['semi_annual'] && $plan == \Modules\Tenant\Enums\PackagePlansEnum::SEMI_ANNUAL))
                                                    @continue
                                                @endif
                                                @if($data['subscription']->package_id == \Modules\Tenant\Enums\PackagesEnum::E_INVOICING && $plan == \Modules\Tenant\Enums\PackagePlansEnum::ANNUAL )
                                                    @continue
                                                @endif
                                                <div class="col-md-4 col-sm-4 col-xs-12 text-center radio_plan" style="margin-bottom: 10px;">
                                                    <input class="d-none" data-price="{{$price}}" id="{{$plan}}" type="radio" name="payment_plan"
                                                           value="{{ $plan }}"
                                                           @if ($plan == $data['latestSubscription']['plan']
                                                                   || ($data['growthProgramAllowed'] && $plan == \Modules\Tenant\Enums\PackagePlansEnum::SEMI_ANNUAL)
                                                                   || ($data['subscription']->plan == \Modules\Tenant\Enums\PackagePlansEnum::SEMI_ANNUAL)
                                                                   || ($data['latestSubscription']->plan == \Modules\Tenant\Enums\PackagePlansEnum::SEMI_ANNUAL))
                                                            checked
                                                           @endif />
                                                    <div class="plan-radio @if(app()->getLocale() == 'ar') float-right @else float-left @endif @if ($plan == $data['latestSubscription']['plan']) radio-active @endif">
                                                        @if($plan == \Modules\Tenant\Enums\PackagePlansEnum::ANNUAL
                                                                || $plan == \Modules\Tenant\Enums\PackagePlansEnum::SEMI_ANNUAL)
                                                            <label style="line-height: 1.5;" for="{{$plan}}"><span id="{{$plan}}_plan" >{{$price}} {!! __('tenant::payments.SAR') !!} </span>
                                                                <br>
                                                                {{__('tenant::payments.' . $plan)}}
                                                                <br><lable style="font-weight: lighter;">({{__('tenant::payments.' . $plan .'_discount')}}) </lable> </label>
                                                        @else
                                                                <label style="line-height: 2.24;" for="{{$plan}}"><span id="{{$plan}}_plan" >{{$price}} {!! __('tenant::payments.SAR') !!}</span>
                                                                <br>
                                                                {{__('tenant::payments.' . $plan)}}
                                                            </label>
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="col-sm-1"></div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group upgrade_package_div">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label for="remaining_of_your_balance">@lang('tenant::payments.remaining_of_your_balance')</label>
                                    </div>
                                    <div class="col-md-9">
                                        <label class="text-bold-700" id="remaining_of_your_balance"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group upgrade_package_div">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label for="needed_to_pay">@lang('tenant::payments.needed_to_pay')</label>
                                    </div>
                                    <div class="col-md-9">
                                        <label class="text-bold-700" id="needed_to_pay"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label for="billing_street1">@lang('tenant::payments.billing_street1')</label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="billing_street1" value="{{ $data['lastTransactionData']->billing_street1 ?? $data['lastTransactionData'] }}" id="billing_street1" class="w-100 form-control @if($errors->has('billing_street1')) is-invalid @endif">
                                        <span class="invalid-feedback text text-danger"
                                              role="alert"
                                              id="feedback_billing_street1">
                                            @error('billing_street1')
                                            <p>{{ $message }}</p>
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label for="billing_country">@lang('tenant::payments.billing_country')</label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="billing_country" value="Saudi Arabia (المملكة العربية السعودية)" id="billing_country" readonly class="w-100 form-control @if($errors->has('billing_street1')) is-invalid @endif">
                                        @error('billing_country')
                                        <span class="invalid-feedback text text-danger" role="alert">
                                            <p>{{ $message }}</p>
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label for="billing_city">@lang('tenant::payments.billing_city')</label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="billing_city" value="{{ $data['lastTransactionData']->billing_city ?? $data['lastTransactionData'] }}" id="billing_city" class="w-100 form-control @if($errors->has('billing_city')) is-invalid @endif">
                                        <span class="invalid-feedback text text-danger" role="alert"
                                              id="feedback_billing_city">
                                            @error('billing_city')
                                            <p>{{ $message }}</p>
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label for="billing_state">@lang('tenant::payments.billing_state')</label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="billing_state" value="{{ $data['lastTransactionData']->billing_state ?? $data['lastTransactionData'] }}" id="billing_state" class="w-100 form-control @if($errors->has('billing_state')) is-invalid @endif">
                                        <span class="invalid-feedback text text-danger" role="alert"
                                              id="feedback_billing_state">
                                            @error('billing_state')
                                            <p>{{ $message }}</p>
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label for="billing_postcode">@lang('tenant::payments.billing_postcode')</label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="billing_postcode" value="{{ $data['lastTransactionData']->billing_postcode ?? $data['lastTransactionData'] }}" id="billing_postcode" class="w-100 form-control @if($errors->has('billing_postcode')) is-invalid @endif">
                                        <span class="invalid-feedback text text-danger" role="alert"
                                              id="feedback_billing_postcode">
                                            @error('billing_postcode')
                                            <p>{{ $message }}</p>
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label for="promo_code">@lang('tenant::promo-codes.promo code')</label>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="col-md-10 p-0">
                                            <input type="text" name="promo_code" id="promo_code" class="w-100 form-control @if($errors->has('promo_code')) is-invalid @endif">
                                        </div>
                                        <div class="col-md-2">
                                            <a href="javascript:void(0)" class="link-disable promo-code-icon" onclick="validatePromoCode()">
                                                <i class="fa fa-check-circle link-disable promo-code-icon"
                                                   style="font-size: 33px;padding-top: 3px;"
                                                   aria-hidden="true"></i>
                                            </a>
                                        </div>
                                        <span class="invalid-feedback text text-success promo-code-msg" role="alert"
                                              id="success_promo_code">
                                        </span>
                                        <span class="invalid-feedback text text-danger promo-code-msg" role="alert"
                                              id="feedback_promo_code">
                                            @error('promo_code')
                                            <p>{{ $message }}</p>
                                            @enderror
                                        </span>

                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label for="payment_method">@lang('tenant::payments.payment_method')</label>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-md-2 col-xs-6 text-center"></div>
                                            @foreach(\Modules\Tenant\Enums\PaymentMethodEnum::METHODS as $method)
                                            <div class="col-md-2 col-xs-6 text-center" id="{{$method['key']}}">
                                                <label class="radio-img">
                                                    <input type="radio" name="payment_method"
                                                           value="{{ $method['id'] }}"
                                                           @if ($loop->first&&!$data['lastTransactionData'])
                                                    checked
                                                    @elseif ($data['lastTransactionData']&&$data['lastTransactionData']->payment_method==$method['id'])
                                                    checked
                                                    @endif />
                                                    @if($method['id'] == \Modules\Tenant\Enums\PaymentMethodEnum::BANK_TRANSFER)
                                                    <img src="{{asset("assets/images/payments/BANK_TRANSFER_".app()->getLocale().".png")}}">
                                                    @else
                                                    <img src="{{ asset($method['image']) }}">
                                                    @endif
                                                </label>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                @error('payment_method')
                                <span class="invalid-feedback text text-danger" role="alert">
                                    <p>{{ $message }}</p>
                                </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer text-center">
                        <button id="continue_button_checkout_code" type="button"
                                class="btn btn-primary btnWidth">@lang('Continue')</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{{---------------- END data for checkout code -------------------------------}}
<script>
    const messages = {
        billingStreet: {
        required: "@lang('validation.required',['attribute'=>__('tenant::payments.billing_street1')])",
                min: "@lang('validation.min.string',['attribute'=>__('tenant::payments.billing_street1'),'min'=>2])",
                max: "@lang('validation.max.string',['attribute'=>__('tenant::payments.billing_street1'),'max'=>100])",
        },
        billingCity: {
        required: "@lang('validation.required',['attribute'=>__('tenant::payments.billing_city')])",
                min: "@lang('validation.min.string',['attribute'=>__('tenant::payments.billing_city'),'min'=>2])",
                max: "@lang('validation.max.string',['attribute'=>__('tenant::payments.billing_city'),'max'=>20])",
        },
        billingState: {
        min: "@lang('validation.min.string',['attribute'=>__('tenant::payments.billing_state'),'min'=>2])",
                required: "@lang('validation.required',['attribute'=>__('tenant::payments.billing_state')])",
                max: "@lang('validation.max.string',['attribute'=>__('tenant::payments.billing_state'),'max'=>20])",
        },
        billingPostcode: {
        pattern: "@lang('validation.regex',['attribute'=>__('tenant::payments.billing_postcode')])",
                required: "@lang('validation.required',['attribute'=>__('tenant::payments.billing_postcode')])",
                max: "@lang('validation.max.code',['attribute'=>__('tenant::payments.billing_postcode'),'max'=>5])",
                min: "@lang('validation.min.code',['attribute'=>__('tenant::payments.billing_postcode'),'min'=>5])",
        },
    }

    const checkoutCodeButtonContinue = document.querySelector('#continue_button_checkout_code');
    const checkoutCodeForm = document.querySelector('#checkout_form');
    // ================ inputs ================ //
    const billingStreetElement = document.querySelector("#billing_street1");
    const billingCityElement = document.querySelector('#billing_city');
    const billingStateElement = document.querySelector('#billing_state');
    const billingPostcodeElement = document.querySelector('#billing_postcode');
    // ================ feedback ================ //
    const billingStreetElementFeedback = document.querySelector('#feedback_billing_street1');
    const billingCityElementFeedback = document.querySelector('#feedback_billing_city');
    const billingStateElementFeedback = document.querySelector('#feedback_billing_state');
    const billingPostcodeElementFeedback = document.querySelector('#feedback_billing_postcode');
    function resetFeedback() {
        document
                .querySelectorAll("[id^=feedback_]")
                .forEach(item => item.innerHTML = "");
    }

    function validateCheckOutFormInputs() {
        resetFeedback();
        const billingStreet = billingStreetElement.value;
        const billingCity = billingCityElement.value;
        const billingState = billingStateElement.value;
        const billingPostcode = billingPostcodeElement.value;
        if (!billingStreet) {
            billingStreetElement.classList.add("is-invalid");
            billingStreetElement.classList.add("frontend-validation-error");
            let feedback = document.createElement("p");
            feedback.innerText = messages.billingStreet.required;
            billingStreetElementFeedback.appendChild(feedback);
        }
        if (billingStreet && billingStreet.length < 2) {
            billingStreetElement.classList.add("is-invalid");
            billingStreetElement.classList.add("frontend-validation-error");
            let feedback = document.createElement("p");
            feedback.innerText = messages.billingStreet.min;
            billingStreetElementFeedback.appendChild(feedback);
        }
        if (billingStreet && billingStreet.length > 100) {
            billingStreetElement.classList.add("is-invalid");
            billingStreetElement.classList.add("frontend-validation-error");
            let feedback = document.createElement("p");
            feedback.innerText = messages.billingStreet.max;
            billingStreetElementFeedback.appendChild(feedback);
        }

        if (!billingCity) {
            billingCityElement.classList.add("is-invalid");
            billingCityElement.classList.add("frontend-validation-error");
            let feedback = document.createElement("p");
            feedback.innerText = messages.billingCity.required;
            billingCityElementFeedback.appendChild(feedback);
        }
        if (billingCity && billingCity.length < 2) {
            billingCityElement.classList.add("is-invalid");
            billingCityElement.classList.add("frontend-validation-error");
            let feedback = document.createElement("p");
            feedback.innerText = messages.billingCity.min;
            billingCityElementFeedback.appendChild(feedback);
        }
        if (billingCity && billingCity.length > 20) {
            billingCityElement.classList.add("is-invalid");
            billingCityElement.classList.add("frontend-validation-error");
            let feedback = document.createElement("p");
            feedback.innerText = messages.billingCity.max;
            billingCityElementFeedback.appendChild(feedback);
        }

        if (!billingState) {
            billingStateElement.classList.add("is-invalid");
            billingStateElement.classList.add("frontend-validation-error");
            let feedback = document.createElement("p");
            feedback.innerText = messages.billingState.required;
            billingStateElementFeedback.appendChild(feedback);
        }
        if (billingState && billingCity.length < 2) {
            billingStateElement.classList.add("is-invalid");
            billingStateElement.classList.add("frontend-validation-error");
            let feedback = document.createElement("p");
            feedback.innerText = messages.billingState.min;
            billingStateElementFeedback.appendChild(feedback);
        }
        if (billingState && billingCity.length > 20) {
            billingStateElement.classList.add("is-invalid");
            billingStateElement.classList.add("frontend-validation-error");
            let feedback = document.createElement("p");
            feedback.innerText = messages.billingState.max;
            billingStateElementFeedback.appendChild(feedback);
        }

        if (!billingPostcode) {
            billingPostcodeElement.classList.add("is-invalid");
            billingPostcodeElement.classList.add("frontend-validation-error");
            let feedback = document.createElement("p");
            feedback.innerText = messages.billingPostcode.required;
            billingPostcodeElementFeedback.appendChild(feedback);
        }
        if (billingPostcode && billingPostcode.length < 5) {
            billingPostcodeElement.classList.add("is-invalid");
            billingPostcodeElement.classList.add("frontend-validation-error");
            let feedback = document.createElement("p");
            feedback.innerText = messages.billingPostcode.min;
            billingPostcodeElementFeedback.appendChild(feedback);
        }
        if (billingPostcode && billingPostcode.length > 5) {
            billingPostcodeElement.classList.add("is-invalid");
            billingPostcodeElement.classList.add("frontend-validation-error");
            let feedback = document.createElement("p");
            feedback.innerText = messages.billingPostcode.max;
            billingPostcodeElementFeedback.appendChild(feedback);
        }
        let billingPostcodePattern = /\b\d{5}\b$/;
        if (billingPostcode && !billingPostcodePattern.test(billingPostcode)) {
            billingPostcodeElement.classList.add("is-invalid");
            billingPostcodeElement.classList.add("frontend-validation-error");
            let feedback = document.createElement("p");
            feedback.innerText = messages.billingPostcode.pattern;
            billingPostcodeElementFeedback.appendChild(feedback);
        }

        const allInvalidElements = checkoutCodeForm.querySelectorAll(".frontend-validation-error");
        if (allInvalidElements.length) {
            allInvalidElements.forEach((element) => {
                element.addEventListener("input", function () {
                    document.querySelector('#feedback_' + this.getAttribute('id')).innerHTML = '';
                    this.classList.remove("is-invalid");
                    this.classList.remove("frontend-validation-error");
                    checkoutCodeButtonContinue.removeAttribute('disabled')
                });
            });
            return false;
        }
        return true;
    }

    document.addEventListener("DOMContentLoaded", () => {

        $("body").on("click",".switch-button-label",function(){
            $(".switch-button-label").removeClass("active");
            $(this).toggleClass("active");
            if($(this).attr("for") == "monthly"){
                $(".package-circle").removeClass("hide");
                $(".package-circle-note").removeClass("invisible");
                $(".package-year").addClass("hide");
                $(".package-year-note").addClass("invisible");
            } else{
                $(".package-circle").removeClass("hide");
                $(".package-circle-note").removeClass("invisible");
                $(".package-month").addClass("hide");
                $(".package-month-note").addClass("invisible");
            }
        })

        // prevent enter to submit the form
        $(document).on("keydown", ":input:not(textarea)", function (event) {
            return event.key !== "Enter";
        });
        checkoutCodeForm.addEventListener("keydown", (e) => {
            if (e.key === "Enter") {
                return false;
            }
            return true;
        });
        checkoutCodeButtonContinue.addEventListener('click', () => {
           var payment_method = $('input[type="radio"][name="payment_method"]:checked').val();
           if(payment_method ==