trial remove.bg

public/userarea/class/curl_auth_debug.log

@@ -31,6 +31,6 @@ Content-Length: 51
 < strict-transport-security: max-age=2592000
 < x-powered-by: ASP.NET
 < x-content-type-options: nosniff
-< date: Sat, 06 Sep 2025 10:24:00 GMT
+< date: Fri, 29 Aug 2025 14:28:29 GMT
 < 
 * Connection #0 to host 93.43.5.102 left intact

public/userarea/class/curl_request_debug.log

@@ -15,11 +15,11 @@
 * [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.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NzE2MTQ0MCwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.UgVN5wzjtR8MRU2xLDFWRHIAYLJTmxF3x7kWeVU11YU]
+* [HTTP/2] [1] [authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NjQ4NDkwOSwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.VPLdAAvg-D2ReaPr7erRrgX70RQsySvuBXN284HFQ74]
 * [HTTP/2] [1] [accept: application/json]
 > GET /limsapi/api/odata/CustomField(1083)?$expand=CustomFieldsValues HTTP/2
 Host: 93.43.5.102
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NzE2MTQ0MCwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.UgVN5wzjtR8MRU2xLDFWRHIAYLJTmxF3x7kWeVU11YU
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NjQ4NDkwOSwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.VPLdAAvg-D2ReaPr7erRrgX70RQsySvuBXN284HFQ74
 Accept: application/json
 
 < HTTP/2 200 
@@ -30,6 +30,6 @@ Accept: application/json
 < odata-version: 4.0
 < x-powered-by: ASP.NET
 < x-content-type-options: nosniff
-< date: Sat, 06 Sep 2025 10:24:02 GMT
+< date: Fri, 29 Aug 2025 14:28:33 GMT
 < 
 * Connection #0 to host 93.43.5.102 left intact

public/userarea/historical_trf.php

@@ -948,7 +948,6 @@ 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>

public/userarea/import_edit2.php

