@extends('layouts.app')

@section('content')
<div class="space-y-4 md:space-y-6" x-data="licenseData()">
    <!-- Header -->
    <div class="bg-slate-800/90 backdrop-blur-xl rounded-xl border border-slate-700/50 p-4 md:p-6">
        <div>
            <h1 class="text-xl md:text-2xl font-bold text-white">Plans & License</h1>
            <p class="text-slate-400 mt-1">Manage your subscription and billing</p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6">
        <!-- Current Plan Card -->
        <div class="lg:col-span-1">
            <div class="bg-slate-800/90 backdrop-blur-xl rounded-xl border border-slate-700/50 p-6">
                @php
                    $isExpired = auth()->user()->plan_expire_date && auth()->user()->plan_expire_date->isPast();
                    $hasLastPlan = !empty(auth()->user()->last_plan);
                    $showCurrentPlan = $currentPlan && (!$isExpired || ($isExpired && $hasLastPlan));
                @endphp

                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-white">Current Plan</h3>
                    @if($currentPlan && !$isExpired)
                        <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-green-500/20 text-green-300 border border-green-500/30">Active</span>
                    @elseif($currentPlan && $isExpired)
                        <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-red-500/20 text-red-300 border border-red-500/30">Expired</span>
                    @else
                        <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-red-500/20 text-red-300 border border-red-500/30">No Plan</span>
                    @endif
                </div>

                @if($showCurrentPlan)
                    <div class="text-center mb-4">
                        <h4 class="text-xl font-bold text-white mb-1">{{ $currentPlan->name }}</h4>
                        <div class="text-2xl font-bold bg-gradient-to-r from-red-400 to-yellow-400 bg-clip-text text-transparent">
                            {{ $currencySymbol }}{{ number_format($currentPlan->price, 0) }}
                        </div>
                        <p class="text-slate-400 text-sm">{{ $currentPlan->duration }}</p>
                    </div>

                    @if($currentPlan->description)
                    <p class="text-slate-400 text-sm text-center mb-4">{{ $currentPlan->description }}</p>
                    @endif

                    @if(auth()->user()->plan_expire_date)
                    <div class="bg-slate-700/50 rounded-lg p-3 mb-4">
                        <div class="flex items-center text-sm {{ $isExpired ? 'text-red-300' : 'text-blue-300' }}">
                            <i class="fas fa-calendar mr-2"></i>
                            {{ $isExpired ? 'Expired:' : 'Expires:' }} {{ auth()->user()->plan_expire_date->format('M d, Y') }}
                        </div>
                    </div>
                    @endif

                    <div class="space-y-3 mb-4">
                        <div class="flex items-center text-slate-300">
                            <i class="fas fa-users text-blue-400 mr-3 w-4"></i>
                            <span class="text-sm">{{ $currentPlan->max_customers }} Customers</span>
                        </div>
                        <div class="flex items-center text-slate-300">
                            <i class="fas fa-check text-green-400 mr-3 w-4"></i>
                            <span class="text-sm">PPPoE & Hotspot</span>
                        </div>
                        <div class="flex items-center text-slate-300">
                            <i class="fas fa-credit-card text-purple-400 mr-3 w-4"></i>
                            <span class="text-sm">Payment Gateways</span>
                        </div>
                    </div>

                    @if($hasLastPlan)
                    <div class="grid grid-cols-1 gap-2">
                        <button @click="openRenewModal()" class="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white px-4 py-2 rounded-lg transition-all duration-300 text-sm">
                            <i class="fas fa-refresh mr-2"></i>Renew Plan
                        </button>
                        <button @click="openExtraClientsModal()" class="bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg transition-colors text-sm">
                            <i class="fas fa-user-plus mr-2"></i>Add Extra Clients
                        </button>
                    </div>
                    @endif
                @else
                    <div class="text-center py-8">
                        <i class="fas fa-box text-4xl text-slate-600 mb-4"></i>
                        <p class="text-slate-400 mb-2">No active plan</p>
                        <p class="text-slate-500 text-sm">Choose a plan below to get started</p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Recent Orders -->
        <div class="lg:col-span-2">
            <div class="bg-slate-800/90 backdrop-blur-xl rounded-xl border border-slate-700/50 p-6">
                <h3 class="text-lg font-semibold text-white mb-4">Recent Orders</h3>

                @if($orders->count() > 0)
                    <div class="overflow-x-auto">
                        <div class="table-wrapper" style="max-width: calc(100vw - 4rem); overflow-x: auto;">
                            <table class="min-w-[600px] w-full divide-y divide-slate-700">
                                <thead class="bg-slate-700/50">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Order ID</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Plan</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Amount</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Status</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Date</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-700">
                                    @foreach($orders as $order)
                                    <tr class="hover:bg-slate-700/30 transition-colors">
                                        <td class="px-4 py-3 text-slate-400 text-sm font-mono">#{{ $order->order_id }}</td>
                                        <td class="px-4 py-3 text-white font-medium">{{ $order->plan_name }}</td>
                                        <td class="px-4 py-3 text-cyan-300 font-medium">{{ $currencySymbol }}{{ number_format($order->price, 0) }}</td>
                                        <td class="px-4 py-3">
                                            @if($order->payment_status === 'completed')
                                                <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-green-500/20 text-green-300 border border-green-500/30">
                                                    <i class="fas fa-check-circle mr-1"></i>Completed
                                                </span>
                                            @elseif($order->payment_status === 'pending')
                                                <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-yellow-500/20 text-yellow-300 border border-yellow-500/30">
                                                    <i class="fas fa-clock mr-1"></i>Pending
                                                </span>
                                            @else
                                                <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-red-500/20 text-red-300 border border-red-500/30">
                                                    <i class="fas fa-times-circle mr-1"></i>Failed
                                                </span>
                                            @endif
                                        </td>
                                        <td class="px-4 py-3 text-slate-400 text-sm">{{ $order->created_at->format('M d, Y') }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @else
                    <div class="text-center py-12">
                        <div class="bg-slate-700/30 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-shopping-cart text-2xl text-slate-500"></i>
                        </div>
                        <p class="text-slate-400 text-lg font-medium mb-2">No orders found</p>
                        <p class="text-slate-500 text-sm">Your order history will appear here</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Available Plans -->
    <div class="bg-slate-800/90 backdrop-blur-xl rounded-xl border border-slate-700/50 p-6">
        <h3 class="text-lg font-semibold text-white mb-6">Available Plans</h3>

        @if($availablePlans->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                @foreach($availablePlans as $plan)
                <div class="bg-slate-700/30 rounded-xl border border-slate-600 p-6 hover:border-slate-500 transition-colors">
                    <div class="text-center mb-4">
                        <h4 class="text-lg font-bold text-white mb-2">{{ $plan->name }}</h4>
                        <div class="text-2xl font-bold bg-gradient-to-r from-red-400 to-yellow-400 bg-clip-text text-transparent mb-1">
                            {{ $currencySymbol }}{{ number_format($plan->price, 0) }}
                        </div>
                        <p class="text-slate-400 text-sm">{{ $plan->duration }}</p>
                    </div>

                    <div class="space-y-3 mb-6">
                        <div class="flex items-center text-slate-300">
                            <i class="fas fa-users text-blue-400 mr-3 w-4"></i>
                            <span class="text-sm">{{ $plan->max_customers }} Customers</span>
                        </div>
                        <div class="flex items-center text-slate-300">
                            <i class="fas fa-check text-green-400 mr-3 w-4"></i>
                            <span class="text-sm">PPPoE & Hotspot</span>
                        </div>
                        <div class="flex items-center text-slate-300">
                            <i class="fas fa-mobile-alt text-yellow-400 mr-3 w-4"></i>
                            <span class="text-sm">Mobile Payments</span>
                        </div>
                        <div class="flex items-center text-slate-300">
                            <i class="fas fa-credit-card text-purple-400 mr-3 w-4"></i>
                            <span class="text-sm">Payment Gateways</span>
                        </div>
                    </div>

                    @php
                        $isExpired = auth()->user()->plan_expire_date && auth()->user()->plan_expire_date->isPast();
                        $hasLastPlan = !empty(auth()->user()->last_plan);
                    @endphp

                    @if($currentPlan && $currentPlan->id === $plan->id && !$isExpired)
                        <button class="w-full bg-green-600 text-white px-4 py-2 rounded-lg font-medium" disabled>
                            <i class="fas fa-check mr-2"></i>Current Plan
                        </button>
                    @elseif($currentPlan && !$isExpired && $hasLastPlan && $plan->price > $currentPlan->price)
                        <button @click="openPlanModal({{ $plan->id }}, '{{ $plan->name }}', {{ $plan->price }}, 'upgrade')" class="w-full bg-gradient-to-r from-yellow-600 to-orange-600 hover:from-yellow-700 hover:to-orange-700 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300">
                            <i class="fas fa-arrow-up mr-2"></i>Upgrade
                        </button>
                    @elseif($currentPlan && !$isExpired && $hasLastPlan && $plan->price < $currentPlan->price)
                        <button @click="openPlanModal({{ $plan->id }}, '{{ $plan->name }}', {{ $plan->price }}, 'downgrade')" class="w-full bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300">
                            <i class="fas fa-arrow-down mr-2"></i>Downgrade
                        </button>
                    @else
                        <button @click="openPlanModal({{ $plan->id }}, '{{ $plan->name }}', {{ $plan->price }}, 'select')" class="w-full bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300">
                            <i class="fas fa-plus mr-2"></i>{{ (!$currentPlan) || ($isExpired && !$hasLastPlan) ? 'Subscribe' : 'Select Plan' }}
                        </button>
                    @endif
                </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-8">
                <i class="fas fa-box text-4xl text-slate-600 mb-4"></i>
                <p class="text-slate-400">No plans available</p>
            </div>
        @endif
    </div>

    <!-- Plan Change Modal -->
    <div x-show="showPlanModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" @keydown.escape.window="showPlanModal = false">
        <!-- Backdrop -->
        <div x-show="showPlanModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 bg-slate-900/75" @click="showPlanModal = false"></div>

        <!-- Modal Container -->
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <!-- Modal Content -->
            <div x-show="showPlanModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="relative inline-block w-full max-w-md my-8 overflow-hidden text-left align-middle transition-all transform bg-slate-800 shadow-xl rounded-xl border border-slate-700 z-10">

                <div class="px-6 py-4 border-b border-slate-700">
                    <h3 class="text-lg font-semibold text-white" x-text="planModalTitle"></h3>
                </div>

                <div class="p-6">
                    <p class="text-slate-300 mb-2" x-text="planModalText"></p>
                    <p class="text-lg font-semibold text-white mb-4" x-html="planModalAmount"></p>

                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">M-Pesa Phone Number</label>
                        <input type="tel" x-model="phoneNumber" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="254712345678" required>
                    </div>
                </div>

                <div class="px-6 py-4 border-t border-slate-700 flex justify-end space-x-3">
                    <button @click="showPlanModal = false" class="px-4 py-2 text-slate-400 hover:text-white transition-colors">
                        Cancel
                    </button>
                    <button @click="confirmPlanChange()" class="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white px-6 py-2 rounded-lg transition-all duration-300">
                        Proceed to Payment
                    </button>
                </div>
            </div>
        </div>
    </div>

    @if($lastPlan)
    <!-- Renew Plan Modal -->
    <div x-show="showRenewModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" @keydown.escape.window="showRenewModal = false">
        <!-- Backdrop -->
        <div x-show="showRenewModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 bg-slate-900/75" @click="showRenewModal = false"></div>

        <!-- Modal Container -->
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <!-- Modal Content -->
            <div x-show="showRenewModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="relative inline-block w-full max-w-md my-8 overflow-hidden text-left align-middle transition-all transform bg-slate-800 shadow-xl rounded-xl border border-slate-700 z-10">

                <div class="px-6 py-4 border-b border-slate-700">
                    <h3 class="text-lg font-semibold text-white">Renew Plan</h3>
                </div>

                <div class="p-6">
                    <p class="text-slate-300 mb-2">Renew your current plan: <strong class="text-white">{{ $lastPlan->name }}</strong></p>
                    <p class="text-lg font-semibold text-white mb-2">Amount: <span class="text-cyan-300">{{ $currencySymbol }}{{ number_format($lastPlan->price, 0) }}</span></p>
                    <p class="text-slate-400 text-sm mb-4">This will extend your current plan duration.</p>

                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">M-Pesa Phone Number</label>
                        <input type="tel" x-model="renewPhoneNumber" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="254712345678" required>
                    </div>
                </div>

                <div class="px-6 py-4 border-t border-slate-700 flex justify-end space-x-3">
                    <button @click="showRenewModal = false" class="px-4 py-2 text-slate-400 hover:text-white transition-colors">
                        Cancel
                    </button>
                    <button @click="renewPlan()" class="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white px-6 py-2 rounded-lg transition-all duration-300">
                        Proceed to Payment
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Extra Clients Modal -->
    <div x-show="showExtraClientsModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" @keydown.escape.window="showExtraClientsModal = false">
        <!-- Backdrop -->
        <div x-show="showExtraClientsModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 bg-slate-900/75" @click="showExtraClientsModal = false"></div>

        <!-- Modal Container -->
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <!-- Modal Content -->
            <div x-show="showExtraClientsModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="relative inline-block w-full max-w-md my-8 overflow-hidden text-left align-middle transition-all transform bg-slate-800 shadow-xl rounded-xl border border-slate-700 z-10">

                <div class="px-6 py-4 border-b border-slate-700">
                    <h3 class="text-lg font-semibold text-white">Add Extra Clients</h3>
                </div>

                <div class="p-6">
                    <p class="text-slate-300 mb-4">Current limit: <strong class="text-white">{{ $currentPlan->max_customers }} clients</strong></p>

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-slate-300 mb-2">Additional Clients</label>
                        <input type="number" x-model="extraClients" @input="updateTotalCost()" min="1" max="100" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>

                    <p class="text-slate-300 mb-2">Cost per additional client: <strong class="text-cyan-300" x-text="'{{ $currencySymbol }}' + costPerClient.toFixed(2)"></strong></p>
                    <p class="text-slate-300 mb-4">Total cost: <strong class="text-cyan-300" x-text="'{{ $currencySymbol }}' + totalCost.toFixed(2)"></strong></p>

                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">M-Pesa Phone Number</label>
                        <input type="tel" x-model="clientsPhoneNumber" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="254712345678" required>
                    </div>
                </div>

                <div class="px-6 py-4 border-t border-slate-700 flex justify-end space-x-3">
                    <button @click="showExtraClientsModal = false" class="px-4 py-2 text-slate-400 hover:text-white transition-colors">
                        Cancel
                    </button>
                    <button @click="addExtraClients()" class="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white px-6 py-2 rounded-lg transition-all duration-300">
                        Proceed to Payment
                    </button>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

<script>
function licenseData() {
    return {
        showPlanModal: false,
        showRenewModal: false,
        showExtraClientsModal: false,
        selectedPlan: {},
        phoneNumber: '',
        renewPhoneNumber: '',
        clientsPhoneNumber: '',
        extraClients: 10,
        costPerClient: {{ $currentPlan && $currentPlan->max_customers > 0 ? $currentPlan->price / $currentPlan->max_customers : 0 }},
        totalCost: {{ $currentPlan && $currentPlan->max_customers > 0 ? ($currentPlan->price / $currentPlan->max_customers) * 10 : 0 }},
        planModalTitle: '',
        planModalText: '',
        planModalAmount: '',

        openPlanModal(planId, planName, price, action) {
            this.selectedPlan = { id: planId, name: planName, price: price, action: action };
            this.phoneNumber = '';

            if (action === 'select') {
                this.planModalTitle = 'Subscribe to Plan';
                this.planModalText = `Subscribe to: ${planName}`;
            } else if (action === 'upgrade') {
                this.planModalTitle = 'Upgrade Plan';
                this.planModalText = `Upgrade to: ${planName}`;
            } else if (action === 'downgrade') {
                this.planModalTitle = 'Downgrade Plan';
                this.planModalText = `Downgrade to: ${planName}`;
            }

            this.planModalAmount = `<strong>Amount: <span class="text-cyan-300">{{ $currencySymbol }}${price}</span></strong>`;
            this.showPlanModal = true;
        },

        confirmPlanChange() {
            if (!this.phoneNumber) {
                alert('Please enter M-Pesa phone number');
                return;
            }

            this.showPlanModal = false;
            this.initiatePayment();
        },

        async initiatePayment() {
            try {
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
                if (!csrfToken) {
                    Swal.fire('Error', 'CSRF token not found', 'error');
                    return;
                }

                const response = await fetch('/plans/initiate-renewal', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        plan: this.selectedPlan.id,
                        amount: this.selectedPlan.price,
                        cID: {{ auth()->id() }},
                        phone: this.phoneNumber
                    })
                });

                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }

                const data = await response.json();

                if (data.success) {
                    this.showPaymentModal(data.checkoutRequestID, data.txn_id);
                } else {
                    Swal.fire('Error', data.message || 'Payment initiation failed', 'error');
                }
            } catch (error) {
                console.error('Payment error:', error);
                Swal.fire('Error', `Network error: ${error.message}`, 'error');
            }
        },

        showPaymentModal(checkoutRequestID, txnId) {
            Swal.fire({
                title: 'STK Push Initiated',
                text: 'Please check your phone and enter your M-Pesa PIN to complete the payment',
                icon: 'info',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                    this.startPaymentPolling(checkoutRequestID, txnId);
                }
            });
        },

        startPaymentPolling(checkoutRequestID, txnId) {
            let attempts = 0;
            const maxAttempts = 10;

            const checkStatus = () => {
                attempts++;

                fetch('/plans/verify-renewal', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({
                        ref: checkoutRequestID,
                        cID: {{ auth()->id() }},
                        txn_id: txnId
                    })
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Polling attempt:', attempts, 'Status:', data.status);

                    if (data.status === 'confirmed') {
                        Swal.fire({
                            title: 'Payment Successful!',
                            text: 'Your plan has been activated successfully',
                            icon: 'success'
                        }).then(() => {
                            window.location.reload();
                        });
                    } else if (data.status === 'cancelled') {
                        Swal.fire('Payment Cancelled', 'The payment was cancelled', 'error');
                    } else if (data.status === 'failed') {
                        Swal.fire('Payment Failed', 'The payment failed', 'error');
                    } else if (data.status === 'processing' && attempts < maxAttempts) {
                        // Continue polling
                        setTimeout(checkStatus, 5000);
                    } else if (attempts >= maxAttempts) {
                        Swal.fire('Timeout', 'Payment verification timed out. Please check your transaction status.', 'warning');
                    }
                })
                .catch(error => {
                    console.error('Polling error:', error);
                    if (attempts < maxAttempts) {
                        setTimeout(checkStatus, 5000);
                    } else {
                        Swal.fire('Error', 'Failed to verify payment status', 'error');
                    }
                });
            };

            // Start the first check
            checkStatus();
        },

        openRenewModal() {
            this.renewPhoneNumber = '';
            this.showRenewModal = true;
        },

        renewPlan() {
            if (!this.renewPhoneNumber) {
                alert('Please enter M-Pesa phone number');
                return;
            }

            this.showRenewModal = false;
            this.selectedPlan = { id: {{ $lastPlan ? $lastPlan->id : 0 }}, price: {{ $lastPlan ? $lastPlan->price : 0 }} };
            this.phoneNumber = this.renewPhoneNumber;
            this.initiatePayment();
        },

        openExtraClientsModal() {
            this.clientsPhoneNumber = '';
            this.extraClients = 10;
            this.updateTotalCost();
            this.showExtraClientsModal = true;
        },

        addExtraClients() {
            if (!this.clientsPhoneNumber) {
                alert('Please enter M-Pesa phone number');
                return;
            }
            window.location.href = `/checkout?extra_clients=${this.extraClients}&plan={{ $currentPlan ? $currentPlan->id : '' }}&phone=${this.clientsPhoneNumber}`;
        },

        updateTotalCost() {
            this.totalCost = this.extraClients * this.costPerClient;
        }
    }
}
</script>
@endsection