dettaglio causali

app/Http/Livewire/RecordOUT.php

@@ -1513,4 +1513,40 @@ class RecordOUT extends Component
 
         return $newVat->id;
     }
+
+public function viewData($id)
+{
+    Log::info("Visualizzazione dati per ID: " . $id);
+    try {
+        $record = \App\Models\Record::with(['supplier', 'payment_method', 'rows.causal'])->findOrFail($id);
+
+        if (!$record) {
+            $this->emit('flash-error', 'Movimento non trovato');
+            return;
+        }
+
+        $record->formatted_date = date("d/m/Y", strtotime($record->date));
+        $record->formatted_data_pagamento = $record->data_pagamento ? date("d/m/Y", strtotime($record->data_pagamento)) : 'Non impostata';
+        $record->supplier_name = $record->supplier ? $record->supplier->name : 'N/A';
+        $record->payment_method_name = $record->payment_method ? $record->payment_method->name : 'N/A';
+        $record->formatted_amount = formatPrice($record->amount);
+        $record->payment_status = $record->is_paid ? 'Pagato' : 'Da Pagare';
+
+        foreach ($record->rows as $row) {
+            $row->causal_name = $row->causal ? $row->causal->getTree() : 'N/A';
+            $row->formatted_imponibile = $row->imponibile ? formatPrice($row->imponibile) : 'N/A';
+            $row->iva = $row->aliquota_iva ? formatPrice($row->aliquota_iva) : 'N/A';
+            $row->formatted_imposta = $row->imposta ? formatPrice($row->imposta) : 'N/A';
+            $row->formatted_amount = formatPrice($row->amount);
+        }
+
+        Log::info("Emitting show-record-details event");
+        $this->dispatchBrowserEvent('show-record-details', ['record' => $record]);
+
+    } catch (\Exception $e) {
+        Log::error("Errore nel caricamento dei dettagli: " . $e->getMessage());
+        $this->emit('flash-error', 'Errore nel caricamento dei dettagli: ' . $e->getMessage());
+    }
+}
+
 }

resources/views/livewire/records_out.blade.php

@@ -551,6 +551,77 @@
             </div>
         </div>
     </div>
+
+    <div class="modal fade" id="recordDetailsModal" tabindex="-1" aria-labelledby="recordDetailsModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="recordDetailsModalLabel">Dettaglio uscita</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="row mb-4">
+                        <div class="col-md-6">
+                            <h6 class="primary">Informazioni generali</h6>
+                            <table class="table table-sm table-borderless">
+                                <tr>
+                                    <th>Data:</th>
+                                    <td id="recordDate"></td>
+                                </tr>
+                                <tr>
+                                    <th>Data pagamento:</th>
+                                    <td id="recordPaymentDate"></td>
+                                </tr>
+                                <tr>
+                                    <th>Fornitore:</th>
+                                    <td id="recordSupplier"></td>
+                                </tr>
+                                <tr>
+                                    <th>Metodo di Pagamento:</th>
+                                    <td id="recordPaymentMethod"></td>
+                                </tr>
+                            </table>
+                        </div>
+                        <div class="col-md-6">
+                            <h6 class="primary">Stato e Importo</h6>
+                            <table class="table table-sm table-borderless">
+                                <tr>
+                                    <th>Importo totale:</th>
+                                    <td id="recordTotalAmount" class="primary fw-bold"></td>
+                                </tr>
+                                <tr>
+                                    <th>Stato pagamento:</th>
+                                    <td><span id="recordPaymentStatus" class="badge"></span></td>
+                                </tr>
+                            </table>
+                        </div>
+                    </div>
+
+                    <h6 class="primary">Dettaglio causali</h6>
+                    <div class="table-responsive">
+                        <table class="table table-striped table-hover">
+                            <thead>
+                                <tr>
+                                    <th scope="col">N.</th>
+                                    <th scope="col">Descrizione</th>
+                                    <th scope="col">Imponibile</th>
+                                    <th scope="col">IVA</th>
+                                    <th scope="col">Imposta</th>
+                                    <th scope="col">Totale</th>
+                                </tr>
+                            </thead>
+                            <tbody id="recordRowsContainer">
+                                <!-- Rows will be inserted here dynamically -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn--ui lightGrey" data-bs-dismiss="modal">Chiudi</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 @push('scripts')
     <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@@ -791,6 +862,11 @@
             @this.edit(id);
         }
 
