@section('title') {{'Pricing - Reply reviews'}} @endsection
@php
   $planName = $user->subscription?->plan?->name ?? 'Starter';
   
   $now = \carbon\Carbon::now();  
   $expire = $user->subscription?->expired_at ? \carbon\Carbon::create($user->subscription->expired_at) : null;
   $planExpired = $expire ? $now->greaterThanOrEqualTo($expire) : false;
      
@endphp
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Dashboard') }} 
        </h2>
        
    </x-slot>

  <section class="padding-y-lg pb-12 pt-5">
    <div class="max-w-7xl mx-auto py-1 px-4 sm:px-6 lg:px-8">
        <div id="alert"> </div>
       
        @if(($user->subscription?->plan?->name ?? null) === null )
        <p>My Current Plan: You do not have any plan, Subscribe to plans below. </p>
        @else
        @php
        $daysRemaining = $user->subscription?->expired_at
            ? Carbon\Carbon::createFromDate($user->subscription->expired_at)->toDayDateTimeString()
            : 'N/A';
        
         
        @endphp
        <p>My Current Plan: {{ $planName }} - active untill {{ $daysRemaining }}</p>
        <p>Review Reply Balance : {{ $user->balance('ai-replies') }}  </p>
       
        @endif

         
    </div>
 

      <div x-data="{ isAnnual: true }" class="flex justify-center max-w-[14rem] m-auto mb-8 lg:mb-16">
        <div class="relative flex w-full p-1 bg-white dark:bg-slate-900 rounded-full">
            <span class="absolute inset-0 m-1 pointer-events-none" aria-hidden="true">
                <span class="absolute inset-0 w-1/2 bg-indigo-500 rounded-full shadow-sm shadow-indigo-950/10 transform transition-transform duration-150 ease-in-out" :class="isAnnual ? 'translate-x-0' : 'translate-x-full'"></span>
            </span>
            <button id="btnAnnualPrice" class="relative flex-1 text-sm font-medium h-8 rounded-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150 ease-in-out" :class="isAnnual ? 'text-white' : 'text-slate-500 dark:text-slate-400'" @click="isAnnual = true">Yearly <span :class="isAnnual ? 'text-indigo-200' : 'text-slate-400 dark:text-slate-500'"></span></button>
            <button id="btnMonthPrice" class="relative flex-1 text-sm font-medium h-8 rounded-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150 ease-in-out" :class="isAnnual ? 'text-slate-500 dark:text-slate-400' : 'text-white'" @click="isAnnual = false">Monthly</button>
        </div>
    </div>

    <div id="monthPrice" style="display: none;">
        <!-- Content for monthly price -->
        <div class="container flex justify-center gap-5  mx-auto max-width-xs px-4 lg:px-10">
    
            <div class="w-full max-w-xs p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-8 dark:bg-gray-800 dark:border-gray-700">
                <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">Starter 
                  @if ($planName =='Starter')
                  <span class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Active</span>
                  @endif  
                </h5>
                <div class="flex items-baseline text-gray-900 dark:text-white">
                    <span class="text-3xl font-semibold">Free</span>
                    <span class="text-5xl font-extrabold tracking-tight"></span>
                    <span class="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400"></span>
                </div>
                <!-- List -->
                <ul role="list" class="space-y-5 my-7">
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">No contract term</span>
                    </li>
                   
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">5 replies/month</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Full support</span>
                    </li>
                   
                </ul>
               
                
        
        
                @if ($planName!='Starter' && !$planExpired)
                    
                @else
                <a   href="#" class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 inline-flex justify-center w-full cursor-not-allowed" disabled>Active</a>
                @endif
               
            </div>
        
            <div class="w-full max-w-xs p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-8 dark:bg-gray-800 dark:border-gray-700">
                <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">Pro Monthly 
                  @if ($planName =='Pro Monthly')
                  <span class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Active</span>
                  @endif  
                </h5>
                <div class="flex items-baseline text-gray-900 dark:text-white">
                    <span class="text-3xl font-semibold">$</span>
                    <span class="text-5xl font-extrabold tracking-tight">14.90</span>
                    <span class="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">/month </span>
                </div>
                <!-- List -->
                <ul role="list" class="space-y-5 my-7">
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">No contract term</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Reply style options</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Monthly analytics report</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">50 replies/month</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Full support</span>
                    </li>
                   
                </ul>
               
                
        
        
                @if ($planName!='Pro Monthly' && !$planExpired)
                    <div id="paypal-monthly"></div>
                @else
                <a   href="#" class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 inline-flex justify-center w-full cursor-not-allowed" disabled>Active</a>
                @endif
               
            </div>
        
            <div class="w-full max-w-xs p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-8 dark:bg-gray-800 dark:border-gray-700">
                <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">Multi Pro Monthly
                    @if ($planName =='Multi Pro Monthly')
                    <span class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Active</span>
                    @endif  
        
                </h5>
                <div class="flex items-baseline text-gray-900 dark:text-white">
                    <span class="text-3xl font-semibold">$</span>
                    <span class="text-5xl font-extrabold tracking-tight">29.90</span>
                    <span class="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">/month </span>
                </div>
                <!-- List -->
                <ul role="list" class="space-y-5 my-7">
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">No contract term</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Reply style options</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Monthly analytics report</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">500 replies/month</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Full support</span>
                    </li>
                   
                </ul>
               
                @if ($planName !='Multi Pro Monthly' && !$planExpired  )
                    <div id="paypal-multi-monthly"></div>
                @else
                <a   href="#" class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 inline-flex justify-center w-full cursor-not-allowed" disabled>Active</a>
                
                @endif
                
                
            </div>
        
        
         
          </div>
      </div>
      
      <div id="annualPrice" >
        <!-- Content for annual price -->
        <div class="container flex justify-center gap-5  mx-auto max-width-xs px-4 lg:px-10">
    
            <div class="w-full max-w-xs p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-8 dark:bg-gray-800 dark:border-gray-700">
                <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">Starter 
                  @if ($planName =='Starter')
                  <span class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Active</span>
                  @endif  
                </h5>
                <div class="flex items-baseline text-gray-900 dark:text-white">
                    <span class="text-3xl font-semibold">Free</span>
                    <span class="text-5xl font-extrabold tracking-tight"></span>
                    <span class="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400"></span>
                </div>
                <!-- List -->
                <ul role="list" class="space-y-5 my-7">
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">No contract term</span>
                    </li>
                   
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">5 replies/month</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Full support</span>
                    </li>
                   
                </ul>
               
                
        
        
                @if ($planName!='Starter' && !$planExpired)
                    
                @else
                <a   href="#" class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 inline-flex justify-center w-full cursor-not-allowed" disabled>Active</a>
                @endif
               
            </div>
        
            <div class="w-full max-w-xs p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-8 dark:bg-gray-800 dark:border-gray-700">
                <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">Pro Yearly 
                  @if ($planName =='Pro Yearly')
                  <span class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Active</span>
                  @endif  
                </h5>
                <div class="flex items-baseline text-gray-900 dark:text-white">
                    <span class="text-3xl font-semibold">$</span>
                    <span class="text-5xl font-extrabold tracking-tight">149</span>
                    <span class="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">/year save $29.80</span>
                </div>
                <!-- List -->
                <ul role="list" class="space-y-5 my-7">
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">No contract term</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Reply style options</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Monthly analytics report</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">50 replies/month</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Full support</span>
                    </li>
                   
                </ul>
               
                
        
        
                @if ($planName!='Pro Yearly' && !$planExpired)
                    <div id="paypal-yearly"></div>
                @else
                <a   href="#" class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 inline-flex justify-center w-full cursor-not-allowed" disabled>Active</a>
                @endif
               
            </div>
        
            <div class="w-full max-w-xs p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-8 dark:bg-gray-800 dark:border-gray-700">
                <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">Multi Pro Yearly
                    @if ($planName =='Multi Pro Yearly')
                    <span class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Active</span>
                    @endif  
        
                </h5>
                <div class="flex items-baseline text-gray-900 dark:text-white">
                    <span class="text-3xl font-semibold">$</span>
                    <span class="text-5xl font-extrabold tracking-tight">299</span>
                    <span class="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">/year save $59.80</span>
                </div>
                <!-- List -->
                <ul role="list" class="space-y-5 my-7">
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">No contract term</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Reply style options</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Monthly analytics report</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">500 replies/month</span>
                    </li>
                    <li class="flex space-x-3">
                        <!-- Icon -->
                        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Check icon</title><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Full support</span>
                    </li>
                   
                </ul>
               
                @if ($planName !='Multi Pro Yearly' && !$planExpired  )
                    <div id="paypal-multi-yearly"></div>
                @else
                <a   href="#" class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 inline-flex justify-center w-full cursor-not-allowed" disabled>Active</a>
                
                @endif
                
                
            </div>
        
        
         
          </div>
      </div>







