  <!-- Bank Account Modal -->
    <div
        x-show="showBankAccount"
        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 overflow-y-auto"
        aria-labelledby="bank-account-title"
        role="dialog"
        aria-modal="true">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div
                x-show="showBankAccount"
                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 bg-gray-500 bg-opacity-75 transition-opacity backdrop-blur-sm"
                @click="showBankAccount = false"
                aria-hidden="true">
            </div>

            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

            <div
                x-show="showBankAccount"
                x-transition:enter="transition 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="transition 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="inline-block align-bottom bg-white rounded-xl px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">

                <div class="absolute top-0 right-0 pt-4 pr-4">
                    <button
                        @click="showBankAccount = false"
                        type="button"
                        class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none">
                        <span class="sr-only">Close</span>
                        <i data-lucide="x" class="h-6 w-6"></i>
                    </button>
                </div>
<?php
    $contact = getContent('contact_us.content', true);
    $elemenets = getContent('contact_us.element');
?>
                <div class="text-center mb-5">
                    <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-primary-100 mb-4">
                        <i data-lucide="building-2" class="h-8 w-8 text-primary-600"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900" id="bank-account-title">Bank Account Details</h3>
                    <p class="mt-1 text-sm text-gray-500"><?php echo e($general->siteName(__())); ?></p>
                    <p class="text-xs text-gray-500"><?php echo e(__(@$contact->data_values->contact_address)); ?></p>
                </div>

                <div class="bg-gray-50 p-4 rounded-lg mb-6">
                    <p class="font-medium mb-3 flex items-center"><i data-lucide="info" class="h-4 w-4 mr-2 text-primary-500"></i> Account Details</p>
                    <ul class="space-y-3">
                        <li class="flex items-center justify-between p-2 hover:bg-gray-100 rounded-lg transition-colors">
                            <div class="flex items-center">
                                <div class="h-2 w-2 bg-primary-500 rounded-full mr-3"></div>
                                <span class="text-sm text-gray-700">Account Name</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm font-medium"><?php echo e($user->lastname); ?> <?php echo e($user->firstname); ?></span>
                                <button class="ml-2 text-primary-500 hover:text-primary-700 focus:outline-none" @click="navigator.clipboard.writeText('<?php echo e($user->lastname); ?> <?php echo e($user->firstname); ?>'); $el.querySelector('i').classList.add('text-green-500')">
                                    <i data-lucide="copy" class="h-4 w-4 transition-colors duration-300"></i>
                                </button>
                            </div>
                        </li>
                        <li class="flex items-center justify-between p-2 hover:bg-gray-100 rounded-lg transition-colors">
                            <div class="flex items-center">
                                <div class="h-2 w-2 bg-primary-500 rounded-full mr-3"></div>
                                <span class="text-sm text-gray-700">Account Number</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm font-medium"><?php echo e(auth()->user()->account_number); ?></span>
                                <button class="ml-2 text-primary-500 hover:text-primary-700 focus:outline-none" @click="navigator.clipboard.writeText('<?php echo e(auth()->user()->account_number); ?>'); $el.querySelector('i').classList.add('text-green-500')">
                                    <i data-lucide="copy" class="h-4 w-4 transition-colors duration-300"></i>
                                </button>
                            </div>
                        </li>
                        <li class="flex items-center justify-between p-2 hover:bg-gray-100 rounded-lg transition-colors">
                            <div class="flex items-center">
                                <div class="h-2 w-2 bg-primary-500 rounded-full mr-3"></div>
                                <span class="text-sm text-gray-700">Sort Code</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm font-medium">38677<?php echo e($user->id); ?></span>
                                <button class="ml-2 text-primary-500 hover:text-primary-700 focus:outline-none" @click="navigator.clipboard.writeText('38677<?php echo e($user->id); ?>'); $el.querySelector('i').classList.add('text-green-500')">
                                    <i data-lucide="copy" class="h-4 w-4 transition-colors duration-300"></i>
                                </button>
                            </div>
                        </li>
                        <li class="flex items-center justify-between p-2 hover:bg-gray-100 rounded-lg transition-colors">
                            <div class="flex items-center">
                                <div class="h-2 w-2 bg-primary-500 rounded-full mr-3"></div>
                                <span class="text-sm text-gray-700">Payment Reference</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm font-medium">977<?php echo e($user->id); ?>976</span>
                                <button class="ml-2 text-primary-500 hover:text-primary-700 focus:outline-none" @click="navigator.clipboard.writeText('977<?php echo e($user->id); ?>976'); $el.querySelector('i').classList.add('text-green-500')">
                                    <i data-lucide="copy" class="h-4 w-4 transition-colors duration-300"></i>
                                </button>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="flex items-start p-4 bg-primary-50 rounded-lg">
                    <i data-lucide="info" class="h-5 w-5 text-primary-500 mt-0.5 mr-3 flex-shrink-0"></i>
                    <p class="text-sm text-gray-700">
                        Payment reference helps <?php echo e($general->siteName(__())); ?> track payments faster. Please include it in wire transfer description.
                    </p>
                </div>

                <div class="mt-6 flex justify-end">
                    <button
                        @click="showBankAccount = false"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <div
    x-data="{ showUserNotice: false }"
    x-init="showUserNotice = true"
