casadoc/public/userportal/homes-list.php
2025-02-25 12:20:57 +01:00

714 lines
32 KiB
PHP

<?php include('include/headscript.php'); ?>
<?php
// Connessione al database
$conn = new mysqli($servername, $username, $password, $database);
// Recupera l'id utente loggato
$iduserlogin = $_SESSION['iduserlogin'];
// Query per ottenere le case dell'utente
$sql = "
SELECT
h.idhome,
h.name,
h.address,
h.zip,
h.city,
h.country,
h.mainphoto,
COUNT(ho.owner_id) AS owner_count,
SUM(ho.ownership_percentage) AS total_ownership,
GROUP_CONCAT(
CASE
WHEN po.owner_type = 'individual'
THEN CONCAT(po.first_name, ' ', po.last_name, ' (', ho.ownership_percentage, '%)')
ELSE CONCAT(po.company_name, ' (', ho.ownership_percentage, '%)')
END
SEPARATOR '\n'
) AS owner_names
FROM
home h
LEFT JOIN
home_owners ho ON h.idhome = ho.home_id
LEFT JOIN
property_owners po ON ho.owner_id = po.owner_id
WHERE
h.iduser = ?
GROUP BY
h.idhome
";
$stmt = $conn->prepare($sql);
$stmt->bind_param('i', $iduserlogin);
$stmt->execute();
$result = $stmt->get_result();
?>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Elenco delle tue case</title>
<!-- Bootstrap 4 CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/dripicons/2.0.0/webfont.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Custom CSS -->
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
<link href="assets/css/icons.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">
<style>
/* Visualizza il pulsante mobile anche su desktop */
.button-menu-mobile {
display: inline-block !important;
}
/* Nascondi il quadrato rosso con la X su desktop */
@media (min-width: 992px) {
.button-menu-mobile {
background-color: transparent;
border: none;
padding: 0;
width: auto;
height: auto;
}
.button-menu-mobile i.ion-close {
display: none;
/* Nasconde la X rossa */
}
.button-menu-mobile i.mdi-menu {
display: inline-block;
/* Mostra sempre le tre righe orizzontali */
}
}
/* Stile per mobile: Mantieni il comportamento originale */
@media (max-width: 991.98px) {
.button-menu-mobile {
background-color: #ff5e5e;
/* Questo è il colore rosso originale */
border-radius: 50%;
width: 50px;
height: 50px;
}
.button-menu-mobile i.ion-close {
display: inline-block;
/* Mostra la X rossa */
}
.button-menu-mobile i.mdi-menu {
display: none;
/* Nasconde le tre righe quando la barra è aperta */
}
}
/* Stili per colori professionali */
.btn-main {
background-color: rgb(96, 93, 175);
/* Blu professionale */
color: #fff;
border: none;
}
.btn-main:hover {
background-color: #364fc7;
/* Blu più scuro al passaggio */
}
.btn-secondary {
background-color: rgb(21, 190, 86);
/* Grigio tenue */
color: #212529;
border: none;
}
.btn-secondary:hover {
background-color: #868e96;
/* Grigio più scuro al passaggio */
}
.btn-info-light {
background-color: #ffd43b;
/* Giallo professionale */
color: #212529;
border: none;
}
.btn-info-light:hover {
background-color: #fcc419;
/* Giallo più intenso al passaggio */
}
/* Uniformità altezza */
.equal-height {
display: flex;
flex-direction: column;
height: 100%;
}
.equal-height .flex-fill {
flex: 1;
}
/* Applica l'effetto zoom solo alle card della griglia */
#gridView .card {
border-radius: 10px;
overflow: hidden;
transition: transform 0.2s ease-in-out;
}
#gridView .card:hover {
transform: scale(1.03);
}
.card-img-top {
height: 180px;
object-fit: cover;
}
/* Nasconde i tre puntini di default */
.action-menu {
position: absolute;
top: 10px;
right: 10px;
display: none;
}
/* Mostra i tre puntini quando il mouse passa sul box */
.box-home:hover .action-menu {
display: block;
}
/* Pulsante 3 puntini */
.action-toggle {
border: none;
background: rgba(255, 255, 255, 0.9);
padding: 6px 10px;
width: 32px;
height: 32px;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
/* Cambia colore al passaggio del mouse */
.action-toggle:hover {
background: rgba(230, 230, 230, 1);
}
/* Stile per il menu delle azioni */
.dropdown-menu {
font-size: 14px;
min-width: 180px;
}
.dropdown-item i {
margin-right: 8px;
}
/* Stile per l'immagine */
.img-thumbnail {
border-radius: 5px;
}
/* Spazio tra l'icona dei proprietari e il nome */
td i.fas {
margin-right: 5px;
}
/* Contenitore per i bottoni in alto */
.action-container {
position: absolute;
top: 10px;
left: 10px;
/* Sposta il bottone proprietari a sinistra */
right: 10px;
/* Mantiene il menu azioni a destra */
display: flex;
justify-content: space-between;
/* Distribuisce gli elementi a sinistra e a destra */
align-items: center;
}
/* Bottone proprietari a sinistra */
.owner-btn {
font-size: 14px;
padding: 4px 10px;
}
/* I 3 puntini restano nascosti finché il mouse non passa sopra */
.box-home .action-menu {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
/* Mostra i 3 puntini solo in hover */
.box-home:hover .action-menu {
opacity: 1;
}
</style>
</head>
<body class="fixed-left">
<div id="wrapper">
<?php include('include/navigationbar.php'); ?>
<div class="content-page">
<div class="content">
<?php include('include/topbar.php'); ?>
<div class="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="page-title-box">
<div class="btn-group float-right">
<ol class="breadcrumb hide-phone p-0 m-0">
<li class="breadcrumb-item"><a href="#">CasaDoc</a></li>
<li class="breadcrumb-item active">Elenco Case</li>
</ol>
</div>
<h4 class="page-title">Elenco delle tue case</h4>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-12 d-flex justify-content-start align-items-center gap-3">
<a href="manage-home.php" class="btn btn-success">
<i class="fas fa-plus"></i> Aggiungi Casa/Terreno
</a>
<button id="toggleViewBtn" class="btn btn-info ms-2">
<i class="fas fa-th-large"></i> Vista Griglia
</button>
</div>
</div>
<!-- table view -->
<div id="tableView" style="display: none;">
<div class="row">
<div class="col-xl-12">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table id="homeTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>Foto</th>
<th>Nome</th>
<th>Città / Nazione</th>
<th>Indirizzo</th>
<th>Proprietari</th>
<th>Action</th>
</tr>
<tr>
<!-- Campi di input per i filtri -->
<th></th>
<th><input type="text" placeholder="Cerca Nome" class="form-control form-control-sm"></th>
<th><input type="text" placeholder="Cerca Città" class="form-control form-control-sm"></th>
<th><input type="text" placeholder="Cerca Indirizzo" class="form-control form-control-sm"></th>
<th><input type="text" placeholder="Cerca Proprietari" class="form-control form-control-sm"></th>
<th></th>
</tr>
</thead>
<tbody>
<?php while ($row = $result->fetch_assoc()) { ?>
<tr>
<!-- Thumbnail immagine -->
<td>
<img src="mainphoto/<?php echo htmlspecialchars($row['mainphoto'] ?? 'default.jpg'); ?>"
class="img-thumbnail open-photo"
style="width: 80px; height: 80px; object-fit: cover; cursor: pointer;"
alt="<?php echo htmlspecialchars($row['name']); ?>"
data-toggle="modal" data-target="#photoModal"
data-src="mainphoto/<?php echo htmlspecialchars($row['mainphoto'] ?? 'default.jpg'); ?>">
</td>
<!-- Nome immobile -->
<td><?php echo htmlspecialchars($row['name']); ?></td>
<!-- Città e Nazione -->
<td><?php echo htmlspecialchars($row['city']); ?>, <?php echo htmlspecialchars($row['country']); ?></td>
<!-- Indirizzo -->
<td><?php echo htmlspecialchars($row['address']); ?></td>
<!-- Proprietari + Bottone -->
<td>
<?php echo nl2br(htmlspecialchars($row['owner_names'])); ?>
<br>
<?php
// Determina il colore del pulsante in base alla percentuale totale di possesso
if ($row['owner_count'] == 0) {
$btn_class = "btn-danger"; // Nessun proprietario → Rosso
$btn_text = '<i class="fas fa-user-times"></i> Assegna Proprietario';
} elseif ($row['total_ownership'] < 100) {
$btn_class = "btn-warning"; // Percentuale inferiore al 100% → Arancione
$btn_text = '<i class="fas fa-user-edit"></i> ' . $row['owner_count'] . ' (' . htmlspecialchars($row['total_ownership']) . '%)';
} else {
$btn_class = "btn-success"; // Percentuale completa → Verde
$btn_text = '<i class="fas fa-user-check"></i> ' . $row['owner_count'] . '';
}
?>
<a href="assign-owners.php?idhome=<?php echo $row['idhome']; ?>" class="btn <?php echo $btn_class; ?> btn-sm mt-1">
<?php echo $btn_text; ?>
</a>
</td>
<!-- azioni -->
<td class="text-nowrap">
<div class="dropdown">
<button class="btn btn-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="manage-home.php?idhome=<?php echo $row['idhome']; ?>">
<i class="fas fa-info-circle"></i> Dettagli
</a></li>
<li><a class="dropdown-item" href="documents-home.php?idhome=<?php echo $row['idhome']; ?>">
<i class="fas fa-folder-open"></i> Documenti
</a></li>
<li><a class="dropdown-item" href="share-home.php?idhome=<?php echo $row['idhome']; ?>">
<i class="fas fa-share-alt"></i> Condividi
</a></li>
<li><a class="dropdown-item transfer-property-btn" data-id="<?php echo $row['idhome']; ?>">
<i class="fas fa-exchange-alt"></i> Passaggio Proprietà
</a></li>
<li><a class="dropdown-item text-danger delete-home-btn" data-id="<?php echo $row['idhome']; ?>">
<i class="fas fa-trash-alt"></i> Elimina
</a></li>
</ul>
</div>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div><!-- end table-responsive -->
</div>
</div>
</div>
</div>
</div>
<!-- grid view -->
<div id="gridView" style="display: block;">
<div class="row">
<?php
$result->data_seek(0); // Ripristina i dati per la griglia
while ($row = $result->fetch_assoc()) { ?>
<div class="col-md-3 col-sm-6 mb-4"> <!-- 4 per riga su desktop, 2 su tablet -->
<div class="card shadow-sm border-0 position-relative box-home">
<img src="mainphoto/<?php echo htmlspecialchars($row['mainphoto'] ?? 'default.jpg'); ?>"
class="card-img-top"
alt="<?php echo htmlspecialchars($row['name']); ?>">
<!-- Pulsante 3 puntini -->
<!-- Contenitore per i bottoni (Proprietari + Menu Azioni) -->
<!-- Contenitore per i bottoni (Proprietari a sinistra + Menu Azioni a destra) -->
<div class="action-container">
<!-- Bottone colorato con numero proprietari (SINISTRA) -->
<?php
if ($row['owner_count'] == 0) {
$btn_class = "btn-danger"; // Nessun proprietario → Rosso
} elseif ($row['total_ownership'] < 100) {
$btn_class = "btn-warning"; // Percentuale inferiore al 100% → Arancione
} else {
$btn_class = "btn-success"; // Percentuale completa → Verde
}
?>
<a href="assign-owners.php?idhome=<?php echo $row['idhome']; ?>" class="btn <?php echo $btn_class; ?> btn-sm owner-btn">
<i class="fas fa-user"></i> <?php echo htmlspecialchars($row['owner_count']); ?>
</a>
<!-- Pulsante 3 puntini (DESTRA) -->
<div class="dropdown action-menu">
<button class="btn btn-light btn-sm action-toggle" data-toggle="dropdown">
<i class="fas fa-ellipsis-v"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="manage-home.php?idhome=<?php echo $row['idhome']; ?>">
<i class="fas fa-info-circle"></i> Dettagli
</a>
<a class="dropdown-item" href="documents-home.php?idhome=<?php echo $row['idhome']; ?>">
<i class="fas fa-folder-open"></i> Documenti
</a>
<a class="dropdown-item" href="share-home.php?idhome=<?php echo $row['idhome']; ?>">
<i class="fas fa-share-alt"></i> Condividi
</a>
<a class="dropdown-item transfer-property-btn" data-id="<?php echo $row['idhome']; ?>">
<i class="fas fa-exchange-alt"></i> Passaggio Proprietà
</a>
<a class="dropdown-item text-danger delete-home-btn" data-id="<?php echo $row['idhome']; ?>">
<i class="fas fa-trash-alt"></i> Elimina
</a>
</div>
</div>
</div>
<div class="card-body text-center">
<h5 class="card-title"><?php echo htmlspecialchars($row['name']); ?></h5>
<p class="card-text"><?php echo htmlspecialchars($row['address']); ?></p>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<div class="mb-3">
<button onclick="history.back()" class="btn btn-dark">
<i class="fas fa-arrow-left"></i> Torna indietro
</button>
</div>
</div><!-- container -->
</div><!-- Page content Wrapper -->
</div><!-- content -->
<?php include('include/footer.php'); ?>
</div><!-- End Right content here -->
</div><!-- END wrapper -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function() {
var table = $('#homeTable').DataTable({
responsive: true,
autoWidth: false // Impedisce a DataTables di calcolare larghezze fisse
});
// Imposta la vista predefinita sulla Grid View
$("#tableView").hide();
$("#gridView").show();
$("#toggleViewBtn").html('<i class="fas fa-list"></i> Vista Elenco');
$("#toggleViewBtn").click(function() {
if ($("#tableView").is(":visible")) {
$("#tableView").hide();
$("#gridView").show();
$("#toggleViewBtn").html('<i class="fas fa-list"></i> Vista Elenco');
} else {
$("#gridView").hide();
$("#tableView").show();
// **Forza il ridisegno della tabella DataTables con una correzione aggiuntiva**
setTimeout(function() {
table.columns.adjust().draw();
$('#homeTable').css('width', '100%'); // Forza la larghezza al 100%
}, 200);
$("#toggleViewBtn").html('<i class="fas fa-th-large"></i> Vista Griglia');
}
});
});
</script>
<script>
$(document).ready(function() {
// Inizializza i dropdown manualmente per evitare conflitti
var dropdowns = document.querySelectorAll('.dropdown-toggle');
dropdowns.forEach(function(dropdown) {
new bootstrap.Dropdown(dropdown);
});
// Chiude il menu quando un'opzione viene cliccata
$('.dropdown-menu a').on('click', function() {
let dropdownMenu = $(this).closest('.dropdown-menu');
let dropdownButton = dropdownMenu.prev('.dropdown-toggle');
let dropdownInstance = bootstrap.Dropdown.getInstance(dropdownButton[0]);
dropdownInstance.hide();
});
// Chiude il dropdown quando si clicca fuori
$(document).on('click', function(e) {
if (!$(e.target).closest('.dropdown').length) {
$('.dropdown-menu.show').removeClass('show');
}
});
});
</script>
<script>
$(document).ready(function() {
// Inizializza DataTables con filtri di colonna
var table = $('#homeTable').DataTable();
// Aggiungi ricerca personalizzata in ogni colonna
$('#homeTable thead tr:eq(1) th').each(function(i) {
$('input', this).on('keyup change', function() {
if (table.column(i).search() !== this.value) {
table.column(i).search(this.value).draw();
}
});
});
});
</script>
<script>
// Gestisci l'eliminazione con SweetAlert
$('.delete-home-btn').on('click', function() {
var idhome = $(this).data('id'); // Ottieni l'id della casa
Swal.fire({
title: 'Sei sicuro?',
text: "Questa azione eliminerà la casa e non può essere annullata.",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#3085d6',
confirmButtonText: 'Sì, elimina',
cancelButtonText: 'Annulla'
}).then((result) => {
if (result.isConfirmed) {
// Chiude il dropdown prima di eseguire l'azione
let dropdownMenu = $(this).closest('.dropdown-menu');
let dropdownButton = dropdownMenu.prev('.dropdown-toggle');
let dropdownInstance = bootstrap.Dropdown.getInstance(dropdownButton[0]);
if (dropdownInstance) {
dropdownInstance.hide();
}
// Reindirizza al file di eliminazione
window.location.href = "delete-home.php?idhome=" + idhome;
}
});
});
</script>
<script>
$(document).ready(function() {
// Evita la chiusura del dropdown se si clicca dentro
$(".dropdown-menu").click(function(e) {
e.stopPropagation();
});
// Gestione dell'eliminazione con SweetAlert
$('.delete-home-btn').on('click', function() {
var idhome = $(this).data('id'); // Ottieni l'id della casa
Swal.fire({
title: 'Sei sicuro?',
text: "Questa azione eliminerà la casa e non può essere annullata.",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#3085d6',
confirmButtonText: 'Sì, elimina',
cancelButtonText: 'Annulla'
}).then((result) => {
if (result.isConfirmed) {
window.location.href = "delete-home.php?idhome=" + idhome;
}
});
});
});
</script>
<script>
$(document).ready(function() {
<?php if (isset($_GET['status']) && $_GET['status'] == 'success') { ?>
Swal.fire({
icon: 'success',
title: 'Eliminazione completata!',
text: 'La casa è stata eliminata con successo.'
});
<?php } elseif (isset($_GET['status']) && $_GET['status'] == 'error') { ?>
Swal.fire({
icon: 'error',
title: 'Errore!',
text: 'Si è verificato un errore durante l\'eliminazione della casa.'
});
<?php } ?>
});
</script>
<!-- jQuery -->
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/modernizr.min.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="assets/plugins/chart.js/chart.min.js"></script>
<!-- App js -->
<script src="assets/js/app.js"></script>
<!-- Modal per visualizzazione dell'immagine -->
<div class="modal fade" id="photoModal" tabindex="-1" role="dialog" aria-labelledby="photoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="photoModalLabel">Foto Immobile</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body text-center">
<img id="modalPhoto" src="" class="img-fluid rounded" alt="Immagine immobile">
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(".open-photo").on("click", function() {
let imgSrc = $(this).attr("data-src");
$("#modalPhoto").attr("src", imgSrc);
});
});
</script>
</body>
</html>