update production line with reference values

public/userarea/production_line_view.php

@@ -245,6 +245,9 @@ if (!empty($_GET['ajax'])) {
         <div class="record-card <?= $isInProduction || $isPaused ? 'in-production expanded' : 'programmed' ?>"
             data-id="<?= $r['id'] ?>"
             data-total-seconds="<?= $totalSeconds ?>"
+            data-kgsp="<?= htmlspecialchars($r['kg_sp']) ?>"
+            data-metri="<?= htmlspecialchars($r['metri']) ?>"
+
             style="--line-bg: <?= $lineColor ?>; --badge-bg: <?= $badgeColor ?>;">
 
             <!-- RIGA VISIBILE -->
@@ -273,6 +276,10 @@ if (!empty($_GET['ajax'])) {
                     <div class="timer-display" data-start="<?= $startTime ?>">
                         <span class="timer">00:00:00</span>
                     </div>
+                    <!-- Teorici invisibili per modale finale -->
+                    <span data-field="kg_sp" style="display:none;"><?= $r['kg_sp'] ?></span>
+                    <span data-field="metri" style="display:none;"><?= $r['metri'] ?></span>
+
                     <div class="action-buttons">
                         <?php if ($isInProduction): ?>
                             <button class="action-btn pause-btn" data-id="<?= $r['id'] ?>">PAUSA</button>
@@ -670,6 +677,58 @@ if (!empty($_GET['ajax'])) {
             /* grigio */
             color: #475569;
         }
+
+        /* Modale più grande e ottimizzata */
+        .modal-content.final-wide {
+            width: 95%;
+            max-width: 780px;
+        }
+
+        .final-flex {
+            display: flex;
+            gap: 2rem;
+            margin-top: 1.2rem;
+        }
+
+        .final-col {
+            flex: 1;
+        }
+
+        .teo-box {
+            background: #eef6ff;
+            padding: 1rem;
+            border-radius: 0.8rem;
+        }
+
+        .teo-row {
+            margin-bottom: 1rem;
+            font-size: 1.1rem;
+        }
+
+        .teo-row label {
+            font-weight: 600;
+            color: #1e3a8a;
+        }
+
+        .teo-row span {
+            font-weight: 700;
+            color: #0f172a;
+            font-size: 1.25rem;
+        }
+
+        .real-box label {
+            margin-top: 0.6rem;
+            font-weight: 600;
+        }
+
+        .input-big {
+            width: 100%;
+            padding: 0.9rem;
+            font-size: 1.25rem;
+            border-radius: 0.6rem;
+            border: 1px solid #cbd5e1;
+            margin-bottom: 1rem;
+        }
     </style>
 </head>
 
@@ -752,27 +811,48 @@ if (!empty($_GET['ajax'])) {
 
     <!-- Modal dati fine produzione -->
     <div id="finalDataModal" class="modal">
-        <div class="modal-content">
+        <div class="modal-content final-wide">
             <h3>Dati Fine Produzione</h3>
-            <p>Inserisci i dati finali prima di chiudere la produzione:</p>
+            <p>Confronta i valori teorici e inserisci quelli reali:</p>
 
-            <div style="display:flex;flex-direction:column;gap:0.6rem;margin-top:1rem;text-align:left;">
+            <div class="final-flex">
-                <label><strong>Kg prodotti:</strong>
+
+                <!-- COLONNA SINISTRA (TEORICI) -->
+                <div class="final-col teo-box">
+                    <h4>Teorici</h4>
+
+                    <div class="teo-row">
+                        <label><strong>Kg teorici:</strong></label>
+                        <span id="teoKg">0.00</span>
+                    </div>
+
+                    <div class="teo-row">
+                        <label><strong>Metri teorici:</strong></label>
+                        <span id="teoMt">0.00</span>
+                    </div>
+
+                </div>
+
+                <!-- COLONNA DESTRA (REALi DA INSERIRE) -->
+                <div class="final-col real-box">
+                    <h4>Reali</h4>
+
+                    <label><strong>Kg prodotti:</strong></label>
                     <input type="number" id="kgprod" step="0.01" min="0" placeholder="0.00"
-                        style="width:100%;padding:0.5rem;border-radius:0.5rem;border:1px solid #ccc;">
+                        class="input-big">
-                </label>
+
-                <label><strong>Metri prodotti:</strong>
+                    <label><strong>Metri prodotti:</strong></label>
                     <input type="number" id="mtprod" step="0.01" min="0" placeholder="0.00"
-                        style="width:100%;padding:0.5rem;border-radius:0.5rem;border:1px solid #ccc;">
+                        class="input-big">
-                </label>
+
-                <label><strong>Scarto (kg):</strong>
+                    <label><strong>Scarto (kg):</strong></label>
                     <input type="number" id="scarto" step="0.01" min="0" placeholder="0.00"
-                        style="width:100%;padding:0.5rem;border-radius:0.5rem;border:1px solid #ccc;">
+                        class="input-big">
-                </label>
+
-                <label><strong>Note operatore:</strong>
+                    <label><strong>Note operatore:</strong></label>
-                    <textarea id="finalNote" rows="3"
+                    <textarea id="finalNote" rows="3" class="input-big"></textarea>
-                        style="width:100%;padding:0.5rem;border-radius:0.5rem;border:1px solid #ccc;"></textarea>
+                </div>
-                </label>
+
             </div>
 
             <div class="modal-buttons" style="margin-top:1.5rem;">
@@ -781,6 +861,8 @@ if (!empty($_GET['ajax'])) {
             </div>
         </div>
     </div>
+    >
+
 
 
 
@@ -1017,9 +1099,21 @@ if (!empty($_GET['ajax'])) {
             // --- MODALE DATI FINE PRODUZIONE ---
             function openFinalDataModal(id, reason, note) {
                 $('#finalDataModal').addClass('active');
+
+                // Pulisci i campi reali
                 $('#kgprod, #mtprod, #scarto').val('');
                 $('#finalNote').val(note || '');
 
+                // Recupera i dati teorici del record
+                const card = $(`.record-card[data-id="${id}"]`);
+
+                const teoKg = card.find('[data-field="kg_sp"]').text() || "0.00";
+                const teoMt = card.find('[data-field="metri"]').text() || "0.00";
+
+                // Mostra teorici
+                $('#teoKg').text(teoKg);
+                $('#teoMt').text(teoMt);
+
                 $('#finalConfirm').off('click').on('click', function() {
                     const kg = parseFloat($('#kgprod').val()) || 0;
                     const mt = parseFloat($('#mtprod').val()) || 0;
@@ -1053,6 +1147,7 @@ if (!empty($_GET['ajax'])) {
             }
 
 
+
             // --- START PRODUZIONE ---
             function startProduction(id) {
                 $.post('', {