added collage, fixed parts marker color, added ri number

added export to lims button
fixed dropdown selection
2025-09-04 15:01:03 +02:00 · 2025-08-29 15:36:55 +02:00 · 2025-08-28 10:25:12 +02:00 · 2025-08-28 09:36:16 +02:00 · 2025-08-27 20:21:38 +02:00 · 2025-08-27 12:16:41 +02:00
14 changed files with 23977 additions and 292 deletions
@@ -0,0 +1,36 @@
+*   Trying 93.43.5.102:443...
+* Connected to 93.43.5.102 (93.43.5.102) port 443
+* ALPN: curl offers h2,http/1.1
+* SSL connection using TLSv1.2 / ECDHE-RSA-AES256-GCM-SHA384
+* ALPN: server accepted h2
+* Server certificate:
+*  subject: C=FR; ST=Île-de-France; O=Bureau Veritas; CN=bvcpsitaly-elims.it
+*  start date: Feb 17 00:00:00 2025 GMT
+*  expire date: Feb 17 23:59:59 2026 GMT
+*  issuer: C=US; O=Corporation Service Company; CN=Corporation Service Company RSA OV SSL CA
+*  SSL certificate verify result: unable to get local issuer certificate (20), continuing anyway.
+* using HTTP/2
+* [HTTP/2] [1] OPENED stream for https://93.43.5.102/limsapi/api/authentication/authenticate
+* [HTTP/2] [1] [:method: POST]
+* [HTTP/2] [1] [:scheme: https]
+* [HTTP/2] [1] [:authority: 93.43.5.102]
+* [HTTP/2] [1] [:path: /limsapi/api/authentication/authenticate]
+* [HTTP/2] [1] [content-type: application/json]
+* [HTTP/2] [1] [accept: application/json]
+* [HTTP/2] [1] [content-length: 51]
+> POST /limsapi/api/authentication/authenticate HTTP/2
+Host: 93.43.5.102
+Content-Type: application/json
+Accept: application/json
+Content-Length: 51
+
+< HTTP/2 200 
+< cache-control: max-age=0
+< content-type: application/json; charset=utf-8
+< server: Microsoft-IIS/10.0
+< strict-transport-security: max-age=2592000
+< x-powered-by: ASP.NET
+< x-content-type-options: nosniff
+< date: Thu, 04 Sep 2025 12:59:20 GMT
+< 
+* Connection #0 to host 93.43.5.102 left intact
@@ -0,0 +1,35 @@
+*   Trying 93.43.5.102:443...
+* Connected to 93.43.5.102 (93.43.5.102) port 443
+* ALPN: curl offers h2,http/1.1
+* SSL connection using TLSv1.2 / ECDHE-RSA-AES256-GCM-SHA384
+* ALPN: server accepted h2
+* Server certificate:
+*  subject: C=FR; ST=Île-de-France; O=Bureau Veritas; CN=bvcpsitaly-elims.it
+*  start date: Feb 17 00:00:00 2025 GMT
+*  expire date: Feb 17 23:59:59 2026 GMT
+*  issuer: C=US; O=Corporation Service Company; CN=Corporation Service Company RSA OV SSL CA
+*  SSL certificate verify result: unable to get local issuer certificate (20), continuing anyway.
+* using HTTP/2
+* [HTTP/2] [1] OPENED stream for https://93.43.5.102/limsapi/api/odata/CustomField(1083)?$expand=CustomFieldsValues
+* [HTTP/2] [1] [:method: GET]
+* [HTTP/2] [1] [:scheme: https]
+* [HTTP/2] [1] [:authority: 93.43.5.102]
+* [HTTP/2] [1] [:path: /limsapi/api/odata/CustomField(1083)?$expand=CustomFieldsValues]
+* [HTTP/2] [1] [authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1Njk5Nzk2MCwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.zHug3m3GFz-uMMbRXi70DlHNfw0Islrxyy5vdJ7RKtA]
+* [HTTP/2] [1] [accept: application/json]
+> GET /limsapi/api/odata/CustomField(1083)?$expand=CustomFieldsValues HTTP/2
+Host: 93.43.5.102
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1Njk5Nzk2MCwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.zHug3m3GFz-uMMbRXi70DlHNfw0Islrxyy5vdJ7RKtA
+Accept: application/json
+
+< HTTP/2 200 
+< cache-control: max-age=0
+< content-type: application/json; odata.metadata=minimal; odata.streaming=true; charset=utf-8
+< server: Microsoft-IIS/10.0
+< strict-transport-security: max-age=2592000
+< odata-version: 4.0
+< x-powered-by: ASP.NET
+< x-content-type-options: nosniff
+< date: Thu, 04 Sep 2025 12:59:23 GMT
+< 
+* Connection #0 to host 93.43.5.102 left intact
@@ -0,0 +1,64 @@
+<?php
+// Enable errors for debugging
+ini_set('display_errors', 1);
+ini_set('display_startup_errors', 1);
+error_reporting(E_ALL);
+ini_set('log_errors', 1);
+ini_set('error_log', __DIR__ . '/delete_record_debug.log');
+
+// Log iniziale
+error_log("Inizio cancellazione record alle " . date('Y-m-d H:i:s'));
+
+// Includi il file di configurazione del database
+include('include/headscript.php');
+
+// Ricevi l'ID dalla richiesta POST
+$input = json_decode(file_get_contents('php://input'), true);
+$iddatadb = isset($input['id']) ? intval($input['id']) : 0;
+
+if ($iddatadb <= 0) {
+    http_response_code(400);
+    echo json_encode(['success' => false, 'message' => 'ID non valido']);
+    exit;
+}
+
+// Connessione al database
+try {
+    $db = DBHandlerSelect::getInstance();
+    $pdo = $db->getConnection();
+} catch (Exception $e) {
+    http_response_code(500);
+    echo json_encode(['success' => false, 'message' => 'Errore di connessione al database: ' . $e->getMessage()]);
+    error_log("Errore di connessione al database: " . $e->getMessage());
+    exit;
+}
+
+// Inizia una transazione
+$pdo->beginTransaction();
+
+try {
+    // Elimina i dettagli associati dal tavolo import_data_details
+    $stmt = $pdo->prepare("DELETE FROM import_data_details WHERE id = ?");
+    $stmt->execute([$iddatadb]);
+
+    // Elimina il record principale dal tavolo datadb
+    $stmt = $pdo->prepare("DELETE FROM datadb WHERE iddatadb = ?");
+    $stmt->execute([$iddatadb]);
+
+    // Verifica se il record è stato eliminato
+    if ($stmt->rowCount() > 0) {
+        $pdo->commit();
+        echo json_encode(['success' => true, 'message' => 'Record eliminato con successo']);
+        error_log("Record con iddatadb=$iddatadb eliminato con successo");
+    } else {
+        $pdo->rollBack();
+        http_response_code(404);
+        echo json_encode(['success' => false, 'message' => 'Record non trovato']);
+        error_log("Record con iddatadb=$iddatadb non trovato");
+    }
+} catch (Exception $e) {
+    $pdo->rollBack();
+    http_response_code(500);
+    echo json_encode(['success' => false, 'message' => 'Errore durante la cancellazione: ' . $e->getMessage()]);
+    error_log("Errore durante la cancellazione del record con iddatadb=$iddatadb: " . $e->getMessage());
+}
@@ -383,9 +383,14 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
            border: none;
            border-radius: 5px;
            cursor: pointer;
-            width: 50px;
+            width: 35px;
            box-sizing: border-box;
        }
+
+        .flash-success {
+            background-color: #d4edda !important;
+            transition: background-color 0.3s ease;
+        }
    </style>
    <title>Edit Imported Data - <?= htmlspecialchars($titlewebsite, ENT_QUOTES, 'UTF-8'); ?></title>
 </head>