+        function viewData(id)
+        {
+            @this.view(id);
+        }
+
         function deleteData(id) {
             if (confirm('Sei sicuro?'))
                 @this.delete(id).then(() => {
@@ -901,6 +977,7 @@
                                 return "";
                             const j = data.split("|");
                             var ret = '<button type="button" class="btn" onclick="editData(' + j[0] + ')" data-bs-toggle="popover"  data-bs-trigger="hover focus" data-bs-placement="bottom" data-bs-content="Modifica"><i class="fa-regular fa-pen-to-square"></i></button>&nbsp;';
+                            ret += '<button type="button" class="btn" onclick="viewData(' + j[0] + ')" data-bs-toggle="popover"  data-bs-trigger="hover focus" data-bs-placement="bottom" data-bs-content="Info"><i class="fa-solid fa-info"></i></button>&nbsp;';
                             ret += '<button type="button" class="btn" onclick="deleteData(' + j[0] + ')" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-placement="bottom" data-bs-content="Elimina"><i class="fa-regular fa-trash-can"></i></button>';
                             return ret;
                         }
@@ -1290,7 +1367,171 @@
         });
     });
 
+    document.addEventListener('DOMContentLoaded', function() {
+        console.log('DOMContentLoaded event fired, setting up record details modal event listener');
+
+        const recordDetailsModal = document.getElementById('recordDetailsModal');
+        if (recordDetailsModal) {
+            recordDetailsModal.addEventListener('hidden.bs.modal', function() {
+                console.log('Record details modal hidden, reloading page...');
+                setTimeout(function() {
+                    window.location.reload();
+                }, 100);
+            });
+            console.log('Added hidden.bs.modal event listener to record details modal');
+        } else {
+            console.error('Record details modal not found in DOM');
+        }
+
+        window.addEventListener('show-record-details', function(event) {
+            console.log('show-record-details browser event received', event.detail);
+            showRecordDetailsModal(event.detail.record);
+        });
+
+        function showRecordDetailsModal(record) {
+            console.log('showRecordDetailsModal function called with record', record);
+
+            const modalElement = document.getElementById('recordDetailsModal');
+            if (!modalElement) {
+                console.error('Modal element not found in the DOM');
+                return;
+            }
+
+            try {
+                let recordDetailsModal = new bootstrap.Modal(modalElement);
+
+                document.getElementById('recordDate').textContent = record.formatted_date || 'N/A';
+                document.getElementById('recordPaymentDate').textContent = record.formatted_data_pagamento || 'N/A';
+                document.getElementById('recordSupplier').textContent = record.supplier_name || 'N/A';
+                document.getElementById('recordPaymentMethod').textContent = record.payment_method_name || 'N/A';
+                document.getElementById('recordTotalAmount').textContent = record.formatted_amount || 'N/A';
 
+                const paymentStatusElement = document.getElementById('recordPaymentStatus');
+                if (paymentStatusElement) {
+                    paymentStatusElement.textContent = record.payment_status || 'N/A';
+                    paymentStatusElement.className = 'badge ' + (record.is_paid ? 'bg-success' : 'bg-warning');
+                    console.log('Payment status set to', record.payment_status);
+                }
+
+                const commercialTypeElement = document.getElementById('recordCommercialType');
+                if (commercialTypeElement) {
+                    commercialTypeElement.textContent = record.commercial_type || 'N/A';
+                    console.log('Commercial type set to', record.commercial_type);
+                }
+
+                const editButton = document.getElementById('btnEditRecord');
+                if (editButton) {
+                    editButton.onclick = function() {
+                        recordDetailsModal.hide();
+                        Livewire.first().edit(record.id);
+                        console.log('Edit button clicked for record', record.id);
+                    };
+                }
+
+                const rowsContainer = document.getElementById('recordRowsContainer');
+                if (rowsContainer) {
+                    rowsContainer.innerHTML = ''; // Clear existing rows
+
+                    if (record.rows && record.rows.length > 0) {
+                        record.rows.forEach(function(row, index) {
+                            const tr = document.createElement('tr');
+
+                            const tdNumber = document.createElement('td');
+                            tdNumber.textContent = (index + 1);
+                            tr.appendChild(tdNumber);
+
+                            const tdDescrizione = document.createElement('td');
+                            if (row.note && row.note.trim() !== '') {
+                                tdDescrizione.textContent = row.note;
+                            } else {
+                                tdDescrizione.textContent = row.causal_name || 'N/A';
+                            }
+                            tr.appendChild(tdDescrizione);
+
+                            const tdImponibile = document.createElement('td');
+                            tdImponibile.textContent = row.formatted_imponibile || 'N/A';
+                            tr.appendChild(tdImponibile);
+
+                            const tdIva = document.createElement('td');
+                            if (row.aliquota_iva) {
+                                tdIva.textContent = row.aliquota_iva + '%';
+                            } else {
+                                tdIva.textContent = '-';
+                            }
+                            tr.appendChild(tdIva);
+
+                            const tdImposta = document.createElement('td');
+                            tdImposta.textContent = row.formatted_imposta || 'N/A';
+                            tr.appendChild(tdImposta);
+
+                            const tdAmount = document.createElement('td');
+                            tdAmount.textContent = row.formatted_amount || 'N/A';
+                            tdAmount.classList.add('fw-bold');
+                            tr.appendChild(tdAmount);
+
+                            rowsContainer.appendChild(tr);
+                        });
+                    } else {
+                        const tr = document.createElement('tr');
+                        const td = document.createElement('td');
+                        td.setAttribute('colspan', '5');
+                        td.textContent = 'Nessuna riga disponibile';
+                        td.classList.add('text-center');
+                        tr.appendChild(td);
+                        rowsContainer.appendChild(tr);
+                    }
+                } else {
+                    console.error('Record rows container not found');
+                }
+
+                console.log('Showing modal');
+                recordDetailsModal.show();
+                console.log('Modal shown successfully');
+
+            } catch (error) {
+                console.error('Error displaying modal:', error);
+            }
+        }
+    });
+
+    function viewData(id) {
+        console.log('viewData function called with ID:', id);
+        Livewire.first().viewData(id);
+            setTimeout(function() {
+            const modalElement = document.getElementById('recordDetailsModal');
+            if (modalElement) {
+                const modal = new bootstrap.Modal(modalElement);
+                modal.show();
+                console.log('Modal shown using setTimeout approach');
+                const closeButton = modalElement.querySelector('.btn-close');
+                const closeButtonFooter = modalElement.querySelector('.modal-footer .btn--ui.lightGrey');
+                if (closeButton) {
+                    closeButton.addEventListener('click', function() {
+                        console.log('Close button clicked, reloading page...');
+                        setTimeout(function() {
+                            window.location.reload();
+                        }, 100);
+                    });
+                }
+                if (closeButtonFooter) {
+                    closeButtonFooter.addEventListener('click', function() {
+                        console.log('Footer close button clicked, reloading page...');
+                        setTimeout(function() {
+                            window.location.reload();
+                        }, 100);
+                    });
+                }
+                modalElement.addEventListener('hidden.bs.modal', function() {
+                    console.log('Modal hidden event triggered, reloading page...');
+                    setTimeout(function() {
+                        window.location.reload();
+                    }, 100);
+                });
+            } else {
+                console.error('Modal element not found!');
+            }
+        }, 300);
+    }
     </script>
 
 @endpush