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

<div class="col">
    <div class="row h-100">


        <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">Entrate/Uscite gestionale</h2>
                </div>



            </header>

            <section id="subheader" class="d-flex">
                <form action="" class="d-flex">
                   <select class="form-select form-select-lg me-1"  wire:model="month" style="width:150px !important;">
                        <option value="1" {{$month == 1 ? 'selected' : ''}}>Gennaio</option>
                        <option value="2" {{$month == 2 ? 'selected' : ''}}>Febbraio</option>
                        <option value="3" {{$month == 3 ? 'selected' : ''}}>Marzo</option>
                        <option value="4" {{$month == 4 ? 'selected' : ''}}>Aprile</option>
                        <option value="5" {{$month == 5 ? 'selected' : ''}}>Maggio</option>
                        <option value="6" {{$month == 6 ? 'selected' : ''}}>Giugno</option>
                        <option value="7" {{$month == 7 ? 'selected' : ''}}>Luglio</option>
                        <option value="8" {{$month == 8 ? 'selected' : ''}}>Agosto</option>
                        <option value="9" {{$month == 9 ? 'selected' : ''}}>Settembre</option>
                        <option value="10" {{$month == 10 ? 'selected' : ''}}>Ottobre</option>
                        <option value="11" {{$month == 11 ? 'selected' : ''}}>Novembre</option>
                        <option value="12" {{$month == 12 ? 'selected' : ''}}>Dicembre</option>
                    </select>
                </form>
                <form action="" class="d-flex">
                    <select class="form-select "  wire:model="year" style="width:100px !important;">
                        @for($y=date("Y"); $y>date("Y") - 2; $y--)
                            <option value="{{$y}}">{{$y}}</option>
                        @endfor
                    </select>
                </form>

                @if($total_in > 0 || $total_out > 0)
                    <h4  style="width:100%;text-align:right">Totale mese entrate/uscite : <span class="tablesaw-cell-content primary" style="color:{{$total_in - $total_out > 0 ? 'green' : 'red'}}">{{formatPrice($total_in - $total_out)}}</span></h4>
                @endif

            </section>


            <section id="resume-table">


                <div class="compare--chart_wrapper d-none"></div>

                <div class="row ">
                    <div class="col-md-6">

                        <h1>Entrate</h1>

                        <table class="table tablesaw tablesaw-stack" data-tablesaw="" id="tablesaw-350">
                            <thead>
                                <tr>
                                    <th scope="col">Data</th>
                                    <th scope="col">Cliente</th>
                                    <th scope="col">Causale</th>
                                    <th scope="col"  style="text-align:right;">Importo</th>
                                </tr>
                            </thead>
                            <tbody id="checkall-target">
                                @foreach($records_in as $record)
                                    <tr>
                                        <td>{{date("d/m/Y", strtotime($record->date))}}</td>
                                        <td>
                                            @if($record->member)
                                                {{$record->member->first_name}} {{$record->member->last_name}}
                                            @endif
                                        </td>
                                        <td><a href="/in?id={{$record->record_id}}">{{$this->getCausal($record->causal_id)}}</a></td>
                                        <td style="text-align:right;"><span class="tablesaw-cell-content primary">{{formatPrice($record->amount)}}</span></td>
                                    </tr>
                                @endforeach
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td><b>Totale</b></td>
                                    <td style="text-align:right;"><span class="tablesaw-cell-content primary" style="color:green"><b>{{formatPrice($total_in)}}</b></span></td>
                                </tr>
                            </tbody>
                            <tfoot>

                            </tfoot>
                        </table>
                    </div>

                    <div class="col-md-6">

                        <h1>Uscite</h1>

                        <table class="table tablesaw tablesaw-stack" data-tablesaw="" id="tablesaw-350x">
                            <thead>
                                <tr>
                                    <th scope="col">Data</th>
                                    <th scope="col">Fornitore</th>
                                    <th scope="col">Causale</th>
                                    <th scope="col" style="text-align:right;">Importo</th>
                                </tr>
                            </thead>
                            <tbody id="checkall-target">
                                @foreach($records_out as $record)
                                    <tr>
                                        <td>{{date("d/m/Y", strtotime($record->date))}}</td>
                                        <td>
                                            @if($record->supplier)
                                                {{$record->supplier->name}}
                                            @endif
                                        </td>
                                        <td>{{$this->getCausal($record->causal_id)}}</td>
                                        <td style="text-align:right;"><span class="tablesaw-cell-content primary">{{formatPrice($record->amount)}}</span></td>
                                    </tr>
                                @endforeach
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td><b>Totale</b></td>
                                    <td style="text-align:right;"><span class="tablesaw-cell-content primary" style="color:red"><b>{{formatPrice($total_out)}}</b></span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>

        </div>
    </div>