@@ -428,7 +433,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                                            $inputClass = $mainFieldMapping['is_manual'] ? 'manual-input' : 'auto-input';
                                            if ($mainFieldMapping['is_required']) $inputClass .= ' required-input';
                                            if ($mainFieldMapping['data_type'] === 'SceltaMultipla') {
-                                                echo "<select class='custom-field dropdown-select $inputClass' data-column='main_field' data-field-id='{$mainFieldMapping['field_id']}' " . ($mainFieldMapping['is_required'] ? 'required' : '') . ">";
+                                                echo "<select class='custom-field dropdown-select $inputClass' data-column='main_field' data-field-id='{$mainFieldMapping['field_id']}' data-selected-value='" . htmlspecialchars($fieldValue) . "' " . ($mainFieldMapping['is_required'] ? 'required' : '') . ">";
                                                echo "<option value=''>Seleziona...</option>";
                                                echo "</select>";
                                                echo "<button type='button' class='propagate-btn' data-column='main_field'><i class='fas fa-arrow-down'></i></button>";
@@ -455,7 +460,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                                            if ($mapping['is_required']) $inputClass .= ' required-input';
                                            if ($mapping['data_type'] === 'SceltaMultipla') {
                                                echo "<div class='grid-cell' style='flex: 0 0 150px;'>";
-                                                echo "<select class='custom-field dropdown-select $inputClass' data-column='auto_$autoIndex' data-field-id='{$mapping['field_id']}' " . ($mapping['is_required'] ? 'required' : '') . ">";
+                                                echo "<select class='custom-field dropdown-select $inputClass' data-column='auto_$autoIndex' data-field-id='{$mapping['field_id']}' data-selected-value='" . htmlspecialchars($fieldValue) . "' " . ($mapping['is_required'] ? 'required' : '') . ">";
                                                echo "<option value=''>Seleziona...</option>";
                                                echo "</select>";
                                                echo "<button type='button' class='propagate-btn' data-column='auto_$autoIndex'><i class='fas fa-arrow-down'></i></button>";
@@ -478,7 +483,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                                            if ($mapping['is_required']) $inputClass .= ' required-input';
                                            echo "<div class='grid-cell' style='flex: 0 0 150px;'>";
                                            if ($mapping['data_type'] === 'SceltaMultipla') {
-                                                echo "<select class='custom-field dropdown-select $inputClass' data-column='manual_$manualIndex' data-field-id='{$mapping['field_id']}' " . ($mapping['is_required'] ? 'required' : '') . ">";
+                                                echo "<select class='custom-field dropdown-select $inputClass' data-column='manual_$manualIndex' data-field-id='{$mapping['field_id']}' data-selected-value='" . htmlspecialchars($fieldValue) . "' " . ($mapping['is_required'] ? 'required' : '') . ">";
                                                echo "<option value=''>Seleziona...</option>";
                                                echo "</select>";
                                            } elseif ($mapping['data_type'] === 'DATE') {
@@ -542,6 +547,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                                <?php foreach ($importedData as $index => $row): ?>
                                    <div class="grid-row" data-id="<?= $row['iddatadb'] ?>">
                                        <div class="grid-cell button-cell" style="flex: 0 0 210px; position: relative;">
+                                            <button type="button" class="export-lims-btn action-btn" data-row="<?= $index ?>" data-iddatadb="<?= $row['iddatadb'] ?>" title="Export to LIMS" style="background: #eb0b0bff; color: white; border: none; border-radius: 5px; cursor: pointer;"><i class="fas fa-upload"></i></button>
                                            <button type="button" class="save-btn action-btn" data-row="<?= $index ?>" title="Save" style="background: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;"><i class="fas fa-save"></i></button>
                                            <button type="button" class="photos-btn action-btn" data-row="<?= $index ?>" data-iddatadb="<?= $row['iddatadb'] ?>" title="Photos" style="background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;"><i class="fas fa-camera"></i></button>
                                            <button type="button" class="parts-btn action-btn" data-row="<?= $index ?>" data-iddatadb="<?= $row['iddatadb'] ?>" title="Parts" style="background: #ffc107; color: white; border: none; border-radius: 5px; cursor: pointer;"><i class="fas fa-puzzle-piece"></i></button>
@@ -560,7 +566,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                                            ?>
                                            <div class="grid-cell editable-cell <?= $requiredClass ?>" data-col="main_field" data-row="<?= $index ?>" data-index="1" style="flex: 0 0 150px;">
                                                <?php if ($mainFieldMapping['data_type'] === 'SceltaMultipla'): ?>
-                                                    <select name="rows[<?= $index ?>][details][<?= $mainFieldMapping['id'] ?>][field_value]" class="cell-input dropdown-select <?= $inputClass ?>" data-mapping-id="<?= $mainFieldMapping['id'] ?>" data-field-id="<?= $mainFieldMapping['field_id'] ?>" <?= $mainFieldMapping['is_required'] ? 'required' : '' ?>>
+                                                    <select name="rows[<?= $index ?>][details][<?= $mainFieldMapping['id'] ?>][field_value]" class="cell-input dropdown-select <?= $inputClass ?>" data-mapping-id="<?= $mainFieldMapping['id'] ?>" data-field-id="<?= $mainFieldMapping['field_id'] ?>" data-selected-value="<?= htmlspecialchars($fieldValue) ?>" <?= $mainFieldMapping['is_required'] ? 'required' : '' ?>>
                                                        <option value="">Seleziona...</option>
                                                    </select>
                                                <?php elseif ($mainFieldMapping['data_type'] === 'DATE'): ?>
@@ -592,7 +598,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                                                if ($mapping['is_required']) $inputClass .= ' required-input';
                                                echo "<div class='grid-cell editable-cell $requiredClass' data-col='auto_$autoIndex' data-row='$index' data-index='$cellIndex' style='flex: 0 0 150px;'>";
                                                if ($mapping['data_type'] === 'SceltaMultipla') {
-                                                    echo "<select name='rows[$index][details][{$mapping['id']}][field_value]' class='cell-input dropdown-select $inputClass' data-mapping-id='{$mapping['id']}' data-field-id='{$mapping['field_id']}' " . ($mapping['is_required'] ? 'required' : '') . ">";
+                                                    echo "<select name='rows[$index][details][{$mapping['id']}][field_value]' class='cell-input dropdown-select $inputClass' data-mapping-id='{$mapping['id']}' data-field-id='{$mapping['field_id']}' data-selected-value='" . htmlspecialchars($fieldValue) . "' " . ($mapping['is_required'] ? 'required' : '') . ">";
                                                    echo "<option value=''>Seleziona...</option>";
                                                    echo "</select>";
                                                } elseif ($mapping['data_type'] === 'DATE') {
@@ -621,7 +627,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                                                if ($mapping['is_required']) $inputClass .= ' required-input';
                                                echo "<div class='grid-cell editable-cell $requiredClass' data-col='manual_$manualIndex' data-row='$index' data-index='$cellIndex' style='flex: 0 0 150px;'>";
                                                if ($mapping['data_type'] === 'SceltaMultipla') {
-                                                    echo "<select name='rows[$index][details][{$mapping['id']}][field_value]' class='cell-input dropdown-select $inputClass' data-mapping-id='{$mapping['id']}' data-field-id='{$mapping['field_id']}' " . ($mapping['is_required'] ? 'required' : '') . ">";
+                                                    echo "<select name='rows[$index][details][{$mapping['id']}][field_value]' class='cell-input dropdown-select $inputClass' data-mapping-id='{$mapping['id']}' data-field-id='{$mapping['field_id']}' data-selected-value='" . htmlspecialchars($fieldValue) . "' " . ($mapping['is_required'] ? 'required' : '') . ">";
                                                    echo "<option value=''>Seleziona...</option>";
                                                    echo "</select>";
                                                } elseif ($mapping['data_type'] === 'DATE') {
@@ -686,6 +692,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
    </div>
    <?php include('jsinclude.php'); ?>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
    <script src="photos.js"></script>
    <script src="parts.js"></script>
    <script src="tracking.js"></script>
@@ -718,35 +725,6 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
        });
    </script>

-    <script>
-        document.addEventListener("DOMContentLoaded", function() {
-            const inputs = document.querySelectorAll('.cell-input');
-            inputs.forEach(input => {
-                input.addEventListener('focus', function() {
-                    this.closest('.grid-cell').classList.add('expanded');
-                });
-                input.addEventListener('blur', function() {
-                    this.closest('.grid-cell').classList.remove('expanded');
-                });
-            });
-
-            const saveButtons = document.querySelectorAll('.save-btn');
-            saveButtons.forEach(button => {
-                btn.addEventListener('click', function() {
-                    hasChanges = false;
-                    unsavedDiv.style.display = "none";
-                });
-            });
-
-            window.addEventListener("beforeunload", function(e) {
-                if (hasChanges) {
-                    e.preventDefault();
-                    e.returnValue = "";
-                }
-            });
-        });
-    </script>
-
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const inputs = document.querySelectorAll('.cell-input');
@@ -817,9 +795,11 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                            if (cells.length > targetTopIndex) {
                                const targetInput = cells[targetTopIndex].querySelector('input, select');
                                if (targetInput) {
-                                    if (targetInput.type === 'date') targetInput.value = value;
-                                    else if (targetInput.tagName === 'SELECT') targetInput.value = value;
-                                    else targetInput.value = value;
+                                    targetInput.value = value;
+                                    if (targetInput.tagName === 'SELECT') {
+                                        const event = new Event('change');
+                                        targetInput.dispatchEvent(event);
+                                    }
                                }
                            }
                        });
@@ -899,6 +879,9 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {

                dropdowns.forEach(dropdown => {
                    const fieldId = dropdown.getAttribute('data-field-id');
+                    const selectedValue = dropdown.getAttribute('data-selected-value') || '';
+                    const currentValue = dropdown.value; // Preserva il valore corrente
+
                    if (!fieldId || !dropdownData[fieldId]) {
                        dropdown.innerHTML = '<option value="">Errore nel caricamento</option>';
                        return;
@@ -909,17 +892,64 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                        const option = document.createElement('option');
                        option.value = value.IdCustomFieldsValue;
                        option.textContent = value.Valore;
-                        if (dropdown.value === option.value) option.selected = true;
+                        // Usa il valore corrente se disponibile, altrimenti usa data-selected-value
+                        if (currentValue && currentValue === String(value.IdCustomFieldsValue)) {
+                            option.selected = true;
+                        } else if (!currentValue && selectedValue === String(value.IdCustomFieldsValue)) {
+                            option.selected = true;
+                        }
                        dropdown.appendChild(option);
                    });
+
+                    if ((currentValue || selectedValue) && dropdown.value !== (currentValue || selectedValue)) {
+                        dropdown.value = '';
+                        console.warn(`Valore ${currentValue || selectedValue} non trovato per fieldId ${fieldId}`);
+                    }
                });
            }

+            // Chiama populateDropdowns solo al caricamento iniziale
            populateDropdowns();

            document.querySelectorAll('.save-btn').forEach(btn => {
                btn.addEventListener('click', function() {
-                    setTimeout(populateDropdowns, 100);
+                    const rowIndex = this.getAttribute('data-row');
+                    const row = this.closest('.grid-row');
+                    const iddatadb = row.getAttribute('data-id');
+                    const formData = new FormData();
+
+                    const inputs = row.querySelectorAll(`input[name^="rows[${rowIndex}]"], select[name^="rows[${rowIndex}]"]`);
+                    inputs.forEach(input => {
+                        const name = input.name.replace(`rows[${rowIndex}]`, '').replace(/\[|\]/g, '');
+                        formData.append(name, input.value);
+                        // Aggiorna data-selected-value per i dropdown
+                        if (input.tagName === 'SELECT' && input.classList.contains('dropdown-select')) {
+                            input.setAttribute('data-selected-value', input.value);
+                        }
+                    });
+                    formData.append('iddatadb', iddatadb);
+                    formData.append('mapping', JSON.stringify(<?= json_encode($allMappings) ?>));
+
+                    fetch('save_edited_row.php', {
+                            method: 'POST',
+                            body: formData
+                        })
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.success) {
+                                const cells = row.querySelectorAll('.grid-cell');
+                                cells.forEach(cell => {
+                                    cell.classList.remove('flash-success');
+                                    void cell.offsetWidth;
+                                    cell.classList.add('flash-success');
+                                });
+                                setTimeout(() => cells.forEach(cell => cell.classList.remove('flash-success')), 500);
+                                alert('Salvataggio avvenuto con successo!');
+                            } else {
+                                alert('Errore durante il salvataggio: ' + data.message);
+                            }
+                        })
+                        .catch(error => alert('Errore durante il salvataggio: ' + error.message));
                });
            });

