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

{% block pageHead %}

{% include "templates/components/versus/metadata.twig" %}
<meta name="author" content="HDblog.it">

{% endblock %}

{% block page %}

{% block data %}

{% endblock %}


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


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

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


    {% include 'templates/components/versus/searchdevice.twig' %}


    <div class="px-6">
        {% include 'templates/components/versus/heading.twig' %}
    </div>


    <div class="relative tab-wrapper pb-6" x-data="{ activeTab:  0 }">

        <div class="flex mb-2 bg-white pt-4 pb-2 z-[2] pl-4 pr-6 whitespace-nowrap overflow-x-auto no-scrollbar">
            <label
                @click="activeTab = 0"
                class="tab-control select-none mr-2 flex gap-2 items-center rounded-full px-6 h-10 py-2 text-sm font-medium border hover:cursor-pointer"
                :class="{ 'bg-gray-100 text-gray-900 border-primary': activeTab === 0 }"
            >Novit&agrave;</label>
            <label
                @click="activeTab = 1"
                class="tab-control select-none mr-2 flex gap-2 items-center rounded-full px-6 h-10 py-2 text-sm font-medium border hover:cursor-pointer"
                :class="{ 'bg-gray-100 text-gray-900 border-primary': activeTab === 1 }"
            >Pi&ugrave; comparati</label>
            <label
                @click="activeTab = 2"
                class="tab-control select-none flex gap-2 items-center rounded-full px-6 h-10 py-2 text-sm font-medium border hover:cursor-pointer"
                :class="{ 'bg-gray-100 text-gray-900 border-primary': activeTab === 2 }"
            >Confronti hot</label>
        </div>
    
        <div class="tab-panel" :class="{ 'active': activeTab === 0 }" x-show="activeTab === 0"
            x-transition:enter="transition ease-out duration-600"
            x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-600"
            x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
            <section class="bg-white">
                <div class="grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:px-4">
                    {% for item in products %}
                        {% include "templates/components/cards/versus/product-card.twig" %}
                    {% endfor %}
                </div>
            </section>
        </div>
    
        <div class="tab-panel" :class="{ 'active': activeTab === 1 }" x-show="activeTab === 1"
            x-transition:enter="transition ease-out duration-600"
            x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-600"
            x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
            <section class="bg-white">
                <div class="grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:px-4">
                    {% for item in populars %}
                        {% include "templates/components/cards/versus/product-card.twig" %}
                    {% endfor %}
                </div>
            </section>
        </div>
    
        <div class="tab-panel" :class="{ 'active': activeTab === 2 }" x-show="activeTab === 2"
            x-transition:enter="transition ease-out duration-600"
            x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-600"
            x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
            <section class="bg-white">
                <div class="grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:px-4">
                    {% for item in hot %}
                        {% include "templates/components/cards/versus/versus-card.twig" %}
                    {% endfor %}
                </div>
            </section>
        </div>
    
    </div>
    
<!-- Drawer Modal -->
<div 
    x-show="showModal" 
    x-transition:enter="transition ease-in-out duration-300 transform" 
    x-transition:enter-start="translate-y-full" 
    x-transition:enter-end="translate-y-0" 
    x-transition:leave="transition ease-in-out duration-300 transform" 
    x-transition:leave-start="translate-y-0" 
    x-transition:leave-end="translate-y-full" 
    class="fixed inset-x-0 bottom-0 bg-white w-full mx-auto"
    style="box-shadow: rgba(0, 0, 0, 0.15) 0px -15px 25px, rgba(0, 0, 0, 0.05) 0px -5px 10px;"
>
<div x-cloak x-show="selectedProducts.length >= 6" class="flex items-center justify-left gap-2 text-left pl-6 font-normal text-sm mt-4 text-primary">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="size-6"><path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd"></path></svg> 
    <span class="text-black">Hai raggiunto il limite di 6 device da confrontare</span>
</div>
    <ul class="mb-14">
        <template x-for="product in selectedProducts" :key="product.id">
            <li class="relative flex items-center px-2 py-4 border-b last-of-type:border-0">
                <img :src="product.image_url" alt="Product Image" class="w-16 h-16 object-contain mx-4">
                <span x-text="`${product.producer_name} ${product.model}`"></span>
                <button @click="removeFromCompare(product.id)" class="absolute border-2 right-6 top-8 text-slate-300 rounded-full border-slate-300 p-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                    </svg>
                </button>
            </li>
        </template>
    </ul>
    
</div>

<!-- Modal Header Bar -->
<div 
    x-show="selectedProducts.length"
    
    x-transition:enter="transition ease-in-out duration-300"
    x-transition:leave="transition ease-in-out duration-300"
    class="fixed bottom-0 left-0 right-0 bg-gray-900 text-white py-2 px-4 flex items-center justify-between shadow-lg"
>
    <div class="relative flex items-center border-2  border-slate-300  p-2 ml-5 rounded-full text-slate-300">
        <span 
        :class="showModal ? 'opacity-0' : 'opacity-1'"
        class="absolute h-5 w-5 flex bg-emerald-500 text-white text-xs transition-opacity ml-4 text-md rounded-full items-center justify-center -left-6 -top-1" x-text="selectedProducts.length"></span>
        <!-- Icona SVG con rotazione -->
        <svg 
        @click="showModal = !showModal"
            xmlns="http://www.w3.org/2000/svg" 
            fill="none" 
            viewBox="0 0 24 24" 
            stroke-width="1.5" 
            stroke="currentColor" 
            class="size-6 transition-transform duration-300 cursor-pointer" 
            :class="showModal ? 'rotate-180' : 'rotate-0'"
            
        >
            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
        </svg>
        <span class="text-xs text-slate-500"></span>
    </div>
    <button @click="compareProducts()" :class="selectedProducts.length > 1 ? 'bg-primary border-primary border-2  text-white' : 'bg-transparent text-slate-400 border-2 border-slate-400'"
        class="px-4 py-2 rounded-md text-sm relative font-semibold flex items-center gap-2">
        <span x-text="selectedProducts.length > 1 ? 'VAI AL CONFRONTO' : 'seleziona almeno 2 {{device_type}}'"></span>
    </button>
</div>

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


</section>

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

<script>

    // Funzione per la ricerca dei prodotti
    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 = [];

                // Aggiunge il prodotto selezionato al confronto utilizzando Alpine.store
                Alpine.store('productCompare').addToCompare(product);
            }
        };
    }

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

</script>


{% block pageFooter %}

{% endblock %}

{% endblock %} 