@extends('layouts.dasht')
@section('title', $title)
@section('content')

<div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-8" x-data="myPlansManager()">
    <div class="container mx-auto px-6">
        <!-- Header -->
        <div class="flex items-center justify-between mb-8">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white">My Investment Plans</h1>
                <p class="text-gray-600 dark:text-gray-400 mt-2">Track and manage your active investment portfolios</p>
            </div>

            <a href="{{ route('mplans') }}"
               class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-600 hover:from-blue-700 hover:to-blue-700 text-white rounded-xl font-medium transition-all duration-200 shadow-lg hover:shadow-xl">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
                New Investment
            </a>
        </div>

        <!-- Alerts -->
        <x-danger-alert />
        <x-success-alert />

        <!-- Filters and Statistics -->
        @if ($numOfPlan > 0)
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 mb-8">
                <div class="p-6">
                    <!-- Statistics Row -->
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-6">
                        <div class="text-center">
                            <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center mx-auto mb-3">
                                <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                </svg>
                            </div>
                            <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ $numOfPlan }}</div>
                            <div class="text-sm text-gray-600 dark:text-gray-400">Total Plans</div>
                        </div>

                        <div class="text-center">
                            <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-xl flex items-center justify-center mx-auto mb-3">
                                <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                                </svg>
                            </div>
                            <div class="text-2xl font-bold text-green-600">{{ $plans->where('active', 'yes')->count() }}</div>
                            <div class="text-sm text-gray-600 dark:text-gray-400">Active</div>
                        </div>

                        <div class="text-center">
                            <div class="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-xl flex items-center justify-center mx-auto mb-3">
                                <svg class="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"></path>
                                </svg>
                            </div>
                            <div class="text-2xl font-bold text-red-600">{{ $plans->where('active', 'expired')->count() }}</div>
                            <div class="text-sm text-gray-600 dark:text-gray-400">Expired</div>
                        </div>

                        <div class="text-center">
                            <div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-900/30 rounded-xl flex items-center justify-center mx-auto mb-3">
                                <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                            @php
                                $totalInvested = $plans->sum('amount');
                            @endphp
                            <div class="text-2xl font-bold text-gray-900 dark:text-white">${{ number_format($totalInvested) }}</div>
                            <div class="text-sm text-gray-600 dark:text-gray-400">Total Invested</div>
                        </div>
                    </div>

                    <!-- Filter Section -->
                    <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                            <div class="flex items-center gap-3">
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Filter by status:</span>
                                <div class="relative">
                                    <select x-model="selectedFilter"
                                            @change="console.log('Filter changed to:', selectedFilter); updateFilter()"
                                            class="appearance-none bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-2 pr-8 text-sm font-medium text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                        <option value="All">All Plans</option>
                                        <option value="yes">Active Plans</option>
                                        <option value="expired">Expired Plans</option>
                                    </select>
                                    <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                        </svg>
                                    </div>
                                </div>
                            </div>

                            <div class="text-sm text-gray-600 dark:text-gray-400">
                                Showing {{ $plans->count() }} of {{ $plans->total() }} plans
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Investment Plans Grid -->
        <div class="space-y-6">
            @forelse ($plans as $plan)
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 hover:shadow-xl transition-all duration-300">
                    <div class="p-6">
                        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
                            <!-- Plan Info -->
                            <div class="flex items-start gap-4">
                                <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center flex-shrink-0">
                                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                    </svg>
                                </div>

                                <div class="flex-1">
                                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{{ $plan->uplan->name }}</h3>
                                    <div class="flex flex-wrap items-center gap-4 text-sm">
                                        <div class="flex items-center gap-2">
                                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                            <span class="text-gray-600 dark:text-gray-400">Investment Amount:</span>
                                            <span class="font-semibold text-gray-900 dark:text-white">{{ Auth::user()->currency }}{{ number_format($plan->amount) }}</span>
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                                            </svg>
                                            <span class="text-gray-600 dark:text-gray-400">Expected ROI:</span>
                                            <span class="font-semibold text-green-600">{{ $plan->uplan->increment_amount	 }}%</span>
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                            <span class="text-gray-600 dark:text-gray-400">Expiration :</span>
                                            <span class="font-semibold text-gray-900 dark:text-white">{{ $plan->expiration }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Plan Details -->
                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 lg:max-w-md">
                                <!-- Start Date -->
                                <div class="text-center">
                                    <div class="text-lg font-bold text-gray-900 dark:text-white">
                                        {{ $plan->created_at->format('M d') }}
                                    </div>
                                    <div class="text-sm text-gray-600 dark:text-gray-400">
                                        {{ $plan->created_at->format('Y') }}
                                    </div>
                                    <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">Start Date</div>
                                </div>

                                <!-- Arrow -->
                                <div class="flex items-center justify-center">
                                    <svg class="w-6 h-6 text-gray-400 hidden sm:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                                    </svg>
                                    <svg class="w-6 h-6 text-gray-400 sm:hidden rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                                    </svg>
                                </div>

                                <!-- End Date -->
                                <div class="text-center">
                                    <div class="text-lg font-bold text-gray-900 dark:text-white">
                                        {{ \Carbon\Carbon::parse($plan->expire_date)->format('M d') }}
                                    </div>
                                    <div class="text-sm text-gray-600 dark:text-gray-400">
                                        {{ \Carbon\Carbon::parse($plan->expire_date)->format('Y') }}
                                    </div>
                                    <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">End Date</div>
                                </div>
                            </div>

                            <!-- Status and Actions -->
                            <div class="flex items-center gap-4">
                                <div class="text-center">
                                    @if ($plan->active == 'yes')
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
                                            <div class="w-2 h-2 bg-green-400 rounded-full mr-2"></div>
                                            Active
                                        </span>
                                    @elseif($plan->active == 'expired')
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">
                                            <div class="w-2 h-2 bg-red-400 rounded-full mr-2"></div>
                                            Expired
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">
                                            <div class="w-2 h-2 bg-yellow-400 rounded-full mr-2"></div>
                                            Inactive
                                        </span>
                                    @endif
                                    <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">Status</div>
                                </div>

                                <a href="{{ route('plandetails', $plan->id) }}"
                                   class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-lg font-medium transition-all duration-200">
                                    View Details
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                    </svg>
                                </a>
                            </div>
                        </div>

                        <!-- Progress Bar (for active plans) -->
                        @if($plan->active == 'yes')
                            @php
                                $startDate = $plan->created_at;
                                $endDate = \Carbon\Carbon::parse($plan->expire_date);
                                $currentDate = now();
                                $totalDays = $startDate->diffInDays($endDate);
                                $elapsedDays = $startDate->diffInDays($currentDate);
                                $progress = $totalDays > 0 ? min(($elapsedDays / $totalDays) * 100, 100) : 0;
                                // Calculate remaining days - if end date is in the past, this will be 0
                                $remainingDays = $currentDate->lt($endDate) ? $currentDate->diffInDays($endDate) : 0;
                            @endphp
                            <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Investment Progress</span>
                                    <span class="text-sm text-gray-600 dark:text-gray-400">{{ $remainingDays }} days remaining</span>
                                </div>
                                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                    <div class="bg-gradient-to-r from-blue-500 to-blue-600 h-2 rounded-full transition-all duration-300"
                                         style="width: {{ $progress }}%"></div>
                                </div>
                                <div class="flex justify-between text-xs text-gray-500 dark:text-gray-500 mt-1">
                                    <span>{{ number_format($progress, 1) }}% complete</span>
                                    <span>{{ $totalDays }} total days</span>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            @empty
                <!-- Empty State -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
                    <div class="text-center py-16">
                        <div class="w-20 h-20 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-6">
                            <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">No Investment Plans Found</h3>
                        <p class="text-gray-600 dark:text-gray-400 max-w-md mx-auto mb-8">
                            You don't have any investment plans at the moment or no plans match your current filter criteria.
                        </p>
                        <a href="{{ route('mplans') }}"
                           class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-600 hover:from-blue-700 hover:to-blue-700 text-white rounded-xl font-medium transition-all duration-200 shadow-lg hover:shadow-xl">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                            Start Your First Investment
                        </a>
                    </div>
                </div>
            @endforelse
        </div>

        <!-- Pagination -->
        @if ($plans->hasPages())
            <div class="mt-8">
                <nav class="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 px-4 py-6 sm:px-0">
                    <div class="-mt-px flex w-0 flex-1">
                        @if ($plans->onFirstPage())
                            <span class="inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-gray-300 dark:text-gray-600 cursor-not-allowed">
                                <svg class="mr-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0L2.586 11l3.707-3.707a1 1 0 011.414 1.414L5.414 11l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                                </svg>
                                Previous
                            </span>
                        @else
                            <a href="{{ $plans->previousPageUrl() }}" class="inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-gray-500 hover:border-blue-300 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
                                <svg class="mr-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0L2.586 11l3.707-3.707a1 1 0 011.414 1.414L5.414 11l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                                </svg>
                                Previous
                            </a>
                        @endif
                    </div>

                    <div class="hidden md:-mt-px md:flex">
                        @foreach ($plans->getUrlRange(1, $plans->lastPage()) as $page => $url)
                            @if ($page == $plans->currentPage())
                                <span class="inline-flex items-center border-t-2 border-blue-500 px-4 pt-4 text-sm font-medium text-blue-600 dark:text-blue-400">
                                    {{ $page }}
                                </span>
                            @elseif ($page == 1 || $page == $plans->lastPage() || ($page >= $plans->currentPage() - 2 && $page <= $plans->currentPage() + 2))
                                <a href="{{ $url }}" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-blue-300 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
                                    {{ $page }}
                                </a>
                            @elseif ($page == 2 && $plans->currentPage() > 4)
                                <span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-300 dark:text-gray-600">...</span>
                            @elseif ($page == $plans->lastPage() - 1 && $plans->currentPage() < $plans->lastPage() - 3)
                                <span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-300 dark:text-gray-600">...</span>
                            @endif
                        @endforeach
                    </div>

                    <div class="-mt-px flex w-0 flex-1 justify-end">
                        @if ($plans->hasMorePages())
                            <a href="{{ $plans->nextPageUrl() }}" class="inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-gray-500 hover:border-blue-300 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
                                Next
                                <svg class="ml-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4.707 4.707-4.707 4.707a1 1 0 01-1.414-1.414L15.586 10l-3.293-3.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                </svg>
                            </a>
                        @else
                            <span class="inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-gray-300 dark:text-gray-600 cursor-not-allowed">
                                Next
                                <svg class="ml-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4.707 4.707-4.707 4.707a1 1 0 01-1.414-1.414L15.586 10l-3.293-3.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                </svg>
                            </span>
                        @endif
                    </div>
                </nav>

                <!-- Mobile pagination -->
                <div class="flex justify-between items-center md:hidden px-4 py-3 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 rounded-b-2xl">
                    <div class="text-sm text-gray-700 dark:text-gray-300">
                        Showing {{ $plans->firstItem() }} to {{ $plans->lastItem() }} of {{ $plans->total() }} results
                    </div>
                    <div class="flex space-x-2">
                        @if ($plans->onFirstPage())
                            <span class="px-3 py-2 text-sm font-medium text-gray-300 dark:text-gray-600 bg-gray-100 dark:bg-gray-700 rounded-lg cursor-not-allowed">
                                Previous
                            </span>
                        @else
                            <a href="{{ $plans->previousPageUrl() }}" class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
                                Previous
                            </a>
                        @endif

                        @if ($plans->hasMorePages())
                            <a href="{{ $plans->nextPageUrl() }}" class="px-3 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors duration-200">
                                Next
                            </a>
                        @else
                            <span class="px-3 py-2 text-sm font-medium text-gray-300 dark:text-gray-600 bg-gray-100 dark:bg-gray-700 rounded-lg cursor-not-allowed">
                                Next
                            </span>
                        @endif
                    </div>
                </div>

                <!-- Pagination Info -->
                <div class="hidden md:flex justify-center mt-4">
                    <p class="text-sm text-gray-700 dark:text-gray-300">
                        Showing <span class="font-medium">{{ $plans->firstItem() }}</span> to <span class="font-medium">{{ $plans->lastItem() }}</span> of <span class="font-medium">{{ $plans->total() }}</span> investment plans
                    </p>
                </div>
            </div>
        @endif
    </div>
</div>

@endsection

@section('scripts')
    @parent
    <script>
        // Make function available globally for Alpine.js
        window.myPlansManager = function() {
            return {
                selectedFilter: 'All',

                init() {
                    // Set initial filter value based on current URL if needed
                    const urlParts = window.location.pathname.split('/');
                    const currentFilter = urlParts[urlParts.length - 1];
                    console.log('Current URL parts:', urlParts);
                    console.log('Current filter from URL:', currentFilter);

                    if (['All', 'yes', 'expired'].includes(currentFilter)) {
                        this.selectedFilter = currentFilter;
                    } else if (urlParts[urlParts.length - 2] === 'myplans') {
                        // If we're on /dashboard/myplans without a sort parameter, default to 'All'
                        this.selectedFilter = 'All';
                    }
                    console.log('Alpine.js initialized with filter:', this.selectedFilter);
                },

                updateFilter() {
                    console.log('=== Filter Update Started ===');
                    console.log('Selected filter:', this.selectedFilter);
                    console.log('Current URL:', window.location.href);

                    const baseUrl = '{{ url("/dashboard/sort-plans") }}';
                    const targetUrl = `${baseUrl}/${this.selectedFilter}`;

                    console.log('Base URL:', baseUrl);
                    console.log('Target URL:', targetUrl);
                    console.log('=== Navigating to new URL ===');

                    // Add a small delay to see the console logs before navigation
                    setTimeout(() => {
                        window.location.href = targetUrl;
                    }, 100);
                }
            };
        }

        // Debug Alpine.js initialization
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM loaded, Alpine.js should initialize soon');
            console.log('Current page URL:', window.location.href);
        });

        // Debug Alpine.js events
        document.addEventListener('alpine:init', () => {
            console.log('Alpine.js initialized successfully');
        });
    </script>
@endsection