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

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

    <header id="title--section" style="display:none !important"  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="">

       <!--
       <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>
       -->
           <div class="row g-3">
               <div class="col-md-2">
                   Utente
                   <select name="search_member_id" class="form-select filterMember" wire:model="filterMember">
                       <option value="">--Seleziona--</option>
                       @foreach($members as $member)
                           <option value="{{$member->id}}">{{$member->last_name}} {{$member->first_name}}</option>
                       @endforeach
                   </select>
               </div>
               <div class="col-md-2">
                   Fornitore
                   <select name="search_supplier_id" class="form-select filterSupplier" wire:model="filterSupplier">
                       <option value="">--Seleziona--</option>
                       @foreach($suppliers as $supplier)
                           <option value="{{$supplier->id}}">{{$supplier->name}}</option>
                       @endforeach
                   </select>
               </div>
               <div class="col-md-4">
                   Causale
                   <select name="search_causal_id[]" class="form-select filterCausals me-2" multiple="multiple" wire:model="filterCausals">
                       @foreach($causals as $causal)
                           <option value="{{$causal["id"]}}">{!!$causal["name"]!!}
                       @endforeach
                   </select>
               </div>
           </div>
           <div class="row g-3">
               <div class="col-md-2">
                   <span class="date_span">Dal</span><input type="date" wire:model="fromDate" class="form-control">
               </div>
               <div class="col-md-2">
                   <span class="date_span ms-2">al</span><input type="date" wire:model="toDate" class="form-control">
               </div>
           </div>
           <div class="row mt-2">
               <div class="col-md-1">
                   <div class="dropdown">
                   <button class="btn--ui_outline light dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false"
                   style="color:#10172A;">
                       ESPORTA
                   </button>
                   <ul class="dropdown-menu" aria-labelledby="exportDropdown">
                       <li><a class="dropdown-item" href="#" wire:click="export()">Excel</a></li>
                       <li><a class="dropdown-item" href="#" id="print">Stampa</a></li>
                   </ul>
                   </div>
               </div>
               <div class="col-md-auto ms-auto">
                <div class="prima--nota_buttons">
                    <button class="btn--ui lightGrey reset reset" style="color:#10172A;" onclick="reset()">RESET</button>
                </div>
            </div>
           </div>
   </section>

   <section id="resume-table"  class="scrollTable records-table">
       <div id="loading-spinner" wire:loading wire:target="render, filterCausals, filterMember, filterSupplier, fromDate, toDate" class="text-center my-4">
           <div class="spinner-border text-primary" role="status" style="width:5rem; height: 5rem;">
               <span class="visually-hidden">Loading...</span>
           </div>
           <p class="mt-2">Caricamento dati in corso...</p>
       </div>
       <!--
       <canvas id="recordChart"></canvas>
           -->
       <table class="table tablesaw tableHead tablesaw-stack" id="tablesaw-350" width="100%">
           <thead>
               <tr>
                   <th scope="col">Data</th>
                   <th scope="col" style="border-left:3px solid white;">Causale</th>
                   <th scope="col" style="border-left:3px solid white;">Dettaglio Causale</th>
                   <th scope="col" style="border-left:3px solid white;">Stato</th>
                   <th scope="col" style="border-left:3px solid white;">Nominativo</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" style="border-left:3px solid white;"></th>
                   <th scope="col" style="border-left:3px solid white;"></th>
                   <th scope="col" style="border-left:3px solid white;"></th>
                   <th scope="col" style="border-left:3px solid white;"></th>
                   @foreach($payments as $p)
                       @if($p->type == 'ALL')
                           <th scope="col" style="text-align:center; border-left:3px solid white;">Entrate</th>
                           <th scope="col" style="text-align:center">Uscite</th>
                       @elseif($p->type == 'IN')
                           <th scope="col" style="text-align:center; border-left:3px solid white;">Entrate</th>
                           <th scope="col" style="text-align:center;"></th>

                       @elseif($p->type == 'OUT')
                           <th style="border-left:3px solid white;"></th>
                           <th scope="col" style="text-align:center;">Uscite</th>
                       @endif
                   @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, $n, $det, $del) = 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>
                       <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{$det}}</td>
                       <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">
                           @if($del == 'DELETED')
                               <span style='color:red'>Annullata</span>
                           @endif
                       </td>
                       <td style="border-left:3px solid white !important;background-color:{{$count % 2 == 0 ? 'white' : '#f2f4f7'}}">{{$n}}</td>
                       @foreach($payments as $p)
                           @if(isset($record[$p->name]))
                               <td style="text-align:right; 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:right;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></td>
                   <td></td>
                   <td></td>
                   <td><b>Totale</b></td>
                   @foreach($payments as $p)
                       @if(isset($totals[$p->name]))
                           @if($p->type == 'ALL')
                               <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:green; font-size:18px;"><b>{{formatPrice(isset($totals[$p->name]) ? $totals[$p->name]["IN"] : 0)}}</b></span></td>
                               <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:red; font-size:18px;"><b>{{formatPrice(isset($totals[$p->name]) ? $totals[$p->name]["OUT"] : 0)}}</b></span></td>
                           @elseif($p->type == 'IN')
                               <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:green; font-size:18px;"><b>{{formatPrice(isset($totals[$p->name]) ? $totals[$p->name]["IN"] : 0)}}</b></span></td>
                               <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:red; font-size:18px;"><b>&nbsp;</b></span></td>

                           @elseif($p->type == 'OUT')
                               <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:green; font-size:18px;"><b>&nbsp;</b></span></td>
                               <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:red; font-size:18px;"><b>{{formatPrice(isset($totals[$p->name]) ? $totals[$p->name]["OUT"] : 0)}}</b></span></td>
                           @endif
                       @else
                           @if($p->type == 'ALL')

                               <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:green; font-size:18px;"><b>{{formatPrice(isset($totals[$p->name]) ? $totals[$p->name]["IN"] : 0)}}</b></span></td>
                               <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:red; font-size:18px;"><b>{{formatPrice(isset($totals[$p->name]) ? $totals[$p->name]["OUT"] : 0)}}</b></span></td>
                           @elseif($p->type == 'IN')
                               <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:green; font-size:18px;"><b>{{formatPrice(isset($totals[$p->name]) ? $totals[$p->name]["IN"] : 0)}}</b></span></td>
                               <td style="text-align:center"><span class="tablesaw-cell-content primary" style="color:red; font-size:18px;"><b>&nbsp;</b></span></td>
                           @elseif($p->type == 'OUT')
                               <td style="text-align:right"><span class="tablesaw-cell-content primary" style="color:green; font-size:18px;"><b>&nbsp;</b></span></td>
                               <td style="text-align:center"><span class="tablesaw-cell-content primary" style="color:red; font-size:18px;"><b>{{formatPrice(isset($totals[$p->name]) ? $totals[$p->name]["OUT"] : 0)}}</b></span></td>

                           @endif
                       @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:right"><span class="tablesaw-cell-content primary" style="color:{{$diff > 0 ? 'green' : 'red'}}; font-size:18px;"><b>{{formatPrice($diff)}}</b></span></td>
                           @if($diff > 0)
                               <td></td>
                           @endif
                       @else
                           <td colspan="2" style="text-align:right"><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>
       -->
       <button type="button" class="btn btn-floating btn-lg" id="btn-back-to-bottom" ><i class="fas fa-arrow-down"></i></button>
       <button type="button" class="btn btn-floating btn-lg" id="btn-back-to-top" ><i class="fas fa-arrow-up"></i></button>
   </section>





