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 align-items-center ">

                <form action="" class=" d-flex align-items-center ">

                   <select class="form-select form-select-lg me-1 " id="month" style="width:150px !important;">
                        <option value="x" {{$month == "x" ? 'selected' : ""}}>Anno completo</option>
                        <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>

                    <select class="form-select " style="width:100px !important;" id="year">
                        @for($y=date("Y"); $y>date("Y") - 2; $y--)
                            <option value="{{$y}}">{{$y}}</option>
                        @endfor
                    </select>

                </form>
                @if(sizeof($columns) < 6)
                    <button class="btn--ui show" style="margin-left:5px;">aggiungi</button>
                @endif

                <button class="btn--ui reset" wire:click="clear()" style="margin-left:5px;">reset</button>
                @if($showData)
                    <button class="btn--ui reset" wire:click="export()" style="margin-left:5px;">esporta</button>
                    <button class="btn--ui reset exportYear"  style="margin-left:5px;">esporta anno fiscale selezionato</button>
                @endif




            </section>


                <section id="resume-table">

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

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

                            <h1>Entrate</h1>

                            <div class="row ">
                                <div class="col-md-2">
                                Filtra per causale
                                </div>
                                <div class="col-md-4 m-1">
                                    <select name="search_causal_id[]" class="form-select filterCausalsIn" multiple="multiple" wire:model="filterCausalsIn">
                                        @foreach($causalsIn as $causal)
                                            <option value="{{$causal["id"]}}">{!!$causal["name"]!!}
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <table class="table tablesaw tablesaw-stack collaptableIN" >
                                <thead>
                                    <tr>
                                        <th scope="col" style="width:20%;text-align:left"></th>
                                        @foreach($columns as $idx => $column)
                                            <th scope="col cellBorder" style="width:13%;text-align:center">{{$this->getMonth($column)}} <br><a href="#" wire:click="remove({{$idx}})"><i class="fa fa-trash" aria-hidden="true" style="color:red"></i></a></th>
                                        @endforeach
                                        @for($j=sizeof($columns);$j<6;$j++)
                                            <th scope="col cellBorder" style="width:13%;text-align:center">&nbsp;</th>
                                        @endfor
                                    </tr>
                                </thead>
                                <tbody id="checkall-target">

                                    @foreach($rows_in as $in)
                                        @if($filterCausalsIn == null || (sizeof($filterCausalsIn) == 0 || in_array($in["id"], $filterCausalsIn) || in_array($in["parent_id"], $filterCausalsIn) || in_array($in["first_parent_id"], $filterCausalsIn)))
                                            <tr data-id="{{$in["id"]}}" data-parent="{{$in["parent_id"]}}">
                                                <td>{!!str_repeat("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;", $in["level"])!!}{{$in["name"]}}</td>
                                                @foreach($columns as $column)
                                                    <td class="cellBorder" style="text-align:center">
                                                        @if(isset($records_in[$column][$in["id"]]))
                                                            <span class="tablesaw-cell-content {{$in["level"] == 0 ? 'primary' : ''}}" {{$in["level"] == 0 ? 'style=""' : 'font-weight:bold;'}}>
                                                                {{formatPrice($records_in[$column][$in["id"]])}}
                                                            </span>
                                                        @else
                                                            &nbsp;
                                                        @endif
                                                    </td>
                                                @endforeach
                                                @for($j=sizeof($columns);$j<6;$j++)
                                                    <td class="cellBorder">&nbsp;</th>
                                                @endfor
                                            </tr>
                                        @endif
                                    @endforeach
                                    <tr>
                                        <td><b>Totale entrate mensili</b></td>
                                        @foreach($columns as $column)
                                            <td class="cellBorder" style="text-align:center">
                                                @php
                                                $total = 0;
                                                @endphp
                                                @foreach($rows_in as $in)
                                                    @if($filterCausalsIn == null || (sizeof($filterCausalsIn) == 0 || in_array($in["id"], $filterCausalsIn)))
                                                        @if(isset($records_in[$column][$in["id"]]) && $in["level"] == 0)
                                                            @php
                                                            $total += $records_in[$column][$in["id"]];
                                                            @endphp
                                                        @endif
                                                    @endif
                                                @endforeach
                                                <span class="tablesaw-cell-content primary" style="color:green; font-size:18px;"><b>{{formatPrice($total)}}</b></span>
                                            </td>
                                        @endforeach
                                        @for($j=sizeof($columns);$j<6;$j++)
                                            <td class="cellBorder">&nbsp;</th>
                                        @endfor
                                    </tr>

                                </tbody>
                                <tfoot>

                                </tfoot>
                            </table>
                        </div>
                    </div>
                    <div class="row ">
                        <div class="col-md-12">

                            <h1>Uscite</h1>

                            <div class="row ">
                                <div class="col-md-2">
                                    <label class="form-label">Filtra per causale</label>
                                </div>
                                <div class="col-md-4 m-1">
                                    <select name="search_causal_id_x[]" class="form-select filterCausalsOut" multiple="multiple" wire:model="filterCausalsOut">
                                        @foreach($causalsOut as $causal)
                                            <option value="{{$causal["id"]}}">{!!$causal["name"]!!}
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <table class="table tablesaw tablesaw-stack collaptableOUT">
                                <thead>
                                    <tr>
                                        <th scope="col" style="width:20%;text-align:left"></th>
                                        @foreach($columns as $idx => $column)
                                            <th scope="col cellBorder" style="width:13%;text-align:center">{{$this->getMonth($column)}} <br><a href="#" wire:click="remove({{$idx}})"><i class="fa fa-trash" aria-hidden="true" style="color:red"></i></a></th>
                                        @endforeach
                                        @for($j=sizeof($columns);$j<6;$j++)
                                            <th scope="col cellBorder" style="width:13%;text-align:center">&nbsp;</th>
                                        @endfor
                                    </tr>
                                </thead>
                                <tbody id="checkall-target">

                                    @foreach($rows_out as $out)
                                        @if($filterCausalsOut == null || (sizeof($filterCausalsOut) == 0 || in_array($out["id"], $filterCausalsOut)))
                                            <tr data-id="{{$out["id"] + 1000}}" data-parent="{{$out["parent_id"] != null ? ($out["parent_id"] + 1000) : 0}}">
                                                <td>{!!str_repeat("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;", $out["level"])!!}{{$out["name"]}}</td>
                                                @foreach($columns as $column)
                                                    <td class="cellBorder" style="text-align:center">
                                                        @if(isset($records_out[$column][$out["id"]]))
                                                            <span class="tablesaw-cell-content {{$out["level"] == 0 ? 'primary' : ''}}"  {{$out["level"] == 0 ? 'style=""' : 'font-weight:bold;'}}>
                                                            {{formatPrice($records_out[$column][$out["id"]])}}
                                                            </span>
                                                        @else
                                                            &nbsp;
                                                        @endif
                                                    </td>
                                                @endforeach
                                                @for($j=sizeof($columns);$j<6;$j++)
                                                    <td class="cellBorder">&nbsp;</th>
                                                @endfor
                                            </tr>
                                        @endif
                                    @endforeach

                                    <tr>
                                        <td><b>Totale uscite mensili</b></td>
                                        @foreach($columns as $column)
                                            <td class="cellBorder" style="text-align:center">
                                                @php
                                                $total = 0;
                                                @endphp
                                                @foreach($rows_out as $out)
                                                    @if($filterCausalsOut == null || (sizeof($filterCausalsOut) == 0 || in_array($out["id"], $filterCausalsOut)))
                                                        @if(isset($records_out[$column][$out["id"]]) && $out["level"] == 0)
                                                            @php
                                                            $total += $records_out[$column][$out["id"]];
                                                            @endphp
                                                        @endif
                                                    @endif
                                                @endforeach
                                                <span class="tablesaw-cell-content primary" style="color:red; font-size:18px;"><b>{{formatPrice($total)}}</b></span>
                                            </td>
                                        @endforeach
                                        @for($j=sizeof($columns);$j<6;$j++)
                                            <td class="cellBorder">&nbsp;</th>
                                        @endfor
                                    </tr>

                                </tbody>
                                <tfoot>

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

                    </div>
                </section>

                <a style="display:none" href="javascript:void(0);" id="collapseAll" class="act-button-collapse-all">Collapse All</a>

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

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

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

                $('.collaptableIN').aCollapTable({
                    startCollapsed: true,
                    addColumn: false,
                    plusButton: '<span class="i"> + </span>',
                    minusButton: '<span class="i"> - </span>'
                });
                $('.collaptableOUT').aCollapTable({
                    startCollapsed: true,
                    addColumn: false,
                    plusButton: '<span class="i"> + </span>',
                    minusButton: '<span class="i"> - </span>'
                });
                $("#collapseAll").trigger("click")
            });
        }

        Livewire.on('load-select', () => {
            $('.filterCausalsIn').select2();
            $('.filterCausalsIn').on('change', function (e) {
                var data = $('.filterCausalsIn').select2("val");
                @this.set('filterCausalsIn', data);
            });
            $('.filterCausalsOut').select2();
            $('.filterCausalsOut').on('change', function (e) {
                var data = $('.filterCausalsOut').select2("val");
                @this.set('filterCausalsOut', data);
            });
        });

        load();

        $(document).on("click", ".show", function () {
            var m = $('#month').val();
            var y = $('#year').val();
            @this.show(m, y);
        });

        $(document).on("click", ".exportYear", function () {
            var y = $('#year').val();
            @this.exportYear(y);
        });

    </script>

@endpush