@@ -944,6 +974,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                                if (targetInput) {
                                    targetInput.value = value;
                                    if (targetInput.tagName === 'SELECT') {
+                                        targetInput.setAttribute('data-selected-value', value); // Aggiorna anche qui
                                        const event = new Event('change');
                                        targetInput.dispatchEvent(event);
                                    }
@@ -126,7 +126,11 @@ error_log("Loaded template: " . print_r($template, true));
        <div class="page-wrapper">
            <div class="page-content">
                <?php include('top_stat_widget.php'); ?>
-
+                <div class="mb-3 text">
+                    <a href="historical_trf.php?id=<?= $id ?>&status=i" class="btn btn-warning me-2">Imported (i)</a>
+                    <a href="historical_trf.php?id=<?= $id ?>&status=P" class="btn btn-primary me-2">In Progress (P)</a>
+                    <a href="historical_trf.php?id=<?= $id ?>&status=l" class="btn btn-success">To LIMS (l)</a>
+                </div>
                <div class="card radius-10">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
@@ -136,6 +140,7 @@ error_log("Loaded template: " . print_r($template, true));
                            </div>
                        </div>
                    </div>
+
                    <div class="card-body">
                        <!-- Form per caricare il file -->
                        <form id="uploadForm" enctype="multipart/form-data" class="mb-4">
@@ -25,6 +25,7 @@
                    <li> <a href="import_dashboard.php"><i class='bx bx-radio-circle'></i>XLS Import</a>
                    </li>

+
                </ul>
            </li>
            <li>
@@ -0,0 +1,69 @@
+<?php
+header('Content-Type: application/json');
+
+include('include/headscript.php');
+
+// Parametri dalla richiesta AJAX
+$template_id = intval($_GET['template_id'] ?? 0);
+$status = $_GET['status'] ?? 'i';
+$offset = intval($_GET['offset'] ?? 0);
+$limit = intval($_GET['limit'] ?? 20);
+
+if (!$template_id || !in_array($status, ['i', 'P', 'l'])) {
+    error_log("Errore in load_more_rows.php: Parametri non validi - template_id: $template_id, status: $status");
+    echo json_encode(['success' => false, 'message' => 'Parametri non validi']);
+    exit;
+}
+
+// Connessione al database
+$db = DBHandlerSelect::getInstance();
+$pdo = $db->getConnection();
+
+// Recupera i dati
+try {
+    $stmt = $pdo->prepare("
+        SELECT d.*, CONCAT(u.first_name, ' ', u.last_name) AS user_name
+        FROM datadb d
+        LEFT JOIN auth_users u ON d.user_id = u.id
+        WHERE d.templateid = ? AND d.status = ?
+        LIMIT ? OFFSET ?
+    ");
+    $stmt->execute([$template_id, $status, $limit, $offset]);
+    $importedData = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+    // Recupera i dettagli manuali
+    $insertedIds = array_column($importedData, 'iddatadb');
+    $manualDetails = [];
+    if (!empty($insertedIds)) {
+        $placeholders = implode(',', array_fill(0, count($insertedIds), '?'));
+        $stmt = $pdo->prepare("
+            SELECT d.id AS detail_id, d.id AS datadb_id, d.mapping_id, d.field_value, m.field_label, m.data_type, m.is_required, m.manual_default
+            FROM import_data_details d
+            JOIN template_mapping m ON d.mapping_id = m.id
+            WHERE d.id IN ($placeholders)
+        ");
+        $stmt->execute($insertedIds);
+        $manualDetails = $stmt->fetchAll(PDO::FETCH_ASSOC);
+    }
+
+    // Prepara i dati per il JSON
+    $rows = [];
+    foreach ($importedData as $row) {
+        $rowData = [
+            'iddatadb' => $row['iddatadb'] ?? '',
+            'importreferencecode' => $row['importreferencecode'] ?? '',
+            'filename_import' => $row['filename_import'] ?? '',
+            'status' => $row['status'] ?? '',
+            'importdate' => $row['importdate'] ?? '',
+            'details' => array_filter($manualDetails, fn($d) => $d['datadb_id'] == $row['iddatadb'])
+        ];
+        $rows[] = $rowData;
+    }
+
+    error_log("load_more_rows.php: Caricate " . count($rows) . " righe per template_id=$template_id, status=$status, offset=$offset");
+    echo json_encode(['success' => true, 'rows' => $rows]);
+} catch (Exception $e) {
+    error_log("Errore in load_more_rows.php: " . $e->getMessage());
+    echo json_encode(['success' => false, 'message' => 'Errore nel caricamento: ' . $e->getMessage()]);
+}
+exit;
@@ -9,28 +9,35 @@
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
-                        <h6>Elenco Parti</h6>
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+                            <h6 style="margin: 0; white-space: nowrap;">Elenco Parti</h6>
+                            <div style="display: flex; align-items: center;">
+                                <input type="checkbox" id="showMixParts" name="showMixParts" style="margin-right: 5px;">
+                                <label for="showMixParts" style="font-size: 0.9rem; margin-right: 10px;">Mix</label>
+                                <button type="button" class="btn btn-info btn-sm" id="renumberPartsBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Rinumera Parti</button>
+                            </div>
+                        </div>
                        <ul id="partsList" class="list-group"></ul>
                        <table class="table table-striped table-sm mt-3" id="partsTable">
                            <thead>
-                            <tr>
-                                <th>Num. Parte</th>
-                                <th>Descrizione Parte</th>
-                                <th>Azioni</th>
-                            </tr>
+                                <tr>
+                                    <th>Num. Parte</th>
+                                    <th>Descrizione Parte</th>
+                                    <th>Azioni</th>
+                                </tr>
                            </thead>
                            <tbody id="partsTableBody">
-                            <tr data-part-id="new">
-                                <td><input type="number" class="form-control form-control-sm part-number" value="1" style="width: 80px;"></td>
-                                <td><input type="text" class="form-control form-control-sm part-description" placeholder="Inserisci descrizione" style="width: 100%;"></td>
-                                <td>
-                                    <button type="button" class="btn btn-success btn-sm add-row" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;"><i class="fas fa-plus fa-xs"></i></button>
-                                    <button type="button" class="btn btn-primary btn-sm add-mix-row" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;">M</button>
-                                    <button type="button" class="btn btn-danger btn-sm remove-row" style="padding: 0.1rem 0.3rem; font-size: 0.8rem; display: none;"><i class="fas fa-trash fa-xs"></i></button>
-                                    <span class="save-status text-success" style="display: none; margin-left: 5px;"><i class="fas fa-check fa-xs"></i></span>
-                                    <span class="save-loading text-warning" style="display: none; margin-left: 5px;"><i class="fas fa-spinner fa-spin fa-xs"></i></span>
-                                </td>
-                            </tr>
+                                <tr data-part-id="new">
+                                    <td><input type="number" class="form-control form-control-sm part-number" value="1" style="width: 80px;"></td>
+                                    <td><input type="text" class="form-control form-control-sm part-description" placeholder="Inserisci descrizione" style="width: 100%;"></td>
+                                    <td>
+                                        <button type="button" class="btn btn-success btn-sm add-row" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;"><i class="fas fa-plus fa-xs"></i></button>
+                                        <button type="button" class="btn btn-primary btn-sm add-mix-row" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;">M</button>
+                                        <button type="button" class="btn btn-danger btn-sm remove-row" style="padding: 0.1rem 0.3rem; font-size: 0.8rem; display: none;"><i class="fas fa-trash fa-xs"></i></button>
+                                        <span class="save-status text-success" style="display: none; margin-left: 5px;"><i class="fas fa-check fa-xs"></i></span>
+                                        <span class="save-loading text-warning" style="display: none; margin-left: 5px;"><i class="fas fa-spinner fa-spin fa-xs"></i></span>
+                                    </td>
+                                </tr>
                            </tbody>
                        </table>
                    </div>
@@ -50,7 +57,8 @@
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-sm" id="addDescriptionsBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Aggiungi Lista Descrizioni</button>
-                <button type="button" class="btn btn-danger btn-sm" id="removeAnnotationsBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Rimuovi Annotazioni</button>
+                <button type="button" class="btn btn-danger btn-sm" id="removeAnnotationsBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Rimuovi Descrizioni</button>
+                <button type="button" class="btn btn-warning btn-sm" id="undoMarkerBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Undo Marker</button>
                <button type="button" class="btn btn-success btn-sm" id="savePhotoBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Salva Foto con Nome</button>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Chiudi</button>
            </div>
@@ -99,12 +107,21 @@
        display: flex;
        justify-content: space-between;
        align-items: center;
+        padding: 5px 10px;
    }

    #partsList .list-group-item:hover {
        background-color: #f5f5f5;
    }

+    #partsList input[type="color"] {
+        width: 30px;
+        height: 24px;
+        padding: 0;
+        margin-left: 5px;
+        cursor: pointer;
+    }
+
    .draggable-description {
        position: absolute;
        background: rgba(255, 255, 255, 0.8);
@@ -121,8 +138,6 @@
        position: absolute;
        width: 24px;
        height: 24px;
-        background: rgba(255, 0, 0, 0.5);
-        border: 1px solid #ff0000;
        border-radius: 50%;
        color: #ffffff;
        text-align: center;
@@ -146,23 +161,32 @@
        font-size: 0.8rem;
    }

-    /* ნორმალური Save ღილაკი */
+    /* Normale Save button */
    #savePhotoBtn {
        transition: all 0.3s ease-in-out;
    }

-    /* დაუმახსოვრებელი ცვლილებები */
+    /* Unsaved changes */
    #savePhotoBtn.unsaved {
-        background-color: #dc3545 !important; /* წითელი */
+        background-color: #dc3545 !important;
+        /* Rosso */
        border-color: #dc3545 !important;
        color: white !important;
        animation: pulse 1.2s infinite;
    }

-    /* ლამაზი პულსაცია */
+    /* Animazione pulsante */
    @keyframes pulse {
-        0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
-        70% { box-shadow: 0 0 10px 15px rgba(220, 53, 69, 0); }
-        100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
+        0% {
+            box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
+        }
+
+        70% {
+            box-shadow: 0 0 10px 15px rgba(220, 53, 69, 0);
+        }
+
+        100% {
+            box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
+        }
    }
