From 67131615c388b553bb1d82516e1167ef84ed30e6 Mon Sep 17 00:00:00 2001
From: Jaroslav Drzik <jaro@ttx.sk>
Date: Thu, 7 Mar 2024 14:10:11 +0100
Subject: [PATCH] Add image popup, price to float in search

---
 .DS_Store                            | Bin 6148 -> 6148 bytes
 package.json                         |   3 +-
 resources/.DS_Store                  | Bin 6148 -> 6148 bytes
 resources/js/.DS_Store               | Bin 6148 -> 6148 bytes
 resources/js/Layouts/GuestLayout.vue |  10 +-
 resources/js/Layouts/MegaMenu.vue    | 212 +++++++++++++++++++++++++++
 resources/js/Layouts/UserOptions.vue |  20 +++
 resources/js/Pages/IkeaRoot.vue      |  31 +++-
 8 files changed, 270 insertions(+), 6 deletions(-)
 create mode 100644 resources/js/Layouts/MegaMenu.vue
 create mode 100644 resources/js/Layouts/UserOptions.vue

diff --git a/.DS_Store b/.DS_Store
index b168a04787fe9c2edec5e2e98abc8f3642a36ad6..e50c26ae36fa4f3dfdee34ee8b557567e3228a92 100644
GIT binary patch
delta 131
zcmZoMXfc=|&e%S&P;8=}q9`*10|O%ig8&0VF+&MM5kn$FL0Zbhjp}wF2~LJ2hI}9_
zL6$5|PRh^E0m=fUix^UYQuz#}Kvpt{ot6TT-q>x&zL}jvfP=Ap<HqmIllet-85uS^
LiX3L1*uVk+z;z(N

delta 60
zcmZoMXfc=|&e%4wP;8=}A}1pQ0|O8XFigB=yz!(R`y@uY&FmZk9E@!nKYnMP%rBzL
N3Q}@lv#rQsW&r4}5JUg~

