@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">
            {{ __('My Plan') }} 
        </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">
        @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 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">
      <p>You are subscribing for :</p> 
      <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 mb-8">
            <span class="text-3xl font-semibold">$</span>
            <span class="text-5xl font-extrabold tracking-tight">9.90</span>
            <span class="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">/month</span>
        </div>
        <p class="text-gray-500 mb-3">Please complete the payment process to activate the plan </p>
        <div id="paypal-button-container-P-8A613055SN929603RMCVUWCI"></div>
     
       
       
    </div>




 
  </div>
</section>

</div>

<script src="https://www.paypal.com/sdk/js?client-id=AZs2VicmHHiwF690pYDvxK0jlVToKbqsIjW2Fph6JlZLEOO_qiLRePDX-gft59x0FuJW_qA17jG-tEda&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>

  <script>
  paypal.Buttons({
      style: {
          shape: 'pill',
          color: 'blue',
          layout: 'vertical',
          label: 'subscribe'
      },
      createSubscription: function(data, actions) {
        return actions.subscription.create({
          /* Creates the subscription */
          plan_id: 'P-8A613055SN929603RMCVUWCI',
          quantity: 1 // The quantity of the product for a subscription
        });
      },
      onApprove: function(data, actions) {
        alert(data.subscriptionID); // You can add optional success message for the subscriber here
        fetch("https://jsonplaceholder.typicode.com/todos", {
          method: "POST",
          body: JSON.stringify({
            userId: 1,
            title: "Fix my bugs",
            completed: false
          }),
          headers: {
            "Content-type": "application/json; charset=UTF-8"
          }
        })
          .then((response) => response.json())
          .then((json) => console.log(json));

      }
  }).render('#paypal-button-container-P-8A613055SN929603RMCVUWCI'); // Renders the PayPal button
</script>
  

</x-app-layout>