توپ کت‌نیپ

3750 IQD

Qty:

جزئیات

http:// </div> </div> </div> </div> </div> <script> document.addEventListener("alpine:init", () => { Alpine.data("productDetails", () => ({ productId: '9184', error: false, auth: false, isLoading: false, quantity: 0, cartId: null, isInCart: false, showSizeTooltip: false, tooltipX: 0, tooltipY: 0, init() { if (this.auth) { this.fetchCart(); } // Listen for cart updates from other components this.$watch('quantity', (value) => { this.isInCart = value > 0; }); }, async addToCart() { // Check if user is authenticated if (!'') { window.dispatchEvent(new CustomEvent('open-auth-modal')); return; } await this.createOrUpdateCart(1); }, async increaseQuantity() { const newQuantity = this.quantity + 1; await this.updateQuantity(this.productId, newQuantity); }, async decreaseQuantity() { const newQuantity = this.quantity - 1; await this.updateQuantity(this.productId, newQuantity); }, // Creates cart for the first time or updates existing cart async createOrUpdateCart(initialQuantity = 1) { this.isLoading = true; try { const response = await fetch('/carts/store', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': document.querySelector( 'meta[name="csrf-token"]').getAttribute( 'content') }, body: JSON.stringify({ product_id: this.productId, quantity: initialQuantity }) }); const data = await response.json(); if (response.ok) { this.quantity = initialQuantity; this.showNotification(data.message || `${this.productName} added to cart!`, 'success'); } else { this.showNotification(data.message || 'Failed to add to cart!', 'error'); throw new Error('Failed to add to cart.'); } } catch (error) { console.error('Error creating/updating cart:', error); this.showNotification('Failed to add to cart. Please try again.', 'error'); } finally { this.isLoading = false; } }, // Updates the quantity of an item async updateQuantity(itemId, quantity) { // Basic validation if (quantity < 1) { // If user enters 0 or less, treat it as a remove action await this.removeItem(itemId); return; } this.isLoading = true; try { const response = await fetch(`/carts/product/${itemId}`, { method: 'PATCH', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': document.querySelector( 'meta[name="csrf-token"]').getAttribute( 'content') }, body: JSON.stringify({ quantity: quantity }) }); const data = await response.json(); console.log(data); if (response.ok) { // Update local state // window.cartManager.setQuantity(itemId, quantity); this.quantity = quantity; if (quantity === 0) { this.showNotification(data.message || 'Item removed from cart!', 'info'); } else { this.showNotification(data.message || 'Quantity updated!', 'success'); } } else { this.showNotification(data.message || 'Failed to update quantity!', 'error'); // throw new Error('Failed to update quantity.'); } } catch (error) { console.error('Error updating quantity:', error); this.showNotification('Failed to update quantity. Please try again.', 'error'); // Refresh local state from server if needed await this.fetchCart(); } finally { this.isLoading = false; } }, // Remove item from cart async removeItem(itemId) { this.isLoading = true; try { const response = await fetch(`/carts/product/${itemId}`, { method: 'DELETE', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': document.querySelector( 'meta[name="csrf-token"]').getAttribute( 'content') } }); const data = await response.json(); if (response.ok) { // Update local state // window.cartManager.setQuantity(itemId, 0); this.quantity = 0; this.showNotification(data.message || 'Item removed from cart!', 'success'); } else { this.showNotification(data.message || 'Failed to remove item!', 'error'); throw new Error('Failed to remove item.'); } } catch (error) { console.error('Error removing item:', error); this.showNotification('Failed to remove item. Please try again.', 'error'); } finally { this.isLoading = false; } }, // Fetch current cart state from server (for consistency) async fetchCart() { try { const response = await fetch('/carts/index', { method: 'GET', headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', } }); const data = await response.json(); if (response.ok && data.data.cart) { // Update local cart state const newCart = {}; data.data.cart.forEach(item => { newCart[item.product_id] = item.quantity; }); // Update this component's quantity this.quantity = newCart[this.productId] || 0; if (this.quantity > 0) { this.isInCart = true; } this.cartId = data.data.cart.id; } } catch (error) { console.error('Error fetching cart:', error); } }, updateTooltipPosition(event) { this.tooltipX = event.pageX + 14; this.tooltipY = event.pageY + 14; }, showNotification(message, type = 'info') { setTimeout(() => { setTimeout(() => { if (typeof notify !== 'undefined') { notify(message, type); } else { console.log(`${type.toUpperCase()}: ${message}`); } }, 300); }); }, })) }) </script> </div> </article> </div> </div> </main> <div x-data="notification" @notify.window="showNotification">  <div x-cloak x-show="open" class="fixed z-50 w-auto overflow-hidden rounded-xl shadow-2xl backdrop-blur-sm border transform transition-all duration-500 ease-out top-4 left-4 right-4 sm:top-6 sm:left-auto sm:right-6 sm:w-full sm:max-w-sm" :class="{ 'bg-emerald-500/95 border-emerald-400/50 text-white': type === 'success', 'bg-red-500/95 border-red-400/50 text-white': type === 'error', 'bg-blue-500/95 border-blue-400/50 text-white': type === 'info', 'bg-amber-500/95 border-amber-400/50 text-white': type === 'warning' }" x-transition:enter="transition ease-out duration-500 transform" x-transition:enter-start="opacity-0 scale-95 -translate-y-4 sm:translate-y-0 sm:translate-x-full" x-transition:enter-end="opacity-100 scale-100 translate-y-0 sm:translate-x-0" x-transition:leave="transition ease-in duration-300 transform" x-transition:leave-start="opacity-100 scale-100 translate-y-0 sm:translate-x-0" x-transition:leave-end="opacity-0 scale-95 -translate-y-4 sm:translate-y-0 sm:translate-x-full">  <div class="relative p-4">  <div class="absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-black/10 rounded-xl"></div> <div class="absolute -top-2 -right-2 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>  <div class="relative flex items-start gap-3">  <div class="flex-shrink-0 mt-0.5">  <template x-if="type === 'success'"> <div class="relative"> <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path> </svg> <div class="absolute inset-0 bg-white/30 rounded-full blur-sm animate-pulse"></div> </div> </template>  <template x-if="type === 'error'"> <div class="relative"> <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"></path> </svg> <div class="absolute inset-0 bg-white/30 rounded-full blur-sm animate-pulse"></div> </div> </template>  <template x-if="type === 'info'"> <div class="relative"> <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> <div class="absolute inset-0 bg-white/30 rounded-full blur-sm animate-pulse"></div> </div> </template>  <template x-if="type === 'warning'"> <div class="relative"> <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.464 0L4.35 16.5c-.77.833.192 2.5 1.732 2.5z"> </path> </svg> <div class="absolute inset-0 bg-white/30 rounded-full blur-sm animate-pulse"></div> </div> </template> </div>  <div class="flex-1 min-w-0"> <p class="font-semibold text-base leading-tight" x-text="message"></p> </div>  <button @click="open = false" class="flex-shrink-0 p-1 rounded-lg hover:bg-white/20 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-white/50" aria-label="Close notification"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"> </path> </svg> </button> </div>  <div class="absolute bottom-0 left-0 right-0 h-1 bg-white/20 rounded-b-xl overflow-hidden"> <div class="h-full bg-white/40 rounded-b-xl transform origin-left transition-transform ease-linear" :style="`transform: scaleX(\${open ? 0 : 1}); transition-duration: \${timeout}ms`"></div> </div> </div> </div> </div> <head> <meta name="csrf-token" content="EVSNRyK35lSbESwHfuwt5GBUF06II18OBBUu3POE" /> <script src="https://petland.awrosoft.com/js/intlTelInput.min.js"></script> <style> .iti { width: 100% !important; } .iti input { width: 100% !important; } </style> </head> <div x-cloak x-data="{ open: false }" @open-modal.window="if ($event.detail.id === 'auth-modal') open = true" @close-modal.window="if ($event.detail.id === 'auth-modal') open = false" @keydown.window.escape="open = false" x-show="open" class="relative z-50" aria-labelledby="modal-title" x-ref="dialog" aria-modal="true"> <div x-cloak x-show="open" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="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"></div> <div class="fixed inset-0 z-10 overflow-y-auto"> <div class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"> <div x-show="open" x-transition:enter="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="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="relative transform overflow-hidden bg-white px-4 pt-2 pb-4 text-left shadow-xl transition-all sm:my-8 w-full max-w-lg sm:p-6" @click.away="open = false"> <button class="flex hover:bg-primary-100 justify-center items-center absolute top-2 right-2 w-8 h-8" @click="open = false"> <svg class="w-8 h-8 text-icon" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M12.65 36.45L11.55 35.35L22.9 24L11.55 12.65L12.65 11.55L24 22.9L35.35 11.55L36.45 12.65L25.1 24L36.45 35.35L35.35 36.45L24 25.1L12.65 36.45Z" /> </svg> </button> <div> <div x-data="{ activeTab: 'login', tabs: ['login', 'register'], changeTab(tab) { if (this.tabs.includes(tab)) { this.activeTab = tab; } } }" @open-auth-modal.window="$dispatch('open-modal', { id: 'auth-modal' }); activeTab = 'login'" @open-register-tab.window="activeTab = 'register'" @back-to-login.window="activeTab = 'login'"> <div class="text-center mb-6"> <h2 class="text-2xl font-bold text-gray-900"> <span x-show="activeTab === 'login'">دوباره خوش آمدید</span> <span x-show="activeTab === 'register'">ایجاد حساب کاربری</span> </h2> <p class="mt-2 text-sm text-gray-600"> <span x-show="activeTab === 'login'">با شماره تلفن خود وارد شوید</span> <span x-show="activeTab === 'register'">ثبت‌نام خود را تکمیل کنید</span> </p> </div> <div x-show="activeTab === 'login'" x-transition> <div>   <div x-data="phoneVerification" x-init="init">  <div x-show="notificationVisible" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="transform opacity-0 translate-x-full" x-transition:enter-end="transform opacity-100 translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="transform opacity-100 translate-x-0" x-transition:leave-end="transform opacity-0 translate-x-full" class="fixed top-4 right-4 text-white px-4 py-3 rounded-lg shadow-lg z-50 max-w-xs" :class="{ 'bg-green-500': notificationType === 'success', 'bg-red-500': notificationType === 'error', 'bg-blue-500': notificationType === 'info' }" x-text="notificationMessage" style="display: none;"> </div>  <div class="space-y-5"> <div x-show="step === 'phone'" x-transition> <div> <label class="block font-medium text-sm text-gray-700" for="phone"> شماره تلفن </label> <div class="mt-1"> <input x-ref="phoneInput" autocomplete="tel" type="tel" id="phone" :maxlength="phoneMaxLength" class="block w-full input sm:text-sm" placeholder="750 123 4567" /> </div> <input type="hidden" name="phone" x-bind:value="phone"> <input type="hidden" name="country_code" x-bind:value="country_code"> <div class="mt-2" x-show="phone"> <div x-show="isPhoneValid" class="flex items-center text-green-600 text-sm"> <svg class="w-4 h-4 me-1" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path> </svg> شماره تلفن معتبر </div> <div x-show="!isPhoneValid && phone" class="flex items-center text-red-600 text-sm"> <svg class="w-4 h-4 me-1" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path> </svg> شماره تلفن نامعتبر </div> </div> <template x-if="errors.phone"> <p class="mt-1 text-sm text-red-600" x-text="errors.phone[0]"></p> </template> </div> <div class="mt-6"> <button type="button" :disabled="loading || !isPhoneValid" @click="sendOtp()" :class="{ 'opacity-50 cursor-not-allowed': loading || !isPhoneValid }" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> <span x-show="!loading">ارسال کد تایید</span> <span x-show="loading" class="flex items-center"> <svg class="animate-spin -ml-1 me-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"> </path> </svg> در حال ارسال... </span> </button> </div> </div> <div x-show="step === 'otp'" x-transition style="display: none;"> <div class="text-center mb-4"> <p class="text-sm text-gray-600"> کد تایید ارسال شده به <span class="font-medium" x-text="phone"></span> </p> </div> <div> <label class="block font-medium text-sm text-gray-700" for="otp"> کد تایید </label> <div class="mt-1"> <input x-model="otp" autocomplete="one-time-code" type="tel" id="otp" class="block mt-1 w-full text-center text-lg tracking-widest" placeholder="1234" :maxlength="otpMaxLength" /> </div> <input type="hidden" name="phone" x-bind:value="phone"> <template x-if="errors.otp"> <p class="mt-1 text-sm text-red-600" x-text="errors.otp[0]"></p> </template> </div> <div class="mt-4 text-center"> <button type="button" @click="resendOtp()" :disabled="countdown > 0" :class="{ 'opacity-50 cursor-not-allowed': countdown > 0 }" class="text-sm text-primary-600 hover:text-primary-500"> <span x-show="countdown <= 0">ارسال مجدد کد</span> <span x-show="countdown > 0" x-text="'Resend in ' + countdown + 's'"></span> </button> </div> <div class="mt-6"> <button type="button" :disabled="loading || !otp || otp.length < 4" @click="verifyOtp()" :class="{ 'opacity-50 cursor-not-allowed': loading || !otp || otp.length < 4 }" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> <span x-show="!loading">تایید و ورود</span> <span x-show="loading" class="flex items-center"> <svg class="animate-spin -ml-1 me-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"> </path> </svg> در حال تایید... </span> </button> </div> <div class="mt-4 text-center"> <button type="button" @click="step = 'phone'; otp = ''" class="text-sm text-gray-600 hover:text-gray-500"> → تغییر شماره تلفن </button> </div> </div> </div> </div> <script> document.addEventListener("alpine:init", () => { Alpine.data("phoneVerification", () => ({ phone: "", country_code: "", otp: "", otpMaxLength: 4, phoneMaxLength: 13, step: "phone", errors: {}, loading: false, isPhoneValid: false, itiInstance: null, otpSent: false, countdown: 0, notificationVisible: false, notificationMessage: '', notificationType: 'info', // 'info', 'success', or 'error' showNotification(message, type = 'info') { this.notificationMessage = message; this.notificationType = type; this.notificationVisible = true; // Automatically hide the notification after 3 seconds setTimeout(() => { this.notificationVisible = false; }, 3000); }, async sendOtp() { if (!this.isPhoneValid) return; this.loading = true; this.errors = {}; try { const response = await fetch("/auth/send-otp", { method: "POST", headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": document .querySelector('meta[name="csrf-token"]') .getAttribute("content"), }, body: JSON.stringify({ phone: this.phone, country_code: this.country_code, client_secret: "#ceLARAl5s@MQ7vKIXDkZl#", }), }); const result = await response.json(); if (response.ok) { this.otpSent = true; this.step = "otp"; this.showNotification('Verification code sent successfully!', 'success'); } else { this.errors = result.errors || {}; this.showNotification(result.message || 'Failed to send OTP. Please check the form.', 'error'); } } catch (err) { console.error(err); this.showNotification('A network error occurred. Please try again.', 'error'); } finally { this.loading = false; } }, async verifyOtp() { this.loading = true; this.errors = {}; try { const response = await fetch("/auth/verify-otp", { method: "POST", headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": document .querySelector('meta[name="csrf-token"]') .getAttribute("content"), }, body: JSON.stringify({ phone: this.phone, otp: this.otp, }), }); const result = await response.json(); if (response.ok) { this.showNotification('Phone verified successfully!', 'success'); this.$dispatch('close-modal', { id: 'auth-modal' }) window.location.reload(); } else if (response.status === 401) { window.dispatchEvent( new CustomEvent("register-step", { detail: { phone: this.phone } }) ); } else { this.errors = result.errors || {}; this.showNotification(result.message || 'Invalid verification code.', 'error'); } } catch (err) { console.error(err); this.showNotification('A network error occurred. Please try again.', 'error'); } finally { this.loading = false; } }, async resendOtp() { if (this.countdown > 0) return; this.loading = true; this.countdown = 60; this.errors = {}; const timer = setInterval(() => { this.countdown--; if (this.countdown <= 0) clearInterval(timer); }, 1000); try { const response = await fetch("/auth/send-otp", { method: "POST", headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": document .querySelector('meta[name="csrf-token"]') .getAttribute("content"), }, body: JSON.stringify({ phone: this.phone, country_code: this.country_code, client_secret: "#ceLARAl5s@MQ7vKIXDkZl#", }), }); const result = await response.json(); if (!response.ok) { this.errors = result.errors || {}; this.showNotification('A new code has been sent.', 'success'); } else { this.errors = result.errors || {}; this.showNotification(result.message || 'Failed to resend code.', 'error'); } } catch (err) { console.error(err); this.showNotification('A network error occurred.', 'error'); } finally { this.loading = false; } }, goToRegister() { this.step = "register"; window.dispatchEvent( new CustomEvent("open-register-tab", { detail: { phone: this.phone, country_code: this.country_code, } }) ); }, initPhoneInput() { if (this.itiInstance) return; this.$nextTick(() => { const phoneInputEl = this.$refs.phoneInput; if (!phoneInputEl) return; const iti = window.intlTelInput(phoneInputEl, { utilsScript: "/node_modules/intl-tel-input/build/js/utils.js", // initialCountry: "iq", initialCountry: "auto", geoIpLookup: (callback) => { fetch("https://ipapi.co/json") .then((res) => res.json()) .then((data) => callback(data.country_code .toLowerCase())) .catch(() => callback("iq")); }, separateDialCode: false, nationalMode: false, formatOnDisplay: true, autoPlaceholder: "aggressive", }); this.itiInstance = iti; const ensureCountryPrefix = () => { const countryData = iti.getSelectedCountryData(); const currentValue = phoneInputEl.value; const dialCode = "+" + countryData.dialCode + " "; if (!currentValue.startsWith(dialCode)) { let cleanValue = currentValue.replace(/^\+\d+\s*/, ""); phoneInputEl.value = dialCode + cleanValue; } }; const updateAlpineData = () => { let countryData = iti.getSelectedCountryData(); if (countryData?.iso2) { this.country_code = countryData.iso2.toUpperCase(); } const inputValue = phoneInputEl.value.trim(); if (inputValue) { try { const isValid = iti.isValidNumber(); if (isValid != null) { this.isPhoneValid = isValid; } else { const number = iti.getNumber() || inputValue; const cleanNumber = number.replace(/\D/g, ""); if (number.startsWith("+964")) { this.isPhoneValid = cleanNumber.length === 13 && cleanNumber .startsWith("9647"); this.phoneMaxLength = 15; } else { this.isPhoneValid = cleanNumber.length >= 7 && cleanNumber .length <= 15; this.phoneMaxLength = 15; } } this.phone = iti.getNumber() || inputValue; } catch (error) { const cleanNumber = inputValue.replace(/\D/g, ""); this.isPhoneValid = cleanNumber.length >= 7 && cleanNumber.length <= 15; this.phone = inputValue; } } else { this.isPhoneValid = false; this.phone = ""; } }; phoneInputEl.addEventListener("countrychange", () => { setTimeout(() => { updateAlpineData(); ensureCountryPrefix(); }, 100); }); phoneInputEl.addEventListener("keyup", updateAlpineData); phoneInputEl.addEventListener("blur", updateAlpineData); phoneInputEl.addEventListener("input", () => { setTimeout(() => { ensureCountryPrefix(); updateAlpineData(); const countryData = iti .getSelectedCountryData(); const dialCodeLength = ("+" + countryData .dialCode + " ").length; if (phoneInputEl.selectionStart < dialCodeLength) { phoneInputEl.setSelectionRange( dialCodeLength, dialCodeLength); } }, 50); }); phoneInputEl.addEventListener("keydown", (e) => { const countryData = iti.getSelectedCountryData(); const dialCode = "+" + countryData.dialCode + " "; const cursorPosition = phoneInputEl.selectionStart; if ( (e.key === "Backspace" || e.key === "Delete") && cursorPosition <= dialCode.length ) { e.preventDefault(); } if (cursorPosition < dialCode.length && e.key.length === 1) { e.preventDefault(); } }); phoneInputEl.addEventListener("focus", () => { const countryData = iti.getSelectedCountryData(); const dialCode = "+" + countryData.dialCode + " "; setTimeout(() => { if (phoneInputEl.selectionStart < dialCode .length) { phoneInputEl.setSelectionRange(dialCode .length, dialCode.length); } }, 0); }); const checkUtilsAndValidate = () => { if (typeof iti.isValidNumber === "function") { updateAlpineData(); } else { setTimeout(checkUtilsAndValidate, 200); } }; setTimeout(checkUtilsAndValidate, 100); }); }, init() { this.errors = {}; this.$watch("step", (step) => { if (step === "phone") { this.initPhoneInput(); } }); if (this.step === "phone") { this.initPhoneInput(); } window.addEventListener("phone-step", () => { this.step = "phone"; this.otpSent = false; }); window.addEventListener("otp-step", () => { this.step = "otp"; }); window.addEventListener("register-step", () => { this.goToRegister(); }); }, })); }); </script> </div> </div> <div x-show="activeTab === 'register'" x-transition> <div>   <div x-data="register" x-init="init">  <div x-show="notificationVisible" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="transform opacity-0 translate-x-full" x-transition:enter-end="transform opacity-100 translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="transform opacity-100 translate-x-0" x-transition:leave-end="transform opacity-0 translate-x-full" class="fixed top-4 right-4 text-white px-4 py-3 rounded-lg shadow-lg z-50 max-w-xs" :class="{ 'bg-green-500': notificationType === 'success', 'bg-red-500': notificationType === 'error', 'bg-blue-500': notificationType === 'info' }" x-text="notificationMessage" style="display: none;"> </div>  <div class="space-y-5"> <div> <label class="block font-medium text-sm text-gray-700" for="phone"> شماره تلفن </label> <div class="mt-1"> <input readonly :value="phone" autocomplete="tel" type="tel" id="phone" class="block mt-1 w-full bg-gray-50" placeholder="750 123 4567" /> </div> <p class="mt-1 text-xs text-gray-500"> این شماره تلفن برای حساب کاربری شما استفاده خواهد شد </p> </div> <div> <label class="block font-medium text-sm text-gray-700"> Title </label> <div class="flex gap-4 mt-2"> <label class="flex items-center"> <input type="radio" name="lang" value="en" x-model="lang" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300"> <span class="ml-2 text-sm text-gray-700">انگلیسی</span> </label> <label class="flex items-center"> <input type="radio" name="lang" value="ar" x-model="lang" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300"> <span class="ml-2 text-sm text-gray-700">عربی</span> </label> <label class="flex items-center"> <input type="radio" name="lang" value="ku" x-model="lang" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300"> <span class="ml-2 text-sm text-gray-700">web.lang.ku</span> </label> <label class="flex items-center"> <input type="radio" name="lang" value="fa" x-model="lang" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300"> <span class="ml-2 text-sm text-gray-700">فارسی</span> </label> <label class="flex items-center"> <input type="radio" name="lang" value="tr" x-model="lang" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300"> <span class="ml-2 text-sm text-gray-700">ترکی</span> </label> </div> <template x-if="errors.lang"> <p class="mt-1 text-sm text-red-600" x-text="errors.lang[0]"></p> </template> </div> <div> <label class="block font-medium text-sm text-gray-700" for="name"> web.input.name </label> <div class="mt-1"> <input x-model="name" autocomplete="given-name" type="text" id="name" class="block mt-1 w-full" placeholder="Jane" /> </div> <template x-if="errors.name"> <p class="mt-1 text-sm text-red-600" x-text="errors.name[0]"></p> </template> </div> <div> <label class="flex items-center"> <input type="checkbox" name="news_letter" value="1" x-model="news_letter" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"> <span class="ml-2 text-sm text-gray-600">دریافت خبرنامه آنلاین پت‌لند</span> </label> </div> <p class="text-sm text-zinc-500"> من موافقم که پت‌لند آنلاین ممکن است بیکن‌های تحلیلی وب را در خبرنامه وارد کند و بر اساس رفتار خرید و استفاده من، یک پروفایل کاربری شخصی‌سازی شده ایجاد کند، که شامل ارسال اعلان در زمانی که کالایی را در سبد خرید قرار داده‌ام نیز می‌شود. جزئیات بیشتر را می‌توان در سیاست حفظ حریم خصوصی ما، بند ۵، یافت. می‌دانم که می‌توانم رضایت خود را در هر زمان با ارسال ایمیل به privacy@gallerialadore.com لغو کنم. </p> <div> <button type="button" @click="registerSubmit" :disabled="loading || !name || !news_letter" :class="{ 'opacity-50 cursor-not-allowed': loading || !name || !news_letter }" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> <span x-show="!loading">Complete Registration</span> <span x-show="loading" class="flex items-center"> <svg class="animate-spin -ml-1 me-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"> </path> </svg> Creating Account... </span> </button> </div> <div class="text-center"> <button type="button" @click="$dispatch('back-to-login')" class="text-sm text-gray-600 hover:text-gray-500"> ← Back to Login </button> </div> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('register', () => ({ name: '', phone: '', country_code: 'IQ', lang: 'en', news_letter: false, errors: [], loading: false, notificationVisible: false, notificationMessage: '', notificationType: 'info', // 'info', 'success', or 'error' showNotification(message, type = 'info') { this.notificationMessage = message; this.notificationType = type; this.notificationVisible = true; // Automatically hide the notification after 3 seconds setTimeout(() => { this.notificationVisible = false; }, 3000); }, async registerSubmit() { this.loading = true; this.errors = {}; try { const response = await fetch("/auth/register", { method: "POST", headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": document .querySelector('meta[name="csrf-token"]') .getAttribute("content"), }, body: JSON.stringify({ phone: this.phone, country_code: this.country_code, name: this.name, lang: this.lang, news_letter: this.news_letter, }), }); const result = await response.json(); if (response.ok) { this.showNotification('Account created successfully!', 'success'); this.$dispatch('close-modal', { id: 'auth-modal' }); window.location.reload(); } else { this.errors = result.errors || {}; this.showNotification(result.message || 'Failed to create account.', 'error'); } } catch (err) { console.error(err); this.showNotification('A network error occurred. Please try again.', 'error'); } finally { this.loading = false; } }, init() { this.errors = {}; window.addEventListener('open-register-tab', (e) => { this.phone = e.detail.phone; this.country_code = e.detail.country_code; }) }, })) }) </script> </div> </div> </div> </div> <div class="mt-5 sm:mt-6"> </div> </div> </div> </div> </div> <script src="/js/app.js?id=7639e102cbf3d145fc8a1a2bb8189459"></script> <script src="https://petland.awrosoft.com/js/slide-menu.js"></script> <script src="/js/fancybox.js?id=f9852c6ef0b2e2c01950f334a6511b52"></script> <script src="/js/product-slider.js?id=56672320873e032c720e3cf7584989e1" defer></script> <script> document.querySelectorAll('input, textarea').forEach(function(inputElement) { inputElement.addEventListener('focus', function() { // Scroll to the top of the page when an input field is focused window.scrollTo({ top: 0, behavior: 'smooth' // Optional: for smooth scrolling }); }); }); </script> </body> </html>