</div>


@push('scripts')
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush
@push('scripts')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>

    .loading-overlay {å
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.7);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #btn-back-to-top {
        background-color: #0C6197;
        color: white;
        position: fixed;
        /* bottom: 20px; */
        /* right: 20px; */
        display: none;
    }

    #btn-back-to-bottom {
        background-color: #0C6197;
        color: white;
        position: fixed;
        /* top: 120px; */
        /* right: 20px; */
        z-index: 9999;
        display: none;
    }

    .scrollTable {
        margin-left: 0px ;
        margin-right: 0px ;
        padding: 15px;
        /*max-width: 800px !important;*/
        overflow-x: auto;
        overflow-y: auto;
        white-space: nowrap;
        border: 1px solid #ddd;
    }

    ::-webkit-scrollbar-thumb {
        background: #e4e4e4;
        border-radius: 10px;
    }

    table thead {
    /* Important */
        position: sticky;
        z-index: 100;
        top: 0;
    }
    .select2-container--default .select2-selection--single{
        background-color: #E9F0F5;
        border: 0.0625rem solid #DFE5EB;
        font-size: 0.75rem;
    }
    .select2-selection
    {
        height: 38px !important;
    }
    .select2-selection__rendered
    {
        padding-top:3px;
    }
    .select2 {
        width:100% !important;
    }
    .i{
        font-size:16px;
        font-weight:bold;
    }
    .cellBorder
    {
        border-left: 1px solid grey;
    }

    .select2-selection--multiple{
        overflow: hidden !important;
        height: auto !important;
    }
    .select2-container {
        box-sizing: border-box;
        display: inline-block;
        margin: 0;
        position: relative;
        vertical-align: middle;
    }
    .select2-container .select2-selection--single {
        box-sizing: border-box;
        cursor: pointer;
        display: block;
        height: 38px;
        user-select: none;
        -webkit-user-select: none;
    }
    .select2-container .select2-selection--single .select2-selection__rendered {
        display: block;
        padding-left: 8px;
        padding-right: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    button#exportDropdown.btn--ui_outline.light {
        font-weight: normal !important;
    }
    .btn--ui_outline.light.dropdown-toggle:active,
    .btn--ui_outline.light.dropdown-toggle:focus,
    .btn--ui_outline.light.dropdown-toggle.show {
        background-color: transparent !important;
        color: #10172A !important;
        box-shadow: none !important;
    }

    .btn--ui_outline.light.dropdown-toggle:hover {
        background-color: transparent !important;
        color: #10172A !important;
    }