</section>

</div>



  
  

</x-app-layout>
<script src="https://www.paypal.com/sdk/js?client-id={{ env('PAYPAL_CLIENT_ID') }}&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>

  <script>
    const btnMonthPrice = document.getElementById("btnMonthPrice");
        const btnAnnualPrice = document.getElementById("btnAnnualPrice");
        const monthPrice = document.getElementById("monthPrice");
        const annualPrice = document.getElementById("annualPrice");
        if(btnMonthPrice){
            btnMonthPrice.addEventListener("click", function() {
                monthPrice.style.display = "block";
                annualPrice.style.display = "none";
                });
        }
            
        if(btnAnnualPrice){
            btnAnnualPrice.addEventListener("click", function() {
                monthPrice.style.display = "none";
                annualPrice.style.display = "block";
                });
        }
       


    var csrfMeta = document.querySelector('meta[name="csrf-token"]');
    var csrfToken = csrfMeta.getAttribute('content');
    var alertCon = document.getElementById('alert');
        
    async function subscribe(data) {
        const url = "{{ route('plan.subscribe') }}"; // Replace with the actual Laravel route URL

        try {
            const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify(data)
            });

            if (response.ok) {
            const result = await response.json();
            if(result.success){
                alertCon.innerHTML = ` <x-alert level="success" message="Your Subscription updated successfully!" /> `;
            }else{
                alertCon.innerHTML = ` <x-alert level="Danger" message="There is some problem. Please try again!" /> `;
            }
           
            //console.log(result); // Process the response data as needed
            } else {
                alertCon.innerHTML = ` <x-alert level="Danger" message="There is some problem. Please try again!" /> `;
            }

            setTimeout(function() {
                location.reload();
            }, 2000);
        } catch (error) {
            alertCon.innerHTML = ` <x-alert level="Danger" message="There is some problem. Please try again!" /> `;
        }
    }



    let pMonthly = document.getElementById('paypal-monthly');
    if (pMonthly) {
    
    
        paypal.Buttons({
            style: {
                shape: 'pill',
                color: 'blue',
                layout: 'vertical',
                label: 'subscribe'
            },
            createSubscription: function(data, actions) {
                return actions.subscription.create({
                /* Creates the subscription */
                plan_id: "{{ env('PAYPAL_MONTHLY_PLAN_A') }}",
                quantity: 1 // The quantity of the product for a subscription
                });
            },
            onApprove: function(data, actions) {
                console.log(data);
                console.log(actions);
                let postdata = {
                    plan: 'Pro Monthly', 
                    paypal: data
                }

            

                subscribed = subscribe(postdata);
                
                //alert(data.subscriptionID); // You can add optional success message for the subscriber here
            }
        }).render('#paypal-monthly'); // Renders the PayPal button
    } 

    let pMultiMonthly = document.getElementById('paypal-multi-monthly');
    if (pMultiMonthly) {
    
    
        paypal.Buttons({
            style: {
                shape: 'pill',
                color: 'blue',
                layout: 'vertical',
                label: 'subscribe'
            },
            createSubscription: function(data, actions) {
                return actions.subscription.create({
                /* Creates the subscription */
                plan_id: "{{ env('PAYPAL_MONTHLY_PLAN_B') }}",
                quantity: 1 // The quantity of the product for a subscription
                });
            },
            onApprove: function(data, actions) {
                console.log(data);
                console.log(actions);
                let postdata = {
                    plan: 'Pro Monthly', 
                    paypal: data
                }

            

                subscribed = subscribe(postdata);
                
                //alert(data.subscriptionID); // You can add optional success message for the subscriber here
            }
        }).render('#paypal-multi-monthly'); // Renders the PayPal button
    } 


    let pYearly = document.getElementById('paypal-yearly');
    if (pYearly) {

        paypal.Buttons({
            style: {
                shape: 'pill',
                color: 'blue',
                layout: 'vertical',
                label: 'subscribe'
            },
            createSubscription: function(data, actions) {
                return actions.subscription.create({
                /* Creates the subscription */
                plan_id: "{{ env('PAYPAL_YEARLY_PLAN_A') }}",
                quantity: 1 // The quantity of the product for a subscription
                });
            },
            onApprove: function(data, actions) {
                console.log(data);
                console.log(actions);
                let postdata = {
                    plan: 'Pro Yearly', 
                    paypal: data
                }

            

                subscribed = subscribe(postdata);
                if(subscribed){
                    //show success pop
                    console.log(subscribed);
                }
                //alert(data.subscriptionID); // You can add optional success message for the subscriber here
            }
        }).render('#paypal-yearly');
    }

    let pMultiYearly = document.getElementById('paypal-multi-yearly');
    if (pMultiYearly) {

        paypal.Buttons({
            style: {
                shape: 'pill',
                color: 'blue',
                layout: 'vertical',
                label: 'subscribe'
            },
            createSubscription: function(data, actions) {
                return actions.subscription.create({
                /* Creates the subscription */
                plan_id: "{{ env('PAYPAL_YEARLY_PLAN_B') }}",
                quantity: 1 // The quantity of the product for a subscription
                });
            },
            onApprove: function(data, actions) {
                console.log(data);
                console.log(actions);
                let postdata = {
                    plan: 'Pro Yearly', 
                    paypal: data
                }

            

                subscribed = subscribe(postdata);
                if(subscribed){
                    //show success pop
                    console.log(subscribed);
                }
                //alert(data.subscriptionID); // You can add optional success message for the subscriber here
            }
        }).render('#paypal-multi-yearly');
    }

</script>