@@ -21,8 +21,8 @@ if ($_SERVER['REQUEST_METHOD'] !== 'POST' || !isset($_POST['template_id']) || !i
 
 $template_id = intval($_POST['template_id']) ?? $_SESSION['template_id'];
 $selected_rows = $_POST['selected_rows'] ?? $_SESSION['selected_rows'];
-$columns = json_decode($_POST['columns'], true) ?? $_SESSION['columns'];
+$columns = json_decode($_POST['columns'], true) ?? $_SESSION['columns']; // Header dell'XLS
-$rows = json_decode($_POST['rows'], true) ?? $_SESSION['rows'];
+$rows = json_decode($_POST['rows'], true) ?? $_SESSION['rows'];       // Dati dell'XLS
 $newFilename = htmlspecialchars($_POST['filename']) ?? $_SESSION['filename'];
 
 // Log dei dati ricevuti
@@ -31,7 +31,7 @@ error_log("Columns: " . json_encode($columns));
 error_log("Rows: " . json_encode($rows));
 
 // Recupera l'ID dell'utente loggato
-$user_id = $iduserlogin ?? 1;
+$user_id = $iduserlogin ?? 1; // Default a 1 se non definito
 
 $db = DBHandlerSelect::getInstance();
 $pdo = $db->getConnection();
@@ -98,26 +98,26 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
     <?php include('cssinclude.php'); ?>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2Lw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <style>
-        .cell-changed {
+        /* Colori pastello per input/select */
-            background-color: #fff3b0 !important;
-            transition: background-color 0.3s ease;
-        }
-
         input.auto-input,
         select.auto-input {
             background-color: #d4edda;
+            /* Verde pastello */
         }
 
         input.manual-input,
         select.manual-input {
             background-color: #fff3cd;
+            /* Giallino pastello */
         }
 
         input.required-input,
         select.required-input {
             background-color: #f8d7da;
+            /* Rossino chiaro */
         }
 
+        /* Stili base per input/select */
         input,
         select {
             width: 100%;
@@ -128,11 +128,14 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
             font-size: 14px;
         }
 
+        /* Mantieni leggibilità del testo */
         input,
         select {
             color: #333;
+            /* Colore scuro per contrasto */
         }
 
+        /* Stili per i badge di stato */
         .status-badge {
             display: inline-block;
             padding: 2px 8px;
@@ -158,6 +161,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
             color: white;
         }
 
+        /* Stili esistenti rimangono invariati */
         .grid-container {
             overflow-x: auto;
             max-width: 100%;
@@ -250,11 +254,6 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
             align-items: center;
         }
 
-        .grid-top .save-all-cell {
-            flex: 0 0 210px;
-            align-items: flex-start;
-        }
-
         .propagate-btn {
             background: none;
             border: none;
@@ -371,6 +370,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
             box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
         }
 
+        /* Stile per l'header dei pulsanti combinati */
         .grid-cell.button-cell,
         .grid-header.button-header {
             min-width: 210px !important;
@@ -391,20 +391,6 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
             background-color: #d4edda !important;
             transition: background-color 0.3s ease;
         }
-
-        .save-all-btn {
-            background-color: #28a745;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            padding: 8px 16px;
-            cursor: pointer;
-            font-size: 14px;
-        }
-
-        .save-all-btn:hover {
-            background-color: #218838;
-        }
     </style>
     <title>Edit Imported Data - <?= htmlspecialchars($titlewebsite, ENT_QUOTES, 'UTF-8'); ?></title>
 </head>
@@ -427,7 +413,6 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                                 <h6 class="mb-0">Modifica Dati Importati</h6>
                                 <div id="unsavedChanges" style="display:none; color: red; font-weight: bold; margin:10px 0;">
                                     ⚠️ Unsaved changes detected! Please save before leaving this page.
-                                    <ul id="changedFields" style="margin-top:5px; font-weight:normal; color:darkred;"></ul>
                                 </div>
                             </div>
                         </div>
@@ -435,10 +420,9 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                     <div class="card-body">
                         <form id="editForm">
                             <div class="grid-container">
+                                <!-- Riga superiore per gli input dei campi manuali -->
                                 <div class="grid-top">
-                                    <div class="grid-cell save-all-cell">
+                                    <div class="grid-cell button-cell" style="flex: 0 0 210px;"></div> <!-- Actions -->
-                                        <button type="button" class="save-all-btn" title="Save All Rows"><i class="fas fa-save"></i> Save All</button>
-                                    </div>
                                     <?php if ($mainFieldMapping): ?>
                                         <div class="grid-cell" style="flex: 0 0 150px;">
                                             <?php
@@ -466,8 +450,9 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                                             ?>
                                         </div>
                                     <?php endif; ?>
-                                    <div class="grid-cell" style="flex: 0 0 150px;"></div>
+                                    <div class="grid-cell" style="flex: 0 0 150px;"></div> <!-- status -->
                                     <?php
+                                    // Campi automatici (is_manual = 0) escluso main_field
                                     $autoIndex = 0;
                                     foreach ($allMappings as $mapping) {
                                         if (!$mapping['is_manual'] && $mapping['main_field'] != 1) {
@@ -486,6 +471,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                                             $autoIndex++;
                                         }
                                     }
+                                    // Campi manuali (is_manual = 1) escluso main_field
                                     $manualIndex = 0;
                                     foreach ($allMappings as $mapping) {
                                         if ($mapping['is_manual'] && $mapping['main_field'] != 1) {
@@ -497,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']}' data-selected-value='" . htmlspecialchars($fieldValue) . "' " . ($mainFieldMapping['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') {
@@ -512,14 +498,15 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                                             $manualIndex++;
                                         }
                                     }
-                                    echo "<div class='grid-cell' style='flex: 0 0 200px;'></div>";
+                                    echo "<div class='grid-cell' style='flex: 0 0 200px;'></div>"; // AWB
-                                    echo "<div class='grid-cell' style='flex: 0 0 250px;'></div>";
+                                    echo "<div class='grid-cell' style='flex: 0 0 250px;'></div>"; // Tracking Info
-                                    echo "<div class='grid-cell' style='flex: 0 0 150px;'></div>";
+                                    echo "<div class='grid-cell' style='flex: 0 0 150px;'></div>"; // importreferencecode
-                                    echo "<div class='grid-cell' style='flex: 0 0 150px;'></div>";
+                                    echo "<div class='grid-cell' style='flex: 0 0 150px;'></div>"; // filename_import
-                                    echo "<div class='grid-cell' style='flex: 0 0 150px;'></div>";
+                                    echo "<div class='grid-cell' style='flex: 0 0 150px;'></div>"; // importdate
                                     ?>
                                 </div>
 
+                                <!-- Header della tabella -->
                                 <div class="grid-row">
                                     <div class="grid-header button-header" style="flex: 0 0 210px;">Actions</div>
                                     <?php if ($mainFieldMapping): ?>
@@ -556,6 +543,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                                     ?>
                                 </div>
 
+                                <!-- Righe della tabella -->
                                 <?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;">
@@ -704,202 +692,29 @@ 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>
     <script>
         document.addEventListener("DOMContentLoaded", function() {
-            console.log("Page loaded, initializing event listeners");
-
             const inputs = document.querySelectorAll(".cell-input, .dropdown-select, .carrier-select, .awb-input");
             const unsavedDiv = document.getElementById("unsavedChanges");
-            const changedList = document.getElementById("changedFields");
             let hasChanges = false;
-            let changedFields = {};
-
-            function renderChangedList() {
-                console.log("Rendering changed fields list:", changedFields);
-                changedList.innerHTML = "";
-                Object.keys(changedFields).forEach(rowIndex => {
-                    const fields = changedFields[rowIndex];
-                    if (fields.length > 0) {
-                        const li = document.createElement("li");
-                        li.textContent = `Row ${parseInt(rowIndex) + 1}: ${fields.join(", ")}`;
-                        changedList.appendChild(li);
-                    }
-                });
-                unsavedDiv.style.display = Object.keys(changedFields).length > 0 ? "block" : "none";
-            }
 
             inputs.forEach(el => {
                 el.addEventListener("change", () => {
-                    console.log("Input changed:", el.name);
                     hasChanges = true;
-                    const gridCell = el.closest(".grid-cell");
+                    unsavedDiv.style.display = "block";
-                    const colIndex = gridCell?.dataset.index;
-                    const rowIndex = gridCell?.dataset.row;
-                    let label = "Unknown field";
-
-                    if (colIndex) {
-                        const header = document.querySelector(`.grid-header[data-index="${colIndex}"]`);
-                        if (header) {
-                            label = header.textContent.replace(":", "").trim();
-                        }
-                    }
-
-                    if (rowIndex !== undefined) {
-                        if (!changedFields[rowIndex]) {
-                            changedFields[rowIndex] = [];
-                        }
-                        if (!changedFields[rowIndex].includes(label)) {
-                            changedFields[rowIndex].push(label);
-                        }
-                        gridCell.classList.add("cell-changed");
-                    }
-
-                    renderChangedList();
                 });
             });
 
             document.querySelectorAll(".save-btn").forEach(btn => {
                 btn.addEventListener("click", () => {
-                    const rowIndex = btn.dataset.row;
+                    hasChanges = false;
-                    console.log(`Saving row ${rowIndex}`);
+                    unsavedDiv.style.display = "none";
-                    const row = btn.closest('.grid-row');
-                    const iddatadb = row.getAttribute('data-id');
-                    const formData = new FormData();
-
-                    const inputs = row.querySelectorAll(`input[name^="rows[${rowIndex}][details]"], select[name^="rows[${rowIndex}][details]"]`);
-                    inputs.forEach(input => {
-                        const matches = input.name.match(/rows\[\d+\]\[details\]\[(\d+)\]\[field_value\]/);
-                        if (matches) {
-                            const mappingId = matches[1];
-                            formData.append(`details${mappingId}field_value`, input.value);
-                            if (input.tagName === 'SELECT' && input.classList.contains('dropdown-select')) {
-                                input.setAttribute('data-selected-value', input.value);
-                            }
-                        }
-                    });
-                    formData.append('iddatadb', iddatadb);
-
-                    fetch('save_edited_row.php', {
-                            method: 'POST',
-                            body: formData
-                        })
-                        .then(response => {
-                            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-                            return response.json();
-                        })
-                        .then(data => {
-                            console.log("Save response:", 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);
-
-                                if (changedFields[rowIndex]) {
-                                    delete changedFields[rowIndex];
-                                    document.querySelectorAll(`.grid-cell[data-row="${rowIndex}"]`)
-                                        .forEach(cell => cell.classList.remove("cell-changed"));
-                                    renderChangedList();
-                                    hasChanges = Object.keys(changedFields).length > 0;
-                                }
-
-                                alert('Salvataggio riga avvenuto con successo!');
-                            } else {
-                                alert('Errore durante il salvataggio: ' + data.message);
-                            }
-                        })
-                        .catch(error => {
-                            console.error("Save error:", error);
-                            alert('Errore durante il salvataggio: ' + error.message);
-                        });
                 });
             });
 
-            document.querySelector('.save-all-btn').addEventListener('click', async () => {
-                console.log("Saving all rows");
-                const rows = document.querySelectorAll('.grid-row');
-                let successCount = 0;
-                let errorMessages = [];
-
-                for (const row of rows) {
-                    const saveBtn = row.querySelector('.save-btn');
-                    if (!saveBtn) {
-                        console.warn(`No save button found in row with data-id: ${row.getAttribute('data-id')}`);
-                        continue;
-                    }
-                    const rowIndex = saveBtn.dataset.row;
-                    const iddatadb = row.getAttribute('data-id');
-                    if (!rowIndex || !iddatadb) {
-                        console.warn(`Missing rowIndex or iddatadb in row:`, row);
-                        continue;
-                    }
-                    console.log(`Processing row ${rowIndex} with iddatadb ${iddatadb}`);
-                    const formData = new FormData();
-
-                    const inputs = row.querySelectorAll(`input[name^="rows[${rowIndex}][details]"], select[name^="rows[${rowIndex}][details]"]`);
-                    inputs.forEach(input => {
-                        const matches = input.name.match(/rows\[\d+\]\[details\]\[(\d+)\]\[field_value\]/);
-                        if (matches) {
-                            const mappingId = matches[1];
-                            formData.append(`details${mappingId}field_value`, input.value);
-                            if (input.tagName === 'SELECT' && input.classList.contains('dropdown-select')) {
-                                input.setAttribute('data-selected-value', input.value);
-                            }
-                        }
-                    });
-                    formData.append('iddatadb', iddatadb);
-
-                    try {
-                        const response = await fetch('save_edited_row.php', {
-                            method: 'POST',
-                            body: formData
-                        });
-                        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-                        const data = await response.json();
-
-                        console.log(`Row ${rowIndex} save response:`, data);
-                        if (data.success) {
-                            successCount++;
-                            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);
-
-                            if (changedFields[rowIndex]) {
-                                delete changedFields[rowIndex];
-                                document.querySelectorAll(`.grid-cell[data-row="${rowIndex}"]`)
-                                    .forEach(cell => cell.classList.remove("cell-changed"));
-                            }
-                        } else {
-                            errorMessages.push(`Riga ${parseInt(rowIndex) + 1}: ${data.message}`);
-                        }
-                    } catch (error) {
-                        console.error(`Row ${rowIndex} save error:`, error);
-                        errorMessages.push(`Riga ${parseInt(rowIndex) + 1}: ${error.message}`);
-                    }
-                }
-
-                renderChangedList();
-                hasChanges = Object.keys(changedFields).length > 0;
-                console.log(`Save all completed: ${successCount} successes, ${errorMessages.length} errors`);
-
-                if (errorMessages.length === 0) {
-                    alert(`Tutte le ${successCount} righe salvate con successo!`);
-                } else {
-                    alert(`Salvate ${successCount} righe con successo.\nErrori:\n${errorMessages.join('\n')}`);
-                }
-            });
-
             window.addEventListener("beforeunload", function(e) {
                 if (hasChanges) {
                     e.preventDefault();
@@ -908,9 +723,9 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
             });
         });
     </script>
