casadoc/public/userportal/tabs/documenti.php

875 lines
37 KiB
PHP

<?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>