<?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 dei tuoi immobili</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;
        }

        /* Stile per il nuovo banner */
        .header-banner {
            position: relative;
            background-size: cover;
            background-position: center;
            border-radius: 10px;
            height: 150px;
            /* Altezza del banner */
            overflow: hidden;
        }

        .header-banner-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgba(30, 58, 138, 0.8), rgba(255, 255, 255, 0.2));
            /* Gradiente sovrapposto */
            padding: 20px;
            display: flex;
            align-items: center;
        }

        .header-banner-title {
            color: #ffffff;
            font-size: 28px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            margin: 0;
        }
    </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>


                        <!-- Nuovo Banner -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="header-banner" style="background-image: url('path/to/your/image.jpg');">
                                    <div class="header-banner-overlay">
                                        <h3 class="header-banner-title">Immobili</h3>
                                    </div>
                                </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 Nuovo
                                </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 di Riferimento</th>
                                                            <th>Proprietari</th>
                                                            <th>Città / Nazione</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 Proprietari" class="form-control form-control-sm"></th>
                                                            <th><input type="text" placeholder="Cerca Città" class="form-control form-control-sm"></th>
                                                            <th></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <?php while ($row = $result->fetch_assoc()) { ?>
                                                            <tr>
                                                                <!-- Thumbnail immagine -->
                                                                <td>
                                                                    <a href="manage-home.php?idhome=<?php echo $row['idhome']; ?>">
                                                                        <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']); ?>">
                                                                    </a>
                                                                </td>

                                                                <!-- Nome immobile -->
                                                                <td><?php echo htmlspecialchars($row['name']); ?></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>

                                                                <!-- Città e Nazione -->
                                                                <td><?php echo htmlspecialchars($row['city']); ?>, <?php echo htmlspecialchars($row['country']); ?></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">
                                            <a href="manage-home.php?idhome=<?php echo $row['idhome']; ?>">
                                                <img src="mainphoto/<?php echo htmlspecialchars($row['mainphoto'] ?? 'default.jpg'); ?>"
                                                    class="card-img-top"
                                                    alt="<?php echo htmlspecialchars($row['name']); ?>">
                                            </a>


                                            <!-- 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']); ?> - <?php echo htmlspecialchars($row['city']); ?></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() {
            console.log("Bottone eliminazione cliccato!"); // Debugging

            var idhome = $(this).data('id');
            console.log("ID Casa:", idhome); // Debugging

            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) {
                    console.log("Utente ha confermato l'eliminazione."); // Debugging
                    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>