diff --git a/package.json b/package.json
index ab333db..bf8c9ae 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,10 @@
         "vue": "^3.4.15"
     },
     "dependencies": {
+        "@coreui/vue": "^4.10.2",
         "@vueform/multiselect": "^2.5.1",
         "flowbite": "^2.1.1",
-        "flowbite-vue": "^0.1.0",
+        "flowbite-vue": "file:///Users/jaro/Devel/flowbite-vue",
         "laravel-echo": "^1.13.0",
         "pusher-js": "^7.3.0",
         "sweetalert2": "^11.4.23",
diff --git a/resources/.DS_Store b/resources/.DS_Store
index dee0e3ef6901846f5ae79a82155c4009b8f6a42b..1fb743e06472897531d1a615d93121e7d767dc42 100644
GIT binary patch
delta 123
zcmZoMXfc=|&e%3FQH+&?fq{WzVxou)6OaJ{AexbZL4YACKR*Y^019MHOw<qri36Do
z#c3(U$soCj+A<q6{MjcPh_Gzt=HTIAY}=Uloq009h@vP+tpX4y05Qmj13=8M*->Oa
FGXQec7UTc`

delta 76
zcmZoMXfc=|&Zs)EP<Y}T89^on2w((KKrFzpab+C)!~=nw**OF_7*#iJ{LVa?Uqq1;
VB%c6MI@yFrd2@ou66T2wEC6po5Rd=>

diff --git a/resources/js/.DS_Store b/resources/js/.DS_Store
index c32883842752acf742ff9e4a68f0123bb24f31f0..809f381fa0e84fd76a147adf88124c93242a52ab 100644
GIT binary patch
delta 47
zcmZoMXfc@J&&V_}z<RQQ2+PENNnv&dABIGRN``!fQic+S;<S|F<c$k_*f+Ct{N)D#
DH{%VM

delta 28
icmZoMXfc@J&&W72z#2&O$ZR~~%s%mg%w~3uzx)7&#|f(d

diff --git a/resources/js/Layouts/GuestLayout.vue b/resources/js/Layouts/GuestLayout.vue
index adfbe17..e15b945 100644
--- a/resources/js/Layouts/GuestLayout.vue
+++ b/resources/js/Layouts/GuestLayout.vue
@@ -3,12 +3,14 @@ import Swal from 'sweetalert2';
 import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
 import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
 import LogoIkea from '@/assets/Ikea_logo.svg';
+import UserOptions from './UserOptions.vue';
 import {
     FwbSelect,
     FwbNavbar,
     FwbNavbarCollapse,
     FwbNavbarLink,
     FwbNavbarLogo,
+    FwbButton,
 } from 'flowbite-vue';
 
 const menu = ref([])
@@ -43,6 +45,10 @@ onMounted(fetch_menu);
 
         <template #default="{ isShowMenu }">
             <fwb-navbar-collapse :is-show-menu="isShowMenu" v-if="menu.length > 0">
+                <fwb-navbar-link>
+                    <user-options></user-options>
+
+                </fwb-navbar-link>
                 <fwb-navbar-link :link="route(menu[0].route_or_url)">
                     Home
                 </fwb-navbar-link>
@@ -52,9 +58,11 @@ onMounted(fetch_menu);
                     </fwb-navbar-link>
                 </template>
             </fwb-navbar-collapse>
+
         </template>
+        <template #mega-menu>TEST</template>
     </fwb-navbar>
     <div class="m-3">
         <slot />
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/resources/js/Layouts/MegaMenu.vue b/resources/js/Layouts/MegaMenu.vue
new file mode 100644
index 0000000..cc7b2f4
--- /dev/null
+++ b/resources/js/Layouts/MegaMenu.vue
@@ -0,0 +1,212 @@
+<template>
+  <nav class="bg-white border-gray-200 dark:border-gray-600 dark:bg-gray-900">
+    <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl p-4">
+      <a
+        href="https://flowbite.com"
+        class="flex items-center space-x-3 rtl:space-x-reverse"
+      >
+        <img
+          src="https://flowbite.com/docs/images/logo.svg"
+          class="h-8"
+          alt="Flowbite Logo"
+        />
+        <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white"
+          >Flowbite</span
+        >
+      </a>
+      <button
+        data-collapse-toggle="mega-menu-full-cta"
+        type="button"
+        class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+        aria-controls="mega-menu-full-cta"
+        aria-expanded="false"
+      >
+        <span class="sr-only">Open main menu</span>
+        <svg
+          class="w-5 h-5"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 17 14"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M1 1h15M1 7h15M1 13h15"
+          />
+        </svg>
+      </button>
+      <div
+        id="mega-menu-full-cta"
+        class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
+      >
+        <ul
+          class="flex flex-col mt-4 font-medium md:flex-row md:mt-0 md:space-x-8 rtl:space-x-reverse"
+        >
+          <li>
+            <a
+              href="#"
+              class="block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700"
+              aria-current="page"
+              >Home</a
+            >
+          </li>
+          <li>
+            <button
+              id="mega-menu-full-cta-dropdown-button"
+              data-collapse-toggle="mega-menu-full-cta-dropdown"
+              data-dropdown-placement="bottom"
+              class="flex items-center justify-between w-full py-2 px-3 font-medium text-gray-900 border-b border-gray-100 md:w-auto hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-600 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700"
+            >
+              Company
+              <svg
+                class="w-2.5 h-2.5 ms-3"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 10 6"
+              >
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m1 1 4 4 4-4"
+                />
+              </svg>
+            </button>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700"
+              >Marketplace</a
+            >
+          </li>
+          <li>
+            <a
+              href="#"
+              class="block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700"
+              >Resources</a
+            >
+          </li>
+          <li>
+            <a
+              href="#"
+              class="block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700"
+              >Contact</a
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      id="mega-menu-full-cta-dropdown"
+      class="mt-1 bg-white border-gray-200 shadow-sm border-y dark:bg-gray-800 dark:border-gray-600"
+    >
+      <div
+        class="grid max-w-screen-xl px-4 py-5 mx-auto text-sm text-gray-500 dark:text-gray-400 md:grid-cols-3 md:px-6"
+      >
+        <ul class="space-y-4 sm:mb-4 md:mb-0" aria-labelledby="mega-menu-full-cta-button">
+          <li>
+            <a
+              href="#"
+              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+            >
+              Online Stores
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+            >
+              Segmentation
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+            >
+              Marketing CRM
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+            >
+              Online Stores
+            </a>
+          </li>
+        </ul>
+        <ul class="hidden mb-4 space-y-4 md:mb-0 sm:block">
+          <li>
+            <a
+              href="#"
+              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+            >
+              Our Blog
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+            >
+              Terms & Conditions
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+            >
+              License
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+            >
+              Resources
+            </a>
+          </li>
+        </ul>
+        <div class="mt-4 md:mt-0">
+          <h2 class="mb-2 font-semibold text-gray-900 dark:text-white">Our brands</h2>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">
+            At Flowbite, we have a portfolio of brands that cater to a variety of
+            preferences.
+          </p>
+          <a
+            href="#"
+            class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-700"
+          >
+            Explore our brands
+            <span class="sr-only">Explore our brands </span>
+            <svg
+              class="w-3 h-3 ms-2 rtl:rotate-180"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 14 10"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M1 5h12m0 0L9 1m4 4L9 9"
+              />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
diff --git a/resources/js/Layouts/UserOptions.vue b/resources/js/Layouts/UserOptions.vue
new file mode 100644
index 0000000..b312a72
--- /dev/null
+++ b/resources/js/Layouts/UserOptions.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="grid grid grid-cols-2 gap-0 items-center">
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        class="dark:fill-white"
+      >
+        <title>settings</title>
+        <path
+          d="M16 12c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172-2.106 0.449-2.828 1.172-1.172 1.724-1.172 2.828 0.449 2.106 1.172 2.828 1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828zM14 12c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414zM20.315 15.404c0.046-0.105 0.112-0.191 0.192-0.257 0.112-0.092 0.251-0.146 0.403-0.147h0.090c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121-0.337-1.58-0.879-2.121-1.293-0.879-2.121-0.879h-0.159c-0.11-0.001-0.215-0.028-0.308-0.076-0.127-0.066-0.23-0.172-0.292-0.312-0.003-0.029-0.004-0.059-0.004-0.089-0.024-0.055-0.040-0.111-0.049-0.168 0.020-0.334 0.077-0.454 0.168-0.547l0.062-0.062c0.585-0.586 0.878-1.356 0.877-2.122s-0.294-1.536-0.881-2.122c-0.586-0.585-1.356-0.878-2.122-0.877s-1.536 0.294-2.12 0.879l-0.046 0.046c-0.083 0.080-0.183 0.136-0.288 0.166-0.14 0.039-0.291 0.032-0.438-0.033-0.101-0.044-0.187-0.11-0.253-0.19-0.092-0.112-0.146-0.251-0.147-0.403v-0.090c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879-1.58 0.337-2.121 0.879-0.879 1.293-0.879 2.121v0.159c-0.001 0.11-0.028 0.215-0.076 0.308-0.066 0.127-0.172 0.23-0.312 0.292-0.029 0.003-0.059 0.004-0.089 0.004-0.055 0.024-0.111 0.040-0.168 0.049-0.335-0.021-0.455-0.078-0.548-0.169l-0.062-0.062c-0.586-0.585-1.355-0.878-2.122-0.878s-1.535 0.294-2.122 0.882c-0.585 0.586-0.878 1.355-0.878 2.122s0.294 1.536 0.879 2.12l0.048 0.047c0.080 0.083 0.136 0.183 0.166 0.288 0.039 0.14 0.032 0.291-0.031 0.434-0.006 0.016-0.013 0.034-0.021 0.052-0.041 0.109-0.108 0.203-0.191 0.275-0.11 0.095-0.25 0.153-0.383 0.156h-0.090c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.294-0.879 2.122 0.337 1.58 0.879 2.121 1.293 0.879 2.121 0.879h0.159c0.11 0.001 0.215 0.028 0.308 0.076 0.128 0.067 0.233 0.174 0.296 0.321 0.024 0.055 0.040 0.111 0.049 0.168-0.020 0.334-0.077 0.454-0.168 0.547l-0.062 0.062c-0.585 0.586-0.878 1.356-0.877 2.122s0.294 1.536 0.881 2.122c0.586 0.585 1.356 0.878 2.122 0.877s1.536-0.294 2.12-0.879l0.047-0.048c0.083-0.080 0.183-0.136 0.288-0.166 0.14-0.039 0.291-0.032 0.434 0.031 0.016 0.006 0.034 0.013 0.052 0.021 0.109 0.041 0.203 0.108 0.275 0.191 0.095 0.11 0.153 0.25 0.156 0.383v0.092c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879 1.58-0.337 2.121-0.879 0.879-1.293 0.879-2.121v-0.159c0.001-0.11 0.028-0.215 0.076-0.308 0.067-0.128 0.174-0.233 0.321-0.296 0.055-0.024 0.111-0.040 0.168-0.049 0.334 0.020 0.454 0.077 0.547 0.168l0.062 0.062c0.586 0.585 1.356 0.878 2.122 0.877s1.536-0.294 2.122-0.881c0.585-0.586 0.878-1.356 0.877-2.122s-0.294-1.536-0.879-2.12l-0.048-0.047c-0.080-0.083-0.136-0.183-0.166-0.288-0.039-0.14-0.032-0.291 0.031-0.434zM18.396 9.302c-0.012-0.201-0.038-0.297-0.076-0.382v0.080c0 0.043 0.003 0.084 0.008 0.125 0.021 0.060 0.043 0.119 0.068 0.177 0.004 0.090 0.005 0.091 0.005 0.092 0.249 0.581 0.684 1.030 1.208 1.303 0.371 0.193 0.785 0.298 1.211 0.303h0.18c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707-0.111 0.525-0.293 0.707-0.431 0.293-0.707 0.293h-0.090c-0.637 0.003-1.22 0.228-1.675 0.603-0.323 0.266-0.581 0.607-0.75 0.993-0.257 0.582-0.288 1.21-0.127 1.782 0.119 0.423 0.341 0.814 0.652 1.136l0.072 0.073c0.196 0.196 0.294 0.45 0.294 0.707s-0.097 0.512-0.292 0.707c-0.197 0.197-0.451 0.295-0.709 0.295s-0.512-0.097-0.707-0.292l-0.061-0.061c-0.463-0.453-1.040-0.702-1.632-0.752-0.437-0.037-0.882 0.034-1.293 0.212-0.578 0.248-1.027 0.683-1.3 1.206-0.193 0.371-0.298 0.785-0.303 1.211v0.181c0 0.276-0.111 0.525-0.293 0.707s-0.43 0.292-0.706 0.292-0.525-0.111-0.707-0.293-0.293-0.431-0.293-0.707v-0.090c-0.015-0.66-0.255-1.242-0.644-1.692-0.284-0.328-0.646-0.585-1.058-0.744-0.575-0.247-1.193-0.274-1.756-0.116-0.423 0.119-0.814 0.341-1.136 0.652l-0.073 0.072c-0.196 0.196-0.45 0.294-0.707 0.294s-0.512-0.097-0.707-0.292c-0.197-0.197-0.295-0.451-0.295-0.709s0.097-0.512 0.292-0.707l0.061-0.061c0.453-0.463 0.702-1.040 0.752-1.632 0.037-0.437-0.034-0.882-0.212-1.293-0.248-0.578-0.683-1.027-1.206-1.3-0.371-0.193-0.785-0.298-1.211-0.303l-0.18 0.001c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707 0.111-0.525 0.293-0.707 0.431-0.293 0.707-0.293h0.090c0.66-0.015 1.242-0.255 1.692-0.644 0.328-0.284 0.585-0.646 0.744-1.058 0.247-0.575 0.274-1.193 0.116-1.756-0.119-0.423-0.341-0.814-0.652-1.136l-0.073-0.073c-0.196-0.196-0.294-0.45-0.294-0.707s0.097-0.512 0.292-0.707c0.197-0.197 0.451-0.295 0.709-0.295s0.512 0.097 0.707 0.292l0.061 0.061c0.463 0.453 1.040 0.702 1.632 0.752 0.37 0.032 0.745-0.014 1.101-0.137 0.096-0.012 0.186-0.036 0.266-0.072-0.031 0.001-0.061 0.003-0.089 0.004-0.201 0.012-0.297 0.038-0.382 0.076h0.080c0.043 0 0.084-0.003 0.125-0.008 0.060-0.021 0.119-0.043 0.177-0.068 0.090-0.004 0.091-0.005 0.092-0.005 0.581-0.249 1.030-0.684 1.303-1.208 0.193-0.37 0.298-0.785 0.303-1.21v-0.181c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293 0.525 0.111 0.707 0.293 0.293 0.431 0.293 0.707v0.090c0.003 0.637 0.228 1.22 0.603 1.675 0.266 0.323 0.607 0.581 0.996 0.751 0.578 0.255 1.206 0.286 1.778 0.125 0.423-0.119 0.814-0.341 1.136-0.652l0.073-0.072c0.196-0.196 0.45-0.294 0.707-0.294s0.512 0.097 0.707 0.292c0.197 0.197 0.295 0.451 0.295 0.709s-0.097 0.512-0.292 0.707l-0.061 0.061c-0.453 0.463-0.702 1.040-0.752 1.632-0.032 0.37 0.014 0.745 0.137 1.101 0.012 0.095 0.037 0.185 0.072 0.266-0.001-0.032-0.002-0.062-0.004-0.089z"
+        ></path>
+    </svg>
+    <div>en
+      <!-- -->&nbsp;/&nbsp;<span class="">€</span>
+    </div>
+    </div>
+</template>
diff --git a/resources/js/Pages/IkeaRoot.vue b/resources/js/Pages/IkeaRoot.vue
index 1b3137a..03060f3 100644
--- a/resources/js/Pages/IkeaRoot.vue
+++ b/resources/js/Pages/IkeaRoot.vue
@@ -25,7 +25,7 @@ import Popper from "vue3-popper";
 
 const screenWidth = ref(screen.width)
 const screenHeight = ref(screen.height)
-const hover = ref(false);
+const hover = ref(true);
 const hoverImage = ref(null);
 
 const sdropdown = ref([
@@ -334,7 +334,7 @@ const async_search = async () => {
         img: i.mainImageUrl,
         code: i.code,
         url: i.url,
-        price: i.salesPrice,
+        price: parseFloat(i.salesPrice),
         units: i.priceUnit,
         descLong: i.mainImageAlt,
       };
@@ -438,8 +438,32 @@ watch(ccodes, (codes) => {
 </script>
 <template>
   <GuestLayout>
+
     <div class="flex flex-wrap gap-2 justify-center align-middle">
-      <div class="flex flex-col start-0">
+
+            <div id="popup-modal" tabindex="-1" :class="hover ? 'hidden' : ''" class="absolute inset-y-1/3 left-1/3 z-50 justify-center items-center w-full  max-h-full">
+    <div class="relative p-4 w-full max-w-md max-h-full">
+        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+            <button @click="hover=true" type="button" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="popup-modal">
+                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+                </svg>
+                <span class="sr-only">Close modal</span>
+            </button>
+            <div class="p-4 md:p-5 text-center">
+
+
+                <img :src="hoverImage"/>
+                <!-- <button data-modal-hide="popup-modal" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
+                    Yes, I'm sure
+                </button> -->
+                <button @click="hover=true" data-modal-hide="popup-modal" type="button" class="py-2.5 px-5 mt-2 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Close</button>
+            </div>
+        </div>
+    </div>
+
+        </div>
+      <div class="flex flex-col start-0 row-start-1">
         <div
           class="justify-center rounded-md border-black border-8 max-h-[328px]"
         >
@@ -593,7 +617,6 @@ watch(ccodes, (codes) => {
             <template #item-img="{ code, img }">
                 <img
                 v-on:mouseover="onHover"
-                v-on:mouseleave="onHover"
                 class="h-12"
                 :src="img"
                 :alt="code"