trf_certest/public/userarea/photos_popup.php

<?php
// photos_popup.php
include('include/headscript.php');
// Includi l'autoloader di Composer
require_once __DIR__ . '/../../vendor/autoload.php';

use Endroid\QrCode\Color\Color;
use Endroid\QrCode\Encoding\Encoding;
use Endroid\QrCode\ErrorCorrectionLevel;
use Endroid\QrCode\QrCode;
use Endroid\QrCode\RoundBlockSizeMode;
use Endroid\QrCode\Writer\PngWriter;

$db = DBHandlerSelect::getInstance();
$pdo = $db->getConnection();

// Verifica che l'iddatadb sia stato passato
if (!isset($_GET['iddatadb']) || empty($_GET['iddatadb'])) {
    echo json_encode(['error' => 'ID riga non fornito']);
    exit;
}

$iddatadb = intval($_GET['iddatadb']);

// Recupera i dettagli della riga (idriga e sample_code)
$stmt = $pdo->prepare("SELECT iddatadb, sample_code FROM datadb WHERE iddatadb = ?");
$stmt->execute([$iddatadb]);
$row = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$row) {
    echo json_encode(['error' => 'Riga non trovata']);
    exit;
}

$idriga = $row['iddatadb'];
$sampleCode = $row['sample_code'] ?? 'Non disponibile';

// Recupera le foto associate alla riga
$stmt = $pdo->prepare("SELECT id, file_path, file_name, description, uploaded_at FROM datadb_photos WHERE iddatadb = ? ORDER BY uploaded_at DESC");
$stmt->execute([$iddatadb]);
$photos = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Definisci il percorso base per le foto
$photoBasePath = '../photostrf/';

// Genera l'URL per il QR code
$baseUrl = "http://localhost/trf_certest/public/userarea/"; // Sostituisci con il tuo dominio
$uploadUrl = $baseUrl . "upload_photos_mobile.php?iddatadb=" . $iddatadb;

// Genera il QR code con endroid/qr-code 6.0.6
$qrCodeDir = '../photostrf/qrcodes/';
if (!is_dir($qrCodeDir)) {
    mkdir($qrCodeDir, 0755, true);
}
$qrCodeFile = $qrCodeDir . "qrcode_{$iddatadb}.png";

$writer = new PngWriter();

// Crea il QR code usando il costruttore
$qrCode = new QrCode(
    data: $uploadUrl,
    encoding: new Encoding('UTF-8'),
    errorCorrectionLevel: ErrorCorrectionLevel::Low,
    size: 150,
    margin: 10,
    roundBlockSizeMode: RoundBlockSizeMode::Margin,
    foregroundColor: new Color(0, 0, 0),
    backgroundColor: new Color(255, 255, 255)
);

$result = $writer->write($qrCode);
$result->saveToFile($qrCodeFile);
?>

<div class="popup-content">
    <h3>Gestione Foto</h3>
    <p><strong>ID Riga:</strong> <?= htmlspecialchars($idriga) ?></p>
    <p><strong>Sample Code:</strong> <?= htmlspecialchars($sampleCode) ?></p>

    <!-- QR Code per il caricamento da mobile -->
    <div style="text-align: center; margin-bottom: 20px;">
        <p>Scansiona il QR code per caricare foto dal tuo telefono:</p>
        <img src="../photostrf/qrcodes/qrcode_<?= $iddatadb ?>.png" alt="QR Code" style="max-width: 150px;">
        <p style="margin-top: 10px;">
            <a href="<?= htmlspecialchars($uploadUrl) ?>" target="_blank"><?= htmlspecialchars($uploadUrl) ?></a>
        </p>
    </div>

    <!-- Area drag-and-drop per il caricamento delle foto -->
    <div id="dropArea" style="border: 2px dashed #ccc; padding: 20px; text-align: center; margin-bottom: 20px;">
        <p>Trascina qui le foto o clicca per selezionarle</p>
        <input type="file" id="photoInput" multiple accept="image/*" style="display: none;">
    </div>

    <!-- Elenco delle foto -->
    <div id="photosList">
        <?php if (empty($photos)): ?>
            <p>Nessuna foto presente.</p>
        <?php else: ?>
            <?php foreach ($photos as $photo): ?>
                <?php
                $filePath = $photoBasePath . $photo['file_path'];
                $fileExists = file_exists($filePath);
                ?>
                <div class="photo-item" data-photo-id="<?= $photo['id'] ?>" style="display: flex; align-items: center; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 10px;">
                    <div style="flex: 1;">
                        <?php if ($fileExists): ?>
                            <img src="../photostrf/<?= htmlspecialchars($photo['file_path']) ?>" alt="<?= htmlspecialchars($photo['file_name']) ?>" class="thumbnail" style="max-width: 100px; max-height: 100px; margin-right: 10px; cursor: pointer;">
                        <?php else: ?>
                            <p style="color: red;">[File non trovato]</p>
                        <?php endif; ?>
                        <p style="margin: 0;">
                            <strong>Nome:</strong> <?= htmlspecialchars($photo['file_name']) ?><br>
                            <strong>Caricata il:</strong> <?= htmlspecialchars($photo['uploaded_at']) ?><br>
                            <strong>Descrizione:</strong> <?= htmlspecialchars($photo['description'] ?? 'Nessuna descrizione') ?>
                        </p>
                    </div>
                    <button class="delete-photo-btn" data-photo-id="<?= $photo['id'] ?>" style="background: none; border: none; color: #dc3545; cursor: pointer;">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>

    <!-- Modale per l'immagine ingrandita -->
    <div id="imageModal" class="image-modal" style="display: none;">
        <span class="image-modal-close">&times;</span>
        <img id="enlargedImage" class="image-modal-content" src="" alt="Immagine ingrandita">
    </div>
</div>

<style>
    .photo-item {
        transition: background-color 0.3s;
    }

    .photo-item:hover {
        background-color: #f8f9fa;
    }

    #dropArea.highlight {
        border-color: #28a745;
        background-color: #e9ecef;
    }

    /* Stile per il modale dell'immagine ingrandita */
    .image-modal {
        display: none;
        position: fixed;
        z-index: 1001;
        /* Sopra il popup principale */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .image-modal-content {
        margin: auto;
        display: block;
        max-width: 90%;
        max-height: 90vh;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .image-modal-close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #fff;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    }

    .image-modal-close:hover,
    .image-modal-close:focus {
        color: #bbb;
        text-decoration: none;
    }
</style>

<script>
    // Gestione del click sulle immagini per ingrandirle
    document.querySelectorAll('.thumbnail').forEach(img => {
        img.addEventListener('click', function() {
            const modal = document.getElementById('imageModal');
            const enlargedImage = document.getElementById('enlargedImage');
            enlargedImage.src = this.src;
            modal.style.display = 'block';
        });
    });

    // Gestione della chiusura del modale
    const modal = document.getElementById('imageModal');
    const closeBtn = document.querySelector('.image-modal-close');

    closeBtn.addEventListener('click', function() {
        modal.style.display = 'none';
    });

    // Chiudi il modale cliccando fuori dall'immagine
    modal.addEventListener('click', function(event) {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    });
</script>