</div>

@push('scripts')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .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;
        }
    </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>
@endpush

@push('scripts')
    <script>
        function matchStart(params, data) {
            params.term = params.term || '';
            if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
                return data;
            }
            return false;
        }

        window.livewire.on('refresh', () => {
            $('.causalClass').select2();
            $('.memberClass').select2({
                matcher: function(params, data) {
                    return matchStart(params, data);
                }
            });
            $('.paymentClass').select2({
                matcher: function(params, data) {
                    return matchStart(params, data);
                }
            });
        });
        Livewire.on('load-select', () => {
            $('.causalClass').select2();
            $('.causalClass').on('change', function (e) {
                var data = $('.causalClass').select2("val");
                @this.set('causal_id', data);
            });
            $('.memberClass').select2({
                matcher: function(params, data) {
                    return matchStart(params, data);
                }
            });
            $('.memberClass').on('change', function (e) {
                var data = $('.memberClass').select2("val");
                @this.set('member_id', data);
            });
            $('.paymentClass').select2({
                matcher: function(params, data) {
                    return matchStart(params, data);
                }
            });
            $('.paymentClass').on('change', function (e) {
                var data = $('.paymentClass').select2("val");
                @this.set('payment_method_id', data);
            });

            $('.filterMember').select2();
            $('.filterMember').on('change', function (e) {
                var data = $('.filterMember').select2("val");
                @this.set('filterMember', data);
            });
            $('.filterPaymentMethod').select2();
            $('.filterPaymentMethod').on('change', function (e) {
                var data = $('.filterPaymentMethod').select2("val");
                @this.set('filterPaymentMethod', data);
            });
            $('.filterCausals').select2();
            $('.filterCausals').on('change', function (e) {
                var data = $('.filterCausals').select2("val");
                @this.set('filterCausals', data);
            });

        });

        Livewire.on('hide-search', () => {
            pcsh2();
        });

        window.livewire.on('saved', () => {
            $('#userModal').modal('hide');
        });
        window.livewire.on('reloadMembers', () => {
            $('.memberClass').select2("destroy");
            $('.memberClass').select2({
                matcher: function(params, data) {
                    return matchStart(params, data);
                }
            });
        });

        $('.filterMember').select2();
        $('.filterMember').on('change', function (e) {
            var data = $('.filterMember').select2("val");
            @this.set('filterMember', data);
        });
        $('.filterPaymentMethod').select2();
        $('.filterPaymentMethod').on('change', function (e) {
            var data = $('.filterPaymentMethod').select2("val");
            @this.set('filterPaymentMethod', data);
        });
        $('.filterCausals').select2();
        $('.filterCausals').on('change', function (e) {
            var data = $('.filterCausals').select2("val");
            @this.set('filterCausals', data);
        });

        function onlyNumberAmount(input) {
            let v = input.value.replace(/\D+/g, '');
            if (v.length > 14) v = v.slice(0, 14);
            input.value = "€ " + v.replace(/(\d)(\d\d)$/, "$1,$2").replace(/(^\d{1,3}|\d{3})(?=(?:\d{3})+(?:,|$))/g, '$1.');
        }

    </script>

@endpush