iao_team/resources/views/livewire/records.blade.php

<div>

     <header id="title--section" class="d-flex align-items-center justify-content-between">
        <div class="title--section_name d-flex align-items-center justify-content-between">
            <i class="ico--ui title_section utenti me-2"></i>
            <h2 class="primary">Prima nota</h2>
        </div>

    </header>

    <section id="subheader" class="d-flex align-items-center justify-content-between">
        <!--
        <form action="" class="group--action d-flex align-items-center">
        <select class="form-select form-select-lg me-1" aria-label=".form-select-lg example">
            <option selected>Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            </select>
            <button type="submit" class="btn--ui">applica</button>
        </form>
        -->

        <form action="" class="compare--form d-flex align-items-center">
            <select class="form-select form-select-lg me-1" aria-label=".form-select-lg example" wire:model="selectedFilter">
                <option value="0">Questo mese: <span class="date-range">{{date("01/m/Y")}} - {{date("t/m/Y")}}</span></option>
                <option value="1">Lo scorso mese: <span class="date-range">{{date("01/m/Y")}} - {{date("t/m/Y")}}</span></option>
                <option value="2">Questo anno: <span class="date-range">{{date("01/01/Y")}} - {{date("31/12/Y")}}</span></option>
                </select>
            </form>
    </section>

    <section id="resume-table">


            <canvas id="recordChart"></canvas>



        <table class="table tablesaw tablesaw-stack" data-tablesaw="" id="tablesaw-350">
            <thead>
                <tr>
                    <th scope="col">Data</th>
                    <th scope="col">Persona/Fornitore</th>
                    <th scope="col">Ingresso/Uscita</th>
                    <th scope="col">Importo</th>
                    <th scope="col">Causale</th>
                    <th scope="col">Pagamento</th>
                </tr>
            </thead>
            <tbody id="checkall-target">
                @foreach($records as $record)
                    <tr>
                        <td>{{date("d/m/Y", strtotime($record->date))}}</td>
                        <td>{{$record->type == 'IN' ? $record->member->first_name . ' ' . $record->member->last_name : $record->supplier->name}}</td>
                        <td>{!! $record->type == 'IN' ? '<span style="color:green">Ingresso</span>' : '<span style="color:red">Uscita</span>' !!}</td>
                        <td><span class="tablesaw-cell-content primary" style="color:{{$record->type == 'IN' ? 'green' : 'red'}}">€ {{$record->amount}}</span></td>
                        <td>{{$record->causal->getTree()}}</td>
                        <td>{{$record->payment_method->name}}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <!--
        <div class="paginator d-flex justify-content-center">
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true"></span>
                    </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>

                    <li class="page-item"><span class="more-page">...</span></li>

                    <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true"></span>
                    </a>
                    </li>
                </ul>
                </nav>
        </div>
        -->
    </section>


</div>

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush


@push('scripts')
    <script>
        const chart = new Chart(
            document.getElementById('recordChart'), {
                type: 'line',
                data: {
                    labels: @json($labels),
                    datasets: @json($recordDatas)
                },
                options: {
                    height:200,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    },
                    responsive: true,
                    elements: {
                        line: {
                            tension : 0.4  // smooth lines
                        },
                    },

                }
            }
        );

        Livewire.on('updateChart', data => {
            chart.data = data;
            chart.update();
        });
    </script>
@endpush