<x-filament-panels::page>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Current Membership Card -->
        <div class="md:col-span-1 bg-white dark:bg-gray-800 shadow rounded-lg p-6 border border-gray-100 dark:border-gray-700">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">আমার মেম্বারশিপ স্ট্যাটাস</h3>
            
            <div class="space-y-4">
                <div>
                    <span class="text-sm text-gray-500 dark:text-gray-400 block">বর্তমান স্ট্যাটাস</span>
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium mt-1
                        @if(auth()->user()->reseller_status === 'active') bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400
                        @elseif(auth()->user()->reseller_status === 'pending') bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400
                        @elseif(auth()->user()->reseller_status === 'expired') bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400
                        @else bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400
                        @endif">
                        @if(auth()->user()->reseller_status === 'active') সক্রিয় (Active)
                        @elseif(auth()->user()->reseller_status === 'pending') অপেক্ষমান (Pending)
                        @elseif(auth()->user()->reseller_status === 'expired') মেয়াদ শেষ (Expired)
                        @else নিষ্ক্রিয় (Inactive)
                        @endif
                    </span>
                </div>

                <div>
                    <span class="text-sm text-gray-500 dark:text-gray-400 block">সক্রিয় প্যাকেজ</span>
                    <span class="text-base font-semibold text-gray-900 dark:text-white block mt-0.5">
                        {{ auth()->user()->resellerPackage?->name ?? 'কোন প্যাকেজ নেই' }}
                    </span>
                </div>

                <div>
                    <span class="text-sm text-gray-500 dark:text-gray-400 block">মেয়াদ শেষের তারিখ</span>
                    <span class="text-base font-semibold text-gray-900 dark:text-white block mt-0.5">
                        {{ auth()->user()->reseller_expires_at ? auth()->user()->reseller_expires_at->format('d/m/Y') : 'N/A' }}
                    </span>
                </div>
            </div>
            
            <div class="mt-6 pt-6 border-t border-gray-100 dark:border-gray-700">
                <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">মেম্বারশিপ সুবিধা সমূহ:</h4>
                <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-2 list-disc list-inside">
                    <li>প্রোডাক্ট ক্যাটালগ ব্রাউজিং ও রিসেলার প্রাইস দেখার এক্সেস।</li>
                    <li>গ্রাহকদের সরাসরি অর্ডার এন্ট্রি করার সুবিধা।</li>
                    <li>অর্ডার ডেলিভারি হলে ওয়ালেটে সরাসরি প্রফিট অ্যাড।</li>
                    <li>সহজ বিকাশ/নগদ পেমেন্ট উইথড্রয়াল গেটওয়ে।</li>
                </ul>
            </div>
        </div>

        <!-- Checkout Form Column -->
        <div class="md:col-span-2 bg-white dark:bg-gray-800 shadow rounded-lg p-6 border border-gray-100 dark:border-gray-700">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">প্যাকেজ ক্রয় / নবায়ন ফরম</h3>
            
            <form wire:submit="submit" class="space-y-6">
                {{ $this->form }}
                
                <div class="flex justify-end">
                    <x-filament::button type="submit" color="success" size="lg" icon="heroicon-m-check">
                        পেমেন্ট কনফার্ম করুন
                    </x-filament::button>
                </div>
            </form>
        </div>
    </div>
</x-filament-panels::page>
