Auto calculate total value laravel livewire - php

Question

i have a problem where the value isn't calculated.
I have function where the user able to update Weight/size and quantity(if the input isn't in readonly). When the user enter a new weight/size it will be auto-calculated in the Order Total. Apparently, there is a value already in the Order Total (since it is an update) so i want it to auto update the value in the order total when the user update the new input in weight/size or quantity.
pls click this picture
here is my updates.blade.php
<div class="col-sm-12 col-md-6" >
<div class="card">
<div class="card-body">
<div class="form-actions">
<div class="container" style="padding: 0;margin: 0;">
<div class="row">
<div class="col-sm-6" >
<span class="float-sm-left">
<h3 class="card-title">Update Order</h3>
</span>
</div>
</div>
</div>
</div>
</br>
<form action="" method="POST" >
#csrf
#method('PUT')
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationTooltip01">Order ID</label>
<input type="text" class="form-control" wire:model="orderID" value="" readonly>
</div>
<div class="col-md-4 mb-3">
<label for="validationTooltip02">Order Date</label>
<input type="text" class="form-control" wire:model="orderDate" value="" readonly>
</div>
<div class="col-md-4 mb-3">
<label for="validationTooltipUsername">Order Status</label>
<input type="text" class="form-control" wire:model="orderStatus" value="" readonly>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label class="form-control-label" >Customer Phone Number</label>
<input type="text" name="" value="" class="form-control" maxlength="11" wire:model="custPhone" readonly>
</div>
<div class="col-md-6 mb-3">
<label class="form-control-label" >Customer Name</label>
<input type="text" name="" value="" class="form-control" maxlength="11" wire:model="custName" readonly>
</div>
</div>
<div class="form-row">
#foreach($serviceOrder as $o)
<div class="col-md-5 mb-3">
<label class="form-control-label" >Service {{ $loop->iteration }} </label>
<input type="text" wire:model="serviceOrder.{{ $loop->index }}.serv.serviceName" class="form-control " readonly>
</div>
<input type="hidden" wire:model="serviceOrder.{{ $loop->index }}.serv.servicePrice" class="form-control col-sm-1 mb-3" readonly>
<div class="col-md-3 mb-3">
<label class="form-control-label" >Weight/Size</label>
<input type="text" name="" value="" wire:model="serviceOrder.{{ $loop->index }}.weightsize" class="form-control">
</div>
<div class="col-md-3 mb-3">
<label class="form-control-label" >Quantity*opt</label>
<input type="text" name="" value="" wire:model="serviceOrder.{{ $loop->index }}.quantity" class="form-control" #if(!$serviceOrder[$loop->index]['quantity']) readonly #endif >
</div>
#endforeach
</div>
<label class="form-control-label" >Order Total RM</label>
<input type="number" wire:model="orderTotal" value="" class="form-control" readonly>
</br>
<div class="form-actions">
<div class="container" style="padding: 0;margin: 0;">
<div class="row">
<div class="col-sm-6" >
<span class="float-sm-left">
<a class="btn btn-primary" href="{{ route('orders.indexInProcess') }}"> Back</a>
</span>
</div>
<div class="col-sm-6">
<span class="float-sm-right">
<div class="text-right">
<button type="submit" class="btn btn-info mr-2">Update</button>
<button type="reset" class="btn btn-dark float-right">Reset</button>
</div>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
here is the livewire updates.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Customer;
use App\Service;
use App\Order;
use App\ServiceOrder;
class Updates extends Component
{
public $orders;
public $orderID;
public $orderDate;
public $orderStatus;
public $orderTotal;
public $custName;
public $custPhone;
public $serviceName;
public $servicePrice;
public $weightsize;
public $quantity;
public $serviceOrder;
public function mount($order,$so)
{
//$orders = Order::with('customer')->get();
//ServiceOrder::with('serv')->where('order_id', $order->id)->get();
$this->orderID = $order->id;
$this->orderDate = $order->orderDate;
$this->orderStatus = $order->orderStatus;
$this->orderTotal = $order->orderTotal;
$this->custPhone = $order->customer->custPhone;
$this->custName = $order->customer->custName;
$this->serviceOrder = $so->toArray();
//dd($this->serviceOrder);
//$so->serviceName,
//$so->weightsize,
//$so->quantity
}
public function render()
{
//$so = ServiceOrder::with('serv')->where('order_id', $order->id)->get();
return view('livewire.updates');
}
public function updatedInputs($name)
{
$array = explode('.', $name);
if ($array[1] == 'serviceName') {
$this->inputs[$array[0]]['servicePrice'] = $this->services->find($value)->servicePrice;
}
try {
$this->calculateTotal();
} catch (\Exception $e) {
}
}
// perform calculation here.
public function calculateTotal(){
$this->orderTotal = $this->orderTotal;
foreach ($this->serviceOrder as $item) {
if($item['quantity'] == ''){
$item['optQuantity']= 1;
$this->orderTotal += ($item['servicePrice'] * $item['weightsize']) * ($item['quantity']);
}else{
$this->orderTotal += $item['servicePrice'] * ($item['weightsize']) * ($item['quantity']);
}
//$this->total *= $item['optQuantity']; // * price;
}
}
}
please help me out here T.T

Answer 1

You can fire event from component (for example) and then register listener in class and call a method for updating total. Check documentation for that.

Answer 2

"Apparently, there is a value already in the Order Total (since it is an update) so i want it to auto update the value in the order total when the user update the new input in weight/size or quantity."
So, the problem is $orderTotal only update once? it doesn't update when user update new input?. Livewire should render everytime there is action or any input.
First of all, i advice u to check what happen when to your function when user update the new input with dd function.
public function calculateTotal(){
dd('is this func work?');
$this->orderTotal = $this->orderTotal;
foreach ($this->serviceOrder as $item) {
if($item['quantity'] == ''){
$item['optQuantity']= 1;
$this->orderTotal += ($item['servicePrice'] * $item['weightsize']) * ($item['quantity']);
}else{
$this->orderTotal += $item['servicePrice'] * ($item['weightsize']) * ($item['quantity']);
}
//$this->total *= $item['optQuantity']; // * price;
}
}
After you debug your function, maybe you already found the answer you looking for or you can come back and ask me anything. ^^