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="">
        <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--
                    @foreach($members as $member)
                        <option value="{{$member->id}}">{{$member->last_name}} {{$member->first_name}}
                    @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 class="col-md-2">
                <span class="date_span">Dal</span>
                <input type="date" wire:model.defer="fromDate" class="form-control" @if($isFiltering) disabled @endif>
            </div>
            <div class="col-md-2">
                <span class="date_span ms-2">al</span>
                <input type="date" wire:model.defer="toDate" class="form-control" @if($isFiltering) disabled @endif>
            </div>
            <div class="col-md-2">
                <div class="prima--nota_buttons ms-auto" style="float:right; margin-top:25px;">
                    <button class="btn--ui primary" wire:click="applyFilters" style="margin-right:5px;" @if($isFiltering) disabled @endif>
                        @if($isFiltering)
                            <i class="fas fa-spinner fa-spin"></i> CARICAMENTO...
                        @else
                            FILTRA
                        @endif
                    </button>
                    <button class="btn--ui lightGrey reset reset" style="margin-left:5px;color:#10172A;" onclick="reset()" @if($isFiltering) disabled @endif>RESET</button>
                </div>
            </div>
        </div>
        <div style="float:left; margin-top:10px; margin-bottom:10px;">
            <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;" @if($isFiltering) disabled @endif>
                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>
    </section>

    <section id="resume-table" class="scrollTable records-table" style="position: relative;">

            @if($isFiltering)
                <div class="loading-overlay">
                    <div class="loading-content">
                        <i class="fas fa-spinner fa-spin fa-3x"></i>
                        <p>Caricamento dati in corso...</p>
                    </div>
                </div>
            @endif

            <!-- Your existing table -->
            <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
                            $parts = explode("§", $causal);
                            $d = $parts[0] ?? '';
                            $c = $parts[1] ?? '';
                            $n = $parts[2] ?? ''; // Nominativo
                            $det = $parts[3] ?? '';
                            $del = $parts[4] ?? '';

                            // Check if detail contains multiple causals (separated by |)
                            $detailParts = explode('|', $det);
                            $isMultiple = count($detailParts) > 1;
                            $displayDetail = $isMultiple ? 'Varie' : $det;
                            @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'}}">
                                @if($isMultiple)
                                    <span class="varie-link" data-causals="{{implode('|', array_slice($detailParts, 1))}}" style="color: #0C6197; cursor: pointer; text-decoration: underline;">
                                        {{$displayDetail}}
                                    </span>
                                @else
                                    {{$displayDetail}}
                                @endif
                            </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>
        <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 class="modal fade" id="causalsModal" tabindex="-1" aria-labelledby="causalsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
            <div class="modal-header" style="background-color: #0C6197!important;">
                <h5 class="modal-title" id="causalsModalLabel" >Dettaglio Causali</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="CHIUDI"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                <div class="col-12">
                    <h6>Causali incluse:</h6>
                    <ul id="causalsList" class="list-group list-group-flush">
                    <!-- Causals will be populated here by JavaScript -->
                    </ul>
                </div>
                </div>
            </div>
            <div class="modal-footer" style="background-color: #FFF!important;">
                <button type="button" class="btn--ui lightGrey me-2" data-bs-dismiss="modal">CHIUDI</button>
            </div>
            </div>
    </div>
    </div>
