{% extends "templates/layout.twig" %}

{% block pageHead %}

<style>
    [x-cloak] {
        display: none !important;
    }
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
</style>

{% endblock %}

{% block page %}

{% block data %}

{% endblock %}

<div class="min-h-screen">

    <div id="versus_bar" class="fixed bottom-0 z-10 bg-white w-screen" 
    x-data="{ visible: false }" 
    x-init="() => { 
        window.addEventListener('scroll', () => { 
            visible = window.scrollY > 300;
        }); 
    }" 
    x-cloak
    x-show="visible" 
    x-transition:enter="transition ease-out duration-300 transform" 
    x-transition:enter-start="translate-y-full" 
    x-transition:enter-end="translate-y-0" 
    x-transition:leave="transition ease-in duration-300 transform" 
    x-transition:leave-start="translate-y-0" 
    x-transition:leave-end="translate-y-full" 
    style="box-shadow: rgba(0, 0, 0, 0.15) 0px -15px 25px, rgba(0, 0, 0, 0.05) 0px -5px 10px;">
        <div class="grid grid-cols-2 md:grid-cols-2 w-full divide-x">
            {% for item in models %}
                {% include "templates/components/versus2/bar-card.twig" %}
            {% endfor %}
        </div>
    </div>

    <div class="mx-auto px-4">
        <div class="px-4 mt-8">
            <h1 class="text-2xl font-extrabold text-center my-4">{{title}}</h1>
            <p class=" text-center text-md mb-6">{{descrizione}}</p>
        </div>
    
        <div class="grid grid-cols-2 md:grid-cols-2 gap-4 w-full">
            {% for item in models %}
            <div class="mx-auto h-80 w-full flex flex-col justify-end items-center">
                <img loading="eager" class="mx-auto object-contain h-auto w-auto object-bottom" src="{{item.image_url}}"  alt="{{item.producer_name}} {{item.model}}">

            </div>
            {% endfor %}
        </div>

        <div class="grid grid-cols-2 md:grid-cols-2 gap-4 w-full mt-6">
            {% for item in models %}
                <div>
                    {% if item.prices.best_price.price %}
                    <a href="{{item.prices.best_price.url_low}}" target="_blank" rel="nofollow" id="best_price" class="text-center">
                        <div class="text-sm text-slate-500">{{item.prices.best_price.label}}</div>
                        <div><span class="font-bold text-3xl">{{item.prices.best_price.price}}</span><small class="text-sm align-[10px] -mr-2">&euro;</small> </div>
                    </a>
                    {% endif %}
                </div>
            {% endfor %}
        </div>

        <div class="mt-6">
            {% include "templates/components/versus2/datatable.twig" %}
        </div>
    </div>



</div>


<script>
    function productSearch() {
        return {
            query: '',
            filteredProducts: [],
            loading: false,

            async filterProducts() {
                if (this.query.length < 3) {
                    this.filteredProducts = [];
                    return;
                }

                this.loading = true;
                try {
                    const response = await fetch(`/new_files/ajax/fullsearch.php?search_str=${this.query}&device_type={{device_type}}&ltype=json`, {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json' // Tipo di contenuto per la richiesta
                        }
                    });
                    const data = await response.json();
                    this.filteredProducts = data[1];
                } catch (error) {
                    console.error('Errore nel fetch:', error);
                    this.filteredProducts = [];
                } finally {
                    this.loading = false;
                }
            },


            selectProduct(product) {
                this.query = product.producer_name + ' ' + product.model;
                this.filteredProducts = [];

                // Ottieni solo gli ID dal JSON `modelList`
                const modelIds = JSON.parse('{{ modelList |json_encode | raw }}').join('-');

                // Genera la URL per il confronto
                const base = '{{ device_type is defined and device_type != "smartphone" ? "/compara/" ~ device_type ~ "/" : "/compara/" }}';
                const compareUrl = base + modelIds + '-' + product.id + '.html';

                // Reindirizza l'utente alla nuova URL
                window.location.href = compareUrl;
            }
        };
    }

</script>




{% block pageFooter %}

{% endblock %}

{% endblock %}