From 9399e5b54aae74383fd6d08d001893cd555f9289 Mon Sep 17 00:00:00 2001
From: Claudio <info@claudiosironi.com>
Date: Wed, 21 May 2025 13:57:39 +0200
Subject: [PATCH] update documents with icon style

---
 public/userportal/get-documents.php           |  27 +-
 public/userportal/get-sections.php            |  51 +
 public/userportal/tabs/documenti.php          | 649 ++++++-------
 .../userportal/tabs/documenti_condropdown.php | 875 ++++++++++++++++++
 4 files changed, 1267 insertions(+), 335 deletions(-)
 create mode 100644 public/userportal/get-sections.php
 create mode 100644 public/userportal/tabs/documenti_condropdown.php

diff --git a/public/userportal/get-documents.php b/public/userportal/get-documents.php
index 7e0b52b..0a89618 100644
--- a/public/userportal/get-documents.php
+++ b/public/userportal/get-documents.php
@@ -1,22 +1,13 @@
 <?php
 include('include/headscript.php');
 
-// Connessione al database
 $conn = new mysqli($servername, $username, $password, $database);
-
-// Recupera l'id utente loggato
 $iduserlogin = $_SESSION['iduserlogin'];
-
-// Recupera l'id della casa dall'URL
 $idhome = isset($_GET['idhome']) ? intval($_GET['idhome']) : 0;
-
-// Recupera lo slug dalla richiesta
 $docpage = isset($_GET['slug']) ? $_GET['slug'] : 'legal';
-
-// Recupera il parametro showOnlyRequired
 $showOnlyRequired = isset($_GET['showOnlyRequired']) && $_GET['showOnlyRequired'] === 'true';
+$sectionId = isset($_GET['sectionId']) ? $_GET['sectionId'] : null;
 
-// Recupera i dettagli della casa (per verifica accesso)
 $queryHome = $conn->prepare("SELECT * FROM home WHERE idhome = ? AND iduser = ?");
 $queryHome->bind_param('ii', $idhome, $iduserlogin);
 $queryHome->execute();
@@ -28,7 +19,6 @@ if (!$homeData) {
     die(json_encode(['error' => 'Casa non trovata o accesso non autorizzato']));
 }
 
-// Recupera il `page_id` corrispondente allo slug
 $queryPageId = $conn->prepare("SELECT idpages FROM pages WHERE slug = ?");
 $queryPageId->bind_param('s', $docpage);
 $queryPageId->execute();