</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="/assets/js/aCollapTable.js"></script>
@endpush

@push('scripts')
   <script>
       Livewire.on('load-table', () => {
           load();
       });


       function load()
       {
           $(document).ready(function(){

               $(document).on("keypress", $('.filterCausals'), function (e) {

                   setTimeout(() => {
                       $(".select2-results__option").each(function(){
                           var txt = $(this).html();
                           var count = (txt.match(/-/g) || []).length;
                           $(this).addClass('paddingLeftSelect' + count);
                       });
                   }, 100);
               });

               $('.filterCausals').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
               $('.filterCausals').on('change', function (e) {
                   var data = $('.filterCausals').select2("val");
                   @this.set('filterCausals', data);
               });

               $('.filterCausals').on('select2:open', function (e) {
                   setTimeout(() => {
                       $(".select2-results__option").each(function(){
                           var txt = $(this).html();
                           var count = (txt.match(/-/g) || []).length;
                           $(this).addClass('paddingLeftSelect' + count);
                       });
                   }, 100);
               });

               $('.filterMember').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
               $('.filterMember').on('change', function (e) {
                   var data = $('.filterMember').select2("val");
                   @this.set('filterMember', data);
               });

               $('.filterSupplier').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
               $('.filterSupplier').on('change', function (e) {
                   var data = $('.filterSupplier').select2("val");
                   @this.set('filterSupplier', data);
               });

           });
       }

       Livewire.on('load-select', () => {
           $('.filterCausals').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
           $('.filterCausals').on('change', function (e) {
               var data = $('.filterCausals').select2("val");
               @this.set('filterCausals', data);
           });
           $('.filterMember').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
           $('.filterMember').on('change', function (e) {
               var data = $('.filterMember').select2("val");
               @this.set('filterMember', data);
           });
           $('.filterSupplier').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
           $('.filterSupplier').on('change', function (e) {
               var data = $('.filterSupplier').select2("val");
               @this.set('filterSupplier', data);
           });
           setMaxWidth();
           setMaxHeight();
       });

       load();


   </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();
    });

    $( document ).ready( function(){

        setMaxWidth();
        setMaxHeight();
        $( window ).bind( "resize", setMaxWidth ); //Remove this if it's not needed. It will react when window changes size.
        $( window ).bind( "resize", setMaxHeight );

        $(".open-filter").click(function(){
            setMaxWidth();
            setMaxHeight();
        });

    });

        function setMaxWidth() {
            // $("#resume-table").width( Math.round( $(window ).width() - size ) ) ;
        }

        function setMaxHeight() {
            //  $("#resume-table").height( Math.round( $(window ).height() - 300 ) ) ;
        }

        let mybuttonBottom = document.getElementById("btn-back-to-bottom");
        let mybutton = document.getElementById("btn-back-to-top");

        // When the user scrolls down 20px from the top of the document, show the button
        window.onscroll = function () {
            scrollFunction();
        };

        const element = document.getElementById('resume-table');
            element.onscroll = (e)=>{
                scrollFunction();
            };
            /*if (element.scrollTop < lastScrollTop){
                // upscroll
                return;
            }
            lastScrollTop = element.scrollTop <= 0 ? 0 : element.scrollTop;
                if (element.scrollTop + element.offsetHeight>= element.scrollHeight ){
                console.log("End");
                }
            }*/

            function scrollFunction() {
            if (
                element.scrollTop > 20
            ) {
                mybutton.style.display = "block";
                mybuttonBottom.style.display = "block";
            } else {
                mybutton.style.display = "none";
                mybuttonBottom.style.display = "none";
            }
        }

        function scrollFunctionOld() {
        if (
            document.body.scrollTop > 20 ||
            document.documentElement.scrollTop > 20
        ) {
            mybutton.style.display = "block";
            mybuttonBottom.style.display = "block";
        } else {
            mybutton.style.display = "none";
            mybuttonBottom.style.display = "none";
        }
        }
        // When the user clicks on the button, scroll to the top of the document
        mybutton.addEventListener("click", backToTop);
        mybuttonBottom.addEventListener("click", backToBottom);

        function backToTop() {
            $('#resume-table').scrollTop(0);
            /*document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;*/
        }
        function backToBottom() {
            $('#resume-table').scrollTop($('#resume-table')[0].scrollHeight);
            //window.scrollTo(0, document.body.scrollHeight);
        }

        function reset()
        {
            $('.filterMember').val('');
            $('.filterMember').trigger('change');
            $('.filterCausals').val('');
            $('.filterCausals').trigger('change');
            $('.filterSupplier').val('');
            $('.filterSupplier').trigger('change');
            var today = new Date().toISOString().split('T')[0];

            window.livewire.find(document.querySelector('[wire\\:id]').getAttribute('wire:id')).set('fromDate', today);
            window.livewire.find(document.querySelector('[wire\\:id]').getAttribute('wire:id')).set('toDate', today);
        }
    </script>
@endpush