File: /var/www/html/resources/views/livewire/profile/show.blade.php
<div class="row">
<div class="col-xl-12">
<div class="ps-widget bgc-white bdrs4 p30 mb30 overflow-hidden position-relative">
<div class="bdrb1 pb15 mb25">
<h5 class="list-title">Profile Photo</h5>
</div>
<div class="col-xl-7">
<form wire:submit.prevent="updatePhoto">
<div class="profile-box d-sm-flex align-items-center mb30">
<div class="profile-img mb20-sm">
<!-- Display Profile Picture or Temporary Preview -->
@if ($profile_photo_url)
<img src="{{ $profile_photo_url->temporaryUrl() }}" style="width: 100px; height: 100px; object-fit: cover; border-radius: 50%;">
@else
<img style="width: 100px; height: 100px; object-fit: cover; border-radius: 50%;" src="{{ $photo }}" alt="Upload Photo">
@endif
</div>
<div class="profile-content ml20 ml0-xs">
<div class="d-flex align-items-center my-3">
<label for="photo-upload" class="upload-btn ml10">Change</label>
<input type="file" id="photo-upload" wire:model.live="profile_photo_url" style="display: none;">
<!-- Loading Spinner -->
<div type="submit" wire:loading.attr="disabled">
<span wire:loading wire:target="profile_photo_url" class="spinner-border spinner-border-sm"> </span>
<span wire:loading wire:target="profile_photo_url"> Please wait ...</span>
</div>
</div>
</div>
</div>
@error('profile_photo_url')
<span class="text-success">{{ $message }}</span>
@enderror
</form>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="log-reg-form search-modal form-style1 bgc-white p50 p30-sm default-box-shadow1 bdrs12">
<div class="mb30">
<h3>Basic Profile</h3>
</div>
<div class="mb25">
<label class="form-label fw500 dark-color">Full name</label>
<div class="input-group">
<div class="input-group-text">
<i class="fas fa-user"></i>
</div>
<input wire:model="userData.name" readonly class="form-control" />
<input wire:model="userData.lastname" readonly class="form-control" />
<input wire:model="sellerNINData.middlename" readonly class="form-control" />
</div>
</div>
<div class="mb25">
<label class="form-label fw500 dark-color">Phone no</label>
<div class="input-group">
<div class="input-group-text">
<i class="fas fa-phone"></i>
</div>
<input wire:model="phone" type="tel" class="form-control" readonly />
</div>
</div>
@if ($verified_email)
<div class="mb25 mt-4">
<label class="form-label fw500 dark-color">Email <b>VERIFIED</b> <i class="fas fa-edit" wire:click="toggleEmailEdit"></i> </label>
<div class="input-group">
<div class="input-group-text">
<i class="fas fa-envelope"></i>
</div>
<input wire:model="email" readonly class="form-control" />
</div>
</div>
@endif
@if($showPassword)
<form wire:submit.prevent="newSetPassword">
<div class="mb25 row" x-data="{ showPassword: false }">
<label class="form-label fw500 dark-color">Set new password </label>
<div class="input-group">
<div class="input-group-text">
<i class="flaticon-website mr8"></i>
</div>
<input autocomplete="new-password" required wire:model="newPassword" :type="showPassword ? 'text' : 'password'" class="form-control" placeholder="Password" />
<!-- Toggle Password Button -->
<button type="button" @click="showPassword = !showPassword" class="input-group-text">
<i :class="showPassword ? 'fas fa-eye' : 'fas fa-eye-slash'"></i>
</button>
<!-- Submit Button -->
<button type="submit" wire:loading.attr="disabled" class="btn btn-sm btn-primary text-white">
<span wire:loading wire:target="newSetPassword" class="spinner-border spinner-border-sm"></span>
<span wire:loading.remove>Set password</span>
</button>
</div>
@error('newPassword')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
</form>
@endif
@if ($showVerifyOtpForm)
<form wire:submit.prevent="verifyEmailOtp">
<div class="mb25">
<label class="form-label fw500 text-succes dark-color">
Enter the otp sent to your inbox or check spam
</label>
<div class="input-group">
<div class="input-group-text">
<i class="fas fa-pen"></i>
</div>
<input wire:model="email_otp" type="tel" maxlength="6" placeholder="Enter email confirmation code" class="form-control" />
<button type="submit" wire:loading.attr="disabled" class="ud-btn btn-thm default-box-shadow2 ms-2">
<span wire:loading wire:target="verifyEmailOtp" class="spinner-border spinner-border-sm"> </span>
<span wire:loading wire:target="verifyEmailOtp"> Please wait ...</span>
<span wire:loading.remove> Confirm Email</span>
</button>
</div>
@error('email_otp')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
</form>
@endif
@if ($un_verified_email)
<form wire:submit.prevent="sendEmailOtp">
<div class="mb25">
<label class="form-label fw500 dark-color">Email verification </label>
<div class="input-group">
<div class="input-group-text">
<i class="fas fa-envelope"></i>
</div>
<input wire:model="email" type="email" class="form-control" />
<button type="submit" wire:loading.attr="disabled" class="ud-btn btn-thm default-box-shadow2 ms-2">
<span wire:loading wire:target="sendEmailOtp" class="spinner-border spinner-border-sm"> </span>
<span wire:loading wire:target="sendEmailOtp"> Please wait ...</span>
<span wire:loading.remove> Verify Email</span>
</button>
</div>
@error('email')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
</form>
@endif
<div class="mb25">
<label class="form-label fw500 dark-color">Nationality</label>
<div class="input-group">
<div class="input-group-text">
<i class="fas fa-flag"></i>
</div>
<input wire:model="nation" readonly type="text" value="Nigeria" class="form-control" />
</div>
</div>
<div class="mb25">
<label class="form-label fw500 dark-color">Gender</label>
<div class="input-group">
<div class="input-group-text">
<i class="fas fa-users"></i>
</div>
<input wire:model="sellerNINData.gender" readonly class="form-control" />
</div>
</div>
<div class="mb25">
<label class="form-label fw500 dark-color">DOB</label>
<div class="input-group">
<div class="input-group-text">
<i class="fas fa-calendar-alt"></i>
</div>
<input wire:model="sellerNINData.dob" readonly class="form-control" />
</div>
</div>
</div>
<div class="bdrb1 pb15 mb25 rounded">
</div>
@livewire('bank.index')
</div>
</div>