<?php

$host = '127.0.0.1'; // Host del database
$db   = 'furniture_test'; // Nome del database
$user = 'root'; // username
$pass = 'root'; // password

$dsn = "mysql:host=$host;dbname=$db";
$pdo = new PDO($dsn, $user, $pass);

$models_results = $pdo->query('SELECT * FROM models'); // Lista dei modelli
$textures_results = $pdo->query('SELECT * FROM textures'); // Lista delle texture

?>

<!-- Immagine combinata, nascosta all'inizio -->
<div class="preview" style="text-align: center; margin-bottom: 30px;">
    <img id="combo-image" src="" style="opacity: 0; width: 400px; height: auto; background: #ddd;" />
</div>

<!-- Ciclo le texture e stampo le loro immagini -->
<div class="textures-list" style="margin-bottom: 30px;">
    <?php foreach($textures_results as $texture) : ?>
        <div class="texture-item" style="display: inline-block; width: 25%; text-align: center" data-id="<?php echo $texture['id'] ?>">
            <img src="<?php echo $texture['img_path'] ?>" style="width: auto; height: 100px; margin: 0 auto; background: #ddd;" />
        </div>
    <?php endforeach; ?>
</div>

<!-- Ciclo i modelli e stampo le loro immagini -->
<div class="models-list">
    <?php foreach($models_results as $model) : ?>
        <div class="model-item" style="display: inline-block; width: 14.28%" data-id="<?php echo $model['id'] ?>">
            <img src="<?php echo $model['img_path'] ?>" style="width: auto; height: 100px; margin: 0 auto; background: #ddd;" />
        </div>
    <?php endforeach; ?>
</div>

<!-- jQuery, libreria che facilita la vita -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- script per ottenere l'immagine combinata -->
<script>

    var current_model_id; // Conterrà l'id della texture corrente
    var current_texture_id; // Conterrà l'id del modello corrente
    var image_page_url = '/rmm/get-picture.php'; // URL della pagina che restituisce l'immagine combinata

    // Ascolto l'evento click sull'elemento con classe model-item
    $('.model-item').click(function() {
        console.log('a');
        current_model_id = $(this).data('id'); // assegno alla variabile il contenuto dell'attributo data-id, quindi l'id del modello cliccato
        getPicture(); // Ottengo l'immagine combinata
    });

    // Ascolto l'evento click sull'elemento con classe texture-item
    $('.texture-item').click(function() {
        current_texture_id = $(this).data('id'); // assegno alla variabile il contenuto dell'attributo data-id, quindi l'id della texture cliccata
        getPicture(); // Ottengo l'immagine combinata
    });

    // Funzione per ottenere l'immagine combinata
    function getPicture() {

        // Esco dalla funzione nel caso uno dei due id non sia presente
        if (!current_model_id || !current_texture_id) {
            return;
        }

        // Invio una richiesta alla pagina passando gli id correnti
        $.get(image_page_url, {
            model: current_model_id,
            texture: current_texture_id
        }).done(function(response) {
            $('#combo-image').attr('src', response.picture); // Assegno all'immagine il percorso ottenuto
            $('#combo-image').css('opacity', 1); // Mostro l'immagine nel caso sia nascosta
        });
    }

</script>