iao_team/resources/views/livewire/records_in_out.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">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' : ""}}>Stagione</option>
                @foreach(getMonthList() as $mid => $mname)
                    <option value="{{$mid}}" {{$month == $mid ? 'selected' : ""}}>{{$mname}}</option>
                @endforeach
            </select>

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

        </form>
            @if(sizeof($columns) < 6)
                <button class="btn--ui show" id="addButton" style="margin-left:5px;">
                    <span wire:loading wire:target="show">
                        <i class="fas fa-spinner fa-spin"></i>
                    </span>
                    <span wire:loading.remove wire:target="show">
                        aggiungi
                    </span>
                </button>
            @endif

            <button class="btn--ui lightGrey reset reset" onClick="window.location.reload();" style="margin-left:5px;">reset</button>
            @if($showData)
            <div class="export--button ms-auto">
                <div class="dropdown">
                    <button class="btn--ui_outline light reset dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        ESPORTA
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="exportDropdown">
                        <li><a class="dropdown-item" href="#" id="exportSelection" wire:click="export()">Selezione</a></li>
                        <li><a class="dropdown-item exportYear" href="#" id="exportYear">Anno Fiscale</a></li>
                    </ul>
                </div>
            </div>
        @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-12 m-1">
                            <select name="search_causal_id[]" class="form-select filterCausalsIn filterCausals" multiple="multiple" wire:model="filterCausalsIn" wire:change='reset-collapse'>
                                @foreach($causalsIn as $causal)
                                    <option value="{{$causal["id"]}}">{!!$causal["name"]!!}
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <table class="table tablesaw tableHead tablesaw-stack collaptableIN" id="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 >
                            @foreach($rows_in as $in)

                                @php
                                $show = false;
                                if ($filterCausalsIn != null)
                                {
                                    foreach($filterCausalsIn as $cIn)
                                    {
                                        if (in_array($cIn, $in["all_childs"]))
                                            $show = true;
                                    }
                                }
                                else
                                    $show = true;
                                @endphp
                                @if($show)
                                    @if($in["parent_id"] != null)
                                        <tr data-node="treetable-{{$in["id"]}}" data-pnode="treetable-parent-{{$in["parent_id"]}}">
                                    @else
                                        <tr data-node="treetable-{{$in["id"]}}" >
                                    @endif

                                        <td style="padding-left:{{$in["level"] * 20}}px;">

                                            {{$in["name"]}}
                                        </td>
                                        @foreach($columns as $column)
                                            <td class="cellBorder" style="text-align:right">
                                                @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;</td>
                                        @endfor
                                    </tr>
                                @endif


                            @endforeach
                            <tr>
                                <td><b>Totale entrate</b></td>
                                @foreach($columns as $column)
                                    <td class="cellBorder" style="text-align:right">
                                        @php
                                        $total = 0;
                                        $existIn = [];
                                        @endphp
                                        @foreach($rows_in as $in)
                                            @if($filterCausalsIn == null || (sizeof($filterCausalsIn) == 0 || in_array($in["id"], $filterCausalsIn)))
                                                @if(isset($records_in[$column][$in["id"]]))
                                                    @php
                                                    if($in["level"] == 0)
                                                    {
                                                        $total += $records_in[$column][$in["id"]];
                                                        $existIn[] = $in["id"];
                                                    }
                                                    else
                                                    {
                                                        if (!in_array($in["parent_id"], $existIn))
                                                        {
                                                            $total += $records_in[$column][$in["id"]];
                                                        }
                                                        $existIn[] = $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-12 m-1">
                            <select name="search_causal_id_x[]" class="form-select filterCausalsOut filterCausals" multiple="multiple" wire:model="filterCausalsOut" wire:change='reset-collapse'>
                                @foreach($causalsOut as $causal)
                                    <option value="{{$causal["id"]}}">{!!$causal["name"]!!}
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <table class="table tablesaw tableHead tablesaw-stack collaptableOUT" id="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)

                                @php
                                $show = false;
                                if ($filterCausalsOut != null)
                                {
                                    foreach($filterCausalsOut as $cOut)
                                    {
                                        if (in_array($cOut, $out["all_childs"]))
                                            $show = true;
                                    }
                                }
                                else
                                    $show = true;
                                @endphp
                                @if($show)
                                    @if($out["parent_id"] != null)
                                        <tr data-node="treetable-{{$out["id"] + 1000}}" data-pnode="treetable-parent-{{$out["parent_id"] + 1000}}">
                                    @else
                                        <tr data-node="treetable-{{$out["id"] + 1000}}" >
                                    @endif

                                        <td style="padding-left:{{$out["level"] * 20}}px;">

                                            {{$out["name"]}}
                                        </td>
                                        @foreach($columns as $column)
                                            <td class="cellBorder" style="text-align:right">
                                                @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;</td>
                                        @endfor
                                    </tr>
                                @endif

                            @endforeach

                            <tr>
                                <td><b>Totale uscite</b></td>
                                @foreach($columns as $column)
                                    <td class="cellBorder" style="text-align:right">
                                        @php
                                        $total = 0;
                                        $existOut = [];
                                        @endphp
                                        @foreach($rows_out as $out)
                                            @if($filterCausalsOut == null || (sizeof($filterCausalsOut) == 0 || in_array($out["id"], $filterCausalsOut)))
                                                @if(isset($records_out[$column][$out["id"]]))
                                                    @php
                                                    if($out["level"] == 0)
                                                    {
                                                        $total += $records_out[$column][$out["id"]];
                                                        $existOut[] = $out["id"];
                                                    }
                                                    else
                                                    {
                                                        if (!in_array($out["parent_id"], $existOut))
                                                        {
                                                            $total += $records_out[$column][$out["id"]];
                                                        }
                                                        $existOut[] = $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>

@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/bootstrap-treefy.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);
                });

                $('.filterCausalsIn').select2({"language": {"noResults": function(){return "Nessun risultato";}}});

                $('.filterCausalsIn').on('change', function (e) {
                    var data = $('.filterCausalsIn').select2("val");
                    //selectedCausalsIn.push(data);
                    //showHideNodes();
                    setTimeout(function() {createCollapse();}, 1000);
                    @this.set('filterCausalsIn', data);
                });

                $('.filterCausalsOut').select2({"language": {"noResults": function(){return "Nessun risultato";}}});


                $('.filterCausalsOut').on('change', function (e) {
                    var data = $('.filterCausalsOut').select2("val");
                    setTimeout(function() {createCollapse();}, 1000);
                    @this.set('filterCausalsOut', 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);
                });

                createCollapse();
            });
        }

        function createCollapse()
        {
            $(".act-more").remove();
            $(".spaces").remove();

            $(".treetable-expander").trigger("click");

            //$("#checkall-target > tr").removeAttr("data-level");
            //$("#checkall-target > tr").removeAttr("class");
            $('#collaptableIN').unbind().removeData();
            $("#collaptableIN").treeFy({
                treeColumn: 0
            });

            $('#collaptableOUT').unbind().removeData();
            $("#collaptableOUT").treeFy({
                treeColumn: 0
            });

            $(".treetable-expander").trigger("click");

            /*
            $('.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('reset-collapse', () => {
            createCollapse();
        });

        Livewire.on('load-select', () => {
            $('.filterCausalsIn').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
            $('.filterCausalsIn').on('change', function (e) {
                var data = $('.filterCausalsIn').select2("val");
                setTimeout(function() {createCollapse();}, 1000);
                @this.set('filterCausalsIn', data);
            });
            $('.filterCausalsOut').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
            $('.filterCausalsOut').on('change', function (e) {
                var data = $('.filterCausalsOut').select2("val");
                setTimeout(function() {createCollapse();}, 1000);
                @this.set('filterCausalsOut', data);
            });
        });

        load();


        $(document).on("click", "#addButton", 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