@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">
            {{ __(' Plan check') }} 
        </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 id="monthPrice">
        <!-- 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 Free replies to test</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">Plan check
                  @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">1</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">Reply Language 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">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">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">Full support</span>
                    </li>
                   
                </ul>
               
                
                <div id="paypal-monthly"></div>
        
               
               
            </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");

      


    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!" /> `;
            }

            location.href='{{ url("/pay-success") }}'+'/'+data.paypal.orderID;
           
        } 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: "P-4TJ176154B3894911MTIJVDA",
                quantity: 1 // The quantity of the product for a subscription
                });
            },
            onApprove: function(data, 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
    } 

    



</script>