>

    <!-- User Notice Modal -->
    <div
        x-show="showUserNotice"
        x-cloak
        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 overflow-y-auto"
        role="dialog"
        aria-modal="true"
        aria-labelledby="user-notice-title"
    >

        <div class="flex items-center justify-center min-h-screen px-4 text-center sm:block sm:p-0">

            <!-- Overlay -->
            <div
                class="fixed inset-0 bg-gray-500 bg-opacity-75 backdrop-blur-sm"
                @click="showUserNotice = false"
                aria-hidden="true"
            ></div>

            <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>

            <!-- Modal panel -->
            <div
                x-show="showUserNotice"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-4 sm:scale-95"
                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave="transition 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:scale-95"
                class="inline-block bg-white rounded-xl px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full sm:p-6"
            >

                <!-- Close button -->
                <div class="absolute top-0 right-0 pt-4 pr-4">
                    <button
                        @click="showUserNotice = false"
                        class="text-gray-400 hover:text-gray-500 focus:outline-none"
                    >
                        <span class="sr-only">Close</span>
                        <i data-lucide="x" class="w-6 h-6"></i>
                    </button>
                </div>

                <!-- Header -->
                <div class="text-center mb-6">
                    <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-yellow-100 mb-4">
                        <i data-lucide="bell" class="h-8 w-8 text-yellow-600"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900" id="user-notice-title">
                        User Dashboard Notice
                    </h3>
                    <p class="mt-1 text-sm text-gray-500">
                        Please pay close attention to the notice below
                    </p>
                </div>

                <!-- Notice Content -->
                <div class="mt-4">
                    <div class="flex items-start p-4 bg-yellow-50 rounded-lg border border-yellow-200">
                        <div class="flex-shrink-0 mr-3 mt-0.5">
                            <i data-lucide="alert-circle" class="h-5 w-5 text-yellow-600"></i>
                        </div>
                        <p class="text-sm text-gray-700">
                            <?php echo e($user->notice); ?>

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

                <!-- Footer -->
                <div class="mt-6 flex justify-end">
                    <button
                        @click="showUserNotice = false"
                        class="px-4 py-2 text-sm font-medium rounded-md border border-gray-300 bg-white hover:bg-gray-50"
                    >
                        Close
                    </button>
                </div>

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

    <!-- Send Money Modal -->
    <div
        x-show="showSendMoney"
        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 overflow-y-auto"
        aria-labelledby="send-money-title"
        role="dialog"
        aria-modal="true">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div
                x-show="showSendMoney"
                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 bg-gray-500 bg-opacity-75 backdrop-blur-sm transition-opacity"
                @click="showSendMoney = false"
                aria-hidden="true">
            </div>

            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

            <div
                x-show="showSendMoney"
                x-transition:enter="transition 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="transition 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="inline-block align-bottom bg-white rounded-xl px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">

                <div class="absolute top-0 right-0 pt-4 pr-4">
                    <button
                        @click="showSendMoney = false"
                        type="button"
                        class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none">
                        <span class="sr-only">Close</span>
                        <i data-lucide="x" class="h-6 w-6"></i>
                    </button>
                </div>

                <div class="text-center mb-5">
                    <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-primary-100 mb-4">
                        <i data-lucide="send" class="h-8 w-8 text-primary-600"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900" id="send-money-title">Send Money</h3>
                    <p class="mt-1 text-sm text-gray-500">Swift and Secure Money Transfer</p>
                </div>

                <div class="mt-6 space-y-4">
                    <a href="<?php echo e(route('user.transfer.wire.index')); ?>?localtransfer" class="block group">
                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg group-hover:bg-gray-100 transition-colors border border-gray-200">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="h-10 w-10 bg-primary-100 rounded-full flex items-center justify-center group-hover:bg-primary-200 transition-colors">
                                        <i data-lucide="user" class="h-5 w-5 text-primary-600"></i>
                                    </div>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-900">Local Transfer</h4>
                                    <p class="text-sm text-gray-600">Easily send money locally</p>
                                    <p class="text-xs text-gray-500">0% Handling charges</p>
                                </div>
                            </div>
                            <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center group-hover:bg-primary-100 transition-colors">
                                <i data-lucide="chevron-right" class="h-5 w-5 text-gray-400 group-hover:text-primary-600 transition-colors"></i>
                            </div>
                        </div>
                    </a>

                    <a href="<?php echo e(route('user.transfer.wire.index')); ?>" class="block group">
                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg group-hover:bg-gray-100 transition-colors border border-gray-200">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="h-10 w-10 bg-primary-100 rounded-full flex items-center justify-center group-hover:bg-primary-200 transition-colors">
                                        <i data-lucide="globe" class="h-5 w-5 text-primary-600"></i>
                                    </div>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-900">International Wire Transfer</h4>
                                    <p class="text-sm text-gray-600">Wire transfer is executed under 72 hours</p>
                                    <p class="text-xs text-gray-500">IBAN & SWIFT code required</p>
                                </div>
                            </div>
                            <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center group-hover:bg-primary-100 transition-colors">
                                <i data-lucide="chevron-right" class="h-5 w-5 text-gray-400 group-hover:text-primary-600 transition-colors"></i>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="mt-6 flex justify-end">
                    <button
                        @click="showSendMoney = false"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<?php /**PATH C:\laragon\www\itrevosbank\core\resources\views/vatondash/partials/modals.blade.php ENDPATH**/ ?>