<div class="px-4 pt-6 pb-20 bg-gray-50 min-h-screen space-y-8 lg:max-w-xl lg:mx-auto">

    <section>
        <h3 class="text-xl font-extrabold text-gray-900 tracking-tight mb-3">Account</h3>

        <ul class="bg-white rounded-xl shadow-lg border border-gray-100 divide-y divide-gray-100 text-base">
            
            
             <li>
                <a href="<?php echo e(route('profile')); ?>" class="flex items-center justify-between p-4 font-semibold text-gray-800 hover:bg-gray-50 rounded-t-xl transition duration-150">
                    <div class="flex items-center gap-3">
                        <span class="fa fa-user-circle text-xl w-5 text-center text-[#1400FB]"></span>
                        <span>Profile Settings</span>
                    </div>
                    <span class="fa fa-chevron-right text-xs text-gray-400"></span>
                </a>
            </li> 
            
            <li>
                <a href="<?php echo e(route('contact-support')); ?>" class="flex items-center justify-between p-4 font-semibold text-gray-800 hover:bg-gray-50 transition duration-150">
                    <div class="flex items-center gap-3">
                        <span class="fa fa-user-edit text-xl w-5 text-center text-[#1400FB]"></span>
                        <span>Edit Company Details</span>
                    </div>
                    <span class="fa fa-chevron-right text-xs text-gray-400"></span>
                </a>
            </li>
            
            <li>
                <a href="#" class="flex justify-between items-center w-full p-4 font-semibold text-gray-800 hover:bg-gray-50 transition duration-150">
                    <div class="flex items-center gap-3">
                        <span class="fa fa-id-card text-xl w-5 text-center text-[#1400FB]"></span>
                        <span>Account Verification</span>
                    </div>
                    <span 
                        class="<?php echo \Illuminate\Support\Arr::toCssClasses([
                            'inline-block px-3 py-1 text-xs font-bold rounded-full', 
                            'bg-green-100 text-green-700' => auth()->user()->kyc_status == 'Verified', // Assuming status values
                            'bg-yellow-100 text-yellow-700' => auth()->user()->kyc_status == 'Pending',
                            'bg-red-100 text-red-700' => auth()->user()->kyc_status == 'Unverified',
                        ]); ?>"
                    >
                        <?php echo e(ucfirst(auth()->user()->kyc_status)); ?>

                    </span>
                </a>
            </li>
            
            <li>
                <a href="<?php echo e(route('transaction-history')); ?>" class="flex items-center justify-between p-4 font-semibold text-gray-800 hover:bg-gray-50 rounded-b-xl transition duration-150">
                    <div class="flex items-center gap-3">
                        <span class="fa fa-history text-xl w-5 text-center text-[#1400FB]"></span>
                        <span>Transaction History</span>
                    </div>
                    <span class="fa fa-chevron-right text-xs text-gray-400"></span>
                </a>
            </li>
        </ul>
    </section>
    
    <section>
        <h3 class="text-xl font-extrabold text-gray-900 tracking-tight mb-3">Security</h3>

        <ul class="bg-white rounded-xl shadow-lg border border-gray-100 divide-y divide-gray-100 text-base">
            <li>
                <a href="<?php echo e(route('profile.change-password')); ?>" class="flex items-center justify-between p-4 font-semibold text-gray-800 hover:bg-gray-50 rounded-t-xl transition duration-150">
                    <div class="flex items-center gap-3">
                        <span class="fa fa-key text-xl w-5 text-center text-[#1400FB]"></span>
                        <span>Change Password</span>
                    </div>
                    <span class="fa fa-chevron-right text-xs text-gray-400"></span>
                </a>
            </li>
            <li>
                <a href="<?php echo e(route('profile.change-transfer-pin')); ?>" class="flex items-center justify-between p-4 font-semibold text-gray-800 hover:bg-gray-50 rounded-b-xl transition duration-150">
                    <div class="flex items-center gap-3">
                        <span class="fa fa-lock text-xl w-5 text-center text-[#1400FB]"></span>
                        <span>Change Transaction PIN</span>
                    </div>
                    <span class="fa fa-chevron-right text-xs text-gray-400"></span>
                </a>
            </li>
        </ul>
    </section>

    <section>
        <h3 class="text-xl font-extrabold text-gray-900 tracking-tight mb-3">Resources & Support</h3>

        <ul class="bg-white rounded-xl shadow-lg border border-gray-100 divide-y divide-gray-100 text-base">
            <li>
                <a href="<?php echo e(route('terms-and-conditions')); ?>" target="_blank" class="flex items-center justify-between p-4 font-semibold text-gray-800 hover:bg-gray-50 rounded-t-xl transition duration-150">
                    <div class="flex items-center gap-3">
                        <span class="fa fa-file text-xl w-5 text-center text-[#1400FB]"></span>
                        <span>Terms & Conditions</span>
                    </div>
                    <span class="fa fa-external-link text-xs text-gray-400"></span>
                </a>
            </li>
            
            <li class="border-t border-gray-100">
                <a href="<?php echo e(route('live-chat-welcome')); ?>" class="flex items-center justify-between p-4 font-semibold text-gray-800 hover:bg-gray-50 transition duration-150">
                    <div class="flex items-center gap-3">
                        <span class="fa fa-comments text-xl w-5 text-center text-[#1400FB]"></span>
                        <span>Live Chat Support</span>
                    </div>
                    <span class="fa fa-chevron-right text-xs text-gray-400"></span>
                </a>
            </li>
            <li>
                <a href="<?php echo e(route('feedback.create')); ?>" class="flex items-center justify-between p-4 font-semibold text-gray-800 hover:bg-gray-50 rounded-b-xl transition duration-150">
                    <div class="flex items-center gap-3">
                        <span class="fa fa-envelope text-xl w-5 text-center text-[#1400FB]"></span>
                        <span>Send Report / Feedback</span>
                    </div>
                    <span class="fa fa-chevron-right text-xs text-gray-400"></span>
                </a>
            </li>
            </ul>
    </section>

    <div class="pt-2">
        <button 
            class="block p-4 font-bold text-red-700 bg-red-50 hover:bg-red-100 w-full text-left rounded-xl transition duration-150 shadow-sm" 
            wire:click='logout'
        >
            <span class="fa fa-sign-out-alt mr-3"></span>
            Log Out
        </button>
    </div>
</div>
<?php /**PATH C:\Users\Code brain\fitPay\resources\views/livewire/menu.blade.php ENDPATH**/ ?>