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

<div class="col card--ui" id="card--dashboard">

     <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 ">
        <!--
        <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>
        -->

            Dal&nbsp;<input type="date" wire:model="fromDate" class="form-control" style="width:200px;">
            &nbsp;&nbsp;&nbsp;
            al&nbsp;<input type="date" wire:model="toDate" class="form-control"  style="width:200px;">
            @if(false)
            Da&nbsp;<select class="form-select form-select-lg me-1" wire:model="selectedFilterFromDay" style="width:150px">
                @foreach($days as $p)
                    <option value="{{$p["value"]}}">{{$p["text"]}}</option>
                @endforeach
            </select>
            <select class="form-select form-select-lg me-1" wire:model="selectedFilterFromMonth" style="width:150px">
                @foreach($months as $p)
                    <option value="{{$p["value"]}}">{{$p["text"]}}</option>
                @endforeach
            </select>
            <select class="form-select form-select-lg me-1" wire:model="selectedFilterFromYear" style="width:100px">
                @foreach($years as $p)
                    <option value="{{$p["value"]}}">{{$p["text"]}}</option>
                @endforeach
            </select>

            a&nbsp;&nbsp;<select class="form-select form-select-lg me-1" wire:model="selectedFilterToDay" style="width:150px">
                @foreach($days as $p)
                    <option value="{{$p["value"]}}">{{$p["text"]}}</option>
                @endforeach
            </select>
            <select class="form-select form-select-lg me-1" wire:model="selectedFilterToMonth" style="width:150px">
                @foreach($months as $p)
                    <option value="{{$p["value"]}}">{{$p["text"]}}</option>
                @endforeach
            </select>
            <select class="form-select form-select-lg me-1" wire:model="selectedFilterToYear" style="width:100px">
                @foreach($years as $p)
                    <option value="{{$p["value"]}}">{{$p["text"]}}</option>
                @endforeach
            </select>
            @endif

        <button class="btn--ui reset" wire:click="export()" style="margin-left:5px;">esporta</button>
        <button class="btn--ui reset " style="margin-left:5px;" id="print">stampa</button>
    </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">Causale</th>
                    @foreach($payments as $p)
                        <th colspan="2" scope="col" style="text-align:center; border-left:3px solid white;">{{$p->name}}</th>
                    @endforeach
                </tr>
                <tr>
                    <th scope="col"></th>
                    <th scope="col"></th>
                    @foreach($payments as $p)
                        <th scope="col" style="text-align:center; border-left:3px solid white;">Entrate</th>
                        <th scope="col" style="text-align:center">Uscite</th>
                    @endforeach
                </tr>
            </thead>
            <tbody id="checkall-target">
                @php
                $count = 0;
                @endphp
                @foreach($records as $causal => $record)
                    <tr>
                        @php
                        $check = strpos($causal, "$") ? explode("$", $causal)[1] : $causal;
                        list($d, $c) = explode("§", $check);
                        @endphp
                        <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{date("d/m/Y", strtotime($d))}}</td>
                        <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{$c}}</td>
                        @foreach($payments as $p)
                            @if(isset($record[$p->name]))
                                <td style="text-align:center; border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">
                                    @if(isset($record[$p->name]["IN"]))
                                        <span class="tablesaw-cell-content " style="color:green">{{formatPrice($record[$p->name]["IN"])}}</span>
                                    @endif
                                </td>
                                <td style="text-align:center;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">
                                    @if(isset($record[$p->name]["OUT"]))
                                        <span class="tablesaw-cell-content " style="color:red">{{formatPrice($record[$p->name]["OUT"])}}</span>
                                    @endif
                                </td>
                            @else
                                <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}"></td>
                                <td style="background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}"></td>
                            @endif
                        @endforeach
                    </tr>
                    @php
                    $count++;
                    @endphp
                @endforeach
            </tbody>
            <tfoot>
                <tr>
                    <td></td>
                    <td><b>Totale</b></td>
                    @foreach($payments as $p)
                        @if(isset($totals[$p->name]))
                            <td style="text-align:center"><span class="tablesaw-cell-content primary" style="color:green"><b>{{formatPrice($totals[$p->name]["IN"])}}</b></span></td>
                            <td style="text-align:center"><span class="tablesaw-cell-content primary" style="color:red"><b>{{formatPrice($totals[$p->name]["OUT"])}}</b></span></td>
                        @else
                            <td style="text-align:center"><span class="tablesaw-cell-content primary" style="color:green"><b>{{formatPrice(0)}}</b></span></td>
                            <td style="text-align:center"><span class="tablesaw-cell-content primary" style="color:red"><b>{{formatPrice(0)}}</b></span></td>
                        @endif
                    @endforeach
                </tr>
                <tr style="display:none">
                    <td></td>
                    <td><b>Differenza</b></td>
                    @foreach($payments as $p)
                        @if(isset($totals[$p->name]))
                            @php
                            $diff = $totals[$p->name]["IN"] - $totals[$p->name]["OUT"];
                            @endphp
                            @if($diff < 0)
                                <td></td>
                            @endif
                            <td style="text-align:center"><span class="tablesaw-cell-content primary" style="color:{{$diff > 0 ? 'green' : 'red'}}"><b>{{formatPrice($diff)}}</b></span></td>
                            @if($diff > 0)
                                <td></td>
                            @endif
                        @else
                            <td colspan="2" style="text-align:center"><b>{{formatPrice(0)}}</b></td>
                        @endif
                    @endforeach
                </tr>
            </tfoot>
        </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>

        function printData()
        {

            var divToPrint=document.getElementById("tablesaw-350");
            newWin= window.open("");
            var htmlToPrint = '' +
                '<style type="text/css">' +
                'table th, table td {' +
                'border:1px solid #000;' +
                'padding:0.5em;' +
                '}' +
                '</style>';
            htmlToPrint += divToPrint.outerHTML;
            newWin.document.write(htmlToPrint);
            newWin.document.close();
            newWin.print();
            newWin.close();
        }

        document.querySelector("#print").addEventListener("click", function(){
        printData();
        });
        /*
        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