-</style>
+</style>
@@ -2,7 +2,7 @@ $(document).ready(function () {
    console.log("parts.js caricato correttamente");

    // ===================
-    // GLOBAL STATE (NEW)
+    // GLOBAL STATE
    // ===================
    let photoData = {
        naturalWidth: 0,
@@ -12,13 +12,13 @@ $(document).ready(function () {
        scale: 1,
    };

-    // markers keyed by photo src => [{ partNumber, x, y } using NATURAL coords]
-    let photoMarkers = {};
+    // annotations keyed by photo src
+    let photoAnnotations = {};
+    // colors keyed by part number
+    let partColors = {};

-    // selection & descriptions
+    // selection
    let selectedPartNumber = null;
-    let descriptionPosition = {x: 10, y: 10}; // NATURAL coords
-    let hasDescriptions = false;

    // ===================
    // POPUP HANDLING
@@ -33,8 +33,14 @@ $(document).ready(function () {
            console.log("Pulsante Parts cliccato");
            const iddatadb = $(this).data("iddatadb");
            const rowIndex = $(this).data("row");
-            const importRef = $("table tbody tr").eq(rowIndex).find("td").eq(1).text();
-            const description = $("table tbody tr").eq(rowIndex).find("td").eq(2).text() || "Sconosciuto";
+            const importRef = $("table tbody tr")
+                .eq(rowIndex)
+                .find("td")
+                .eq(1)
+                .text();
+            const description =
+                $("table tbody tr").eq(rowIndex).find("td").eq(2).text() ||
+                "Sconosciuto";

            $("#trfHeader").text(`${iddatadb} - ${importRef} - ${description}`);
            $("#partsModal").data("iddatadb", iddatadb);
@@ -76,19 +82,25 @@ $(document).ready(function () {
        $.ajax({
            url: "load_photo.php",
            method: "GET",
-            data: {iddatadb: iddatadb},
+            data: { iddatadb: iddatadb },
            success: function (response) {
                if (response.success) {
                    if (response.photos && response.photos.length > 1) {
                        showPhotoSelector(response.photos);
-                    } else if (response.photos && response.photos.length === 1) {
+                    } else if (
+                        response.photos &&
+                        response.photos.length === 1
+                    ) {
                        loadSinglePhoto(response.photos[0]);
                    } else {
                        $("#samplePhoto").attr("src", "");
                        alert("Nessuna foto trovata per questo TRF.");
                    }
                } else {
-                    alert(response.message || "Errore nel caricamento della foto.");
+                    alert(
+                        response.message ||
+                            "Errore nel caricamento della foto.",
+                    );
                }
            },
            error: function (xhr, status, error) {
@@ -103,8 +115,9 @@ $(document).ready(function () {

        const selector = $('<select id="photoSelector"></select>');
        photos.forEach((photo, index) => {
-            const option = $('<option></option>').val(photo).text(`Photo ${index + 1}`);
-            // display option with photo name if available
+            const option = $("<option></option>")
+                .val(photo)
+                .text(`Photo ${index + 1}`);
            if (photo.includes("/")) {
                const photoName = photo.split("/").pop();
                option.text(`Photo ${index + 1} - ${photoName}`);
@@ -135,41 +148,47 @@ $(document).ready(function () {
            const canvas = document.getElementById("photoCanvas");
            const ctx = canvas.getContext("2d");

-            // Real image size
            const naturalWidth = img[0].naturalWidth;
            const naturalHeight = img[0].naturalHeight;

-            // Compute scale to FIT inside its parent without distorting aspect ratio
            const parent = $(canvas).parent();
            const maxW = parent.width();
            const maxH = parent.height();
            const scale = Math.min(maxW / naturalWidth, maxH / naturalHeight);

-            // Display size on screen
            const displayWidth = Math.max(1, Math.round(naturalWidth * scale));
-            const displayHeight = Math.max(1, Math.round(naturalHeight * scale));
+            const displayHeight = Math.max(
+                1,
+                Math.round(naturalHeight * scale),
+            );

-            // Save globally
-            photoData = {naturalWidth, naturalHeight, displayWidth, displayHeight, scale};
+            photoData = {
+                naturalWidth,
+                naturalHeight,
+                displayWidth,
+                displayHeight,
+                scale,
+            };

-            // Canvas in REAL size (so saving uses natural coords 1:1)
            canvas.width = naturalWidth;
            canvas.height = naturalHeight;

-            // Visual size on screen
            canvas.style.width = `${displayWidth}px`;
            canvas.style.height = `${displayHeight}px`;

-            // Also size/align the overlay containers to match the canvas
-            $("#markerContainer").css({width: `${displayWidth}px`, height: `${displayHeight}px`});
-            $("#descriptionList").css({maxWidth: `${Math.max(200, Math.round(displayWidth * 0.35))}px`});
+            $("#markerContainer").css({
+                width: `${displayWidth}px`,
+                height: `${displayHeight}px`,
+            });
+            $("#descriptionList").css({
+                maxWidth: `${Math.max(200, Math.round(displayWidth * 0.35))}px`,
+            });

-            // Draw fresh image at full resolution
            ctx.clearRect(0, 0, naturalWidth, naturalHeight);
            ctx.drawImage(img.get(0), 0, 0, naturalWidth, naturalHeight);

            updateMarkers();
-            if (hasDescriptions) drawDescriptions(descriptionPosition.x, descriptionPosition.y);
+            updateDescriptions();
        });
    }

@@ -178,6 +197,7 @@ $(document).ready(function () {
    // ===================
    function addNewRow(nextPartNumber, isMix = false) {
        const description = isMix ? "Mix" : "";
+        const defaultColor = isMix ? "#0000ff" : "#ff0000";
        const newRow = `
            <tr data-part-id="">
                <td><input type="number" class="form-control form-control-sm part-number" value="${nextPartNumber || 1}" style="width: 80px;"></td>
@@ -192,22 +212,28 @@ $(document).ready(function () {
            </tr>`;
        $("#partsTableBody").append(newRow);
        updateRowButtons();
+        // Initialize color for the new part
+        const partNumber = nextPartNumber || 1;
+        partColors[partNumber] = defaultColor;
    }

    function updateRowButtons() {
        const rowCount = $("#partsTableBody tr").length;
        $("#partsTableBody tr").each(function () {
            const $removeBtn = $(this).find(".remove-row");
-            if (rowCount > 1) $removeBtn.show(); else $removeBtn.hide();
+            if (rowCount > 1) $removeBtn.show();
+            else $removeBtn.hide();
        });
    }

    $(document).on("click", ".add-row", function (e) {
        e.preventDefault();
        const maxPartNumber = Math.max(
-            ...$("#partsTableBody tr").map(function () {
-                return parseInt($(this).find(".part-number").val()) || 0;
-            }).get(),
+            ...$("#partsTableBody tr")
+                .map(function () {
+                    return parseInt($(this).find(".part-number").val()) || 0;
+                })
+                .get(),
        );
        addNewRow(maxPartNumber + 1);
        updatePartsList();
@@ -216,9 +242,11 @@ $(document).ready(function () {
    $(document).on("click", ".add-mix-row", function (e) {
        e.preventDefault();
        const maxPartNumber = Math.max(
-            ...$("#partsTableBody tr").map(function () {
-                return parseInt($(this).find(".part-number").val()) || 0;
-            }).get(),
+            ...$("#partsTableBody tr")
+                .map(function () {
+                    return parseInt($(this).find(".part-number").val()) || 0;
+                })
+                .get(),
        );
        addNewRow(maxPartNumber + 1, true);
        updatePartsList();
@@ -228,29 +256,39 @@ $(document).ready(function () {
        e.preventDefault();
        const $row = $(this).closest("tr");
        const partId = $row.data("part-id");
+        const partNumber = $row.find(".part-number").val();

        if (partId !== "new" && partId !== undefined && partId !== null) {
            $.ajax({
                url: "delete_part.php",
                method: "POST",
-                data: JSON.stringify({part_id: partId}),
+                data: JSON.stringify({ part_id: partId }),
                contentType: "application/json",
                success: function (response) {
                    if (response.success) {
                        $row.remove();
+                        delete partColors[partNumber];
                        updateRowButtons();
                        updatePartsList();
-                        clearCanvasMarkers();
+                        clearCanvasMarkers(false); // Preserve descriptions
                    } else {
                        alert("Errore nell'eliminazione: " + response.message);
                    }
                },
                error: function (xhr, status, error) {
-                    alert("Errore nell'eliminazione: " + error + ". Stato: " + xhr.status + " - " + xhr.responseText);
+                    alert(
+                        "Errore nell'eliminazione: " +
+                            error +
+                            ". Stato: " +
+                            xhr.status +
+                            " - " +
+                            xhr.responseText,
+                    );
                },
            });
        } else {
            $row.remove();
+            delete partColors[partNumber];
            updateRowButtons();
            updatePartsList();
        }
@@ -266,7 +304,6 @@ $(document).ready(function () {
        const iddatadb = $("#partsModal").data("iddatadb");
        const isMix = partDescription.startsWith("Mix") ? "Y" : "N";

-        // არსებული part-id row-დან (თუ უკვე არსებობს)
        const partId = $row.data("part-id") || null;

        if (partDescription && iddatadb) {
@@ -280,7 +317,7 @@ $(document).ready(function () {
                    iddatadb: iddatadb,
                    parts: [
                        {
-                            id: partId,  // გავგზავნე part-ის ID (თუ არის)
+                            id: partId,
                            part_number: partNumber,
                            part_description: partDescription,
                            mix: isMix,
@@ -293,7 +330,6 @@ $(document).ready(function () {
                        $saveLoading.hide();
                        $saveStatus.show();
                        updatePartsList();
-                        // თუ ახალია, backend-მა მოგვცა ახალი ID
                        if (response.part_id) {
                            $row.attr("data-part-id", response.part_id);
                            $row.data("part-id", response.part_id);
@@ -312,16 +348,28 @@ $(document).ready(function () {
        }
    });

+    $(document).on("change", ".part-color", function () {
+        const partNumber = $(this).closest("li").data("part-number");
+        const partColor = $(this).val();
+        partColors[partNumber] = partColor;
+        updateMarkers();
+        markUnsaved();
+    });
+
    function loadExistingParts(iddatadb) {
        $.ajax({
            url: "load_parts.php",
            method: "GET",
-            data: {iddatadb: iddatadb},
+            data: { iddatadb: iddatadb },
            success: function (response) {
                if (response.success) {
                    $("#partsTableBody").empty();
                    if (response.parts.length > 0) {
                        response.parts.forEach((part) => {
+                            const defaultColor =
+                                part.part_description.startsWith("Mix")
+                                    ? "#0000ff"
+                                    : "#ff0000";
                            const newRow = `
                                <tr data-part-id="${part.id}">
                                    <td><input type="number" class="form-control form-control-sm part-number" value="${part.part_number}" style="width: 80px;"></td>
@@ -335,6 +383,7 @@ $(document).ready(function () {
                                    </td>
                                </tr>`;
                            $("#partsTableBody").append(newRow);
+                            partColors[part.part_number] = defaultColor;
                        });
                    } else {
                        addNewRow(1);
@@ -342,7 +391,10 @@ $(document).ready(function () {
                    updateRowButtons();
                    updatePartsList();
                } else {
-                    alert("Errore nel caricamento delle parti: " + response.message);
+                    alert(
+                        "Errore nel caricamento delle parti: " +
+                            response.message,
+                    );
                    addNewRow(1);
                }
            },
@@ -354,27 +406,138 @@ $(document).ready(function () {
    }

    function updatePartsList() {
+        const showMixParts = $("#showMixParts").is(":checked");
        $("#partsList").empty();
        $("#partsTableBody tr").each(function () {
            const partNumber = $(this).find(".part-number").val();
            const partDescription = $(this).find(".part-description").val();
-            if (partNumber && partDescription && !partDescription.startsWith("Mix")) {
+            const partColor =
+                partColors[partNumber] ||
+                (partDescription.startsWith("Mix") ? "#0000ff" : "#ff0000");
+            if (
+                partNumber &&
+                partDescription &&
+                (showMixParts || !partDescription.startsWith("Mix"))
+            ) {
                const listItem = `
                    <li class="list-group-item" data-part-number="${partNumber}">
                        ${partNumber} - ${partDescription}
-                        <button type="button" class="btn btn-success btn-sm add-to-mix-btn" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;"><i class="fas fa-plus fa-xs"></i></button>
+                        <div style="display: flex; align-items: center;">
+                            <button type="button" class="btn btn-success btn-sm add-to-mix-btn" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;"><i class="fas fa-plus fa-xs"></i></button>
+                            <input type="color" class="part-color" value="${partColor}" style="margin-left: 5px;">
+                        </div>
                    </li>`;
                $("#partsList").append(listItem);
            }
        });
+        updateMarkers();
+    }
+
+    function renumberParts() {
+        const $rows = $("#partsTableBody tr");
+        const iddatadb = $("#partsModal").data("iddatadb");
+        let newPartColors = {};
+
+        // Raccogli tutte le righe con i loro dati attuali
+        let partsData = $rows
+            .map(function (index) {
+                const $row = $(this);
+                const partNumber = $row.find(".part-number").val();
+                const partDescription = $row.find(".part-description").val();
+                const partId = $row.data("part-id");
+                return { partNumber, partDescription, partId };
+            })
+            .get();
+
+        // Rinumera in modo sequenziale
+        partsData.forEach((part, index) => {
+            const newNumber = index + 1;
+            newPartColors[newNumber] = partColors[part.partNumber] || "#ff0000";
+            part.partNumber = newNumber;
+        });
+
+        // Aggiorna i valori nella tabella
+        $rows.each(function (index) {
+            const $row = $(this);
+            $row.find(".part-number").val(index + 1);
+        });
+
+        // Aggiorna partColors
+        partColors = newPartColors;
+
+        // Aggiorna i marker nelle annotazioni
+        const currentPhoto = $("#samplePhoto").attr("src");
+        if (photoAnnotations[currentPhoto]) {
+            photoAnnotations[currentPhoto].markers.forEach((marker) => {
+                const oldPartNumber = marker.partNumber;
+                const newPartNumber = partsData.find(
+                    (p) => p.partNumber == oldPartNumber,
+                )?.partNumber;
+                if (newPartNumber) {
+                    marker.partNumber = newPartNumber;
+                    marker.color = partColors[newPartNumber];
+                }
+            });
+        }
+
+        // Salva le modifiche nel database
+        const partsToSave = partsData.map((part) => ({
+            id: part.partId || null,
+            part_number: part.partNumber,
+            part_description: part.partDescription,
+            mix: part.partDescription.startsWith("Mix") ? "Y" : "N",
+        }));
+
+        $.ajax({
+            url: "save_parts.php",
+            method: "POST",
+            data: JSON.stringify({
+                iddatadb: iddatadb,
+                parts: partsToSave,
+            }),
+            contentType: "application/json",
+            success: function (response) {
+                if (response.success) {
+                    $rows.each(function (index) {
+                        const $row = $(this);
+                        if (response.part_ids && response.part_ids[index]) {
+                            $row.attr("data-part-id", response.part_ids[index]);
+                            $row.data("part-id", response.part_ids[index]);
+                        }
+                        const $saveStatus = $row.find(".save-status");
+                        const $saveLoading = $row.find(".save-loading");
+                        $saveLoading.hide();
+                        $saveStatus.show();
+                        setTimeout(() => $saveStatus.hide(), 2000);
+                    });
+                    updatePartsList();
+                    updateMarkers();
+                    updateDescriptions();
+                    markUnsaved();
+                } else {
+                    alert(
+                        "Errore nel salvataggio delle parti: " +
+                            response.message,
+                    );
+                }
+            },
+            error: function (xhr, status, error) {
+                alert("Errore nel salvataggio delle parti: " + error);
+            },
+        });
    }

    $(document).on("click", ".add-to-mix-btn", function () {
        const $listItem = $(this).closest("li");
        const partDescription = $listItem.text().split(" - ")[1].trim();
-        const $mixRow = $("#partsTableBody tr").filter(function () {
-            return $(this).find(".part-description").val().startsWith("Mix");
-        }).last();
+        const $mixRow = $("#partsTableBody tr")
+            .filter(function () {
+                return $(this)
+                    .find(".part-description")
+                    .val()
+                    .startsWith("Mix");
+            })
+            .last();

        if ($mixRow.length === 0) {
            alert("Crea prima una riga Mix usando il pulsante 'M'.");
@@ -398,11 +561,22 @@ $(document).ready(function () {
    });

    $("#partsList").on("click", "li", function (e) {
-        if ($(e.target).hasClass("add-to-mix-btn")) return;
+        if (
+            $(e.target).hasClass("add-to-mix-btn") ||
+            $(e.target).hasClass("part-color")
+        )
+            return;
        selectedPartNumber = $(this).data("part-number");
        $(this).addClass("active").siblings().removeClass("active");
    });

+    $("#showMixParts").on("change", function () {
+        updatePartsList();
+    });
+
+    $("#renumberPartsBtn").on("click", function () {
+        renumberParts();
+    });
    // ===================
    // MARKERS & DESCRIPTIONS
    // ===================
@@ -420,18 +594,35 @@ $(document).ready(function () {
        const y = clickY / photoData.scale;

        const currentPhoto = $("#samplePhoto").attr("src");
-        if (!photoMarkers[currentPhoto]) photoMarkers[currentPhoto] = [];
+        if (!photoAnnotations[currentPhoto]) {
+            photoAnnotations[currentPhoto] = {
+                markers: [],
+                hasDescriptions: false,
+                descriptionPosition: { x: 10, y: 10 },
+            };
+        }

-        const existingMarker = photoMarkers[currentPhoto].find(m => m.partNumber == selectedPartNumber);
+        const partColor = partColors[selectedPartNumber] || "#ff0000";
+
+        const existingMarker = photoAnnotations[currentPhoto].markers.find(
+            (m) => m.partNumber == selectedPartNumber,
+        );
        if (existingMarker) {
            existingMarker.x = x;
            existingMarker.y = y;
+            existingMarker.color = partColor;
        } else {
-            photoMarkers[currentPhoto].push({partNumber: selectedPartNumber, x, y});
+            photoAnnotations[currentPhoto].markers.push({
+                partNumber: selectedPartNumber,
+                x,
+                y,
+                color: partColor,
+            });
        }

        updateMarkers();
-        if (hasDescriptions) drawDescriptions(descriptionPosition.x, descriptionPosition.y);
+        updateDescriptions();
+        markUnsaved();

        selectedPartNumber = null;
        $("#partsList li").removeClass("active");
@@ -441,17 +632,41 @@ $(document).ready(function () {
        const markerContainer = $("#markerContainer");
        markerContainer.empty();

-        // keep overlay sized to canvas display
-        markerContainer.css({width: `${photoData.displayWidth}px`, height: `${photoData.displayHeight}px`});
+        markerContainer.css({
+            width: `${photoData.displayWidth}px`,
+            height: `${photoData.displayHeight}px`,
+        });

        const currentPhoto = $("#samplePhoto").attr("src");
-        const markers = photoMarkers[currentPhoto] || [];
+        const annotations = photoAnnotations[currentPhoto] || {
+            markers: [],
+            hasDescriptions: false,
+            descriptionPosition: { x: 10, y: 10 },
+        };
+        const markers = annotations.markers;
+        const showMixParts = $("#showMixParts").is(":checked");

        markers.forEach((marker) => {
+            const partRow = $("#partsTableBody tr").filter(function () {
+                return $(this).find(".part-number").val() == marker.partNumber;
+            });
+            const partDescription = partRow.find(".part-description").val();
+            if (
+                !showMixParts &&
+                partDescription &&
+                partDescription.startsWith("Mix")
+            ) {
+                return;
+            }
+
            const scaledX = marker.x * photoData.scale;
            const scaledY = marker.y * photoData.scale;
+            const markerColor =
+                marker.color || partColors[marker.partNumber] || "#ff0000";

-            const $marker = $(`<div class="draggable-marker">${marker.partNumber}</div>`).css({
+            const $marker = $(
+                `<div class="draggable-marker" style="background: ${markerColor}; border: 1px solid ${markerColor}; color: #ffffff;">${marker.partNumber}</div>`,
+            ).css({
                left: scaledX - 8 + "px",
                top: scaledY - 8 + "px",
            });
@@ -488,15 +703,21 @@ $(document).ready(function () {
            currentX = Math.max(0, Math.min(currentX, maxX));
            currentY = Math.max(0, Math.min(currentY, maxY));

-            $element.css({left: currentX + "px", top: currentY + "px"});
+            $element.css({ left: currentX + "px", top: currentY + "px" });

            if (item && item.partNumber) {
                item.x = (currentX + 8) / photoData.scale;
                item.y = (currentY + 8) / photoData.scale;
+                markUnsaved();
            } else {
-                // draggable description panel
-                descriptionPosition.x = (currentX + 5) / photoData.scale;
-                descriptionPosition.y = (currentY + 5) / photoData.scale;
+                const currentPhoto = $("#samplePhoto").attr("src");
+                if (photoAnnotations[currentPhoto]) {
+                    photoAnnotations[currentPhoto].descriptionPosition.x =
+                        (currentX + 5) / photoData.scale;
+                    photoAnnotations[currentPhoto].descriptionPosition.y =
+                        (currentY + 5) / photoData.scale;
+                    markUnsaved();
+                }
            }
        });

@@ -508,39 +729,65 @@ $(document).ready(function () {
        });
    }

-    function drawDescriptions(x, y) {
+    function updateDescriptions() {
+        const currentPhoto = $("#samplePhoto").attr("src");
+        const annotations = photoAnnotations[currentPhoto] || {
+            markers: [],
+            hasDescriptions: false,
+            descriptionPosition: { x: 10, y: 10 },
+        };
+        const showMixParts = $("#showMixParts").is(":checked");
+
+        const descriptionList = $("#descriptionList");
+        descriptionList.empty();
+
+        if (!annotations.hasDescriptions) {
+            descriptionList.css("display", "none");
+            return;
+        }
+
        const partsList = [];
        $("#partsTableBody tr").each(function () {
            const partNumber = $(this).find(".part-number").val();
            const partDescription = $(this).find(".part-description").val();
-            if (partNumber && partDescription && !partDescription.startsWith("Mix")) {
+            if (
+                partNumber &&
+                partDescription &&
+                (showMixParts || !partDescription.startsWith("Mix"))
+            ) {
                partsList.push(`${partNumber} ${partDescription}`);
            }
        });

-        const descriptionList = $("#descriptionList");
-        descriptionList.empty();
        descriptionList.css({
            display: "block",
-            top: y * photoData.scale + "px",
-            left: x * photoData.scale + "px",
+            top: annotations.descriptionPosition.y * photoData.scale + "px",
+            left: annotations.descriptionPosition.x * photoData.scale + "px",
        });
-        partsList.forEach((part) => descriptionList.append(`<div>${part}</div>`));
+        partsList.forEach((part) =>
+            descriptionList.append(`<div>${part}</div>`),
+        );

        updateMarkers();
    }

-    function clearCanvasMarkers() {
+    function clearCanvasMarkers(clearDescriptions = true) {
        const currentPhoto = $("#samplePhoto").attr("src");
-        photoMarkers[currentPhoto] = [];
-        hasDescriptions = false;
-        $("#descriptionList").css("display", "none");
+        if (clearDescriptions) {
+            if (photoAnnotations[currentPhoto]) {
+                photoAnnotations[currentPhoto].hasDescriptions = false;
+                photoAnnotations[currentPhoto].descriptionPosition = {
+                    x: 10,
+                    y: 10,
+                };
+            }
+            $("#descriptionList").css("display", "none");
+        }
        $("#markerContainer").empty();

        const canvas = document.getElementById("photoCanvas");
        const ctx = canvas.getContext("2d");

-        // reset canvas to current image (keeps proportions)
        canvas.width = photoData.naturalWidth;
        canvas.height = photoData.naturalHeight;
        canvas.style.width = `${photoData.displayWidth}px`;
@@ -551,22 +798,49 @@ $(document).ready(function () {
        if (img[0].naturalWidth) {
            ctx.drawImage(img.get(0), 0, 0, canvas.width, canvas.height);
        }
+        markUnsaved();
+        updateMarkers();
+    }
+
+    function undoLastMarker() {
+        const currentPhoto = $("#samplePhoto").attr("src");
+        if (
+            photoAnnotations[currentPhoto] &&
+            photoAnnotations[currentPhoto].markers.length > 0
+        ) {
+            photoAnnotations[currentPhoto].markers.pop();
+            updateMarkers();
+            updateDescriptions();
+            markUnsaved();
+        }
    }

    $("#addDescriptionsBtn").on("click", function () {
-        hasDescriptions = true;
-        descriptionPosition = {x: 10, y: 10};
-        drawDescriptions(descriptionPosition.x, descriptionPosition.y);
+        const currentPhoto = $("#samplePhoto").attr("src");
+        if (!photoAnnotations[currentPhoto]) {
+            photoAnnotations[currentPhoto] = {
+                markers: [],
+                hasDescriptions: false,
+                descriptionPosition: { x: 10, y: 10 },
+            };
+        }
+        photoAnnotations[currentPhoto].hasDescriptions = true;
+        updateDescriptions();
        makeDraggable($("#descriptionList"));
+        markUnsaved();
    });

    $("#removeAnnotationsBtn").on("click", function () {
-        clearCanvasMarkers();
+        clearCanvasMarkers(true); // Remove only descriptions
+    });
+
+    $("#undoMarkerBtn").on("click", function () {
+        undoLastMarker();
    });

    let unsavedChanges = false;

-// --- helper functions ---
+    // --- helper functions ---
    function markUnsaved() {
        if (!unsavedChanges) {
            unsavedChanges = true;
@@ -579,18 +853,13 @@ $(document).ready(function () {
        $("#savePhotoBtn").removeClass("unsaved").text("Salva Foto con Nome");
    }

-// --- event listeners ---
-// როცა ვცვლით input-ს ცხრილში
+    // --- event listeners ---
    $(document).on("input change", "#partsTableBody input", markUnsaved);
-
-// როცა ვამატებთ/ვშლით რიგს
    $(document).on("click", ".add-row, .add-mix-row, .remove-row", markUnsaved);
-
-// თუ გაქვს draggable marker ან description list
    $(document).on("markerChanged descriptionChanged", markUnsaved);

-// --- modal close protection ---
-    $('#partsModal').on('hide.bs.modal', function (e) {
+    // --- modal close protection ---
+    $("#partsModal").on("hide.bs.modal", function (e) {
        if (unsavedChanges) {
            if (!confirm("Hai modifiche non salvate. Vuoi davvero uscire?")) {
                e.preventDefault();
@@ -598,94 +867,99 @@ $(document).ready(function () {
        }
    });

-// --- SAVE BUTTON ---
+    // --- SAVE BUTTON ---
    $("#savePhotoBtn").on("click", function () {
        const canvas = document.getElementById("photoCanvas");
        const ctx = canvas.getContext("2d");
        const img = $("#samplePhoto");

-        // Ensure canvas is real size
        const naturalWidth = img.get(0).naturalWidth;
        const naturalHeight = img.get(0).naturalHeight;
        canvas.width = naturalWidth;
        canvas.height = naturalHeight;

-        // Redraw base image
        ctx.drawImage(img.get(0), 0, 0, naturalWidth, naturalHeight);

-        // Descriptions box
-        const partsList = [];
-        $("#partsTableBody tr").each(function () {
-            const partNumber = $(this).find(".part-number").val();
-            const partDescription = $(this).find(".part-description").val();
-            if (partNumber && partDescription && !partDescription.startsWith("Mix")) {
-                partsList.push(`${partNumber} ${partDescription}`);
-            }
-        });
+        const currentPhoto = $("#samplePhoto").attr("src");
+        const annotations = photoAnnotations[currentPhoto] || {
+            markers: [],
+            hasDescriptions: false,
+            descriptionPosition: { x: 10, y: 10 },
+        };
+        const showMixParts = $("#showMixParts").is(":checked");

-        if (hasDescriptions && partsList.length > 0) {
-            const fontSize = Math.round(naturalWidth * 0.02);
-            ctx.font = fontSize + "px Arial";
-            const textHeight = fontSize + 8;
-            const boxWidth = Math.round(naturalWidth * 0.28);
-            const boxHeight = partsList.length * textHeight + 25;
-
-            const x = descriptionPosition.x;
-            const y = descriptionPosition.y;
-
-            // ჩრდილი
-            ctx.save();
-            ctx.shadowColor = "rgba(0,0,0,0.3)";
-            ctx.shadowBlur = 8;
-            ctx.shadowOffsetX = 3;
-            ctx.shadowOffsetY = 3;
-
-            // ლამაზი ბექგრაუნდი
-            ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
-            ctx.beginPath();
-            ctx.roundRect(x, y, boxWidth, boxHeight, 12);
-            ctx.fill();
-
-            ctx.restore();
-
-            // ტექსტი
-            ctx.fillStyle = "#111111";
-            partsList.forEach((part, index) => {
-            const domWidth = $("#samplePhoto").width();
-            const domHeight = $("#samplePhoto").height();
-
-            // NATURAL ზომა (ფაილის რეალური ზომა)
-            const naturalWidth = photoData.naturalWidth;
-            const naturalHeight = photoData.naturalHeight;
-
-            // მასშტაბები
-            const scaleX = naturalWidth / domWidth;
-            const scaleY = naturalHeight / domHeight;
-
-            // გადაყვანილი კოორდინატები
-            const x = descriptionPosition.x * scaleX;
-            const y = descriptionPosition.y * scaleY;
-
-            ctx.fillText(part, x + 15, y + 35 + index * textHeight);
+        if (annotations.hasDescriptions) {
+            const partsList = [];
+            $("#partsTableBody tr").each(function () {
+                const partNumber = $(this).find(".part-number").val();
+                const partDescription = $(this).find(".part-description").val();
+                if (
+                    partNumber &&
+                    partDescription &&
+                    (showMixParts || !partDescription.startsWith("Mix"))
+                ) {
+                    partsList.push(`${partNumber} ${partDescription}`);
+                }
            });
+
+            if (partsList.length > 0) {
+                const fontSize = Math.round(naturalWidth * 0.02);
+                ctx.font = fontSize + "px Arial";
+                const textHeight = fontSize + 8;
+                const boxWidth = Math.round(naturalWidth * 0.28);
+                const boxHeight = partsList.length * textHeight + 25;
+
+                const x = annotations.descriptionPosition.x;
+                const y = annotations.descriptionPosition.y;
+
+                ctx.save();
+                ctx.shadowColor = "rgba(0,0,0,0.3)";
+                ctx.shadowBlur = 8;
+                ctx.shadowOffsetX = 3;
+                ctx.shadowOffsetY = 3;
+
+                ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
+                ctx.beginPath();
+                ctx.roundRect(x, y, boxWidth, boxHeight, 12);
+                ctx.fill();
+
+                ctx.restore();
+
+                ctx.fillStyle = "#111111";
+                partsList.forEach((part, index) => {
+                    ctx.fillText(part, x + 15, y + 35 + index * textHeight);
+                });
+            }
        }

-        // Markers
-        const currentPhoto = $("#samplePhoto").attr("src");
-        const markers = photoMarkers[currentPhoto] || [];
+        const markers = annotations.markers;
        markers.forEach((marker) => {
-            const x = marker.x; // already NATURAL coords
+            const partRow = $("#partsTableBody tr").filter(function () {
+                return $(this).find(".part-number").val() == marker.partNumber;
+            });
+            const partDescription = partRow.find(".part-description").val();
+            if (
+                !showMixParts &&
+                partDescription &&
+                partDescription.startsWith("Mix")
+            ) {
+                return;
+            }
+
+            const x = marker.x;
            const y = marker.y;
            const radius = Math.max(5, Math.round(naturalWidth * 0.025));
            const fontSize = Math.max(8, Math.round(radius * 0.9));
+            const markerColor =
+                marker.color || partColors[marker.partNumber] || "#ff0000";

            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
-            ctx.fillStyle = "rgba(255,0,0,0.85)";
+            ctx.fillStyle = markerColor; // Use the stored color
            ctx.fill();

            ctx.lineWidth = 3;
-            ctx.strokeStyle = "#ffffff";
+            ctx.strokeStyle = markerColor; // Use the same color for the border
            ctx.stroke();

            ctx.fillStyle = "#ffffff";
@@ -700,7 +974,10 @@ $(document).ready(function () {
        const iddatadb = $("#partsModal").data("iddatadb");
        const defaultName = `photo_${iddatadb}_${timestamp}.png`;

-        const newName = prompt("Inserisci il nome del file (senza estensione):", defaultName.split(".png")[0]);
+        const newName = prompt(
+            "Inserisci il nome del file (senza estensione):",
+            defaultName.split(".png")[0],
+        );

        if (newName) {
            const finalName = newName + "_" + timestamp + ".png";
@@ -710,16 +987,17 @@ $(document).ready(function () {
                data: {
                    dataURL: dataURL,
                    filename: finalName,
-                    iddatadb: iddatadb
+                    iddatadb: iddatadb,
                },
                success: function (response) {
                    if (response.success) {
-                        alert("Foto salvata con successo: " + response.file_path);
+                        alert(
+                            "Foto salvata con successo: " + response.file_path,
+                        );
                        $("#samplePhoto").attr("src", response.file_path);
                        loadPhoto(iddatadb);
-                        clearCanvasMarkers();
-
-                        clearUnsaved(); // ✅ reset unsaved status
+                        clearCanvasMarkers(false); // Preserve descriptions
+                        clearUnsaved();
                    } else {
                        alert("Errore: " + response.message);
                    }
@@ -28,6 +28,7 @@ document.addEventListener("DOMContentLoaded", function () {
        const webcamVideo = document.getElementById("webcamVideo");
        const captureBtn = document.getElementById("captureBtn");
        const closeWebcamBtn = document.getElementById("closeWebcamBtn");
+        const webcamSelect = document.getElementById("webcamSelect");
        let stream = null;

        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
@@ -41,25 +42,116 @@ document.addEventListener("DOMContentLoaded", function () {
            !webcamArea ||
            !webcamVideo ||
            !captureBtn ||
-            !closeWebcamBtn
+            !closeWebcamBtn ||
+            !webcamSelect
        ) {
-            console.error("Elementi webcam mancanti");
+            console.error("Elementi webcam mancanti", {
+                openWebcamBtn,
+                webcamArea,
+                webcamVideo,
+                captureBtn,
+                closeWebcamBtn,
+                webcamSelect,
+            });
            return;
        }

-        // Apri la webcam
-        openWebcamBtn.addEventListener("click", async () => {
+        // Funzione per avviare la webcam con un deviceId specifico
+        async function startWebcam(deviceId = null) {
            try {
-                stream = await navigator.mediaDevices.getUserMedia({
-                    video: true,
-                });
+                // Ferma il flusso video esistente, se presente
+                if (stream) {
+                    stream.getTracks().forEach((track) => track.stop());
+                    stream = null;
+                    webcamVideo.srcObject = null;
+                }
+
+                // Configura i vincoli per getUserMedia
+                const constraints = {
+                    video: deviceId ? { deviceId: { exact: deviceId } } : true,
+                };
+
+                // Avvia il flusso video
+                stream = await navigator.mediaDevices.getUserMedia(constraints);
                webcamVideo.srcObject = stream;
                webcamArea.style.display = "block";
                openWebcamBtn.style.display = "none";
                dropArea.style.display = "none";
            } catch (error) {
+                console.error("Errore nell'accesso alla webcam:", error);
                alert("Errore nell'accesso alla webcam: " + error.message);
+                webcamArea.style.display = "none";
+                openWebcamBtn.style.display = "block";
+                dropArea.style.display = "block";
            }
+        }
+
+        // Funzione per popolare il dropdown delle webcam
+        async function populateWebcamSelect() {
+            try {
+                // Richiedi i permessi per accedere ai dispositivi
+                await navigator.mediaDevices.getUserMedia({ video: true });
+                const devices = await navigator.mediaDevices.enumerateDevices();
+                const videoDevices = devices.filter(
+                    (device) => device.kind === "videoinput",
+                );
+
+                // Svuota il dropdown
+                webcamSelect.innerHTML =
+                    '<option value="">Select a webcam</option>';
+
+                // Popola il dropdown con le webcam disponibili
+                videoDevices.forEach((device) => {
+                    const option = document.createElement("option");
+                    option.value = device.deviceId;
+                    option.text =
+                        device.label || `Webcam ${webcamSelect.options.length}`;
+                    webcamSelect.appendChild(option);
+                });
+
+                // Mostra il dropdown solo se ci sono più webcam
+                webcamSelect.style.display =
+                    videoDevices.length > 1 ? "block" : "none";
+
+                // Avvia la webcam predefinita se ce n'è almeno una
+                if (videoDevices.length > 0) {
+                    await startWebcam(videoDevices[0].deviceId);
+                } else {
+                    alert("Nessuna webcam rilevata.");
+                    webcamArea.style.display = "none";
+                    openWebcamBtn.style.display = "block";
+                    dropArea.style.display = "block";
+                }
+            } catch (error) {
+                console.error("Errore nel recupero dei dispositivi:", error);
+                alert("Errore nel recupero dei dispositivi: " + error.message);
+                webcamSelect.style.display = "none";
+            }
+        }
+
+        // Apri la webcam e popola il dropdown
+        openWebcamBtn.addEventListener("click", async () => {
+            await populateWebcamSelect();
+        });
+
+        // Gestisci il cambio della webcam selezionata
+        webcamSelect.addEventListener("change", async (e) => {
+            const deviceId = e.target.value;
+            if (deviceId) {
+                await startWebcam(deviceId);
+            }
+        });
+
+        // Chiudi la webcam
+        closeWebcamBtn.addEventListener("click", () => {
+            if (stream) {
+                stream.getTracks().forEach((track) => track.stop());
+                stream = null;
+                webcamVideo.srcObject = null;
+            }
+            webcamArea.style.display = "none";
+            openWebcamBtn.style.display = "block";
+            dropArea.style.display = "block";
        });

        // Cattura la foto
@@ -71,7 +163,6 @@ document.addEventListener("DOMContentLoaded", function () {
                .getContext("2d")
                .drawImage(webcamVideo, 0, 0, canvas.width, canvas.height);

-            // Converti l'immagine in un file
            canvas.toBlob(async (blob) => {
                const file = new File(
                    [blob],
@@ -84,22 +175,62 @@ document.addEventListener("DOMContentLoaded", function () {
                    loader.style.display = "flex";
                }
                await handleFiles([file], iddatadb);
-                closeWebcam();
-            }, "image/jpeg");
-        });
-
-        // Chiudi la webcam
-        closeWebcamBtn.addEventListener("click", () => {
-            closeWebcam();
-        });
-
-        function closeWebcam() {
-            if (stream) {
-                stream.getTracks().forEach((track) => track.stop());
-                webcamVideo.srcObject = null;
+                if (stream) {
+                    stream.getTracks().forEach((track) => track.stop());
+                    stream = null;
+                    webcamVideo.srcObject = null;
+                }
                webcamArea.style.display = "none";
                openWebcamBtn.style.display = "block";
                dropArea.style.display = "block";
+            }, "image/jpeg");
+        });
+    }
+
+    // Funzione per gestire il caricamento dei file
+    async function handleFiles(files, iddatadb) {
+        const loader = document.getElementById("loader");
+        if (!loader) {
+            console.error("Elemento loader non trovato");
+            return;
+        }
+
+        if (!files || files.length === 0) {
+            console.warn("Nessun file da caricare");
+            return;
+        }
+
+        for (const file of files) {
+            if (!file.type.startsWith("image/")) {
+                alert("Per favore, carica solo immagini!");
+                continue;
+            }
+
+            console.log("Inizio upload del file:", file.name);
+            loader.style.display = "flex";
+
+            const formData = new FormData();
+            formData.append("photo", file);
+            formData.append("iddatadb", iddatadb);
+            try {
+                const response = await fetch("upload_photo.php", {
+                    method: "POST",
+                    body: formData,
+                });
+                const result = await response.json();
+                if (result.success) {
+                    console.log(
+                        "Upload completato con successo, ricarico popup",
+                    );
+                    loadPopupContent(iddatadb);
+                } else {
+                    alert("Errore durante il caricamento: " + result.message);
+                }
+            } catch (error) {
+                alert("Errore durante il caricamento: " + error.message);
+            } finally {
+                console.log("Nascondo loader dopo upload");
+                loader.style.display = "none";
            }
        }
    }
@@ -198,6 +329,9 @@ document.addEventListener("DOMContentLoaded", function () {
                        });
                        const result = await response.json();
                        if (result.success) {
+                            console.log(
+                                "Foto eliminata con successo, ricarico popup",
+                            );
                            loadPopupContent(iddatadb);
                        } else {
                            alert(
@@ -246,6 +380,162 @@ document.addEventListener("DOMContentLoaded", function () {
        // Inizializza la gestione della webcam
        setupWebcam(iddatadb);

+        // Gestione bottone Crea Collage
+        const createCollageBtn = document.getElementById("createCollageBtn");
+        if (createCollageBtn) {
+            createCollageBtn.addEventListener("click", () => {
+                console.log("Apertura modale collage");
+                document.getElementById("collageModal").style.display = "block";
+                initCollageCanvas();
+            });
+        }
+
+        // Chiusura modale collage
+        const closeCollageBtn = document.querySelector(".close-collage");
+        if (closeCollageBtn) {
+            closeCollageBtn.addEventListener("click", () => {
+                console.log("Chiusura modale collage");
+                document.getElementById("collageModal").style.display = "none";
+            });
+        }
+
+        // Inizializza canvas con Fabric.js
+        let canvas;
+        function initCollageCanvas() {
+            if (typeof fabric === "undefined") {
+                console.error("Fabric.js non è caricato!");
+                alert(
+                    "Errore: Fabric.js non è disponibile. Controlla la connessione al CDN.",
+                );
+                return;
+            }
+            canvas = new fabric.Canvas("collageCanvas", {
+                backgroundColor: "#fff",
+                selection: true,
+            });
+            // Abilita ridimensionamento e trascinamento
+            canvas.on("object:modified", () => canvas.renderAll());
+        }
+
+        // Aggiungi foto selezionate al canvas
+        const addToCanvasBtn = document.getElementById("addToCanvasBtn");
+        if (addToCanvasBtn) {
+            addToCanvasBtn.addEventListener("click", () => {
+                const checkboxes = document.querySelectorAll(
+                    ".photo-checkbox:checked",
+                );
+                if (checkboxes.length === 0) {
+                    alert("Seleziona almeno una foto!");
+                    return;
+                }
+                checkboxes.forEach((cb) => {
+                    const imgPath = cb.getAttribute("data-path");
+                    fabric.Image.fromURL(imgPath, (img) => {
+                        img.set({
+                            left: Math.random() * 600, // Posizione random iniziale
+                            top: Math.random() * 400,
+                            scaleX: 0.5, // Scala iniziale
+                            scaleY: 0.5,
+                            hasControls: true, // Abilita resize/rotate
+                            hasBorders: true,
+                        });
+                        canvas.add(img);
+                        canvas.renderAll();
+                    });
+                });
+                // Deseleziona checkbox dopo aggiunta
+                checkboxes.forEach((cb) => (cb.checked = false));
+            });
+        }
+
+        // Salva collage
+        const saveCollageBtn = document.getElementById("saveCollageBtn");
+        if (saveCollageBtn) {
+            saveCollageBtn.addEventListener("click", async () => {
+                if (canvas.getObjects().length === 0) {
+                    alert("Il canvas è vuoto! Aggiungi almeno una foto.");
+                    return;
+                }
+                const dataURL = canvas.toDataURL({
+                    format: "jpeg",
+                    quality: 0.8,
+                });
+                const blob = await (await fetch(dataURL)).blob();
+                const file = new File([blob], `collage_${Date.now()}.jpg`, {
+                    type: "image/jpeg",
+                });
+
+                // Upload come nuova foto
+                await handleFiles([file], iddatadb);
+                // Chiudi modale e ricarica popup
+                document.getElementById("collageModal").style.display = "none";
+                loadPopupContent(iddatadb);
+            });
+        }
+
+        // Pulisci canvas
+        const clearCanvasBtn = document.getElementById("clearCanvasBtn");
+        if (clearCanvasBtn) {
+            clearCanvasBtn.addEventListener("click", () => {
+                canvas.clear();
+                canvas.setBackgroundColor("#fff");
+                canvas.renderAll();
+            });
+        }
+
+        // Gestione livelli delle immagini
+        const bringToFrontBtn = document.getElementById("bringToFrontBtn");
+        if (bringToFrontBtn) {
+            bringToFrontBtn.addEventListener("click", () => {
+                const activeObject = canvas.getActiveObject();
+                if (activeObject) {
+                    canvas.bringToFront(activeObject);
+                    canvas.renderAll();
+                } else {
+                    alert("Seleziona un'immagine sul canvas!");
+                }
+            });
+        }
+
+        const sendToBackBtn = document.getElementById("sendToBackBtn");
+        if (sendToBackBtn) {
+            sendToBackBtn.addEventListener("click", () => {
+                const activeObject = canvas.getActiveObject();
+                if (activeObject) {
+                    canvas.sendToBack(activeObject);
+                    canvas.renderAll();
+                } else {
+                    alert("Seleziona un'immagine sul canvas!");
+                }
+            });
+        }
+
+        const bringForwardBtn = document.getElementById("bringForwardBtn");
+        if (bringForwardBtn) {
+            bringForwardBtn.addEventListener("click", () => {
+                const activeObject = canvas.getActiveObject();
+                if (activeObject) {
+                    canvas.bringForward(activeObject);
+                    canvas.renderAll();
+                } else {
+                    alert("Seleziona un'immagine sul canvas!");
+                }
+            });
+        }
+
+        const sendBackwardBtn = document.getElementById("sendBackwardBtn");
+        if (sendBackwardBtn) {
+            sendBackwardBtn.addEventListener("click", () => {
+                const activeObject = canvas.getActiveObject();
+                if (activeObject) {
+                    canvas.sendBackwards(activeObject);
+                    canvas.renderAll();
+                } else {
+                    alert("Seleziona un'immagine sul canvas!");
+                }
+            });
+        }
+
        // Assicurati che il loader sia nascosto all'apertura del popup
        const loader = document.getElementById("loader");
        if (loader) {
@@ -254,54 +544,6 @@ document.addEventListener("DOMContentLoaded", function () {
        }
    }

-    // Funzione per gestire il caricamento dei file
-    async function handleFiles(files, iddatadb) {
-        const loader = document.getElementById("loader");
-        if (!loader) {
-            console.error("Elemento loader non trovato");
-            return;
-        }
-
-        if (!files || files.length === 0) {
-            console.warn("Nessun file da caricare");
-            return;
-        }
-
-        for (const file of files) {
-            if (!file.type.startsWith("image/")) {
-                alert("Per favore, carica solo immagini!");
-                continue;
-            }
-
-            console.log("Inizio upload del file:", file.name);
-            loader.style.display = "flex";
-
-            const formData = new FormData();
-            formData.append("photo", file);
-            formData.append("iddatadb", iddatadb);
-            try {
-                const response = await fetch("upload_photo.php", {
-                    method: "POST",
-                    body: formData,
-                });
-                const result = await response.json();
-                if (result.success) {
-                    console.log(
-                        "Upload completato con successo, ricarico popup",
-                    );
-                    loadPopupContent(iddatadb);
-                } else {
-                    alert("Errore durante il caricamento: " + result.message);
-                }
-            } catch (error) {
-                alert("Errore durante il caricamento: " + error.message);
-            } finally {
-                console.log("Nascondo loader dopo upload");
-                loader.style.display = "none";
-            }
-        }
-    }
-
    // Gestione del pulsante Photos
    const photosButtons = document.querySelectorAll(".photos-btn");
    const photosModal = document.getElementById("photosModal");
@@ -1,6 +1,10 @@
 <?php
 // photos_popup.php
 include('include/headscript.php');
+// Includi Fabric.js solo per questa pagina
+?>
+
+<?php
 // Includi l'autoloader di Composer
 require_once __DIR__ . '/../../vendor/autoload.php';

@@ -118,6 +122,9 @@ $result->saveToFile($qrCodeFile);
    <!-- Area per la webcam -->
    <div id="webcamArea" style="display: none; text-align: center; margin-bottom: 20px;">
        <p>Webcam Preview</p>
+        <select id="webcamSelect" style="margin-bottom: 10px; padding: 5px;">
+            <option value="">Select a webcam</option>
+        </select>
        <video id="webcamVideo" autoplay playsinline style="max-width: 100%; max-height: 300px;"></video>
        <div style="margin-top: 10px;">
            <button id="captureBtn" style="padding: 10px 20px; background: #28a745; color: white; border: none; cursor: pointer;">Capture Photo</button>
@@ -153,6 +160,8 @@ $result->saveToFile($qrCodeFile);
                    </button>
                </div>
            <?php endforeach; ?>
+            <!-- Bottone Crea Collage -->
+            <button id="createCollageBtn" style="padding: 10px 20px; background: #ffc107; color: white; border: none; cursor: pointer; margin-top: 20px;">Crea Collage</button>
        <?php endif; ?>
    </div>

@@ -161,6 +170,40 @@ $result->saveToFile($qrCodeFile);
        <span class="image-modal-close">&times;</span>
        <img id="enlargedImage" class="image-modal-content" src="" alt="Immagine ingrandita">
    </div>
+
+    <!-- Nuovo modale per collage -->
+    <div id="collageModal" class="modal" style="display: none; position: fixed; z-index: 1002; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8);">
+        <div class="modal-content" style="background: white; margin: 5% auto; padding: 20px; width: 80%; max-width: 1200px; position: relative;">
+            <span class="close-collage" style="position: absolute; top: 10px; right: 20px; font-size: 30px; cursor: pointer;">&times;</span>
+            <h3>Crea Collage</h3>
+
+            <!-- Lista foto selezionabili -->
+            <div id="collagePhotoList" style="max-height: 200px; overflow-y: auto; margin-bottom: 20px;">
+                <?php foreach ($photos as $photo): ?>
+                    <div style="display: inline-block; margin: 10px;">
+                        <input type="checkbox" class="photo-checkbox" data-path="../photostrf/<?= htmlspecialchars($photo['file_path']) ?>">
+                        <img src="../photostrf/<?= htmlspecialchars($photo['file_path']) ?>" alt="" style="width: 80px; height: 80px;">
+                    </div>
+                <?php endforeach; ?>
+            </div>
+
+            <!-- Bottone per aggiungere selezionate al canvas -->
+            <button id="addToCanvasBtn">Aggiungi Selezionate al Canvas</button>
+
+            <!-- Canvas per editing -->
+            <canvas id="collageCanvas" width="800" height="600" style="border: 1px solid #ccc; margin-top: 20px;"></canvas>
+
+            <!-- Bottoni azioni -->
+            <div style="margin-top: 20px;">
+                <button id="saveCollageBtn">Salva Collage</button>
+                <button id="clearCanvasBtn">Pulisci Canvas</button>
+                <button id="bringToFrontBtn" title="Porta in primo piano">In Alto</button>
+                <button id="sendToBackBtn" title="Manda in fondo">In Fondo</button>
+                <button id="bringForwardBtn" title="Sposta avanti di un livello">Avanti</button>
+                <button id="sendBackwardBtn" title="Sposta indietro di un livello">Indietro</button>
+            </div>
+        </div>
+    </div>
 </div>

 <style>
Author	SHA1	Message	Date
solocla	0749032fbc	added collage, fixed parts marker color, added ri number	2025-09-04 15:01:03 +02:00
solocla	1303cff9fd	added export to lims button	2025-08-29 15:36:55 +02:00
solocla	6b2bd0964b	fixed dropdown selection	2025-08-28 10:25:12 +02:00
solocla	0d2cf13524	update historical trf	2025-08-28 09:36:16 +02:00
solocla	f6ef9c39d2	added multi webcam functionality	2025-08-27 20:21:38 +02:00
solocla	7e4ed56f28	Merge feature/historical_imported_trf into main (kept main version for logs and import_edit2.php)	2025-08-27 12:16:41 +02:00
solocla	06dd7883c2	update historical trf and navbar	2025-08-27 12:13:11 +02:00
solocla	22e4e652b5	import edit update	2025-08-21 12:41:30 +02:00
solocla	d8eca66747	historical trf	2025-08-18 15:57:36 +02:00