Ticando o que já foi conferido

[Frank K Hosaka]

arquivo app > Livewire > Cartao.php
<?php
namespace App\Livewire;
use App\Models\tbdiario;
use Livewire\Attributes\Layout;
use Livewire\Component;

#[Layout('components.layouts.app',['titulo'=>'Conferindo Cartão de Crédito'])]
class Cartao extends Component {
    public $debito,$credito,$lctos=[];

    function mount() {
        $doctos=tbdiario::where('lcto',16386)->get();
        foreach($doctos as $d) {
            $this->lctos[]=['lcto'=>$d->lcto,'docto'=>$d->docto,
                'contad'=>$d->contad,'contac'=>$d->contac,
                'valor'=>$d->valor,'hist'=>$d->hist,'ticar'=>"flex even:bg-gray-300"];
        }
        $this->debito = array_reduce($this->lctos, function($carry, $item) {
            if ($item['contad'] > 0) { $carry += $item['valor']; }
            return $carry; }, 0);
        $this->credito = array_reduce($this->lctos, function($carry, $item) {
            if ($item['contac'] > 0) { $carry += $item['valor']; }
            return $carry; }, 0);
        usort($this->lctos,function($a,$b) {
            return $b['valor'] <=> $a['valor']; 
        });
    }

    function ticar($indicador) {
        $this->lctos[$indicador]['ticar']="flex bg-red-200";
    }
}


arquivo resources > views > livewire > cartao.blade.php
<div>
    <div>Lançamento {{$lctos[0]['lcto']}}</div>
    <div class="flex bg-gray-300">
        <div class=w-[60px]>Docto</div>
        <div class=w-[60px]>CtaD</div>
        <div class=w-[60px]>CtaC</div>
        <div class="w-[100px] text-right">Valor</div>
        <div class="w-[300px] px-2">Histórico</div>
    </div>
    @foreach($lctos as $key=>$l)
        <div class='{!! $l['ticar'] !!}' wire:click="ticar({{$key}})">
            <div class=w-[60px]>{{$l['docto']}}</div>
            <div class=w-[60px]>{{$l['contad']}}</div>
            <div class=w-[60px]>{{$l['contac']}}</div>
            @if($l['contad'])
                <div class="w-[100px] text-right">{{dec($l['valor'])}}</div>
            @else
                <div class="w-[100px] text-right text-red-500">{{dec($l['valor'])}}</div>
            @endif
            <div class="W-[300px] px-2">{{$l['hist']}}</div>
        </div>
    @endforeach
    <div class=flex>
        <div class="w-[180px] text-right">{{dec($debito)}}</div>
        <div class="w-[100px] text-right text-red-500">{{dec($credito)}}</div>
        <div class="w-[100px] text-right">{{dec($debito-$credito)}}</div>
    </div>
</div>