


<?php $__env->startSection('content'); ?>

<div id="main-wrapper" class="p-10"
    x-data="{
        isTermsModalOpen: false,
        isAccountRemovalModalOpen: false,
        accountRemovalRequestSent: false,
        isFaqModalOpen: false,
        isSupportModalOpen: false,
        supportTicketSent: false,
        supportMessage: '',
        aiAssistantEnabled: true,
        init() {
            // Odczytaj stan z localStorage; jeśli nie ma, domyślnie jest włączony
            const storedState = localStorage.getItem('aiAssistantEnabled');
            this.aiAssistantEnabled = storedState === null ? true : JSON.parse(storedState);

            this.$watch('aiAssistantEnabled', value => {
                // Zapisz zmianę w localStorage
                localStorage.setItem('aiAssistantEnabled', JSON.stringify(value));
                // Wyślij globalne zdarzenie, aby asystent mógł zareagować
                window.dispatchEvent(new CustomEvent('ai-state-changed', { detail: { enabled: value } }));
            });
        }
    }">

    <div class="flex flex-col gap-8">

        
        <div
            class="rounded-lg shadow-[1px_1px_4px_0px_#e2e8f0] p-6 bg-gradient-to-r from-slate-900 via-blue-800 to-blue-500 flex items-center justify-between">
            <div>
                <h3 class="text-2xl font-bold text-slate-50"><?php echo e(trans('lang.account_settings')); ?></h3>
                <p class="text-sm text-slate-200 mt-1 m-0"><?php echo e(trans('lang.account_settings_desc')); ?></p>
            </div>
        </div>

        
        <div class="rounded-lg border !border-slate-300 shadow-[1px_1px_4px_0px_#e2e8f0] bg-white overflow-hidden">
            <div class="p-6 sm:p-8">
                
                <div class="flex flex-col gap-3">

                    
                    <a href="<?php echo e(route('user.manage_profile')); ?>"
                        class="flex items-center justify-between p-4 rounded-lg border !border-slate-300 bg-slate-50 hover:bg-slate-100 transition-colors duration-200 cursor-pointer hover:no-underline">
                        <div class="flex items-center gap-4">
                            <span class="bg-blue-500 rounded-full p-3 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-pen-icon lucide-user-pen">
                                    <path d="M11.5 15H7a4 4 0 0 0-4 4v2"/>
                                    <path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/>
                                    <circle cx="10" cy="7" r="4"/>
                                </svg>
                            </span>
                            <span class="font-semibold text-gray-800"><?php echo e(trans('lang.manage_profile')); ?></span>
                        </div>
                        <svg class="h-6 w-6 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </a>

                    
                    <?php
                        $role = trim(Auth::guard('admin')->user()->getUserRole());
                        $merchantEmployee = \App\Models\MerchantEmployee::where('user_id', Auth::id())->first();
                        $hasUserManagementAccess = ($role === 'vendor') || ($merchantEmployee && in_array('manage_users', $merchantEmployee->permissions ?? []));
                    ?>
                    
                    <?php if($hasUserManagementAccess): ?>
                    <a href="<?php echo e(route('user.manage_users')); ?>"
                        class="flex items-center justify-between p-4 rounded-lg border !border-slate-300 bg-slate-50 hover:bg-slate-100 transition-colors duration-200 cursor-pointer hover:no-underline">
                        <div class="flex items-center gap-4">
                            <span class="bg-blue-500 rounded-full p-3 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users-icon lucide-users">
                                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
                                    <path d="M16 3.128a4 4 0 0 1 0 7.744"/>
                                    <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
                                    <circle cx="9" cy="7" r="4"/>
                                </svg>
                            </span>
                            <span class="font-semibold text-gray-800"><?php echo e(trans('lang.users_management')); ?></span>
                        </div>
                        <svg class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </a>
                    <?php endif; ?>

                    
                    <div class="flex items-center justify-between p-4 rounded-lg border !border-slate-300 bg-slate-50">
                        <div class="flex items-center gap-4">
                            <span class="bg-blue-500 rounded-full p-3 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot-icon lucide-bot">
                                    <path d="M12 8V4H8"/>
                                    <rect width="16" height="12" x="4" y="8" rx="2"/>
                                    <path d="M2 14h2"/>
                                    <path d="M20 14h2"/>
                                    <path d="M15 13v2"/>
                                    <path d="M9 13v2"/>
                                </svg>
                            </span>
                            <span class="font-semibold text-gray-800"><?php echo e(trans('lang.ai_assistant')); ?></span>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" x-model="aiAssistantEnabled" class="sr-only peer">
                            <div class="relative w-11 h-6 bg-slate-300 rounded-full peer-checked:bg-blue-500 transition-colors after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border after:border-slate-300 after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full peer-checked:after:border-white"></div>
                        </label>
                    </div>

                    
                    <div @click="isFaqModalOpen = true" class="flex items-center justify-between p-4 rounded-lg border !border-slate-300 bg-slate-50 hover:bg-slate-100 transition-colors duration-200 cursor-pointer hover:no-underline">
                         <div class="flex items-center gap-4">
                            <span class="bg-blue-500 rounded-full p-3 w-12 h-12 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open-icon lucide-book-open">
                                    <path d="M12 7v14"/>
                                    <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>
                                </svg>
                            </span>
                            <span class="font-semibold text-gray-800"><?php echo e(trans('lang.ai_assistant_faq')); ?></span>
                        </div>
                        <svg class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </div>
                    
                    
                    <div @click="isTermsModalOpen = true"
                        class="flex items-center justify-between p-4 rounded-lg border !border-slate-300 bg-slate-50 hover:bg-slate-100 transition-colors duration-200 cursor-pointer hover:no-underline">
                        <div class="flex items-center gap-4">
                            <span class="bg-blue-500 rounded-full p-3 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scale-icon lucide-scale">
                                    <path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/>
                                    <path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/>
                                    <path d="M7 21h10"/>
                                    <path d="M12 3v18"/>
                                    <path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/>
                                </svg>
                            </span>
                            <span class="font-semibold text-gray-800"><?php echo e(trans('lang.terms_and_conditions')); ?></span>
                        </div>
                        <svg class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </div>

                    
                    <div @click="isSupportModalOpen = true"
                        class="flex items-center justify-between p-4 rounded-lg border !border-slate-300 bg-slate-50 hover:bg-slate-100 transition-colors duration-200 cursor-pointer hover:no-underline">
                        <div class="flex items-center gap-4">
                            <span class="bg-green-500 rounded-full p-3 w-12 h-12 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-headset-icon lucide-headset">
                                    <path d="M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z"/>
                                    <path d="M21 16v2a4 4 0 0 1-4 4h-5"/>
                                </svg>
                            </span>
                            <span class="font-semibold text-gray-800"><?php echo e(trans('lang.contact_support')); ?></span>
                        </div>
                        <svg class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </div>

                    
                    <?php if($role === 'vendor'): ?>
                    <div @click="isAccountRemovalModalOpen = true"
                        class="flex items-center justify-between p-4 rounded-lg border !border-slate-300 bg-red-50 hover:bg-red-100 transition-colors duration-200 cursor-pointer hover:no-underline">
                        <div class="flex items-center gap-4">
                            <span class="bg-red-600 rounded-full p-3 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2">
                                    <path d="M10 11v6"/>
                                    <path d="M14 11v6"/>
                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
                                    <path d="M3 6h18"/>
                                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                                </svg>
                            </span>
                            <span class="font-semibold text-red-600"><?php echo e(trans('lang.request_account_removal')); ?></span>
                        </div>
                        <svg class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </div>
                    <?php endif; ?>

                </div>
            </div>
        </div>
    </div>

    

    
    <div x-show="isTermsModalOpen" x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-80" role="dialog"
        aria-modal="true" x-cloak>
        <div @click.away="isTermsModalOpen = false" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            class="bg-white rounded-lg text-left overflow-hidden shadow-xl w-full max-w-3xl flex flex-col">

            <div class="bg-gray-50 px-6 py-4 flex items-center justify-between border-b border-gray-200">
                <h3 class="text-lg font-bold text-slate-700"><?php echo e(trans('lang.terms_and_conditions')); ?></h3>
                <button @click="isTermsModalOpen = false" type="button"
                    class="text-slate-400 hover:text-slate-600 transition-colors focus:outline-none">
                    <span class="sr-only"><?php echo e(trans('lang.close')); ?></span>
                    <i class="fa-solid fa-times text-xl"></i>
                </button>
            </div>

            <div class="p-6 overflow-y-auto" style="max-height: 70vh;">
                <?php if ($__env->exists('legal.' . App::getLocale(), ['legal.en'])) echo $__env->make('legal.' . App::getLocale(), ['legal.en'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
            </div>

            <div class="bg-gray-50 px-4 py-4 border-t border-gray-200">
                <button @click="isTermsModalOpen = false" type="button"
                    class="w-full h-12 flex items-center justify-center bg-blue-500 text-white text-base font-semibold rounded-md shadow-md uppercase transition-colors hover:bg-blue-600 focus:outline-none focus:ring-0 active:outline-none active:ring-0"
                    style="box-shadow: 1px 1px 2px rgba(0,0,0,0.3);">
                    <?php echo e(trans('lang.close')); ?>

                </button>
            </div>
        </div>
    </div>

    
    <div x-show="isFaqModalOpen" x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-80" role="dialog"
        aria-modal="true" x-cloak>
        <div @click.away="isFaqModalOpen = false" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            class="bg-white rounded-lg text-left overflow-hidden shadow-xl w-full max-w-4xl flex flex-col">
            
            <div class="bg-gray-50 px-6 py-4 flex items-center justify-between border-b border-gray-200">
                <h3 class="text-lg font-bold text-slate-700"><?php echo e(trans('lang.ai_assistant_faq')); ?></h3>
                <button @click="isFaqModalOpen = false" type="button"
                    class="text-slate-400 hover:text-slate-600 transition-colors focus:outline-none">
                    <span class="sr-only"><?php echo e(trans('lang.close')); ?></span>
                    <i class="fa-solid fa-times text-xl"></i>
                </button>
            </div>

            <div class="px-6 pb-6 overflow-y-auto" style="max-height: 70vh;">
                
                <div x-data="{
                        knowledgeBase: aiAssistant().knowledgeBase,
                        activeAccordion: null
                    }" class="space-y-8 mt-2">
                    <template x-for="category in knowledgeBase" :key="category.id">
                        <div class="space-y-4">
                            <h4 class="text-2xl font-semibold text-slate-900" x-text="category.title"></h4>
                            <div class="space-y-3">
                                <template x-for="(item, index) in category.questions" :key="item.id">
                                    <div @click="activeAccordion = (activeAccordion === category.id + index ? null : category.id + index)"
                                         class="rounded-lg bg-blue-50/20 border border-slate-200 p-4 cursor-pointer hover:bg-blue-50/50 hover:border-slate-300 transition-all duration-300">
                                        
                                        <div class="flex justify-between items-center">
                                            <span class="text-base font-medium text-slate-800" x-text="item.question"></span>
                                            <i class="fa-solid fa-chevron-down text-slate-500 transition-transform duration-300"
                                               :class="{ 'rotate-180 text-blue-500': activeAccordion === category.id + index }"></i>
                                        </div>
                                        
                                        <div x-show="activeAccordion === category.id + index" x-transition class="mt-4">
                                            <div class="border-t border-slate-200 pt-2">
                                                <p class="text-base text-slate-700 leading-relaxed" x-html="item.answer"></p>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            <div class="bg-gray-50 px-4 py-4 border-t border-gray-200">
                <button @click="isFaqModalOpen = false" type="button"
                    class="w-full h-12 flex items-center justify-center bg-blue-500 text-white text-base font-semibold rounded-md shadow-md uppercase transition-colors hover:bg-blue-600 focus:outline-none focus:ring-0 active:outline-none active:ring-0"
                    style="box-shadow: 1px 1px 2px rgba(0,0,0,0.3);">
                    <?php echo e(trans('lang.close')); ?>

                </button>
            </div>
        </div>
    </div>


    
    <div x-show="isAccountRemovalModalOpen" 
        x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-80" role="dialog"
        aria-modal="true" x-cloak>

        <div @click.away="isAccountRemovalModalOpen = false; setTimeout(() => accountRemovalRequestSent = false, 300)"
            x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
            class="bg-white rounded-lg text-left overflow-hidden shadow-xl w-full max-w-lg flex flex-col">

            <div class="bg-gray-50 px-6 py-4 flex items-center justify-between border-b border-gray-200">
                <h3 class="text-lg font-bold text-slate-700"><?php echo e(trans('lang.request_account_removal')); ?></h3>
                <button
                    @click="isAccountRemovalModalOpen = false; setTimeout(() => accountRemovalRequestSent = false, 300)"
                    type="button" class="text-slate-400 hover:text-slate-600 transition-colors focus:outline-none">
                    <span class="sr-only"><?php echo e(trans('lang.close')); ?></span>
                    <i class="fa-solid fa-times text-xl"></i>
                </button>
            </div>

            
            <div x-show="!accountRemovalRequestSent">
                <div class="p-6 text-center">
                    <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-100">
                        <i class="fa-solid fa-triangle-exclamation text-3xl text-red-600"></i>
                    </div>
                    <h4 class="text-xl font-semibold text-gray-900 mt-4"><?php echo e(trans('lang.account_removal.are_you_sure')); ?></h4>
                    <p class="mt-2 text-sm text-gray-600"><?php echo e(trans('lang.account_removal.irreversible_notice')); ?></p>
                </div>

                <div class="bg-gray-50 px-4 py-4 border-t border-gray-200 flex flex-col gap-3">
                    <button 
                        @click="
                            fetch('<?php echo e(route('user.request_account_removal')); ?>', {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': document.querySelector('meta[name=\'csrf-token\']').content,
                                    'Content-Type': 'application/json'
                                }
                            }).then(res => res.json()).then(data => {
                                if(data.success) {
                                    accountRemovalRequestSent = true;
                                } else {
                                    alert('<?php echo e(trans('lang.account_removal.request_failed')); ?>');
                                }
                            });
                        "
                        type="button"
                        class="w-full h-12 flex items-center justify-center bg-red-600 text-white text-base font-semibold rounded-md shadow-md uppercase transition-colors hover:bg-red-700 focus:outline-none focus:ring-0 active:outline-none active:ring-0"
                        style="box-shadow: 1px 1px 2px rgba(0,0,0,0.2);">
                        <?php echo e(trans('lang.delete_account')); ?>

                    </button>
                    <button @click="isAccountRemovalModalOpen = false" type="button"
                        class="w-full h-12 flex items-center justify-center bg-white text-gray-700 border border-gray-300 text-base font-semibold rounded-md shadow-sm uppercase transition-colors hover:bg-gray-50 focus:outline-none focus:ring-0 active:outline-none active:ring-0">
                        <?php echo e(trans('lang.cancel')); ?>

                    </button>
                </div>
            </div>

            
            <div x-show="accountRemovalRequestSent">
                <div class="p-6 text-center">
                    <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100">
                        <i class="fa-solid fa-check text-3xl text-green-600"></i>
                    </div>
                    <h4 class="text-xl font-semibold text-gray-900 mt-4"><?php echo e(trans('lang.account_removal.request_sent_title')); ?></h4>
                    <p class="mt-2 text-sm text-gray-600"><?php echo e(trans('lang.account_removal.request_sent_desc')); ?></p>
                </div>
                <div class="bg-gray-50 px-4 py-4 border-t border-gray-200">
                    <button
                        @click="isAccountRemovalModalOpen = false; setTimeout(() => accountRemovalRequestSent = false, 300)"
                        type="button"
                        class="w-full h-12 flex items-center justify-center bg-blue-500 text-white text-base font-semibold rounded-md shadow-md uppercase transition-colors hover:bg-blue-600 focus:outline-none focus:ring-0 active:outline-none active:ring-0"
                        style="box-shadow: 1px 1px 2px rgba(0,0,0,0.3);">
                        <?php echo e(trans('lang.close')); ?>

                    </button>
                </div>
            </div>

        </div>
    </div>

    
    <div x-show="isSupportModalOpen"
        x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-80" role="dialog"
        aria-modal="true" x-cloak>

        <div @click.away="isSupportModalOpen = false; setTimeout(() => { supportTicketSent = false; supportMessage = ''; }, 300)"
            x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
            class="bg-white rounded-lg text-left overflow-hidden shadow-xl w-full max-w-lg flex flex-col">

            <div class="bg-gray-50 px-6 py-4 flex items-center justify-between border-b border-gray-200">
                <h3 class="text-lg font-bold text-slate-700"><?php echo e(trans('lang.contact_support')); ?></h3>
                <button
                    @click="isSupportModalOpen = false; setTimeout(() => { supportTicketSent = false; supportMessage = ''; }, 300)"
                    type="button" class="text-slate-400 hover:text-slate-600 transition-colors focus:outline-none">
                    <span class="sr-only"><?php echo e(trans('lang.close')); ?></span>
                    <i class="fa-solid fa-times text-xl"></i>
                </button>
            </div>

            
            <div x-show="!supportTicketSent">
                <div class="p-6">
                    <div class="text-center mb-4">
                        <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 mb-4">
                            <i class="fa-solid fa-headset text-3xl text-green-600"></i>
                        </div>
                        <p class="text-sm text-gray-600">
                            <?php echo e(trans('lang.support_description')); ?>

                        </p>
                    </div>

                    <div class="space-y-4">
                        <div>
                            <label for="support-message" class="block text-sm font-medium text-gray-700 mb-2">
                                <?php echo e(trans('lang.describe_issue')); ?>

                            </label>
                            <textarea
                                id="support-message"
                                x-model="supportMessage"
                                rows="4"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
                                placeholder="<?php echo e(trans('lang.describe_issue_placeholder')); ?>"
                                maxlength="1000"
                            ></textarea>
                            <p class="mt-1 text-sm text-gray-500" x-text="'<?php echo e(trans('lang.characters_remaining')); ?>: ' + (1000 - supportMessage.length)"></p>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-50 px-4 py-4 border-t border-gray-200 flex flex-col gap-3">
                    <button
                        @click="
                            if(supportMessage.trim() === '') {
                                alert('<?php echo e(trans('lang.message_required')); ?>');
                                return;
                            }
                            fetch('/api/support-ticket', {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': document.querySelector('meta[name=\'csrf-token\']').content,
                                    'Content-Type': 'application/json'
                                },
                                body: JSON.stringify({ message: supportMessage })
                            }).then(res => res.json()).then(data => {
                                if(data.success) {
                                    supportTicketSent = true;
                                } else {
                                    alert('<?php echo e(trans('lang.ticket_creation_failed')); ?>');
                                }
                            }).catch(() => {
                                alert('<?php echo e(trans('lang.ticket_creation_failed')); ?>');
                            });
                        "
                        :disabled="supportMessage.trim() === ''"
                        type="button"
                        class="w-full h-12 flex items-center justify-center bg-green-600 text-white text-base font-semibold rounded-md shadow-md uppercase transition-colors hover:bg-green-700 focus:outline-none focus:ring-0 active:outline-none active:ring-0 disabled:opacity-50 disabled:cursor-not-allowed"
                        style="box-shadow: 1px 1px 2px rgba(0,0,0,0.2);">
                        <?php echo e(trans('lang.send_ticket')); ?>

                    </button>
                    <button @click="isSupportModalOpen = false; setTimeout(() => { supportTicketSent = false; supportMessage = ''; }, 300)" type="button"
                        class="w-full h-12 flex items-center justify-center bg-white text-gray-700 border border-gray-300 text-base font-semibold rounded-md shadow-sm uppercase transition-colors hover:bg-gray-50 focus:outline-none focus:ring-0 active:outline-none active:ring-0">
                        <?php echo e(trans('lang.cancel')); ?>

                    </button>
                </div>
            </div>

            
            <div x-show="supportTicketSent">
                <div class="p-6 text-center">
                    <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 mb-4">
                        <i class="fa-solid fa-check text-3xl text-green-600"></i>
                    </div>
                    <h4 class="text-xl font-semibold text-gray-900 mb-2"><?php echo e(trans('lang.ticket_sent_title')); ?></h4>
                    <p class="text-sm text-gray-600"><?php echo e(trans('lang.ticket_saved_desc')); ?></p>
                </div>
                <div class="bg-gray-50 px-4 py-4 border-t border-gray-200">
                    <button
                        @click="isSupportModalOpen = false; setTimeout(() => { supportTicketSent = false; supportMessage = ''; }, 300)"
                        type="button"
                        class="w-full h-12 flex items-center justify-center bg-blue-500 text-white text-base font-semibold rounded-md shadow-md uppercase transition-colors hover:bg-blue-600 focus:outline-none focus:ring-0 active:outline-none active:ring-0"
                        style="box-shadow: 1px 1px 2px rgba(0,0,0,0.3);">
                        <?php echo e(trans('lang.close')); ?>

                    </button>
                </div>
            </div>

        </div>
    </div>

</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\pub-and-go-merchant-np\resources\views/users/profile.blade.php ENDPATH**/ ?>