I am new to Laravel and livewire. i have tried finding the error in this code or find a better way to rewrite this. When an item(plan) is selected from the list it does not become the active selected item rather it will remain as it was showing the last created item(plan) from admin and when somebody the amount from " Choose Quick Amount to Invest" section the $amountToInvest does not auto update to reflect what is chosen or type as amount. please I need help on this. here is my code: Note that livewire is installed in my project and Alpine is installed in my layout file.
this is the code for selecting items(plan), which only makes active the last created plan by admin. ``` <div class="select-btn" @click="open = ! open"> @if ($planSelected) {{ $planSelected->name }} @else Select your a plan @endif
<ul class="options">
@foreach ($plans as $plan)
<li class="option" wire:click="selectPlan({{ $plan->id }})"
@click=" open=false">
<i class="fas fa-hand-holding-seedling"></i>
<span class="option-text">{{ $plan->name }}</span>
</li>
@endforeach
</ul>
``` </div>
this is the code for an alternative amount to choose from instead of typing in the below input box, my intension is when an amount is clicked it will reflect as the amountto be in invested.
``` <div class="mt-5">
<div class="">
<p>Choose Quick Amount to Invest</p>
</div>
<div class="flex-wrap mb-1 d-flex justify-content-start align-items-center">
<button class="mb-2 border-black rounded-none btn btn-light"
wire:click="selectAmount('100')">{{ $settings->currency }}100</button>
<button class="mb-2 border-black rounded-none btn btn-light"
wire:click="selectAmount('250')">{{ $settings->currency }}250</button>
<button class="mb-2 border-black rounded-none btn btn-light"
wire:click="selectAmount('500')">{{ $settings->currency }}500</button>
<button class="mb-2 border-black rounded-none btn btn-light"
wire:click="selectAmount('1000')">{{ $settings->currency }}1,000</button>
<button class="mb-2 border-black rounded-none btn btn-light"
wire:click="selectAmount('1500')">{{ $settings->currency }}1,500</button>
<button class="mb-2 border-black rounded-none btn btn-light"
wire:click="selectAmount('2000')">{{ $settings->currency }}2,000</button>
</div>
``` </div>
this is the code for input box
<div class="mt-5"> <div class=""> <p>Or Enter Your Amount</p> <div> <input type="number" required wire:model='amountToInvest' wire:keyup="checkIfAmountIsEmpty" name="" id="" class="form-control d-block w-100" placeholder="1000" min="{{ $planSelected ? $planSelected->min_price : '0' }}" max="{{ $planSelected ? $planSelected->max_price : '10000000000' }}"> </div> </div>
this my payment method section.
``` <div class="mt-5">
<p>Choose Payment Method</p>
</div>
<div class="select-menu2">
<ul class="options2 d-block">
<li class="mb-3 shadow option2 {{ $paymentMethod == 'Account Balance' ? 'bg-light border border-primary' : '' }}"
id="acnt" wire:click="chanegePaymentMethod('Account Balance')">
<i class="fas fa-wallet"></i>
<span class="option-text2 d-block">Account Balance </span> <br>
<span class="small">
<strong> Balance:
</strong>{{ $settings->currency }}{{ number_format(Auth::user()->account_bal) }}
</span>
</li>
{{-- <li class="mb-3 shadow option2 {{ $paymentMethod == 'BTC Wallet' ? 'bg-light border border-primary' : '' }}"
id="btcbal" wire:click="chanegePaymentMethod('BTC Wallet')">
<i class="fab fa-bitcoin"></i>
<span class="option-text2">BTC Wallet</span>
<span class="small">
<strong> Balance: </strong> 0.00038828 BTC
</span>
</li> --}}
</ul>
</div>
</div>
``` </div>
This is a section that shows the details of the plan for the user, with a submit button called "Confirm & Invest"
```</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<p>Your Investment Details</p>
<div class="row">
<div class="mb-3 col-md-6">
<p class="mb-0 small">Name of plan</p>
<span
class="text-primary small">{{ $planSelected ? $planSelected->name : '-' }}</span>
</div>
<div class="mb-3 col-md-6">
<p class="mb-0 small">Plan Price</p>
<span
class="text-primary small">{{ $settings->currency }}{{ $planSelected ? $planSelected->price : '-' }}</span>
</div>
<div class="mb-3 col-md-6">
<p class="mb-0 small">Duration</p>
<span
class="text-primary small">{{ $planSelected ? $planSelected->expiration : '-' }}</span>
</div>
<div class="mb-3 col-md-6">
<p class="mb-0 small">Profit</p>
<span class="text-primary small">
@if ($planSelected)
@if ($planSelected->increment_type == 'Fixed')
{{ $settings->currency }}{{ $planSelected->increment_amount }}
{{ $planSelected->increment_interval }}
@else
{{ $planSelected->increment_amount }}%
{{ $planSelected->increment_interval }}
@endif
@else
-
@endif
</span>
</div>
<div class="mb-3 col-md-6">
<p class="mb-0 small">Minimum Deposit</p>
<span
class="text-primary small">{{ $planSelected ? $settings->currency . $planSelected->min_price : '-' }}</span>
</div>
<div class="mb-3 col-md-6">
<p class="mb-0 small">Maximum Deposit</p>
<span
class="text-primary small">{{ $planSelected ? $settings->currency . $planSelected->max_price : '-' }}</span>
</div>
<div class="mb-3 col-md-6">
<p class="mb-0 small">Minimum Return</p>
<span
class="text-primary small">{{ $planSelected ? $planSelected->minr . '%' : '-' }}</span>
</div>
<div class="mb-3 col-md-6">
<p class="mb-0 small">Maximum Return</p>
<span
class="text-primary small">{{ $planSelected ? $planSelected->maxr . '%' : '-' }}</span>
</div>
</div>
<hr>
<div class="justify-content-between d-md-flex">
<span class="small d-block d-md-inline">Payment method:</span>
<span class="small text-primary">{{ $paymentMethod ? $paymentMethod : '-' }}</span>
</div>
<hr>
<div class="justify-content-between d-md-flex">
<span class="d-block d-md-inline font-weight-bold">Amount to Invest:</span>
<span
class="text-primary font-weight-bold">{{ $settings->currency }}{{ $amountToInvest ? number_format($amountToInvest) : '0' }}</span>
</div>
<div class="mt-3 text-center">
<form action="" wire:submit.prevent="joinPlan">
<button class="px-3 btn btn-primary" {{ $disabled }}>
Confirm & Invest
</button>
</form>
<span class="mt-2 small text-primary" wire:loading wire:target="joinPlan">
{{ $feedback }}</span>
</div>
</div>
</div>
</div>
</div>
@else
<div class="mt-4 row">
<div class="col-md-12">
<div class="py-4 card">
<div class="text-center card-body">
<p>No investment plan at the moment, please contact our support for more information</p>
</div>
</div>
</div>
</div>
@endif