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

{% block pageHead %}

<title>{{ page_title }} - HDblog.it</title>
<meta name="description" content="{{descrizione}}" />

<meta name="author" content="HDblog.it">


<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 %}

{% set single_product = models|length == 1 %}

<div class="-mx-4" x-data="productCompare()">

    <section class="versus_heading text-center p-4 mt-4">
        <h1 class="text-2xl font-bold my-4">{{ page_title }}</h1>
        <p class=" text-center text-base mb-6">{{descrizione}}</p>
    </section>


    <section>
        <div id="scrollable1" 
            class="{% if not single_product %}overflow-x-scroll whitespace-nowrap lg:whitespace-normal hidden-scrollbar{% endif %} lg:p-0 mt-4 divide-x-2 h-auto"
            {% if not single_product %}onscroll="syncScroll('scrollable1', 'scrollable2')"{% endif %}
            >
            {% for item in models %}
            {% set img_width  = 150 %}
            {% set img_height = 300 %}
            <div class="{% if single_product %}block w-full{% else %}inline-block align-top max-w-[280px]{% endif %} px-4 text-center relative">
                <a href="{{item.url}}" class="block font-codensed mb-4">{{item.name}}</a>
                <div class="w-[160px] h-[180px] overflow-hidden relative mx-auto">
                    <img loading="eager" class="block mx-auto object-cover" width="{{img_width}}" height="{{img_height}}" src="{{item.image_url}}" alt="{{item.producer_name}} {{item.model}}">
                   {#  <div class="absolute bottom-0 h-12 w-[180px] bg-gradient-to-t from-white via-white via-30%"></div> #}
                </div>
            {% if not loop.last %}
                <div class="text-gray-300 p-2 bg-white absolute right-0 top-24 -mr-5  z-[2]">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
                        <path fill-rule="evenodd" d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z" clip-rule="evenodd" />
                    </svg>
                </div>
            {% endif %}


                {% if item.prices.best_price.is_domination %}
                
                <a href="{{item.prices.best_price.url}}" target="_blank" rel="nofollow" id="best_price" class="bg-amber-500 text-white rounded-md p-2 -mt-1 mb-4 relative h-20 flex flex-col justify-center">
                    <div class="absolute text-amber-500 -top-5 left-1/2 -ml-5">
                        <svg xmlns="http://www.w3.org/2000/svg" class="size-10" viewBox="0 0 320 512"><path fill="currentcolor" d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l256 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"/></svg>
                          
                    </div>
                    
                    <div><span class="font-semibold text-2xl" style="text-shadow: 1px 1px 1px #555;"> </div>
                    <div class="text-sm font-condensed">{{item.prices.best_price.cta}}</div>
                </a>
                <a target="_blank" class="block text-center text-cyan-700 mb-4 min-h-11" href="{{item.prices.best_price.url}}">
                    {% if item.prices.best_price.price_range.low is not empty and item.prices.best_price.price_range.high is not empty %}
                        <span class="block font-semibold mt-2">Da {{item.prices.best_price.price_range.low}}<small>&euro;</small> a {{item.prices.best_price.price_range.high}}<small>&euro;</small></span>
                    {% endif %}
                    <span class="block font-condensed text-sm">{{item.prices.offers.offers_text}}</span>
                </a> 

                {% endif %}

               
                {% if item.prices.best_price.price %}
                <a href="{{item.prices.best_price.url_low}}" target="_blank" rel="nofollow" id="best_price" class="bg-amber-500 text-white rounded-md p-2 -mt-1 mb-4 relative h-20 flex flex-col justify-center">
                    <div class="absolute text-amber-500 -top-5 left-1/2 -ml-5">
                        <svg xmlns="http://www.w3.org/2000/svg" class="size-10" viewBox="0 0 320 512"><path fill="currentcolor" d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l256 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"/></svg>
                          
                    </div>
                    
                    <div><span class="font-semibold text-2xl" style="text-shadow: 1px 1px 1px #555;">{{item.prices.best_price.price}}</span><small>&euro;</small> </div>
                    <div class="text-sm font-condensed">{{item.prices.best_price.label}}</div>
                </a>
                <a target="_blank" class="block text-center text-cyan-700 mb-4 min-h-11" href="{{item.prices.best_price.url}}">
                    {% if item.prices.best_price.price_range.low is not empty and item.prices.best_price.price_range.high is not empty %}
                        <span class="block font-semibold mt-2">Da {{item.prices.best_price.price_range.low}}<small>&euro;</small> a {{item.prices.best_price.price_range.high}}<small>&euro;</small></span>
                    {% endif %}
                    <span class="block font-condensed text-sm">{{item.prices.offers.offers_text}}</span>
                </a> 
                {% endif %}



                {% if item.prices.price_alert %}
                <a href="{{ item.prices.price_alert.url }}" class="bg-slate-200 text-slate-500 rounded-md p-2 -mt-1 mb-4 relative block h-20">
                    <div class="absolute text-slate-200 -top-5 left-1/2 -ml-5">
                        <svg xmlns="http://www.w3.org/2000/svg" class="size-10" viewBox="0 0 320 512"><path fill="currentColor" d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l256 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"/></svg>
                    </div>
                    <div><span class="font-semibold text-sm">{{ item.prices.price_alert.label }}</span></div>
                    <div class="text-sm font-condensed whitespace-normal leading-5">{{ item.prices.price_alert.description }}</div>
                </a>
                <div class="block text-center text-cyan-700 mb-4 min-h-11"></div>
                

                {% endif %}
                <section  class="mb-6">
                    
                    {% for feature in item.tables %}


                    {% if feature.titolo == 'Prezzi' %}
                        {% include "templates/components/versus/pricetable.twig" %}
                    {% else %}
                        {% include "templates/components/versus/datatable.twig" %}
                    {% endif %}

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

        {% include "templates/components/versus/modal-alert.twig" %}

    </section>

    {% if single_product %}
    {% include "templates/components/versus/related-versus-models.twig" %}
    {% endif %}
    
    
    <section 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 > 100;
                 }); 
             }" 
             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 id="scrollable2"  
                class="overflow-x-scroll whitespace-nowrap hidden-scrollbar py-4 divide-x-2 h-auto"
                onscroll="syncScroll('scrollable2', 'scrollable1')"
        >
            {% for item in models %}
                <div class="inline-block align-top relative">
                    {% include "templates/components/cards/versus/bar-card.twig" %}
                </div>
            {% endfor %}
        </div>
    </section>



    
</div>




{% include "templates/components/versus/partials/versus-store.twig" %}

<script>
    // Funzione per sincronizzare lo scroll
    function syncScroll(sourceId, targetId) {
        const source = document.getElementById(sourceId);
        const target = document.getElementById(targetId);

        // Evita la sincronizzazione immediata per evitare conflitti di scroll
        if (source.scrollLeft !== target.scrollLeft) {
            target.scrollLeft = source.scrollLeft;
        }
    }


    // Component per il confronto dei prodotti
    function productCompare() {
        return Alpine.store('productCompare');
    }
</script>


<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 }}');
                
                // Controlla se aggiungendo il nuovo prodotto si supera il limite di 6
                const totalProducts = modelIds.length + 1; // +1 per il nuovo prodotto
                
                if (totalProducts > 6) {
                    // Mostra il modale di limite e non fare altro
                    Alpine.store('productCompare').showLimitModal = true;
                    return;
                }

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

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

</script>




{% block pageFooter %}

{% endblock %}

{% endblock %}