v1 prima nota

app/Http/Livewire/Record.php

@@ -25,9 +25,16 @@ class Record extends Component
     public $fromDate;
     public $toDate;
 
+    // Add these properties for the actual filtering
+    public $appliedFromDate;
+    public $appliedToDate;
+
     public $filterCausals = null;
     public $filterMember = null;
 
+    // Add this property to track filtering state
+    public $isFiltering = false;
+
     public array $recordDatas = [];
     public array $labels = [];
 
@@ -41,10 +48,12 @@ class Record extends Component
 
     public function mount()
     {
-
         $this->fromDate = date("Y-m-d");
         $this->toDate = date("Y-m-d");
 
+        // Initialize applied dates to current date
+        $this->appliedFromDate = date("Y-m-d");
+        $this->appliedToDate = date("Y-m-d");
 
         $this->getCausals(\App\Models\Causal::select('id', 'name')->where('parent_id', null)->get(), 0);
 
@@ -53,6 +62,25 @@ class Record extends Component
         $this->payments = \App\Models\PaymentMethod::select('id', 'name', 'type')->where('enabled', true)->where('money', false)->get();
     }
 
+    // Add this method to handle manual filtering
+    public function applyFilters()
+    {
+        // Set filtering state to true
+        $this->isFiltering = true;
+
+        $this->appliedFromDate = $this->fromDate;
+        $this->appliedToDate = $this->toDate;
+
+        // Process the data
+        $this->render();
+
+        // Reset filtering state
+        $this->isFiltering = false;
+
+        // Emit event to update any JavaScript components if needed
+        $this->emit('filters-applied');
+    }
+
     public function getCausals($records, $indentation)
     {
         foreach ($records as $record) {
@@ -111,7 +139,6 @@ class Record extends Component
 
     public function render()
     {
-
         $month = 0;
         $year = 0;
 
@@ -119,10 +146,12 @@ class Record extends Component
         $this->totals = array();
 
         $exclude_from_records = \App\Models\Member::where('exclude_from_records', true)->pluck('id')->toArray();
+
+        // Use applied dates instead of current dates for filtering
         $datas = \App\Models\Record::with('member', 'supplier', 'payment_method')
             ->select('records.*', 'records_rows.*') // Ensure all columns are selected
             ->join('records_rows', 'records.id', '=', 'records_rows.record_id')
-            ->whereBetween('date', [$this->fromDate, $this->toDate])
+            ->whereBetween('date', [$this->appliedFromDate, $this->appliedToDate])
             ->where(function ($query) {
                 $query->where('type', 'OUT')
                     ->orWhere(function ($query) {
@@ -136,6 +165,7 @@ class Record extends Component
                         $subquery->whereNotIn('member_id', $exclude_from_records);
                     });
             });
+
         if ($this->filterCausals != null && sizeof($this->filterCausals) > 0) {
             $causals = array();
             foreach ($this->filterCausals as $z) {
@@ -159,10 +189,14 @@ class Record extends Component
             ->orderBy('records_rows.id', 'ASC') // Important to maintain row order
             ->get();
 
+        // Group data by date, type (commercial/non-commercial), payment method, and type (IN/OUT)
+        $groupedData = [];
+        $causalsCount = []; // Track how many different causals per group
+        $nominativi = []; // Track nominativi for each group
+
         foreach ($datas as $idx => $data) {
 
             $causalCheck = \App\Models\Causal::findOrFail($data->causal_id);
-
             $paymentCheck = $data->payment_method->money;
 
             if (!$paymentCheck && ($causalCheck->no_first == null || !$causalCheck->no_first)) {
@@ -174,35 +208,93 @@ class Record extends Component
                     $amount = $data->amount;
                 }
 
-                $prefix = '';
-                if (!$data->commercial)
-                    $prefix = $idx . "$";
+                // Determine the type (commercial or non-commercial)
+                $typeLabel = $data->commercial ? 'Commerciale' : 'Non Commerciale';
 
+                // Get nominativo
+                $nominativo = '';
+                if ($data->type == "IN") {
+                    if ($data->member) {
+                        $nominativo = $data->member->last_name . " " . $data->member->first_name;
+                    }
+                } else {
+                    if ($data->supplier) {
+                        $nominativo = $data->supplier->name;
+                    }
+                }
 
-                // aggiungere il nome * * *
-                $causal = $prefix . $data->date . "§" . $causalCheck->getTree() . "§" .
-                    ($data->type == "IN" ? ($data->member ? ($data->member->last_name . " " . $data->member->first_name) : "") :
-                        $data->supplier->name ?? "") . "§" . $data->note . "§" . ($data->deleted ? 'DELETED' : '') .
-                    "§" . $data->numero_linea;
-
-                if (!isset($this->records[$causal][$data->payment_method->name][$data->type])) {
-                    $this->records[$causal][$data->payment_method->name][$data->type] = 0;
+                // Create grouping key: date + type + payment_method + IN/OUT + nominativo
+                $groupKey = $data->date . '|' . $typeLabel . '|' . $data->payment_method->name . '|' . $data->type . '|' . $nominativo;
+
+                // Initialize group if not exists
+                if (!isset($groupedData[$groupKey])) {
+                    $groupedData[$groupKey] = [
+                        'date' => $data->date,
+                        'type_label' => $typeLabel,
+                        'payment_method' => $data->payment_method->name,
+                        'transaction_type' => $data->type,
+                        'nominativo' => $nominativo,
+                        'amount' => 0,
+                        'deleted' => false,
+                        'causals' => [],
+                        'notes' => []
+                    ];
+                    $causalsCount[$groupKey] = [];
+                    $nominativi[$groupKey] = $nominativo;
                 }
 
-                // Add to the records array
-                $this->records[$causal][$data->payment_method->name][$data->type] += $amount;
+                // Add amount to group
+                $groupedData[$groupKey]['amount'] += $amount;
+
+                // Track causals for this group
+                $causalsCount[$groupKey][$causalCheck->getTree()] = true;
 
-                // Initialize totals if needed
-                if (!isset($this->totals[$data->payment_method->name])) {
-                    $this->totals[$data->payment_method->name]["IN"] = 0;
-                    $this->totals[$data->payment_method->name]["OUT"] = 0;
+                // Collect notes
+                if (!empty($data->note)) {
+                    $groupedData[$groupKey]['notes'][] = $data->note;
                 }
 
-                // Update totals if not deleted
-                if (!$data->deleted)
-                    $this->totals[$data->payment_method->name][$data->type] += $amount; // $data->amount;//$this->records[$causal][$data->payment_method->name][$data->type];
+                // Track if any record in this group is deleted
+                if ($data->deleted) {
+                    $groupedData[$groupKey]['deleted'] = true;
+                }
+            }
+        }
+
+        // Convert grouped data to records format
+        foreach ($groupedData as $groupKey => $group) {
+            $causalsInGroup = array_keys($causalsCount[$groupKey]);
+
+            // Always show type in causale column
+            $causalDisplay = $group['type_label']; // Always Commerciale or Non Commerciale
+
+            // Determine detail display
+            if (count($causalsInGroup) > 1) {
+                $detailDisplay = 'Varie|' . implode('|', $causalsInGroup); // Store causals for popup
+            } else {
+                $detailDisplay = $causalsInGroup[0]; // Show single causal
+            }
+
+            // Create record key with nominativo
+            $recordKey = $group['date'] . "§" . $causalDisplay . "§" . $group['nominativo'] . "§" . $detailDisplay . "§" . ($group['deleted'] ? 'DELETED' : '') . "§";
+
+            // Initialize records structure
+            if (!isset($this->records[$recordKey][$group['payment_method']][$group['transaction_type']])) {
+                $this->records[$recordKey][$group['payment_method']][$group['transaction_type']] = 0;
+            }
+
+            // Add amount to records
+            $this->records[$recordKey][$group['payment_method']][$group['transaction_type']] += $group['amount'];
 
+            // Initialize totals if needed
+            if (!isset($this->totals[$group['payment_method']])) {
+                $this->totals[$group['payment_method']]["IN"] = 0;
+                $this->totals[$group['payment_method']]["OUT"] = 0;
             }
+
+            // Update totals if not deleted
+            if (!$group['deleted'])
+                $this->totals[$group['payment_method']][$group['transaction_type']] += $group['amount'];
         }
 
         return view('livewire.records');
@@ -210,7 +302,6 @@ class Record extends Component
 
     private function getLabels($fromDate, $toDate)
     {
-
         $begin = new DateTime($fromDate);
         $end = new DateTime($toDate);
 
@@ -259,6 +350,7 @@ class Record extends Component
 
         return $data;
     }
+
     public function export()
     {
         ini_set('memory_limit', '512M');
@@ -336,20 +428,23 @@ class Record extends Component
 
         foreach ($recordsArray as $recordsBatch) {
             foreach ($recordsBatch as $causal => $record) {
-                $check = strpos($causal, "$") ? explode("$", $causal)[1] : $causal;
+                $check = $causal; // No need to handle prefix anymore
 
                 $parts = explode("§", $check);
                 $d = $parts[0] ?? '';
                 $c = $parts[1] ?? '';
-                $j = $parts[2] ?? '';
-                $k = $parts[3] ?? '';
+                $j = $parts[2] ?? ''; // Nominativo
+                $det = $parts[3] ?? '';
                 $deleted = $parts[4] ?? '';
-                $numeroLinea = $parts[5] ?? '';
+
+                // Handle "Varie" case for export - show actual causals instead of "Varie"
+                $detailParts = explode('|', $det);
+                $exportDetail = count($detailParts) > 1 ? implode(', ', array_slice($detailParts, 1)) : $det;
 
                 $activeWorksheet->setCellValue('A' . $count, !empty($d) ? date("d/m/Y", strtotime($d)) : '');
                 $activeWorksheet->setCellValue('B' . $count, $c);
-                $activeWorksheet->setCellValue('C' . $count, $k);
-                $activeWorksheet->setCellValue('D' . $count, $j);
+                $activeWorksheet->setCellValue('C' . $count, $exportDetail); // Show all causals in export
+                $activeWorksheet->setCellValue('D' . $count, $j); // Nominativo
 
                 $stato = ($deleted === 'DELETED') ? 'ANNULLATA' : '';
                 $activeWorksheet->setCellValue('E' . $count, $stato);

public/css/style.css

@@ -16779,3 +16779,119 @@ table.tableHead thead {
   right: 60px;
 }
 /* END CSS Ferrari - Modifiche UI */
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.9);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    border-radius: 4px;
+}
+
+.loading-content {
+    text-align: center;
+    color: #0C6197;
+}
+
+.loading-content i {
+    margin-bottom: 15px;
+    color: #0C6197;
+}
+
+.loading-content p {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #10172A;
+}
+
+/* Disable pointer events on table during loading */
+.loading-overlay + .table {
+    pointer-events: none;
+    opacity: 0.6;
+}
+
+/* Loading button styles */
+button[disabled] {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+.btn--ui .fa-spinner {
+    margin-right: 5px;
+}
+
+/* Styles for "Varie" clickable links */
+.varie-link:hover {
+    color: #084c6b !important;
+    text-decoration: underline !important;
+}
+
+/* Modal customizations */
+.modal {
+    z-index: 9999 !important; /* Higher than select2 default z-index */
+}
+
+.modal-backdrop {
+    z-index: 9998 !important;
+    background-color: rgba(0, 0, 0, 0.6) !important; /* Darker backdrop */
+}
+
+.modal-content {
+    border-radius: 8px;
+    border: none;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    z-index: 10000 !important;
+}
+
+.modal-header {
+    background-color: #0C6197;
+    color: white;
+    border-bottom: none;
+    border-radius: 8px 8px 0 0;
+}
+
+.modal-header .btn-close {
+    filter: invert(1);
+}
+
+.modal-title {
+    font-weight: 600;
+}
+
+.list-group-item {
+    border-left: none;
+    border-right: none;
+    border-top: 1px solid #dee2e6;
+    padding: 12px 15px;
+}
+
+.list-group-item:first-child {
+    border-top: none;
+}
+
+.list-group-item:last-child {
+    border-bottom: none;
+}
+
+.select2-container {
+    z-index: 999 !important;
+}
+
+.select2-dropdown {
+    z-index: 999 !important;
+}
+
+body.modal-open {
+    overflow: hidden;
+}
+
+.modal-dialog {
+    z-index: 10001 !important;
+    margin: 1.75rem auto;
+}

resources/views/livewire/records.blade.php

@@ -8,143 +8,160 @@
 
     </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--
-                        @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="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 class="col-md-2">
-                    <div class="prima--nota_buttons ms-auto " style="float:right; margin-top:25px;">
-                        <button class="btn--ui lightGrey reset reset" style="margin-left:5px;color:#10172A;" onclick="reset()">RESET</button>
-                    </div>
-                </div>
+        <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 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;">
-                    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 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>
+        <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">
+    <section id="resume-table" class="scrollTable records-table" style="position: relative;">
 
-        <!--
-        <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)
+            @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>
-                        @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>
+                        <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(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>
+                            @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>
-                    @php
-                    $count++;
-                    @endphp
-                @endforeach
-            </tbody>
+                </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>
@@ -203,40 +220,32 @@
                 </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>
+        <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>
 
 
@@ -462,7 +471,7 @@
 
             setMaxWidth();
             setMaxHeight();
-            $( window ).bind( "resize", setMaxWidth ); //Remove this if it's not needed. It will react when window changes size.
+            $( window ).bind( "resize", setMaxWidth );
             $( window ).bind( "resize", setMaxHeight );
 
             $(".open-filter").click(function(){
@@ -473,17 +482,14 @@
         });
 
             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();
             };
@@ -492,15 +498,6 @@
                 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 (
@@ -548,8 +545,190 @@
                 $('.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

resources/views/livewire/records_out.blade.php

@@ -31,7 +31,7 @@
      wire:ignore.self>
         <div class="modal-dialog">
             <div class="modal-content">
-                <div class="modal-header">
+                <div class="modal-header" style="background-color: #0C6197!important;">
                     <h5 class="modal-title" id="importModalLabel">Importa fatture passive</h5>
                     <button type="button" class="btn-close" onclick="closeImportModal()" aria-label="Close"></button>
                 </div>