@@ -42,7 +32,6 @@ if (!$pageData) {
 
 $page_id = $pageData['idpages'];
 
-// Recupera i documenti associati al `page_id`, con le sezioni
 $sql = "
     SELECT d.*, s.section_name AS section_name
     FROM documents d
@@ -52,10 +41,17 @@ $sql = "
 if ($showOnlyRequired) {
     $sql .= " AND d.is_required = 1";
 }
+if ($sectionId) {
+    $sql .= " AND md5(s.section_name) = ?";
+}
 $sql .= " ORDER BY s.section_name, d.document_name";
 
 $queryDocuments = $conn->prepare($sql);
-$queryDocuments->bind_param('i', $page_id);
+if ($sectionId) {
+    $queryDocuments->bind_param('is', $page_id, $sectionId);
+} else {
+    $queryDocuments->bind_param('i', $page_id);
+}
 $queryDocuments->execute();
 $resultDocuments = $queryDocuments->get_result();
 
@@ -65,7 +61,6 @@ while ($row = $resultDocuments->fetch_assoc()) {
     $documents[$sectionName][] = $row;
 }
 
-// Recupera i documenti già caricati per questa casa
 $queryLoadedDocuments = $conn->prepare("SELECT * FROM doc_storage WHERE idhome = ?");
 $queryLoadedDocuments->bind_param('i', $idhome);
 $queryLoadedDocuments->execute();
@@ -76,7 +71,6 @@ while ($row = $resultLoadedDocuments->fetch_assoc()) {
     $loadedDocuments[$row['document_id']][] = $row;
 }
 
-// Prepara la risposta JSON
 $response = [
     'homeName' => $homeData['name'] ?? '',
     'homeAddress' => ($homeData['address'] ?? '') . ', ' . ($homeData['city'] ?? '') . ' ' . ($homeData['zip'] ?? ''),
@@ -84,9 +78,6 @@ $response = [
     'loadedDocuments' => $loadedDocuments
 ];
 
-// Imposta l'header per indicare JSON
 header('Content-Type: application/json');
-
-// Evita output extra
 echo json_encode($response, JSON_PRETTY_PRINT);
 exit;
diff --git a/public/userportal/get-sections.php b/public/userportal/get-sections.php
new file mode 100644
index 0000000..c51c33e
--- /dev/null
+++ b/public/userportal/get-sections.php
@@ -0,0 +1,51 @@
+<?php
+include('include/headscript.php');
+
+$conn = new mysqli($servername, $username, $password, $database);
+$iduserlogin = $_SESSION['iduserlogin'];
+$idhome = isset($_GET['idhome']) ? intval($_GET['idhome']) : 0;
+$slug = isset($_GET['slug']) ? $_GET['slug'] : 'legal';
+
+$queryHome = $conn->prepare("SELECT * FROM home WHERE idhome = ? AND iduser = ?");
+$queryHome->bind_param('ii', $idhome, $iduserlogin);
+$queryHome->execute();
+$resultHome = $queryHome->get_result();
+$homeData = $resultHome->fetch_assoc();
+
+if (!$homeData) {
+    header('HTTP/1.1 400 Bad Request');
+    die(json_encode(['error' => 'Casa non trovata o accesso non autorizzato']));
+}
+
+$queryPageId = $conn->prepare("SELECT idpages FROM pages WHERE slug = ?");
+$queryPageId->bind_param('s', $slug);
+$queryPageId->execute();
+$resultPageId = $queryPageId->get_result();
+$pageData = $resultPageId->fetch_assoc();
+
+if (!$pageData) {
+    header('HTTP/1.1 400 Bad Request');
+    die(json_encode(['error' => 'Pagina non valida']));
+}
+
+$page_id = $pageData['idpages'];
+
+$querySections = $conn->prepare("
+    SELECT DISTINCT s.section_name
+    FROM documents d
+    LEFT JOIN sections s ON d.idsections = s.idsections
+    WHERE d.page_id = ?
+    ORDER BY s.section_name
+");
+$querySections->bind_param('i', $page_id);
+$querySections->execute();
+$resultSections = $querySections->get_result();
+
+$sections = [];
+while ($row = $resultSections->fetch_assoc()) {
+    $sections[] = $row;
+}
+
+header('Content-Type: application/json');
+echo json_encode(['sections' => $sections]);
+exit;
diff --git a/public/userportal/tabs/documenti.php b/public/userportal/tabs/documenti.php
index 3af7e25..4e4d5ce 100644
--- a/public/userportal/tabs/documenti.php
+++ b/public/userportal/tabs/documenti.php
@@ -4,7 +4,6 @@ if (!isset($idhome) || $idhome <= 0) {
     die("Errore: ID immobile non valido.");
 }
 
-
 // Recupera i dettagli della casa
 $stmt = $pdo->prepare("SELECT name, address, zip, city, country FROM home WHERE idhome = ? AND iduser = ?");
 $stmt->execute([$idhome, $iduserlogin]);
@@ -37,39 +36,69 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
                 </div>
             </div>
 
+            <?php
+            function getCategoryIcon($index)
+            {
+                $icons = [
+                    'fas fa-balance-scale', // Icona per categoria 0
+                    'fas fa-file-alt',      // Icona per categoria 1
+                    'fas fa-home',          // Icona per categoria 2
+                    'fas fa-building',      // Icona per categoria 3
+                    'fas fa-lock',          // Icona per categoria 4
+                ];
+                return $icons[$index % count($icons)] ?? 'fas fa-folder';
+            }
+            ?>
+
             <!-- Sezione filtri -->
-            <div class="filter-section mb-4 p-3 bg-light rounded shadow-sm">
+            <div class="filter-section mb-4 p-3 bg-light rounded shadow-sm position-relative">
                 <div class="row align-items-center">
-                    <!-- Checkbox "Mostra solo obbligatori" -->
-                    <div class="col-12 col-md-3 mb-2 mb-md-0">
-                        <div class="form-check form-switch">
+                    <!-- Contenitore per le icone delle categorie -->
+                    <div class="col-12 mb-3">
+                        <div class="category-icons-container">
+                            <?php
+                            $stmt = $pdo->query("SELECT * FROM pages ORDER BY namepages");
+                            $pages = $stmt->fetchAll(PDO::FETCH_ASSOC);
+                            foreach ($pages as $index => $page) {
+                                $slug = htmlspecialchars($page['slug']);
+                                $name = ucfirst(htmlspecialchars($page['namepages']));
+                                $iconClass = getCategoryIcon($index);
+                                echo "<div class='category-icon' data-slug='{$slug}' data-index='{$index}'>
+                            <i class='{$iconClass}'></i>
+                            <div class='category-name'>{$name}</div>
+                          </div>";
+                            }
+                            ?>
+                        </div>
+                        <!-- Contenitore per le sotto-icone delle sezioni con preloader -->
+                        <div class="section-icons-wrapper position-relative">
+                            <div class="section-icons-container" style="display: none;"></div>
+                            <div class="preloader" style="display: none;">
+                                <div class="preloader-inner"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Campo di ricerca e checkbox -->
+                    <div class="col-12">
+                        <div class="position-relative mt-3">
+                            <label for="documentSearch" class="form-label mb-1 fw-bold">Cerca:</label>
+                            <input type="text" id="documentSearch" class="form-control w-100" placeholder="Sezione o documento..." autocomplete="off">
+                            <div id="searchResults" class="list-group dropdown-menu show w-100" style="position: absolute; max-height: 200px; overflow-y: auto; z-index: 1000; display: none;"></div>
+                        </div>
+                        <!-- Checkbox -->
+                        <div class="form-check form-switch mt-2">
                             <input class="form-check-input" type="checkbox" id="showOnlyRequired">
                             <label class="form-check-label" for="showOnlyRequired">
                                 <i class="fas fa-filter me-1"></i> Solo obbligatori
                             </label>
                         </div>
                     </div>
-                    <!-- Dropdown "Seleziona Categoria" -->
-                    <div class="col-12 col-md-4 mb-2 mb-md-0">
-                        <label for="pageSelectDropdown" class="form-label mb-1 fw-bold">Categoria:</label>
-                        <select id="pageSelectDropdown" class="form-control w-100">
-                            <?php foreach ($pages as $page) { ?>
-                                <option value="<?php echo htmlspecialchars($page['slug']); ?>"
-                                    <?php echo ($docpage === $page['slug']) ? 'selected' : ''; ?>>
-                                    <?php echo ucfirst(htmlspecialchars($page['namepages'])); ?>
-                                </option>
-                            <?php } ?>
-                        </select>
-                    </div>
-                    <!-- Campo di ricerca -->
-                    <div class="col-12 col-md-5 mb-2 mb-md-0 position-relative">
-                        <label for="documentSearch" class="form-label mb-1 fw-bold">Cerca:</label>
-                        <input type="text" id="documentSearch" class="form-control w-100" placeholder="Sezione o documento..." autocomplete="off">
-                        <div id="searchResults" class="list-group dropdown-menu show w-100" style="position: absolute; max-height: 200px; overflow-y: auto; z-index: 1000; display: none;"></div>
-                    </div>
+                </div>
+                <!-- Preloader per i documenti -->
+                <div class="document-preloader" style="display: none;">
+                    <div class="preloader-inner"></div>
                 </div>
             </div>
-
             <!-- Contenitore per i documenti dinamici -->
             <div id="documentSections" class="accordion"></div>
         </div>
@@ -77,173 +106,6 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
 </div>
 
 <style>
-    /* Personalizza la riga della sezione */
-    .section-header {
-        background-color: #f8f9fa;
-        border: 1px solid #007bff;
-        color: #007bff;
-        font-size: 1.2rem;
-        font-weight: bold;
-        padding: 15px 20px;
-        text-align: left;
-        width: 100%;
-    }
-
-    .section-header:hover {
-        background-color: #007bff;
-        color: #fff;
-    }
-
-    .accordion-button {
-        border-radius: 0 !important;
-        box-shadow: none !important;
-    }
-
-    .section-header i {
-        font-size: 1.5rem;
-        margin-right: 10px;
-    }
-
-    .section-title {
-        font-size: 1.25rem;
-        font-weight: bold;
-        color: #333;
-        margin-bottom: 20px;
-    }
-
-    .document-title {
-        font-size: 1.1rem;
-        font-weight: 500;
-        margin-bottom: 10px;
-    }
-
-    .dropzone {
-        background-color: #f0f8ff;
-        border: 2px dashed #007bff;
-        padding: 20px;
-        border-radius: 10px;
-        text-align: center;
-        transition: background-color 0.3s ease;
-    }
-
-    .dropzone:hover {
-        background-color: #e6f5ff;
-    }
-
-    .dropzone .dz-message {
-        font-size: 1.1rem;
-        font-weight: 500;
-        color: #007bff;
-    }
-
-    .dropzone .dz-message i {
-        font-size: 3rem;
-        margin-bottom: 10px;
-        color: #007bff;
-    }
-
-    .document-list-table th,
-    .document-list-table td {
-        text-align: center;
-        vertical-align: middle;
-    }
-
-    .section-separator {
-        border-top: 2px solid #ddd;
-        margin: 40px 0;
-    }
-
-    .btn {
-        margin-right: 5px;
-    }
-
-    .btn.active {
-        background-color: #007bff;
-        color: #fff;
-    }
-
-    .accordion-button {
-        background-color: #322999;
-        color: white;
-        font-size: 1.2rem;
-        font-weight: bold;
-        text-align: left;
-        border: 1px solid #007bff;
-    }
-
-    .accordion-button:hover {
-        background-color: #007bff;
-        color: white;
-    }
-
-    .accordion-button i {
-        font-size: 1.5rem;
-        color: #fff562;
-    }
-
-    .accordion-body {
-        padding: 20px;
-        background-color: #f9f9f9;
-        border: 1px solid #ddd;
-    }
-
-    .card-body {
-        margin-bottom: 20px;
-        padding: 15px;
-        background-color: #ffffff;
-        border: 1px solid #ddd;
-        border-radius: 5px;
-    }
-
-    .toggle-dropzone {
-        transition: all 0.3s ease;
-        font-size: 0.9rem;
-    }
-
-    .dropzone-container {
-        padding: 10px;
-        background-color: #f9f9f9;
-        border: 1px dashed #007bff;
-        border-radius: 8px;
-        display: none;
-    }
-
-    .input-group {
-        max-width: 400px;
-        margin: 0 auto;
-    }
-
-    #documentSearch {
-        border-radius: 0.25rem 0 0 0.25rem;
-    }
-
-    #searchResults {
-        background-color: #fff;
-        border: 1px solid #ddd;
-        border-radius: 0.25rem;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    }
-
-    #searchResults .list-group-item {
-        cursor: pointer;
-    }
-
-    #searchResults .list-group-item:hover {
-        background-color: #f8f9fa;
-    }
-
-    @media (max-width: 767.98px) {
-        .input-group {
-            max-width: 100%;
-            margin-top: 10px;
-        }
-
-        #pageSelectDropdown,
-        #documentSearch {
-            width: 100% !important;
-        }
-    }
-
     /* Stile per la sezione filtri */
     .filter-section {
         background-color: #f8f9fa;
@@ -253,51 +115,102 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
     }
 