+
     <script>
         document.addEventListener("DOMContentLoaded", function() {
-            console.log("Initializing cell expansion and propagation");
             const inputs = document.querySelectorAll('.cell-input');
             inputs.forEach(input => {
                 input.addEventListener('focus', function() {
@@ -921,10 +736,48 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                 });
             });
 
+            const saveButtons = document.querySelectorAll('.save-btn');
+            saveButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    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);
+                    });
+                    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));
+                });
+            });
+
             const propagateButtons = document.querySelectorAll('.propagate-btn');
             propagateButtons.forEach(button => {
                 button.addEventListener('click', function() {
-                    console.log("Propagating value for column:", this.getAttribute('data-column'));
                     const column = this.getAttribute('data-column');
                     const input = this.previousElementSibling;
                     const value = input.value;
@@ -943,7 +796,6 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                                 if (targetInput) {
                                     targetInput.value = value;
                                     if (targetInput.tagName === 'SELECT') {
-                                        targetInput.setAttribute('data-selected-value', value);
                                         const event = new Event('change');
                                         targetInput.dispatchEvent(event);
                                     }
@@ -961,7 +813,6 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
             let columnIndex = 0;
             resizers.forEach(resizer => {
                 resizer.addEventListener('mousedown', function(e) {
-                    console.log("Starting column resize");
                     currentResizer = resizer;
                     const header = resizer.parentElement;
                     columnIndex = header.getAttribute('data-index');
@@ -984,7 +835,6 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
 
                 function stopResize() {
                     if (currentResizer) {
-                        console.log("Stopping column resize");
                         document.removeEventListener('mousemove', resize);
                         document.removeEventListener('mouseup', stopResize);
                         currentResizer = null;
@@ -995,15 +845,11 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
     </script>
     <script>
         document.addEventListener("DOMContentLoaded", function() {
-            console.log("Initializing dropdown population");
             const dropdownData = {};
 
             async function populateDropdowns() {
                 const dropdowns = document.querySelectorAll('.dropdown-select');
-                if (dropdowns.length === 0) {
+                if (dropdowns.length === 0) return;
-                    console.log("No dropdowns found");
-                    return;
-                }
 
                 const uniqueFieldIds = [
                     ...new Set(Array.from(dropdowns).map(d => d.getAttribute('data-field-id')))
@@ -1012,34 +858,31 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                 const missingFieldIds = uniqueFieldIds.filter(fieldId => !dropdownData[fieldId]);
 
                 if (missingFieldIds.length > 0) {
-                    console.log("Fetching dropdown data for field IDs:", missingFieldIds);
                     try {
                         const response = await fetch(
                             `get_customfield_values.php?field_ids=${missingFieldIds.join(",")}`
                         );
-                        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                         const data = await response.json();
 
                         if (data.error) {
-                            console.error("Fetch error:", data.error);
+                            console.error("Errore fetch multiplo:", data.error);
                         } else {
                             for (const fieldId of Object.keys(data)) {
                                 dropdownData[fieldId] = data[fieldId] || [];
                             }
                         }
                     } catch (error) {
-                        console.error("Fetch error:", error);
+                        console.error("Errore generale nel fetch multiplo:", error);
                     }
                 }
 
                 dropdowns.forEach(dropdown => {
                     const fieldId = dropdown.getAttribute('data-field-id');
                     const selectedValue = dropdown.getAttribute('data-selected-value') || '';
-                    const currentValue = dropdown.value;
+                    const currentValue = dropdown.value; // Preserva il valore corrente
 
                     if (!fieldId || !dropdownData[fieldId]) {
                         dropdown.innerHTML = '<option value="">Errore nel caricamento</option>';
-                        console.warn(`No data for fieldId ${fieldId}`);
                         return;
                     }
 
@@ -1048,6 +891,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                         const option = document.createElement('option');
                         option.value = value.IdCustomFieldsValue;
                         option.textContent = value.Valore;
+                        // 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)) {
@@ -1058,12 +902,87 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
 
                     if ((currentValue || selectedValue) && dropdown.value !== (currentValue || selectedValue)) {
                         dropdown.value = '';
-                        console.warn(`Value ${currentValue || selectedValue} not found for fieldId ${fieldId}`);
+                        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() {
+                    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));
+                });
+            });
+
+            const propagateButtons = document.querySelectorAll('.propagate-btn');
+            propagateButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const column = this.getAttribute('data-column');
+                    const input = this.previousElementSibling;
+                    const value = input.value;
+
+                    const gridTopCells = document.querySelector('.grid-top').querySelectorAll('.grid-cell');
+                    const targetTopIndex = Array.from(gridTopCells).findIndex(cell =>
+                        cell.querySelector('.propagate-btn[data-column="' + column + '"]')
+                    );
+
+                    if (targetTopIndex !== -1) {
+                        const rows = document.querySelectorAll('.grid-row');
+                        rows.forEach(row => {
+                            const cells = row.querySelectorAll('.grid-cell');
+                            if (cells.length > targetTopIndex) {
+                                const targetInput = cells[targetTopIndex].querySelector('select.dropdown-select, input');
+                                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);
+                                    }
+                                }
+                            }
+                        });
+                    }
+                });
+            });
         });
     </script>
 </body>

public/userarea/modal_parts.php

@@ -1,4 +1,3 @@
-<!-- Modal -->
 <div class="modal fade" id="partsModal" tabindex="-1" aria-labelledby="partsModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-xl" style="max-width: 80% !important; width: 80% !important;">
         <div class="modal-content">
@@ -9,14 +8,7 @@
             <div class="modal-body">
                 <div class="row">
                     <div class="col-md-6">
-                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+                        <h6>Elenco Parti</h6>
-                            <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>
@@ -57,8 +49,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 Descrizioni</button>
+                <button type="button" class="btn btn-warning btn-sm" id="removeBackgroundBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Rimuovi Sfondo</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-danger btn-sm" id="removeAnnotationsBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Rimuovi Annotazioni</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>
@@ -107,21 +99,12 @@
         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);
@@ -138,6 +121,8 @@
         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;
@@ -166,16 +151,15 @@
         transition: all 0.3s ease-in-out;
     }
 
-    /* Unsaved changes */
+    /* Modifiche non salvate */
     #savePhotoBtn.unsaved {
         background-color: #dc3545 !important;
-        /* Rosso */
         border-color: #dc3545 !important;
         color: white !important;
         animation: pulse 1.2s infinite;
     }
 
-    /* Animazione pulsante */
+    /* Animazione di pulsazione */
     @keyframes pulse {
         0% {
             box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);

public/userarea/parts.js

@@ -1,6 +1,11 @@
 $(document).ready(function () {
     console.log("parts.js caricato correttamente");
 
+    // ===================
+    // CONFIGURAZIONE API Remove.bg
+    // ===================
+    const REMOVE_BG_API_KEY = "E85XGT5heTBUtWsf9zMLM7cg"; // Sostituisci con la tua chiave API
+
     // ===================
     // GLOBAL STATE
     // ===================
@@ -12,21 +17,22 @@ $(document).ready(function () {
         scale: 1,
     };
 
-    // annotations keyed by photo src
+    let photoMarkers = {};
-    let photoAnnotations = {};
-    // colors keyed by part number
-    let partColors = {};
-
-    // selection
     let selectedPartNumber = null;
+    let descriptionPosition = { x: 10, y: 10 };
+    let hasDescriptions = false;
+
+    // Verifica inizializzazione del pulsante
+    console.log(
+        "Verifica pulsante #removeBackgroundBtn:",
+        $("#removeBackgroundBtn").length,
+    );
 
     // ===================
     // POPUP HANDLING
     // ===================
     const partsButtons = document.querySelectorAll(".parts-btn");
     const partsModal = document.getElementById("partsModal");
-    const closeBtn = document.querySelector("#partsModal .close-btn");
-    const overlay = document.querySelector(".overlay");
 
     partsButtons.forEach((button) => {
         button.addEventListener("click", function () {
@@ -51,39 +57,24 @@ $(document).ready(function () {
             if (partsModal) {
                 const modal = new bootstrap.Modal(partsModal);
                 modal.show();
+                console.log("Modale aperto");
             } else {
                 console.error("Modal Parts non trovato");
             }
         });
     });
 
-    if (closeBtn) {
-        closeBtn.addEventListener("click", function () {
-            partsModal.style.display = "none";
-            overlay.style.display = "none";
-            document.body.style.pointerEvents = "auto";
-        });
-    }
-
-    if (partsModal) {
-        window.addEventListener("click", function (event) {
-            if (event.target === partsModal) {
-                partsModal.style.display = "none";
-                overlay.style.display = "none";
-                document.body.style.pointerEvents = "auto";
-            }
-        });
-    }
-
     // ===================
     // PHOTO LOADERS
     // ===================
     function loadPhoto(iddatadb) {
+        console.log("Caricamento foto per iddatadb:", iddatadb);
         $.ajax({
             url: "load_photo.php",
             method: "GET",
             data: { iddatadb: iddatadb },
             success: function (response) {
+                console.log("Risposta load_photo.php:", response);
                 if (response.success) {
                     if (response.photos && response.photos.length > 1) {
                         showPhotoSelector(response.photos);
@@ -95,21 +86,25 @@ $(document).ready(function () {
                     } else {
                         $("#samplePhoto").attr("src", "");
                         alert("Nessuna foto trovata per questo TRF.");
+                        console.log("Nessuna foto trovata");
                     }
                 } else {
                     alert(
                         response.message ||
                             "Errore nel caricamento della foto.",
                     );
+                    console.error("Errore load_photo.php:", response.message);
                 }
             },
             error: function (xhr, status, error) {
                 alert("Errore nel caricamento della foto: " + error);
+                console.error("Errore AJAX load_photo.php:", error, xhr.status);
             },
         });
     }
 
     function showPhotoSelector(photos) {
+        console.log("Mostra selettore foto:", photos);
         const selectorContainer = $("#photoSelectorContainer");
         selectorContainer.empty();
 
@@ -140,11 +135,17 @@ $(document).ready(function () {
     }
 
     function loadSinglePhoto(photoPath) {
+        console.log("Caricamento singola foto:", photoPath);
         const img = $("#samplePhoto");
-        img.off("load"); // avoid stacking multiple handlers
+        img.off("load");
         img.attr("src", photoPath);
 
         img.on("load", function () {
+            console.log(
+                "Immagine caricata, dimensioni naturali:",
+                img[0].naturalWidth,
+                img[0].naturalHeight,
+            );
             const canvas = document.getElementById("photoCanvas");
             const ctx = canvas.getContext("2d");
 
@@ -188,7 +189,13 @@ $(document).ready(function () {
             ctx.drawImage(img.get(0), 0, 0, naturalWidth, naturalHeight);
 
             updateMarkers();
-            updateDescriptions();
+            if (hasDescriptions)
+                drawDescriptions(descriptionPosition.x, descriptionPosition.y);
+        });
+
+        img.on("error", function () {
+            console.error("Errore caricamento immagine:", photoPath);
+            alert("Errore nel caricamento dell'immagine.");
         });
     }
 
@@ -197,7 +204,6 @@ $(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>
@@ -212,9 +218,6 @@ $(document).ready(function () {
             </tr>`;
         $("#partsTableBody").append(newRow);
         updateRowButtons();
-        // Initialize color for the new part
-        const partNumber = nextPartNumber || 1;
-        partColors[partNumber] = defaultColor;
     }
 
     function updateRowButtons() {
@@ -256,7 +259,6 @@ $(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({
@@ -267,10 +269,9 @@ $(document).ready(function () {
                 success: function (response) {
                     if (response.success) {
                         $row.remove();
-                        delete partColors[partNumber];
                         updateRowButtons();
                         updatePartsList();
-                        clearCanvasMarkers(false); // Preserve descriptions
+                        clearCanvasMarkers();
                     } else {
                         alert("Errore nell'eliminazione: " + response.message);
                     }
@@ -288,7 +289,6 @@ $(document).ready(function () {
             });
         } else {
             $row.remove();
-            delete partColors[partNumber];
             updateRowButtons();
             updatePartsList();
         }
@@ -348,28 +348,18 @@ $(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) {
+        console.log("Caricamento parti esistenti per iddatadb:", iddatadb);
         $.ajax({
             url: "load_parts.php",
             method: "GET",
             data: { iddatadb: iddatadb },
             success: function (response) {
+                console.log("Risposta load_parts.php:", 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>
@@ -383,7 +373,6 @@ $(document).ready(function () {
                                     </td>
                                 </tr>`;
                             $("#partsTableBody").append(newRow);
-                            partColors[part.part_number] = defaultColor;
                         });
                     } else {
                         addNewRow(1);
@@ -395,153 +384,36 @@ $(document).ready(function () {
                         "Errore nel caricamento delle parti: " +
                             response.message,
                     );
+                    console.error("Errore load_parts.php:", response.message);
                     addNewRow(1);
                 }
             },
             error: function (xhr, status, error) {
                 alert("Errore nel caricamento delle parti: " + error);
+                console.error("Errore AJAX load_parts.php:", error, xhr.status);
                 addNewRow(1);
             },
         });
     }
 
     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();
-            const partColor =
-                partColors[partNumber] ||
-                (partDescription.startsWith("Mix") ? "#0000ff" : "#ff0000");
             if (
                 partNumber &&
                 partDescription &&
-                (showMixParts || !partDescription.startsWith("Mix"))
+                !partDescription.startsWith("Mix")
             ) {
                 const listItem = `
                     <li class="list-group-item" data-part-number="${partNumber}">
                         ${partNumber} - ${partDescription}
-                        <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>
-                            <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",
-        }));
-
-        console.log(
-            "Dati inviati a renumber_parts.php:",
-            JSON.stringify({ iddatadb: iddatadb, parts: partsToSave }),
-        );
-
-        $.ajax({
-            url: "renumber_parts.php",
-            method: "POST",
-            data: JSON.stringify({
-                iddatadb: iddatadb,
-                parts: partsToSave,
-            }),
-            contentType: "application/json",
-            success: function (response) {
-                console.log("Risposta da renumber_parts.php:", response);
-                if (response.success) {
-                    $rows.each(function (index) {
-                        const $row = $(this);
-                        const newPartId =
-                            response.part_ids && response.part_ids[index]
-                                ? response.part_ids[index]
-                                : $row.data("part-id");
-                        if (newPartId) {
-                            $row.attr("data-part-id", newPartId);
-                            $row.data("part-id", newPartId);
-                        }
-                        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 {
-                    console.error("Errore dal server:", response.message);
-                    alert(
-                        "Errore nella rinumerazione delle parti: " +
-                            response.message,
-                    );
-                }
-            },
-            error: function (xhr, status, error) {
-                console.error("Errore AJAX:", status, error, xhr.responseText);
-                alert(
-                    "Errore nella rinumerazione delle parti: " +
-                        error +
-                        " - " +
-                        xhr.responseText,
-                );
-            },
-        });
     }
 
     $(document).on("click", ".add-to-mix-btn", function () {
@@ -578,22 +450,11 @@ $(document).ready(function () {
     });
 
     $("#partsList").on("click", "li", function (e) {
-        if (
+        if ($(e.target).hasClass("add-to-mix-btn")) return;
-            $(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
     // ===================
@@ -607,39 +468,29 @@ $(document).ready(function () {
         const clickX = e.clientX - rect.left;
         const clickY = e.clientY - rect.top;
 
-        const x = clickX / photoData.scale; // convert to NATURAL coords
+        const x = clickX / photoData.scale;
         const y = clickY / photoData.scale;
 
         const currentPhoto = $("#samplePhoto").attr("src");
-        if (!photoAnnotations[currentPhoto]) {
+        if (!photoMarkers[currentPhoto]) photoMarkers[currentPhoto] = [];
-            photoAnnotations[currentPhoto] = {
-                markers: [],
-                hasDescriptions: false,
-                descriptionPosition: { x: 10, y: 10 },
-            };
-        }
 
-        const partColor = partColors[selectedPartNumber] || "#ff0000";
+        const existingMarker = photoMarkers[currentPhoto].find(
-
-        const existingMarker = photoAnnotations[currentPhoto].markers.find(
             (m) => m.partNumber == selectedPartNumber,
         );
         if (existingMarker) {
             existingMarker.x = x;
             existingMarker.y = y;
-            existingMarker.color = partColor;
         } else {
-            photoAnnotations[currentPhoto].markers.push({
+            photoMarkers[currentPhoto].push({
                 partNumber: selectedPartNumber,
                 x,
                 y,
-                color: partColor,
             });
         }
 
         updateMarkers();
-        updateDescriptions();
+        if (hasDescriptions)
-        markUnsaved();
+            drawDescriptions(descriptionPosition.x, descriptionPosition.y);
 
         selectedPartNumber = null;
         $("#partsList li").removeClass("active");
@@ -655,34 +506,14 @@ $(document).ready(function () {
         });
 
         const currentPhoto = $("#samplePhoto").attr("src");
-        const annotations = photoAnnotations[currentPhoto] || {
+        const markers = photoMarkers[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" style="background: ${markerColor}; border: 1px solid ${markerColor}; color: #ffffff;">${marker.partNumber}</div>`,
+                `<div class="draggable-marker">${marker.partNumber}</div>`,
             ).css({
                 left: scaledX - 8 + "px",
                 top: scaledY - 8 + "px",
@@ -725,16 +556,9 @@ $(document).ready(function () {
             if (item && item.partNumber) {
                 item.x = (currentX + 8) / photoData.scale;
                 item.y = (currentY + 8) / photoData.scale;
-                markUnsaved();
             } else {
-                const currentPhoto = $("#samplePhoto").attr("src");
+                descriptionPosition.x = (currentX + 5) / photoData.scale;
-                if (photoAnnotations[currentPhoto]) {
+                descriptionPosition.y = (currentY + 5) / photoData.scale;
-                    photoAnnotations[currentPhoto].descriptionPosition.x =
-                        (currentX + 5) / photoData.scale;
-                    photoAnnotations[currentPhoto].descriptionPosition.y =
-                        (currentY + 5) / photoData.scale;
-                    markUnsaved();
-                }
             }
         });
 
@@ -746,23 +570,7 @@ $(document).ready(function () {
         });
     }
 
-    function updateDescriptions() {
+    function drawDescriptions(x, y) {
-        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();
@@ -770,16 +578,18 @@ $(document).ready(function () {
             if (
                 partNumber &&
                 partDescription &&
-                (showMixParts || !partDescription.startsWith("Mix"))
+                !partDescription.startsWith("Mix")
             ) {
                 partsList.push(`${partNumber} ${partDescription}`);
             }
         });
 
+        const descriptionList = $("#descriptionList");
+        descriptionList.empty();
         descriptionList.css({
             display: "block",
-            top: annotations.descriptionPosition.y * photoData.scale + "px",
+            top: y * photoData.scale + "px",
-            left: annotations.descriptionPosition.x * photoData.scale + "px",
+            left: x * photoData.scale + "px",
         });
         partsList.forEach((part) =>
             descriptionList.append(`<div>${part}</div>`),
@@ -788,18 +598,11 @@ $(document).ready(function () {
         updateMarkers();
     }
 
-    function clearCanvasMarkers(clearDescriptions = true) {
+    function clearCanvasMarkers() {
         const currentPhoto = $("#samplePhoto").attr("src");
-        if (clearDescriptions) {
+        photoMarkers[currentPhoto] = [];
-            if (photoAnnotations[currentPhoto]) {
+        hasDescriptions = false;
-                photoAnnotations[currentPhoto].hasDescriptions = false;
+        $("#descriptionList").css("display", "none");
-                photoAnnotations[currentPhoto].descriptionPosition = {
-                    x: 10,
-                    y: 10,
-                };
-            }
-            $("#descriptionList").css("display", "none");
-        }
         $("#markerContainer").empty();
 
         const canvas = document.getElementById("photoCanvas");
@@ -815,46 +618,135 @@ $(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 () {
-        const currentPhoto = $("#samplePhoto").attr("src");
+        console.log("Aggiungi descrizioni cliccato");
-        if (!photoAnnotations[currentPhoto]) {
+        hasDescriptions = true;
-            photoAnnotations[currentPhoto] = {
+        descriptionPosition = { x: 10, y: 10 };
-                markers: [],
+        drawDescriptions(descriptionPosition.x, descriptionPosition.y);
-                hasDescriptions: false,
-                descriptionPosition: { x: 10, y: 10 },
-            };
-        }
-        photoAnnotations[currentPhoto].hasDescriptions = true;
-        updateDescriptions();
         makeDraggable($("#descriptionList"));
-        markUnsaved();
     });
 
     $("#removeAnnotationsBtn").on("click", function () {
-        clearCanvasMarkers(true); // Remove only descriptions
+        console.log("Rimuovi annotazioni cliccato");
+        clearCanvasMarkers();
     });
 
-    $("#undoMarkerBtn").on("click", function () {
+    // ===================
-        undoLastMarker();
+    // REMOVE BACKGROUND (Remove.bg)
+    // ===================
+    $("#removeBackgroundBtn").on("click", function () {
+        console.log("Pulsante Rimuovi Sfondo cliccato");
+
+        if (
+            !REMOVE_BG_API_KEY ||
+            REMOVE_BG_API_KEY === "INSERISCI_LA_TUA_CHIAVE_API"
+        ) {
+            alert(
+                "Chiave API di Remove.bg non configurata. Inserisci una chiave valida.",
+            );
+            console.error("Chiave API non valida");
+            return;
+        }
+
+        const currentPhoto = $("#samplePhoto")[0];
+        if (!currentPhoto.src) {
+            alert("Nessuna foto selezionata.");
+            console.error("Nessuna immagine in #samplePhoto");
+            return;
+        }
+
+        console.log("Immagine corrente:", currentPhoto.src);
+
+        // Salva marker e descrizioni
+        const currentPhotoKey = currentPhoto.src;
+        const markers = photoMarkers[currentPhotoKey] || [];
+        const descPos = { ...descriptionPosition };
+        const hasDesc = hasDescriptions;
+
+        // Mostra spinner
+        $("#removeBackgroundBtn")
+            .html('<i class="fas fa-spinner fa-spin"></i> Elaborazione...')
+            .prop("disabled", true);
+
+        // Controlla se l'immagine è un URL pubblico o un dataURL
+        const formData = new FormData();
+        if (currentPhoto.src.startsWith("data:")) {
+            // Converti dataURL in blob
+            console.log("Immagine è un dataURL, conversione in blob...");
+            fetch(currentPhoto.src)
+                .then((res) => res.blob())
+                .then((blob) => {
+                    formData.append("image_file", blob, "image.png");
+                    formData.append("size", "auto");
+                    sendRemoveBgRequest(formData, markers, descPos, hasDesc);
+                })
+                .catch((err) => {
+                    console.error("Errore conversione dataURL in blob:", err);
+                    alert("Errore nella conversione dell'immagine.");
+                    $("#removeBackgroundBtn")
+                        .html("Rimuovi Sfondo")
+                        .prop("disabled", false);
+                });
+        } else {
+            // Usa URL pubblico
+            console.log("Immagine è un URL, invio diretto...");
+            formData.append("image_url", currentPhoto.src);
+            formData.append("size", "auto");
+            sendRemoveBgRequest(formData, markers, descPos, hasDesc);
+        }
     });
 
+    function sendRemoveBgRequest(formData, markers, descPos, hasDesc) {
+        console.log("Invio richiesta a Remove.bg...");
+        $.ajax({
+            url: "https://api.remove.bg/v1.0/removebg",
+            method: "POST",
+            headers: {
+                "X-Api-Key": REMOVE_BG_API_KEY,
+            },
+            data: formData,
+            processData: false,
+            contentType: false,
+            success: function (response) {
+                console.log("Risposta Remove.bg ricevuta:", response);
+                // Ripristina il pulsante
+                $("#removeBackgroundBtn")
+                    .html("Rimuovi Sfondo")
+                    .prop("disabled", false);
+
+                // Imposta l'immagine senza sfondo
+                const dataURL =
+                    "data:image/png;base64," + response.data.result_b64;
+                $("#samplePhoto").attr("src", dataURL);
+
+                // Ripristina marker e descrizioni
+                photoMarkers[dataURL] = markers;
+                descriptionPosition = descPos;
+                hasDescriptions = hasDesc;
+
+                loadSinglePhoto(dataURL);
+                markUnsaved();
+            },
+            error: function (xhr) {
+                console.error(
+                    "Errore API Remove.bg:",
+                    xhr.status,
+                    xhr.responseText,
+                );
+                alert(
+                    "Errore nella rimozione dello sfondo: " +
+                        (xhr.responseJSON?.errors?.[0]?.title ||
+                            xhr.statusText),
+                );
+                $("#removeBackgroundBtn")
+                    .html("Rimuovi Sfondo")
+                    .prop("disabled", false);
+            },
+        });
+    }
+
     let unsavedChanges = false;
 
     // --- helper functions ---
@@ -862,12 +754,14 @@ $(document).ready(function () {
         if (!unsavedChanges) {
             unsavedChanges = true;
             $("#savePhotoBtn").addClass("unsaved").text("⚠️ Salva Modifiche");
+            console.log("Modifiche non salvate segnate");
         }
     }
 
     function clearUnsaved() {
         unsavedChanges = false;
         $("#savePhotoBtn").removeClass("unsaved").text("Salva Foto con Nome");
+        console.log("Modifiche salvate, stato ripristinato");
     }
 
     // --- event listeners ---
@@ -884,156 +778,20 @@ $(document).ready(function () {
         }
     });
 
-    // --- SAVE BUTTON ---
+    // --- SAVE BUTTON (disabilitato per ora) ---
     $("#savePhotoBtn").on("click", function () {
-        const canvas = document.getElementById("photoCanvas");
+        alert("Funzionalità di salvataggio non implementata per ora.");
-        const ctx = canvas.getContext("2d");
+        console.log("Pulsante Salva Foto cliccato");
-        const img = $("#samplePhoto");
-
-        const naturalWidth = img.get(0).naturalWidth;
-        const naturalHeight = img.get(0).naturalHeight;
-        canvas.width = naturalWidth;
-        canvas.height = naturalHeight;
-
-        ctx.drawImage(img.get(0), 0, 0, naturalWidth, naturalHeight);
-
-        const currentPhoto = $("#samplePhoto").attr("src");
-        const annotations = photoAnnotations[currentPhoto] || {
-            markers: [],
-            hasDescriptions: false,
-            descriptionPosition: { x: 10, y: 10 },
-        };
-        const showMixParts = $("#showMixParts").is(":checked");
-
-        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);
-                });
-            }
-        }
-
-        const markers = annotations.markers;
-        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 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 = markerColor; // Use the stored color
-            ctx.fill();
-
-            ctx.lineWidth = 3;
-            ctx.strokeStyle = markerColor; // Use the same color for the border
-            ctx.stroke();
-
-            ctx.fillStyle = "#ffffff";
-            ctx.font = `bold ${fontSize}px Arial`;
-            ctx.textAlign = "center";
-            ctx.textBaseline = "middle";
-            ctx.fillText(marker.partNumber || "", x, y);
-        });
-
-        const dataURL = canvas.toDataURL("image/png");
-        const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
-        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],
-        );
-
-        if (newName) {
-            const finalName = newName + "_" + timestamp + ".png";
-            $.ajax({
-                url: "save_annotated_photo.php",
-                method: "POST",
-                data: {
-                    dataURL: dataURL,
-                    filename: finalName,
-                    iddatadb: iddatadb,
-                },
-                success: function (response) {
-                    if (response.success) {
-                        alert(
-                            "Foto salvata con successo: " + response.file_path,
-                        );
-                        $("#samplePhoto").attr("src", response.file_path);
-                        loadPhoto(iddatadb);
-                        clearCanvasMarkers(false); // Preserve descriptions
-                        clearUnsaved();
-                    } else {
-                        alert("Errore: " + response.message);
-                    }
-                },
-                error: function (xhr, status, error) {
-                    alert("Errore Ajax: " + error);
-                },
-            });
-        }
     });
 
     // ===================
     // DEBUG HOVER LOGS
     // ===================
     $(document).on("mouseenter", "tr", function () {
-        // console.log("Mouse entrato su riga");
+        console.log("Mouse entrato su riga");
     });
 
     $(document).on("mouseleave", "tr", function () {
-        // console.log("Mouse uscito da riga");
+        console.log("Mouse uscito da riga");
     });
 });

public/userarea/photos.js

@@ -187,54 +187,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";
-            }
-        }
-    }
-
     // Funzione per attaccare gli event listener al contenuto del popup
     function attachPhotoEventListeners(iddatadb) {
         const dropArea = document.getElementById("dropArea");
@@ -380,162 +332,6 @@ 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) {
@@ -544,6 +340,54 @@ 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");

public/userarea/photos_popup.php

@@ -1,10 +1,6 @@
 <?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';
 
@@ -120,6 +116,7 @@ $result->saveToFile($qrCodeFile);
         <input type="file" id="photoInput" multiple accept="image/*" style="display: none;">
     </div>
     <!-- Area per la webcam -->
+    <!-- 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;">
@@ -131,8 +128,7 @@ $result->saveToFile($qrCodeFile);
             <button id="closeWebcamBtn" style="padding: 10px 20px; background: #dc3545; color: white; border: none; cursor: pointer;">Close Webcam</button>
         </div>
     </div>
-    <button id="openWebcamBtn" style="padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; margin-bottom: 20px;">Take Photo with Webcam</button>
+    <button id="openWebcamBtn" style="padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; margin-bottom: 20px;">Take Photo with Webcam</button> <!-- Elenco delle foto -->
-    <!-- Elenco delle foto -->
     <div id="photosList">
         <?php if (empty($photos)): ?>
             <p>No Photos present.</p>
@@ -160,8 +156,6 @@ $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>
 
@@ -170,40 +164,6 @@ $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>

public/userarea/remove_background.php

@@ -0,0 +1,55 @@
+<?php
+header('Content-Type: application/json');
+
+$photo_path = $_POST['photo_path'] ?? '';
+$iddatadb = $_POST['iddatadb'] ?? '';
+
+if (empty($photo_path) || empty($iddatadb)) {
+    echo json_encode(['success' => false, 'message' => 'Parametri mancanti']);
+    exit;
+}
+
+// Verifica che il file esista
+$full_path = realpath($photo_path);
+if (!$full_path || !file_exists($full_path)) {
+    echo json_encode(['success' => false, 'message' => 'File non trovato']);
+    exit;
+}
+
+// Configurazione Remove.bg API
+$api_key = 'YOUR_API_KEY'; // Inserisci la tua chiave API di Remove.bg
+$api_url = 'https://api.remove.bg/v1.0/removebg';
+
+// Preparazione della richiesta
+$ch = curl_init();
+curl_setopt($ch, CURLOPT_URL, $api_url);
+curl_setopt($ch, CURLOPT_POST, true);
+curl_setopt($ch, CURLOPT_POSTFIELDS, [
+    'image_file' => new CURLFile($full_path),
+    'size' => 'auto',
+]);
+curl_setopt($ch, CURLOPT_HTTPHEADER, [
+    'X-Api-Key: ' . $api_key
+]);
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+
+// Esecuzione della richiesta
+$response = curl_exec($ch);
+$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+curl_close($ch);
+
+if ($http_code !== 200) {
+    echo json_encode(['success' => false, 'message' => 'Errore API Remove.bg']);
+    exit;
+}
+
+// Salva l'immagine senza sfondo
+$timestamp = date('YmdHis');
+$new_filename = "no_bg_photo_{$iddatadb}_{$timestamp}.png";
+$new_filepath = "uploads/{$new_filename}"; // Assumi una directory Uploads/
+file_put_contents($new_filepath, $response);
+
+// Aggiorna il database o il sistema di file con il nuovo percorso
+// Qui potresti aggiungere logica per aggiornare il database con il nuovo percorso
+
+echo json_encode(['success' => true, 'new_photo_path' => $new_filepath]);

public/userarea/renumber_parts.php

@@ -1,63 +0,0 @@
-<?php
-header('Content-Type: application/json');
-include('include/headscript.php');
-
-$dbHandler = DBHandlerSelect::getInstance();
-$pdo = $dbHandler->getConnection();
-
-$data = json_decode(file_get_contents('php://input'), true);
-
-$iddatadb = $data['iddatadb'] ?? null;
-$parts = $data['parts'] ?? [];
-
-if (!$iddatadb || empty($parts)) {
-    echo json_encode(['success' => false, 'message' => 'Dati mancanti']);
-    exit;
-}
-
-try {
-    $pdo->beginTransaction();
-
-    // Elimina tutte le parti esistenti per l'iddatadb per evitare conflitti di unicità
-    $stmt = $pdo->prepare("DELETE FROM identification_parts WHERE iddatadb = :iddatadb");
-    $stmt->execute([':iddatadb' => $iddatadb]);
-
-    // Prepara l'inserimento delle nuove parti
-    $stmt = $pdo->prepare("
-        INSERT INTO identification_parts
-        (iddatadb, part_number, part_description, mix, created_at, updated_at)
-        VALUES (:iddatadb, :part_number, :part_description, :mix, NOW(), NOW())
-    ");
-
-    $part_ids = [];
-    foreach ($parts as $part) {
-        $partNumber = $part['part_number'] ?? null;
-        $partDescription = $part['part_description'] ?? '';
-        $mix = $part['mix'] ?? 'N';
-
-        if (!$partNumber || !$partDescription) {
-            throw new PDOException("Numero parte o descrizione mancante per parte: " . json_encode($part));
-        }
-
-        $stmt->execute([
-            ':iddatadb' => $iddatadb,
-            ':part_number' => $partNumber,
-            ':part_description' => $partDescription,
-            ':mix' => $mix
-        ]);
-        $part_ids[] = $pdo->lastInsertId();
-    }
-
-    $pdo->commit();
-    echo json_encode([
-        'success' => true,
-        'part_ids' => $part_ids,
-        'message' => 'Parti rinumerate con successo'
-    ]);
-} catch (PDOException $e) {
-    $pdo->rollBack();
-    echo json_encode([
-        'success' => false,
-        'message' => 'Errore nel salvataggio: ' . $e->getMessage()
-    ]);
-}