</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>

        #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);
                });

            });
        }

        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);
            });
            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 );
            $( window ).bind( "resize", setMaxHeight );

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

        });

            function setMaxWidth() {
            }

            function setMaxHeight() {
            }

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

            window.onscroll = function () {
                scrollFunction();
            };

            const element = document.getElementById('resume-table');
                element.onscroll = (e)=>{
                    scrollFunction();
                };

                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');
                var today = new Date().toISOString().split('T')[0];

                // Update the form inputs
                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);

                // Reset the applied dates and trigger filter
                window.livewire.find(document.querySelector('[wire\\:id]').getAttribute('wire:id')).set('appliedFromDate', today);
                window.livewire.find(document.querySelector('[wire\\:id]').getAttribute('wire:id')).set('appliedToDate', today);

                // Trigger re-render
                window.livewire.find(document.querySelector('[wire\\:id]').getAttribute('wire:id')).call('$refresh');
            }

            $(document).ready(function() {
            // Safe function to close select2 dropdowns
            function closeSelect2Dropdowns() {
                // Only close select2 on elements that actually have select2 initialized
                $('.filterCausals').each(function() {
                    if ($(this).hasClass('select2-hidden-accessible')) {
                        $(this).select2('close');
                    }
                });
                $('.filterMember').each(function() {
                    if ($(this).hasClass('select2-hidden-accessible')) {
                        $(this).select2('close');
                    }
                });
            }

            // Handle click on "Varie" links
            $(document).on('click', '.varie-link', function(e) {
                e.preventDefault();
                e.stopPropagation();

                // Close any open select2 dropdowns safely
                closeSelect2Dropdowns();

                // Get the causals data from the data attribute
                const causalsData = $(this).data('causals');

                if (causalsData) {
                    // Split the causals by | separator
                    const causals = causalsData.split('|');

                    // Clear the previous list
                    $('#causalsList').empty();

                    // Populate the modal with causals
                    causals.forEach(function(causal) {
                        if (causal.trim()) {
                            $('#causalsList').append(
                                '<li class="list-group-item">' +
                                '<i class="fas fa-tags me-2" style="color: #0C6197;"></i>' +
                                causal.trim() +
                                '</li>'
                            );
                        }
                    });

                    // Show the modal with proper focus management
                    $('#causalsModal').modal('show');

                    // Ensure modal gets focus
                    $('#causalsModal').on('shown.bs.modal', function () {
                        $(this).find('.btn-close').focus();
                    });
                }
            });

            // Close select2 dropdowns when modal is opening
            $('#causalsModal').on('show.bs.modal', function () {
                closeSelect2Dropdowns();
                $('body').addClass('modal-open');
            });

            // Clean up when modal is closed
            $('#causalsModal').on('hidden.bs.modal', function () {
                $('body').removeClass('modal-open');
            });
        });

        // Update the existing load function to include the new event handlers
        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);
                });

                // Initialize select2 only if not already initialized
                if (!$('.filterCausals').hasClass('select2-hidden-accessible')) {
                    $('.filterCausals').select2({
                        "language": {"noResults": function(){return "Nessun risultato";}},
                        "dropdownParent": $('body'),
                        "width": "100%"
                    });
                }

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

                $('.filterCausals').off('select2:open.customHandler').on('select2:open.customHandler', function (e) {
                    // Close modal if open when select2 opens
                    if ($('#causalsModal').hasClass('show')) {
                        $('#causalsModal').modal('hide');
                    }

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

                // Initialize select2 only if not already initialized
                if (!$('.filterMember').hasClass('select2-hidden-accessible')) {
                    $('.filterMember').select2({
                        "language": {"noResults": function(){return "Nessun risultato";}},
                        "dropdownParent": $('body'),
                        "width": "100%"
                    });
                }

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

                $('.filterMember').off('select2:open.customHandler').on('select2:open.customHandler', function (e) {
                    // Close modal if open when select2 opens
                    if ($('#causalsModal').hasClass('show')) {
                        $('#causalsModal').modal('hide');
                    }
                });

                // Re-attach event handlers for "Varie" links after Livewire updates
                $(document).off('click', '.varie-link').on('click', '.varie-link', function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    // Close any open select2 dropdowns safely
                    $('.filterCausals').each(function() {
                        if ($(this).hasClass('select2-hidden-accessible')) {
                            $(this).select2('close');
                        }
                    });
                    $('.filterMember').each(function() {
                        if ($(this).hasClass('select2-hidden-accessible')) {
                            $(this).select2('close');
                        }
                    });

                    const causalsData = $(this).data('causals');

                    if (causalsData) {
                        const causals = causalsData.split('|');

                        $('#causalsList').empty();

                        causals.forEach(function(causal) {
                            if (causal.trim()) {
                                $('#causalsList').append(
                                    '<li class="list-group-item">' +
                                    '<i class="fas fa-tags me-2" style="color: #0C6197;"></i>' +
                                    causal.trim() +
                                    '</li>'
                                );
                            }
                        });

                        $('#causalsModal').modal('show');
                    }
                });
            });
        }
    </script>
@endpush