-    /* Stile per il checkbox */
-    .form-check.form-switch {
+    /* Stile per il contenitore delle icone delle categorie */
+    .category-icons-container {
         display: flex;
+        flex-wrap: wrap;
+        gap: 15px;
+        margin-bottom: 10px;
+    }
+
+    /* Stile per le icone delle categorie */
+    .category-icon {
+        display: flex;
+        flex-direction: column;
         align-items: center;
-        margin-bottom: 0;
-    }
-
-    .form-check-input {
-        width: 2em;
-        height: 1em;
-        margin-right: 8px;
         cursor: pointer;
+        padding: 10px;
+        border: 2px solid #e0e0e0;
+        border-radius: 8px;
+        background-color: #fff;
+        transition: all 0.3s ease;
+        min-width: 80px;
+        max-width: 120px;
+        text-align: center;
     }
 
-    .form-check-input:checked {
-        background-color: #007bff;
+    .category-icon:hover,
+    .category-icon.active {
         border-color: #007bff;
+        background-color: #e6f5ff;
     }
 
-    .form-check-label {
-        font-size: 0.95rem;
-        font-weight: 500;
-        color: #333;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-    }
-
-    .form-check-label i {
+    .category-icon i {
+        font-size: 1.5rem;
         color: #007bff;
-        font-size: 1rem;
-        margin-right: 5px;
+        margin-bottom: 5px;
     }
 
-    .form-check-label:hover {
+    .category-name {
+        font-size: 0.85rem;
+        color: #333;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        text-align: center;
+        padding: 0 5px;
+        min-height: 2.5em;
+    }
+
+    /* Stile per il contenitore delle sotto-icone delle sezioni */
+    .section-icons-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        margin-top: 10px;
+        padding-top: 10px;
+        border-top: 1px solid #e0e0e0;
+    }
+
+    .section-icon {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        cursor: pointer;
+        padding: 8px;
+        border: 2px solid #e0e0e0;
+        border-radius: 6px;
+        background-color: #fff;
+        transition: all 0.3s ease;
+        min-width: 70px;
+        max-width: 100px;
+        text-align: center;
+    }
+
+    .section-icon:hover,
+    .section-icon.active {
+        border-color: #0056b3;
+        background-color: #cce5ff;
+    }
+
+    .section-icon i {
+        font-size: 1.2rem;
         color: #0056b3;
+        margin-bottom: 3px;
     }
 
-    /* Stile per le etichette dei filtri */
-    .form-label {
-        font-size: 0.9rem;
-        color: #555;
+    /* Mostra sempre il nome della sezione */
+    .section-name {
+        font-size: 0.8rem;
+        color: #333;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        text-align: center;
+        padding: 0 5px;
+        min-height: 2em;
+        display: block;
     }
 
-    /* Stile per il dropdown e il campo di ricerca */
+    /* Stile per il campo di ricerca */
     .form-control {
         border-radius: 6px;
         font-size: 0.95rem;
@@ -326,69 +239,175 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
         background-color: #f1f3f5;
     }
 
-    /* Responsive: impila i filtri su schermi piccoli */
+    /* Stile per il titolo del documento */
+    .document-title {
+        font-weight: bold;
+        /* Grassetto per maggiore risalto */
+        font-size: 1.1rem;
+        /* Aumenta leggermente la dimensione */
+        color: #2c3e50;
+        /* Colore scuro per contrasto */
+    }
+
+    /* Stile per il preloader */
+    .preloader,
+    .document-preloader {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: rgba(255, 255, 255, 0.8);
+        z-index: 10;
+    }
+
+    .preloader-inner {
+        width: 50px;
+        height: 50px;
+        border: 5px solid #f3f3f3;
+        border-top: 5px solid #007bff;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    /* Responsive */
     @media (max-width: 767.98px) {
         .filter-section {
             padding: 10px;
         }
 
-        .form-check.form-switch {
+        .category-icons-container,
+        .section-icons-container {
             justify-content: center;
         }
 
-        .form-label {
-            text-align: center;
+        .category-icon,
+        .section-icon {
+            min-width: 70px;
+            max-width: 90px;
         }
 
-        .form-control {
-            width: 100% !important;
+        .category-name,
+        .section-name {
+            font-size: 0.75rem;
+        }
+
+        .document-title {
+            font-size: 1rem;
+            /* Riduci leggermente su mobile */
         }
     }
 </style>
 
 <script>
     $(document).ready(function() {
-        // Inizializza Select2
-        $("#pageSelectDropdown").select2({
-            placeholder: "Seleziona una categoria...",
-            allowClear: true,
-            theme: "classic",
-            width: 'resolve'
-        });
-
-        // Caricamento iniziale dei documenti per lo slug predefinito
         let idhome = <?php echo $idhome; ?>;
-        loadDocuments('<?php echo $docpage; ?>');
+        let currentCategory = '<?php echo $docpage; ?>';
+        let currentSection = null;
 
-        // Gestione del cambio del dropdown senza ricaricare la pagina
-        $("#pageSelectDropdown").on("change", function() {
-            const slug = $(this).val();
-            loadDocuments(slug);
+        // Caricamento iniziale: non carichiamo documenti finché non selezioniamo una sezione
+        // loadDocuments(currentCategory); // Rimuoviamo questa chiamata
+
+        // Gestione del clic sulle icone delle categorie
+        $('.category-icon').on('click', function() {
+            const slug = $(this).data('slug');
+            if (currentCategory === slug) return;
+
+            currentCategory = slug;
+            currentSection = null;
+            $('.category-icon').removeClass('active');
+            $(this).addClass('active');
+            $('.section-icons-container').hide().empty();
+            $('#documentSections').empty(); // Svuota i documenti quando selezioni una categoria
+            $('.preloader').show(); // Mostra il preloader
+            loadSections(slug);
         });
 
-        // Gestione del checkbox "Mostra solo obbligatori"
-        $("#showOnlyRequired").on("change", function() {
-            const slug = $("#pageSelectDropdown").val();
-            loadDocuments(slug);
+        // Gestione del clic sulle icone delle sezioni
+        $(document).on('click', '.section-icon', function() {
+            const sectionId = $(this).data('section-id');
+            const sectionName = $(this).find('.section-name').text(); // Recupera il nome della sezione
+            if (currentSection === sectionId) return;
+
+            currentSection = sectionId;
+            $('.section-icon').removeClass('active');
+            $(this).addClass('active');
+            $('.document-preloader').show(); // Mostra il preloader per i documenti
+            loadDocuments(currentCategory, sectionId, sectionName); // Carica i documenti della sezione
         });
 
-        // Carica tutti i documenti e le sezioni da tutte le pagine per la ricerca
+        // Gestione del checkbox "Solo obbligatori"
+        $("#showOnlyRequired").on('change', function() {
+            if (currentSection) { // Carica solo se una sezione è selezionata
+                const sectionName = $('.section-icon.active .section-name').text();
+                $('.document-preloader').show(); // Mostra il preloader
+                loadDocuments(currentCategory, currentSection, sectionName);
+            }
+        });
+
+        // Carica le sezioni per una categoria
+        function loadSections(slug) {
+            $.ajax({
+                url: 'get-sections.php',
+                method: 'GET',
+                data: {
+                    slug: slug,
+                    idhome: idhome
+                },
+                dataType: 'json',
+                success: function(response) {
+                    $('.preloader').hide(); // Nascondi il preloader
+                    if (response.error) {
+                        console.error(response.error);
+                        return;
+                    }
+                    const sections = response.sections || [];
+                    let html = '';
+                    sections.forEach(section => {
+                        html += `<div class='section-icon' data-section-id='${md5(section.section_name)}'>
+                                <i class='fas fa-folder'></i>
+                                <div class='section-name'>${section.section_name}</div>
+                             </div>`;
+                    });
+                    $('.section-icons-container').html(html).slideDown();
+                },
+                error: function(xhr, status, error) {
+                    $('.preloader').hide(); // Nascondi il preloader in caso di errore
+                    console.error('Errore nel caricamento delle sezioni:', error);
+                }
+            });
+        }
+
+        // Carica tutti i documenti e le sezioni per la ricerca
         let allDocuments = [];
         <?php
         $stmt = $pdo->query("
-        SELECT d.document_id, d.document_name, p.slug, s.section_name 
-        FROM documents d 
-        LEFT JOIN sections s ON d.idsections = s.idsections 
-        LEFT JOIN pages p ON d.page_id = p.idpages 
-        ORDER BY s.section_name, d.document_name
-    ");
+            SELECT d.document_id, d.document_name, p.slug, s.section_name 
+            FROM documents d 
+            LEFT JOIN sections s ON d.idsections = s.idsections 
+            LEFT JOIN pages p ON d.page_id = p.idpages 
+            ORDER BY s.section_name, d.document_name
+        ");
         while ($doc = $stmt->fetch(PDO::FETCH_ASSOC)) {
             echo "allDocuments.push({
-            id: '{$doc['document_id']}',
-            name: '" . addslashes(htmlspecialchars($doc['document_name'])) . "',
-            section: '" . addslashes(htmlspecialchars($doc['section_name'])) . "',
-            slug: '" . addslashes(htmlspecialchars($doc['slug'])) . "'
-        });\n";
+                id: '{$doc['document_id']}',
+                name: '" . addslashes(htmlspecialchars($doc['document_name'])) . "',
+                section: '" . addslashes(htmlspecialchars($doc['section_name'])) . "',
+                slug: '" . addslashes(htmlspecialchars($doc['slug'])) . "'
+            });\n";
         }
         ?>
 
@@ -410,24 +429,38 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
                 let html = '';
                 results.forEach(result => {
                     html += `<a href="#" class="list-group-item list-group-item-action" data-slug="${result.slug}" data-section="${md5(result.section)}">
-                    ${result.name} (Sezione: ${result.section})
-                </a>`;
+                        ${result.name} (Sezione: ${result.section})
+                    </a>`;
                 });
                 $('#searchResults').html(html).show();
 
-                // Gestione del click sui risultati
                 $('#searchResults .list-group-item').on('click', function(e) {
                     e.preventDefault();
                     const slug = $(this).data('slug');
                     const sectionId = $(this).data('section');
 
-                    // Aggiorna il dropdown e carica i documenti
-                    $('#pageSelectDropdown').val(slug).trigger('change');
-                    loadDocuments(slug, sectionId);
+                    currentCategory = slug;
+                    currentSection = sectionId;
+                    $('.category-icon').removeClass('active');
+                    $('.category-icon[data-slug="' + slug + '"]').addClass('active');
+                    $('.section-icons-container').hide().empty();
+                    $('.preloader').show(); // Mostra il preloader durante la ricerca
+                    loadSections(slug);
 
-                    // Resetta il campo di ricerca e nasconde i risultati
                     $('#documentSearch').val('');
                     $('#searchResults').hide();
+
+                    // Trova il nome della sezione e carica i documenti
+                    setTimeout(() => {
+                        const sectionElement = $(`.section-icon[data-section-id="${sectionId}"]`);
+                        if (sectionElement.length) {
+                            $('.section-icon').removeClass('active');
+                            sectionElement.addClass('active');
+                            const sectionName = sectionElement.find('.section-name').text();
+                            $('.document-preloader').show(); // Mostra il preloader
+                            loadDocuments(slug, sectionId, sectionName);
+                        }
+                    }, 500);
                 });
             }
         });
@@ -439,7 +472,7 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
             }
         });
 
-        function loadDocuments(slug, targetSectionId = null) {
+        function loadDocuments(slug, targetSectionId = null, sectionName = null) {
             const showOnlyRequired = $("#showOnlyRequired").is(":checked");
 
             $.ajax({
@@ -448,10 +481,12 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
                 data: {
                     slug: slug,
                     idhome: idhome,
-                    showOnlyRequired: showOnlyRequired // Passa il filtro al backend
+                    showOnlyRequired: showOnlyRequired,
+                    sectionId: targetSectionId ? targetSectionId : null
                 },
                 dataType: 'json',
                 success: function(response) {
+                    $('.document-preloader').hide(); // Nascondi il preloader
                     if (response.error) {
                         Swal.fire({
                             icon: 'error',
@@ -466,35 +501,32 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
                     const documents = response.documents || {};
                     const loadedDocuments = response.loadedDocuments || {};
 
-                    // Aggiorna i dettagli della casa
                     $('.page-title').text(`Documenti per la Casa: ${homeName}`);
                     $('p.mb-0 strong').text(`Indirizzo: ${homeAddress}`);
 
-                    // Svuota e ricrea le sezioni dei documenti
                     $('#documentSections').empty();
                     let html = '';
                     let sectionCount = 0;
 
-                    for (let sectionName in documents) {
+                    for (let sectionKey in documents) {
                         if (sectionCount >= 100) {
                             console.error('Troppi loop nelle sezioni, possibile errore nei dati');
                             break;
                         }
                         sectionCount++;
 
+                        // Usa il nome della sezione passato come parametro
+                        const displaySectionName = sectionName || sectionKey;
+
                         html += `
                     <div class="accordion-item">
-                        <h2 class="accordion-header" id="heading-${md5(sectionName)}">
-                            <button class="accordion-button collapsed section-header full-width" type="button" data-toggle="collapse" data-target="#collapse-${md5(sectionName)}" aria-expanded="false" aria-controls="collapse-${md5(sectionName)}">
-                                <i class="fas fa-door-open"></i> ${sectionName}
-                            </button>
-                        </h2>
-                        <div id="collapse-${md5(sectionName)}" class="accordion-collapse collapse" aria-labelledby="heading-${md5(sectionName)}" data-parent="#documentSections">
+                        <h2 class="accordion-header" id="heading-${md5(sectionKey)}"></h2>
+                        <div id="collapse-${md5(sectionKey)}" class="accordion-collapse collapse" aria-labelledby="heading-${md5(sectionKey)}" data-parent="#documentSections">
                             <div class="accordion-body">
                     `;
 
                         let docCount = 0;
-                        (documents[sectionName] || []).forEach(document => {
+                        (documents[sectionKey] || []).forEach(document => {
                             if (docCount >= 100) {
                                 console.error('Troppi loop nei documenti, possibile errore nei dati');
                                 return;
@@ -562,7 +594,6 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
                     }
                     $('#documentSections').html(html);
 
-                    // Se c'è un targetSectionId, espandi solo quella sezione
                     if (targetSectionId) {
                         setTimeout(() => {
                             const collapseElement = $(`#collapse-${targetSectionId}`);
@@ -572,12 +603,6 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
                                 $('html, body').animate({
                                     scrollTop: collapseElement.offset().top - 100
                                 }, 500);
-                            } else {
-                                Swal.fire({
-                                    icon: 'warning',
-                                    title: 'Attenzione',
-                                    text: 'La sezione cercata non è stata trovata.'
-                                });
                             }
                         }, 1000);
                     }
@@ -620,7 +645,6 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
                                                 let parsedResponse = typeof response === "string" ? JSON.parse(response) : response;
 
                                                 if (parsedResponse.success) {
-                                                    // Usa document.document_id invece di parsedResponse.documentId
                                                     updateDocumentTable(document.document_id, parsedResponse);
                                                     Swal.fire({
                                                         icon: "success",
@@ -717,9 +741,8 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
 
                                             if (parsedResponse.success) {
                                                 $row.remove();
-                                                // Controlla se la tabella è vuota
                                                 if ($table.find("tbody tr").length === 0) {
-                                                    $section.empty(); // Rimuove la tabella e il titolo
+                                                    $section.empty();
                                                 }
                                                 Swal.fire({
                                                     icon: "success",
@@ -758,7 +781,6 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
 
                     // Funzione per aggiornare dinamicamente la tabella dei documenti
                     function updateDocumentTable(documentId, parsedResponse) {
-                        console.log('Aggiornamento tabella per documentId:', documentId, 'con risposta:', parsedResponse); // Debug
                         const sectionId = `#loaded-documents-${documentId}`;
                         const $section = $(sectionId);
 
@@ -769,40 +791,34 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
 
                         let $table = $section.find(`#table-${documentId}`);
                         if ($table.length === 0) {
-                            // Se la tabella non esiste, crea la sezione e la tabella
-                            console.log('Creazione nuova tabella per documentId:', documentId);
                             const tableHtml = `
-            <h6 class="mt-4">Documenti già caricati:</h6>
-            <table class="table table-bordered document-list-table" id="table-${documentId}">
-                <thead>
-                    <tr>
-                        <th>Nome Documento</th>
-                        <th>Data Caricamento</th>
-                        <th>Azioni</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><a href="homedocuments/${parsedResponse.fileName}" target="_blank">${parsedResponse.fileName}</a></td>
-                        <td>${parsedResponse.uploadDate}</td>
-                        <td><button class="btn btn-danger btn-sm delete-document" data-id="${parsedResponse.documentId}" data-file="${parsedResponse.fileName}">Elimina</button></td>
-                    </tr>
-                </tbody>
-            </table>
-        `;
+                            <h6 class="mt-4">Documenti già caricati:</h6>
+                            <table class="table table-bordered document-list-table" id="table-${documentId}">
+                                <thead>
+                                    <tr>
+                                        <th>Nome Documento</th>
+                                        <th>Data Caricamento</th>
+                                        <th>Azioni</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td><a href="homedocuments/${parsedResponse.fileName}" target="_blank">${parsedResponse.fileName}</a></td>
+                                        <td>${parsedResponse.uploadDate}</td>
+                                        <td><button class="btn btn-danger btn-sm delete-document" data-id="${parsedResponse.documentId}" data-file="${parsedResponse.fileName}">Elimina</button></td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        `;
                             $section.html(tableHtml);
-                            console.log('Tabella creata:', $section.html()); // Debug
                         } else {
-                            // Se la tabella esiste, aggiungi la nuova riga
-                            console.log('Aggiunta riga alla tabella esistente per documentId:', documentId);
                             const row = `
-            <tr>
-                <td><a href="homedocuments/${parsedResponse.fileName}" target="_blank">${parsedResponse.fileName}</a></td>
-                <td>${parsedResponse.uploadDate}</td>
-                <td><button class="btn btn-danger btn-sm delete-document" data-id="${parsedResponse.documentId}" data-file="${parsedResponse.fileName}">Elimina</button></td>
-            </tr>`;
+                            <tr>
+                                <td><a href="homedocuments/${parsedResponse.fileName}" target="_blank">${parsedResponse.fileName}</a></td>
+                                <td>${parsedResponse.uploadDate}</td>
+                                <td><button class="btn btn-danger btn-sm delete-document" data-id="${parsedResponse.documentId}" data-file="${parsedResponse.fileName}">Elimina</button></td>
+                            </tr>`;
                             $table.find("tbody").append(row);
-                            console.log('Riga aggiunta:', row); // Debug
                         }
                     }
 
@@ -825,9 +841,7 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
                                         let parsedResponse = typeof response === "string" ? JSON.parse(response) : response;
 
                                         if (parsedResponse.success) {
-                                            // Aggiorna dinamicamente la tabella
                                             updateDocumentTable(documentId, parsedResponse);
-                                            // Mostra un messaggio di successo
                                             Swal.fire({
                                                 icon: "success",
                                                 title: "Caricamento completato",
@@ -863,6 +877,7 @@ $docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
                     };
                 },
                 error: function(xhr, status, error) {
+                    $('.document-preloader').hide(); // Nascondi il preloader in caso di errore
                     Swal.fire({
                         icon: 'error',
                         title: 'Errore',
diff --git a/public/userportal/tabs/documenti_condropdown.php b/public/userportal/tabs/documenti_condropdown.php
new file mode 100644
index 0000000..3af7e25
--- /dev/null
+++ b/public/userportal/tabs/documenti_condropdown.php
@@ -0,0 +1,875 @@
+<?php
+// Assicurati che idhome sia passato
+if (!isset($idhome) || $idhome <= 0) {
+    die("Errore: ID immobile non valido.");
+}
+
+
+// Recupera i dettagli della casa
+$stmt = $pdo->prepare("SELECT name, address, zip, city, country FROM home WHERE idhome = ? AND iduser = ?");
+$stmt->execute([$idhome, $iduserlogin]);
+$homeData = $stmt->fetch(PDO::FETCH_ASSOC);
+
+if (!$homeData) {
+    die("Errore: Casa non trovata o accesso non autorizzato.");
+}
+
+// Recupera le pagine disponibili nella tabella 'pages'
+$stmt = $pdo->query("SELECT * FROM pages ORDER BY namepages");
+$pages = [];
+while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
+    $pages[] = $row;
+}
+
+// Imposta lo slug predefinito
+$docpage = isset($_GET['docpage']) ? $_GET['docpage'] : 'legal';
+?>
+
+<!-- Contenuto del tab Documenti -->
+<div class="tab-pane fade show active" id="documenti" role="tabpanel" aria-labelledby="documenti-tab">
+    <div class="card">
+        <div class="card-body">
+            <!-- Dettagli della Casa -->
+            <div class="row align-items-center mb-4">
+                <div class="col-sm-8">
+                    <h4 class="page-title m-0">Documenti per la Casa: <?php echo htmlspecialchars($homeData['name']); ?></h4>
+                    <p class="mb-0"><strong>Indirizzo:</strong> <?php echo htmlspecialchars($homeData['address']) . ', ' . htmlspecialchars($homeData['city']) . ' ' . htmlspecialchars($homeData['zip']); ?></p>
+                </div>
+            </div>
+
+            <!-- Sezione filtri -->
+            <div class="filter-section mb-4 p-3 bg-light rounded shadow-sm">
+                <div class="row align-items-center">
+                    <!-- Checkbox "Mostra solo obbligatori" -->
+                    <div class="col-12 col-md-3 mb-2 mb-md-0">
+                        <div class="form-check form-switch">
+                            <input class="form-check-input" type="checkbox" id="showOnlyRequired">
+                            <label class="form-check-label" for="showOnlyRequired">
+                                <i class="fas fa-filter me-1"></i> Solo obbligatori
+                            </label>
+                        </div>
+                    </div>
+                    <!-- Dropdown "Seleziona Categoria" -->
+                    <div class="col-12 col-md-4 mb-2 mb-md-0">
+                        <label for="pageSelectDropdown" class="form-label mb-1 fw-bold">Categoria:</label>
+                        <select id="pageSelectDropdown" class="form-control w-100">
+                            <?php foreach ($pages as $page) { ?>
+                                <option value="<?php echo htmlspecialchars($page['slug']); ?>"
+                                    <?php echo ($docpage === $page['slug']) ? 'selected' : ''; ?>>
+                                    <?php echo ucfirst(htmlspecialchars($page['namepages'])); ?>
+                                </option>
+                            <?php } ?>
+                        </select>
+                    </div>
+                    <!-- Campo di ricerca -->
+                    <div class="col-12 col-md-5 mb-2 mb-md-0 position-relative">
+                        <label for="documentSearch" class="form-label mb-1 fw-bold">Cerca:</label>
+                        <input type="text" id="documentSearch" class="form-control w-100" placeholder="Sezione o documento..." autocomplete="off">
+                        <div id="searchResults" class="list-group dropdown-menu show w-100" style="position: absolute; max-height: 200px; overflow-y: auto; z-index: 1000; display: none;"></div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Contenitore per i documenti dinamici -->
+            <div id="documentSections" class="accordion"></div>
+        </div>
+    </div>
+</div>
+
+<style>
+    /* Personalizza la riga della sezione */
+    .section-header {
+        background-color: #f8f9fa;
+        border: 1px solid #007bff;
+        color: #007bff;
+        font-size: 1.2rem;
+        font-weight: bold;
+        padding: 15px 20px;
+        text-align: left;
+        width: 100%;
+    }
+
+    .section-header:hover {
+        background-color: #007bff;
+        color: #fff;
+    }
+
+    .accordion-button {
+        border-radius: 0 !important;
+        box-shadow: none !important;
+    }
+
+    .section-header i {
+        font-size: 1.5rem;
+        margin-right: 10px;
+    }
+
+    .section-title {
+        font-size: 1.25rem;
+        font-weight: bold;
+        color: #333;
+        margin-bottom: 20px;
+    }
+
+    .document-title {
+        font-size: 1.1rem;
+        font-weight: 500;
+        margin-bottom: 10px;
+    }
+
+    .dropzone {
+        background-color: #f0f8ff;
+        border: 2px dashed #007bff;
+        padding: 20px;
+        border-radius: 10px;
+        text-align: center;
+        transition: background-color 0.3s ease;
+    }
+
+    .dropzone:hover {
+        background-color: #e6f5ff;
+    }
+
+    .dropzone .dz-message {
+        font-size: 1.1rem;
+        font-weight: 500;
+        color: #007bff;
+    }
+
+    .dropzone .dz-message i {
+        font-size: 3rem;
+        margin-bottom: 10px;
+        color: #007bff;
+    }
+
+    .document-list-table th,
+    .document-list-table td {
+        text-align: center;
+        vertical-align: middle;
+    }
+
+    .section-separator {
+        border-top: 2px solid #ddd;
+        margin: 40px 0;
+    }
+
+    .btn {
+        margin-right: 5px;
+    }
+
+    .btn.active {
+        background-color: #007bff;
+        color: #fff;
+    }
+
+    .accordion-button {
+        background-color: #322999;
+        color: white;
+        font-size: 1.2rem;
+        font-weight: bold;
+        text-align: left;
+        border: 1px solid #007bff;
+    }
+
+    .accordion-button:hover {
+        background-color: #007bff;
+        color: white;
+    }
+
+    .accordion-button i {
+        font-size: 1.5rem;
+        color: #fff562;
+    }
+
+    .accordion-body {
+        padding: 20px;
+        background-color: #f9f9f9;
+        border: 1px solid #ddd;
+    }
+
+    .card-body {
+        margin-bottom: 20px;
+        padding: 15px;
+        background-color: #ffffff;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+    }
+
+    .toggle-dropzone {
+        transition: all 0.3s ease;
+        font-size: 0.9rem;
+    }
+
+    .dropzone-container {
+        padding: 10px;
+        background-color: #f9f9f9;
+        border: 1px dashed #007bff;
+        border-radius: 8px;
+        display: none;
+    }
+
+    .input-group {
+        max-width: 400px;
+        margin: 0 auto;
+    }
+
+    #documentSearch {
+        border-radius: 0.25rem 0 0 0.25rem;
+    }
+
+    #searchResults {
+        background-color: #fff;
+        border: 1px solid #ddd;
+        border-radius: 0.25rem;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    }
+
+    #searchResults .list-group-item {
+        cursor: pointer;
+    }
+
+    #searchResults .list-group-item:hover {
+        background-color: #f8f9fa;
+    }
+
+    @media (max-width: 767.98px) {
+        .input-group {
+            max-width: 100%;
+            margin-top: 10px;
+        }
+
+        #pageSelectDropdown,
+        #documentSearch {
+            width: 100% !important;
+        }
+    }
+
+    /* Stile per la sezione filtri */
+    .filter-section {
+        background-color: #f8f9fa;
+        border: 1px solid #e0e0e0;
+        border-radius: 10px;
+        padding: 15px;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+    }
+
+    /* Stile per il checkbox */
+    .form-check.form-switch {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0;
+    }
+
+    .form-check-input {
+        width: 2em;
+        height: 1em;
+        margin-right: 8px;
+        cursor: pointer;
+    }
+
+    .form-check-input:checked {
+        background-color: #007bff;
+        border-color: #007bff;
+    }
+
+    .form-check-label {
+        font-size: 0.95rem;
+        font-weight: 500;
+        color: #333;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+    }
+
+    .form-check-label i {
+        color: #007bff;
+        font-size: 1rem;
+        margin-right: 5px;
+    }
+
+    .form-check-label:hover {
+        color: #0056b3;
+    }
+
+    /* Stile per le etichette dei filtri */
+    .form-label {
+        font-size: 0.9rem;
+        color: #555;
+    }
+
+    /* Stile per il dropdown e il campo di ricerca */
+    .form-control {
+        border-radius: 6px;
+        font-size: 0.95rem;
+        padding: 8px 12px;
+        transition: border-color 0.3s ease;
+    }
+
+    .form-control:focus {
+        border-color: #007bff;
+        box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
+    }
+
+    /* Stile per i risultati della ricerca */
+    #searchResults {
+        border-radius: 6px;
+        border: 1px solid #ddd;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    }
+
+    #searchResults .list-group-item {
+        font-size: 0.9rem;
+        padding: 8px 12px;
+    }
+
+    #searchResults .list-group-item:hover {
+        background-color: #f1f3f5;
+    }
+
+    /* Responsive: impila i filtri su schermi piccoli */
+    @media (max-width: 767.98px) {
+        .filter-section {
+            padding: 10px;
+        }
+
+        .form-check.form-switch {
+            justify-content: center;
+        }
+
+        .form-label {
+            text-align: center;
+        }
+
+        .form-control {
+            width: 100% !important;
+        }
+    }
+</style>
+
+<script>
+    $(document).ready(function() {
+        // Inizializza Select2
+        $("#pageSelectDropdown").select2({
+            placeholder: "Seleziona una categoria...",
+            allowClear: true,
+            theme: "classic",
+            width: 'resolve'
+        });
+
+        // Caricamento iniziale dei documenti per lo slug predefinito
+        let idhome = <?php echo $idhome; ?>;
+        loadDocuments('<?php echo $docpage; ?>');
+
+        // Gestione del cambio del dropdown senza ricaricare la pagina
+        $("#pageSelectDropdown").on("change", function() {
+            const slug = $(this).val();
+            loadDocuments(slug);
+        });
+
+        // Gestione del checkbox "Mostra solo obbligatori"
+        $("#showOnlyRequired").on("change", function() {
+            const slug = $("#pageSelectDropdown").val();
+            loadDocuments(slug);
+        });
+
+        // Carica tutti i documenti e le sezioni da tutte le pagine per la ricerca
+        let allDocuments = [];
+        <?php
+        $stmt = $pdo->query("
+        SELECT d.document_id, d.document_name, p.slug, s.section_name 
+        FROM documents d 
+        LEFT JOIN sections s ON d.idsections = s.idsections 
+        LEFT JOIN pages p ON d.page_id = p.idpages 
+        ORDER BY s.section_name, d.document_name
+    ");
+        while ($doc = $stmt->fetch(PDO::FETCH_ASSOC)) {
+            echo "allDocuments.push({
+            id: '{$doc['document_id']}',
+            name: '" . addslashes(htmlspecialchars($doc['document_name'])) . "',
+            section: '" . addslashes(htmlspecialchars($doc['section_name'])) . "',
+            slug: '" . addslashes(htmlspecialchars($doc['slug'])) . "'
+        });\n";
+        }
+        ?>
+
+        // Gestione della ricerca dinamica
+        $('#documentSearch').on('input', function() {
+            const searchTerm = $(this).val().toLowerCase().trim();
+            $('#searchResults').empty().hide();
+
+            if (searchTerm === '') {
+                return;
+            }
+
+            const results = allDocuments.filter(item =>
+                item.name.toLowerCase().includes(searchTerm) ||
+                item.section.toLowerCase().includes(searchTerm)
+            );
+
+            if (results.length > 0) {
+                let html = '';
+                results.forEach(result => {
+                    html += `<a href="#" class="list-group-item list-group-item-action" data-slug="${result.slug}" data-section="${md5(result.section)}">
+                    ${result.name} (Sezione: ${result.section})
+                </a>`;
+                });
+                $('#searchResults').html(html).show();
+
+                // Gestione del click sui risultati
+                $('#searchResults .list-group-item').on('click', function(e) {
+                    e.preventDefault();
+                    const slug = $(this).data('slug');
+                    const sectionId = $(this).data('section');
+
+                    // Aggiorna il dropdown e carica i documenti
+                    $('#pageSelectDropdown').val(slug).trigger('change');
+                    loadDocuments(slug, sectionId);
+
+                    // Resetta il campo di ricerca e nasconde i risultati
+                    $('#documentSearch').val('');
+                    $('#searchResults').hide();
+                });
+            }
+        });
+
+        // Chiudi i risultati della ricerca se clicchi fuori
+        $(document).on('click', function(e) {
+            if (!$(e.target).closest('.input-group, #searchResults').length) {
+                $('#searchResults').hide();
+            }
+        });
+
+        function loadDocuments(slug, targetSectionId = null) {
+            const showOnlyRequired = $("#showOnlyRequired").is(":checked");
+
+            $.ajax({
+                url: 'get-documents.php',
+                method: 'GET',
+                data: {
+                    slug: slug,
+                    idhome: idhome,
+                    showOnlyRequired: showOnlyRequired // Passa il filtro al backend
+                },
+                dataType: 'json',
+                success: function(response) {
+                    if (response.error) {
+                        Swal.fire({
+                            icon: 'error',
+                            title: 'Errore',
+                            text: response.error
+                        });
+                        return;
+                    }
+
+                    const homeName = response.homeName || 'Nome non disponibile';
+                    const homeAddress = response.homeAddress || 'Indirizzo non disponibile';
+                    const documents = response.documents || {};
+                    const loadedDocuments = response.loadedDocuments || {};
+
+                    // Aggiorna i dettagli della casa
+                    $('.page-title').text(`Documenti per la Casa: ${homeName}`);
+                    $('p.mb-0 strong').text(`Indirizzo: ${homeAddress}`);
+
+                    // Svuota e ricrea le sezioni dei documenti
+                    $('#documentSections').empty();
+                    let html = '';
+                    let sectionCount = 0;
+
+                    for (let sectionName in documents) {
+                        if (sectionCount >= 100) {
+                            console.error('Troppi loop nelle sezioni, possibile errore nei dati');
+                            break;
+                        }
+                        sectionCount++;
+
+                        html += `
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="heading-${md5(sectionName)}">
+                            <button class="accordion-button collapsed section-header full-width" type="button" data-toggle="collapse" data-target="#collapse-${md5(sectionName)}" aria-expanded="false" aria-controls="collapse-${md5(sectionName)}">
+                                <i class="fas fa-door-open"></i> ${sectionName}
+                            </button>
+                        </h2>
+                        <div id="collapse-${md5(sectionName)}" class="accordion-collapse collapse" aria-labelledby="heading-${md5(sectionName)}" data-parent="#documentSections">
+                            <div class="accordion-body">
+                    `;
+
+                        let docCount = 0;
+                        (documents[sectionName] || []).forEach(document => {
+                            if (docCount >= 100) {
+                                console.error('Troppi loop nei documenti, possibile errore nei dati');
+                                return;
+                            }
+                            docCount++;
+
+                            html += `
+                        <div class="card card-body mb-4">
+                            <div class="document-header d-flex justify-content-between align-items-center p-3 mb-3" style="background-color: #e8f5e9; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
+                                <div>
+                                    <span class="document-title fw-bold">${document.document_name || 'Documento senza nome'}</span>
+                                    ${document.is_required ? '<span class="badge bg-danger ms-2" style="font-size: 1rem; padding: 0.5em 0.8em;">Obbligatorio</span>' : ''}
+                                    ${document.max_documents > 0 ? `<span class="badge bg-info ms-2" style="font-size: 1rem; padding: 0.5em 0.8em;">Max: ${document.max_documents}</span>` : ''}
+                                </div>
+                                <button class="btn btn-sm btn-outline-primary toggle-dropzone" data-target="#dropzone-${document.document_id}">
+                                    <i class="fas fa-plus"></i>
+                                </button>
+                            </div>
+                            <div class="dropzone-container collapse" id="dropzone-${document.document_id}">
+                                <div class="dropzone mb-3" id="dropzone-area-${document.document_id}">
+                                    <div class="dz-message">
+                                        <i class="fas fa-cloud-upload-alt"></i><br>
+                                        Trascina qui i documenti o clicca per caricarli
+                                    </div>
+                                </div>
+                                <div class="text-center mt-3">
+                                    <label class="btn btn-outline-primary btn-sm">
+                                        <i class="fas fa-camera"></i> Scatta una foto
+                                        <input type="file" accept="image/*" capture="camera" id="cameraInput-${document.document_id}" class="d-none" onchange="uploadFromCamera(this, '${document.document_id}')">
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="loaded-documents-section" id="loaded-documents-${document.document_id}">
+                                ${(loadedDocuments[document.document_id] || []).length > 0 ? `
+                                    <h6 class="mt-4">Documenti già caricati:</h6>
+                                    <table class="table table-bordered document-list-table" id="table-${document.document_id}">
+                                        <thead>
+                                            <tr>
+                                                <th>Nome Documento</th>
+                                                <th>Data Caricamento</th>
+                                                <th>Azioni</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            ${loadedDocuments[document.document_id].map(doc => `
+                                                <tr>
+                                                    <td><a href="homedocuments/${doc.filename}" target="_blank">${doc.filename}</a></td>
+                                                    <td>${doc.created_at}</td>
+                                                    <td><button class="btn btn-danger btn-sm delete-document" data-id="${doc.id}" data-file="${doc.filename}">Elimina</button></td>
+                                                </tr>
+                                            `).join('')}
+                                        </tbody>
+                                    </table>
+                                ` : ''}
+                            </div>
+                        </div>
+                    `;
+                        });
+
+                        html += `
+                            </div>
+                        </div>
+                    </div>
+                `;
+                    }
+                    $('#documentSections').html(html);
+
+                    // Se c'è un targetSectionId, espandi solo quella sezione
+                    if (targetSectionId) {
+                        setTimeout(() => {
+                            const collapseElement = $(`#collapse-${targetSectionId}`);
+                            if (collapseElement.length) {
+                                $('.accordion-collapse.collapse').collapse('hide');
+                                collapseElement.collapse('show');
+                                $('html, body').animate({
+                                    scrollTop: collapseElement.offset().top - 100
+                                }, 500);
+                            } else {
+                                Swal.fire({
+                                    icon: 'warning',
+                                    title: 'Attenzione',
+                                    text: 'La sezione cercata non è stata trovata.'
+                                });
+                            }
+                        }, 1000);
+                    }
+
+                    // Rinizializza Dropzone per ogni documento
+                    for (let sectionName in documents) {
+                        (documents[sectionName] || []).forEach(document => {
+                            if (!Dropzone.instances.some(dz => dz.element.id === `dropzone-area-${document.document_id}`)) {
+                                new Dropzone(`#dropzone-area-${document.document_id}`, {
+                                    url: "upload-document.php",
+                                    paramName: "file",
+                                    maxFiles: document.max_documents || 1,
+                                    maxFilesize: 5,
+                                    addRemoveLinks: true,
+                                    acceptedFiles: "image/*,application/pdf",
+                                    dictDefaultMessage: "Trascina qui i file o clicca per caricarli",
+                                    dictRemoveFile: "Rimuovi",
+                                    previewTemplate: `
+                <div class="dz-preview dz-file-preview">
+                    <div class="dz-image"><img data-dz-thumbnail /></div>
+                    <div class="dz-details">
+                        <div class="dz-filename"><span data-dz-name></span></div>
+                        <div class="dz-size"><span data-dz-size></span></div>
+                    </div>
+                    <div class="dz-progress">
+                        <span class="dz-upload" data-dz-uploadprogress></span>
+                    </div>
+                    <div class="dz-error-message"><span data-dz-errormessage></span></div>
+                    <div class="dz-success-mark">
+                        <i class="fas fa-check-circle"></i>
+                    </div>
+                    <div class="dz-error-mark">
+                        <i class="fas fa-times-circle"></i>
+                    </div>
+                </div>
+            `,
+                                    init: function() {
+                                        this.on("success", function(file, response) {
+                                            try {
+                                                let parsedResponse = typeof response === "string" ? JSON.parse(response) : response;
+
+                                                if (parsedResponse.success) {
+                                                    // Usa document.document_id invece di parsedResponse.documentId
+                                                    updateDocumentTable(document.document_id, parsedResponse);
+                                                    Swal.fire({
+                                                        icon: "success",
+                                                        title: "Caricamento completato",
+                                                        text: "Il documento è stato caricato con successo.",
+                                                        timer: 1500,
+                                                        showConfirmButton: false
+                                                    });
+                                                } else {
+                                                    Swal.fire({
+                                                        icon: "error",
+                                                        title: "Errore",
+                                                        text: parsedResponse.message || "Errore nel caricamento",
+                                                    });
+                                                }
+                                            } catch (error) {
+                                                console.error("Errore nel parsing della risposta:", error);
+                                                Swal.fire({
+                                                    icon: "error",
+                                                    title: "Errore",
+                                                    text: "Risposta dal server non valida.",
+                                                });
+                                            }
+                                            this.removeFile(file);
+                                        });
+
+                                        this.on("error", function(file, errorMessage) {
+                                            Swal.fire({
+                                                icon: "error",
+                                                title: "Errore",
+                                                text: errorMessage || "Si è verificato un problema.",
+                                            });
+                                            this.removeFile(file);
+                                        });
+                                    },
+                                    sending: function(file, xhr, formData) {
+                                        formData.append("idhome", idhome);
+                                        formData.append("document_id", document.document_id);
+                                    }
+                                });
+                            }
+                        });
+                    }
+
+                    // Rinizializza il toggle Dropzone
+                    document.querySelectorAll('.toggle-dropzone').forEach(button => {
+                        button.addEventListener('click', function() {
+                            const target = document.querySelector(this.dataset.target);
+                            const icon = this.querySelector('i');
+
+                            if (target.classList.contains('show')) {
+                                target.classList.remove('show');
+                                target.style.display = 'none';
+                                icon.classList.remove('fa-minus');
+                                icon.classList.add('fa-plus');
+                            } else {
+                                target.classList.add('show');
+                                target.style.display = 'block';
+                                icon.classList.remove('fa-plus');
+                                icon.classList.add('fa-minus');
+                            }
+                        });
+                    });
+
+                    // Rinizializza la gestione dei documenti eliminati
+                    $(document).on("click", ".delete-document", function() {
+                        const documentId = $(this).data("id");
+                        const fileName = $(this).data("file");
+                        const $row = $(this).closest("tr");
+                        const $table = $row.closest("table");
+                        const $section = $table.closest('.loaded-documents-section');
+
+                        Swal.fire({
+                            title: "Sei sicuro?",
+                            text: "Questa azione eliminerà il documento in modo permanente.",
+                            icon: "warning",
+                            showCancelButton: true,
+                            confirmButtonColor: "#d33",
+                            cancelButtonColor: "#3085d6",
+                            confirmButtonText: "Sì, elimina",
+                            cancelButtonText: "Annulla",
+                        }).then((result) => {
+                            if (result.isConfirmed) {
+                                $.ajax({
+                                    url: "delete-document.php",
+                                    type: "POST",
+                                    data: {
+                                        document_id: documentId,
+                                        file_name: fileName,
+                                    },
+                                    success: function(response) {
+                                        try {
+                                            const parsedResponse = typeof response === "string" ? JSON.parse(response) : response;
+
+                                            if (parsedResponse.success) {
+                                                $row.remove();
+                                                // Controlla se la tabella è vuota
+                                                if ($table.find("tbody tr").length === 0) {
+                                                    $section.empty(); // Rimuove la tabella e il titolo
+                                                }
+                                                Swal.fire({
+                                                    icon: "success",
+                                                    title: "Eliminato",
+                                                    text: "Documento eliminato con successo.",
+                                                    timer: 1500,
+                                                    showConfirmButton: false,
+                                                });
+                                            } else {
+                                                Swal.fire({
+                                                    icon: "error",
+                                                    title: "Errore",
+                                                    text: parsedResponse.message || "Impossibile eliminare il documento.",
+                                                });
+                                            }
+                                        } catch (error) {
+                                            console.error("Errore durante l'eliminazione:", error);
+                                            Swal.fire({
+                                                icon: "error",
+                                                title: "Errore",
+                                                text: "Risposta dal server non valida.",
+                                            });
+                                        }
+                                    },
+                                    error: function() {
+                                        Swal.fire({
+                                            icon: "error",
+                                            title: "Errore",
+                                            text: "Si è verificato un problema con la richiesta.",
+                                        });
+                                    },
+                                });
+                            }
+                        });
+                    });
+
+                    // Funzione per aggiornare dinamicamente la tabella dei documenti
+                    function updateDocumentTable(documentId, parsedResponse) {
+                        console.log('Aggiornamento tabella per documentId:', documentId, 'con risposta:', parsedResponse); // Debug
+                        const sectionId = `#loaded-documents-${documentId}`;
+                        const $section = $(sectionId);
+
+                        if (!$section.length) {
+                            console.error('Sezione non trovata per documentId:', documentId);
+                            return;
+                        }
+
+                        let $table = $section.find(`#table-${documentId}`);
+                        if ($table.length === 0) {
+                            // Se la tabella non esiste, crea la sezione e la tabella
+                            console.log('Creazione nuova tabella per documentId:', documentId);
+                            const tableHtml = `
+            <h6 class="mt-4">Documenti già caricati:</h6>
+            <table class="table table-bordered document-list-table" id="table-${documentId}">
+                <thead>
+                    <tr>
+                        <th>Nome Documento</th>
+                        <th>Data Caricamento</th>
+                        <th>Azioni</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><a href="homedocuments/${parsedResponse.fileName}" target="_blank">${parsedResponse.fileName}</a></td>
+                        <td>${parsedResponse.uploadDate}</td>
+                        <td><button class="btn btn-danger btn-sm delete-document" data-id="${parsedResponse.documentId}" data-file="${parsedResponse.fileName}">Elimina</button></td>
+                    </tr>
+                </tbody>
+            </table>
+        `;
+                            $section.html(tableHtml);
+                            console.log('Tabella creata:', $section.html()); // Debug
+                        } else {
+                            // Se la tabella esiste, aggiungi la nuova riga
+                            console.log('Aggiunta riga alla tabella esistente per documentId:', documentId);
+                            const row = `
+            <tr>
+                <td><a href="homedocuments/${parsedResponse.fileName}" target="_blank">${parsedResponse.fileName}</a></td>
+                <td>${parsedResponse.uploadDate}</td>
+                <td><button class="btn btn-danger btn-sm delete-document" data-id="${parsedResponse.documentId}" data-file="${parsedResponse.fileName}">Elimina</button></td>
+            </tr>`;
+                            $table.find("tbody").append(row);
+                            console.log('Riga aggiunta:', row); // Debug
+                        }
+                    }
+
+                    // Funzione per caricare un file dalla fotocamera
+                    window.uploadFromCamera = function(input, documentId) {
+                        if (input.files && input.files[0]) {
+                            let formData = new FormData();
+                            formData.append("file", input.files[0]);
+                            formData.append("idhome", idhome);
+                            formData.append("document_id", documentId);
+
+                            $.ajax({
+                                url: "upload-document.php",
+                                type: "POST",
+                                data: formData,
+                                processData: false,
+                                contentType: false,
+                                success: function(response) {
+                                    try {
+                                        let parsedResponse = typeof response === "string" ? JSON.parse(response) : response;
+
+                                        if (parsedResponse.success) {
+                                            // Aggiorna dinamicamente la tabella
+                                            updateDocumentTable(documentId, parsedResponse);
+                                            // Mostra un messaggio di successo
+                                            Swal.fire({
+                                                icon: "success",
+                                                title: "Caricamento completato",
+                                                text: "La foto è stata caricata con successo.",
+                                                timer: 1500,
+                                                showConfirmButton: false
+                                            });
+                                        } else {
+                                            Swal.fire({
+                                                icon: "error",
+                                                title: "Errore",
+                                                text: parsedResponse.message || "Errore nel caricamento",
+                                            });
+                                        }
+                                    } catch (error) {
+                                        console.error("Errore nel parsing della risposta:", error);
+                                        Swal.fire({
+                                            icon: "error",
+                                            title: "Errore",
+                                            text: "Risposta dal server non valida.",
+                                        });
+                                    }
+                                },
+                                error: function() {
+                                    Swal.fire({
+                                        icon: "error",
+                                        title: "Errore",
+                                        text: "Si è verificato un problema con il caricamento.",
+                                    });
+                                }
+                            });
+                        }
+                    };
+                },
+                error: function(xhr, status, error) {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Errore',
+                        text: 'Impossibile caricare i documenti: ' + error
+                    });
+                }
+            });
+        }
+    });
+</script>
\ No newline at end of file