From 919fd918d6e061d4a27302beada8675e6d2253cc Mon Sep 17 00:00:00 2001
From: raccoon254 <tomsteve187@gmail.com>
Date: Fri, 14 Jun 2024 11:34:37 +0300
Subject: [PATCH] Created script update for the location

---
 app/Livewire/Register.php               | 18 ++++++----
 resources/views/auth/register.blade.php | 48 ++++++++++++++-----------
 2 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/app/Livewire/Register.php b/app/Livewire/Register.php
index 7b620be..75970c3 100644
--- a/app/Livewire/Register.php
+++ b/app/Livewire/Register.php
@@ -5,6 +5,7 @@
 use App\Models\User;
 use App\Notifications\NewUserJoined;
 use App\Notifications\UserWelcome;
+use Illuminate\Auth\Events\Registered;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Validation\Rules;
@@ -19,21 +20,26 @@
 class Register extends Component
 {
 
-    #[Validate('required', 'string', 'max:255', 'min:3')]
     public $name;
-    #[Validate('required', 'string', 'lowercase', 'email', 'max:255', 'unique:' . User::class)]
     public $email;
-    #[Validate('required', 'string', 'max:255', 'min:8', 'unique:' . User::class)]
     public $phone;
-    #[Validate('required', 'string', 'max:255', 'min:3')]
     public $location;
-    #[Validate('required', 'confirmed')]
     public $password;
-    #[Validate('required')]
     public $password_confirmation;
 
     public function register(): Application|Redirector|\Illuminate\Contracts\Foundation\Application|RedirectResponse
     {
+
+        $user_data_array = [
+            'name' => $this->name,
+            'email' => $this->email,
+            'phone' => $this->phone,
+            'location' => $this->location,
+            'password' => Hash::make($this->password),
+        ];
+
+        dd($user_data_array);
+
         $this->validate([
             'name' => ['required', 'string', 'max:255'],
             'email' => ['required', 'string', 'lowercase', 'email', 'max:255', 'unique:' . User::class],
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 16cdf8b..de3cd62 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -5,36 +5,36 @@
         <!-- Name -->
         <div>
             <x-input-label for="name" :value="__('Name')"/>
-            <x-text-input id="name" class="block mt-1 w-full" type="text" wire:model.live="name" required autofocus
+            <x-text-input id="name" class="block mt-1 w-full" type="text" wire:model="name" required autofocus
                           autocomplete="name"/>
             @error('name')
             <x-input-error :messages="$message" class="mt-2"/> @enderror
         </div>
 
-        <div class="flex items-center gap-4">
-            <!-- Phone Number -->
-            <div class="mt-4 w-1/2">
-                <x-input-label for="phone" :value="__('Phone Number')"></x-input-label>
-                <x-text-input id="phone" class="block mt-1 w-full" type="tel" wire:model.live="phone" required
-                              autocomplete="phone"/>
-                @error('phone')
-                <x-input-error :messages="$message" class="mt-2"></x-input-error> @enderror
-            </div>
+        <div>
+            <div class="flex items-end">
+                <!-- Phone Number -->
+                <div class="mt-4 w-1/2 mr-2">
+                    <x-input-label for="phone" :value="__('Phone Number')"></x-input-label>
+                    <x-text-input data-tip="Make sure we can contact you" id="phone" class="block tooltip mt-1 w-full" type="tel" wire:model="phone" required
+                                  autocomplete="phone"/>
+                </div>
 
-            <!-- Location -->
-            <div class="mt-4 w-1/2">
-                <x-input-label for="location" :value="__('Location')"></x-input-label>
-                <x-text-input id="location" class="block mt-1 w-full" type="text" wire:model.lazy="location" required
-                              autocomplete="location"/>
-                @error('location')
-                <x-input-error :messages="$message" class="mt-2"></x-input-error> @enderror
+                <!-- Location -->
+                <div class="mt-4 w-1/2 ml-2">
+                    <x-input-label for="location" :value="__('Location')"></x-input-label>
+                    <x-text-input id="location" class="block mt-1 w-full" type="text" wire:model.live="location" required
+                                  autocomplete="location"/>
+                </div>
             </div>
+            @error('phone')<x-input-error :messages="$message" class="mt-2"/> @enderror
+            @error('location') <x-input-error :messages="$message" class="mt-2"/> @enderror
         </div>
 
         <!-- Email Address -->
         <div class="mt-4">
             <x-input-label for="email" :value="__('Email')"/>
-            <x-text-input id="email" class="block mt-1 w-full" type="email" wire:model.lazy="email" required
+            <x-text-input id="email" class="block mt-1 w-full" type="email" wire:model="email" required
                           autocomplete="username"/>
             @error('email')
             <x-input-error :messages="$message" class="mt-2"/> @enderror
@@ -43,7 +43,7 @@
         <!-- Password -->
         <div class="mt-4">
             <x-input-label for="password" :value="__('Password')"/>
-            <x-text-input id="password" class="block mt-1 w-full" type="password" wire:model.lazy="password" required
+            <x-text-input id="password" class="block mt-1 w-full" type="password" wire:model="password" required
                           autocomplete="new-password"/>
             @error('password')
             <x-input-error :messages="$message" class="mt-2"/> @enderror
@@ -53,7 +53,7 @@
         <div class="mt-4">
             <x-input-label for="password_confirmation" :value="__('Confirm Password')"/>
             <x-text-input id="password_confirmation" class="block mt-1 w-full" type="password"
-                          wire:model.lazy="password_confirmation" required autocomplete="new-password"/>
+                          wire:model="password_confirmation" required autocomplete="new-password"/>
             @error('password_confirmation')
             <x-input-error :messages="$message" class="mt-2"/> @enderror
         </div>
@@ -77,6 +77,14 @@
         let phoneInput = window.intlTelInput(phoneInputField, {
             utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
         });
+
+        // When we select a country, update the location field
+        phoneInputField.addEventListener("countrychange", function () {
+            let countryData = phoneInput.getSelectedCountryData();
+            document.querySelector("#location").value = countryData.name;
+            // update wire location
+            @this.set('location', countryData.name);
+        });
     </script>
     @endscript
 </div>