@assets

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.36/fancybox/fancybox.min.css" integrity="sha512-s4DOVHc73MjMnsueMjvJSnYucSU3E7WF0UVGRQFd/QDzeAx0D0BNuAX9fbZSLkrYW7V2Ly0/BKHSER04bCJgtQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">

@endassets

@php
    $backgroundImage = $myInvites->count() == 0 ? asset('img/fondo-black.svg') : asset('img/fongo.svg');
@endphp
<div class="individual-invitation py-5 px-sm-5 image-bg" style="background-image: url({{$backgroundImage}});" x-data="computedTemplates(false)">
    {{-- Banner Carousel --}}
    <livewire:customer.home-banner-carousel />
    <style>
        .category-card {
            transition: transform 0.2s, box-shadow 0.2s;
            border-radius: 12px;
            cursor: pointer;
            height: 70px; /* Reduced specific height */
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #6FB8AC;
        }
        .category-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.1);
        }
        .category-icon {
            font-size: 1.4rem; /* Reduced icon size */
            margin-right: 10px;
        }
        .category-text {
            font-size: 1.1rem; /* Reduced text size */
            font-weight: 700;
            line-height: 1;
        }
        .bg-teal-custom {
            background-color: #82C8B8;
        }
        .bg-dark-custom {
            background-color: #1A1A1A;
        }
        /* New selected state styles */
        .category-card.selected-card {
            background-color: #000000 !important;
            border-color: #000000 !important;
        }
        /* Default white text for all cards */
        .category-card .category-text, .category-card .category-icon {
            color: #ffffff;
        }
        /* Selected card overrides */
        .category-card.selected-card .category-text {
            color: #ffffff !important;
        }
        .category-card.selected-card .category-icon {
            color: #FFC107 !important; /* Yellow icon when selected */
        }

        .text-gold-custom {
            color: #FFC107;
        }
        /* Grid layout for buttons */
        .categories-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            max-width: 600px; /* Reduced max width */
            margin: 0 auto;
        }
        @media (min-width: 768px) {
           .categories-grid {
               grid-template-columns: repeat(2, 1fr);
               gap: 16px;
           } 
        }
        @media (min-width: 1200px) {
            .step1-categories-wrap {
                padding-bottom: 24px !important;
            }
            .categories-grid {
                grid-template-columns: repeat(4, minmax(150px, 1fr));
                gap: 10px;
                max-width: 920px;
                margin-bottom: 22px;
            }
            .category-card {
                height: 50px;
                border-radius: 10px;
                padding: 0 10px;
            }
            .category-icon {
                font-size: 0.95rem;
                margin-right: 6px;
            }
            .category-text {
                font-size: 0.88rem;
            }
            .model-bottom {
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                align-items: center;
                gap: 8px;
            }
            .model-info,
            .palette-wrap {
                min-width: 0;
                width: 100%;
            }
            .palette-trigger {
                padding: 6px 8px;
                gap: 6px;
            }
            .palette-swatches {
                gap: 5px;
                min-height: 22px;
            }
            .palette-swatch {
                width: 22px;
                height: 22px;
                border-radius: 5px;
            }
            .palette-chevron {
                font-size: 1.2rem;
            }
            .model-colors-text {
                font-size: 0.9rem;
                line-height: 1.15;
            }
        }
        .wedding,
        .invitationes {
            padding-left: 12px;
            padding-right: 12px;
        }
        .model-card {
            border-radius: 22px;
            background: #fff;
            overflow: visible;
        }
        .model-preview {
            height: 200px;
            object-fit: cover;
            border-radius: 14px;
        }
        .model-thumb-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 0;
            background: rgba(24, 24, 24, 0.65);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }
        .model-thumb-nav.model-thumb-nav-right {
            right: 10px;
        }
        .model-thumb-nav.model-thumb-nav-left {
            left: 10px;
        }
        .model-thumb-nav i {
            font-size: 1.35rem;
            line-height: 1;
        }
        .model-title-wrap {
            width: 100%;
            padding: 2px 10px 0;
            margin-bottom: 8px;
        }
        .model-bottom {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: end;
            gap: 12px;
            padding: 0 10px 4px;
        }
        .model-info {
            min-width: 0;
        }
        .model-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: #111;
            margin: 0;
            line-height: 1.1;
        }
        .model-colors-text {
            margin-top: 4px;
            font-size: 0.95rem;
            font-weight: 500;
            color: #1f1f1f;
            line-height: 1;
        }
        .palette-wrap {
            width: 100%;
            min-width: 190px;
        }
        .palette-trigger {
            border: 1px solid #B9BDC6;
            border-radius: 12px;
            background: #fff;
            padding: 8px 12px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .palette-swatches {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 30px;
        }
        .palette-swatch {
            width: 30px;
            height: 30px;
            border-radius: 6px;
            border: 1px solid rgba(0,0,0,0.12);
            display: inline-block;
        }
        .palette-chevron {
            font-size: 1.6rem;
            color: #202020;
            line-height: 1;
        }
        .palette-dropdown-menu {
            min-width: auto;
            width: max-content;
            padding: 8px;
            border-radius: 10px;
            border: 1px solid #E6E6E6;
            z-index: 1080;
        }
        .palette-item {
            width: auto;
            border: 0;
            background: transparent;
            padding: 4px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
        }
        .palette-item:hover {
            background: #F7F7F7;
        }
        @media (min-width: 992px) {
            .model-bottom {
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                align-items: center;
            }
            .model-info,
            .palette-wrap {
                min-width: 0;
                width: 100%;
            }
            .palette-trigger {
                padding: 6px 8px;
                gap: 6px;
            }
            .palette-swatches {
                gap: 4px;
                min-height: 22px;
            }
            .palette-swatch {
                width: 22px;
                height: 22px;
                border-radius: 5px;
            }
            .palette-chevron {
                font-size: 1.2rem;
            }
        }
        @media (max-width: 768px) {
            .model-title {
                font-size: 0.95rem;
            }
            .model-colors-text {
                font-size: 0.85rem;
            }
            .palette-wrap {
                width: 100%;
                min-width: 165px;
            }
            .palette-swatch {
                width: 26px;
                height: 26px;
            }
            .palette-swatches {
                min-height: 26px;
                gap: 6px;
            }
            .palette-trigger {
                padding: 7px 9px;
            }
            .palette-chevron {
                font-size: 1.3rem;
            }
            .model-thumb-nav {
                width: 42px;
                height: 42px;
            }
            .model-thumb-nav.model-thumb-nav-right {
                right: 8px;
            }
            .model-thumb-nav.model-thumb-nav-left {
                left: 8px;
            }
        }
    </style>

    <div class="container pt-4 pb-1 step1-categories-wrap">
        <div class="text-center mb-4">
            <h2 id="categoria" class="text-dark fw-bold fs-3 mb-2">¿Qué vas a festejar?</h2>
            <p class="text-dark fs-6 m-0" style="font-weight: 400;">Elige la categoría de tu evento.</p>
        </div>

        <div class="categories-grid mb-0">
            @foreach ($invitationTypes as $type)
                @php
                    $code = strtolower($type['code']);
                    $isQuince = in_array($code, ['quinces', 'quinceanos', '15anos']);
                    $bgColorClass = $isQuince ? 'bg-dark-custom' : 'bg-teal-custom';
                    
                    // Icon logic (classes only, colors handled by CSS based on selection)
                    $iconName = 'bi-star-fill'; // default
                    if ($isQuince) $iconName = 'bi-crown';
                    elseif (in_array($code, ['boda', 'bodas', 'wedding', 'matrimonio'])) $iconName = 'bi-heart-fill';
                    elseif (in_array($code, ['cumple', 'cumples', 'cumpleanos', 'birthday', 'infantil', 'adultos'])) $iconName = 'bi-cake2-fill';
                    elseif (in_array($code, ['graduacion', 'graduaciones', 'egresados'])) $iconName = 'bi-mortarboard-fill';
                    elseif (in_array($code, ['bautismo', 'bautismos'])) $iconName = 'bi-droplet-fill';
                @endphp
                
                {{-- Add Alpine dynamic class binding for 'selected-card' --}}
                <div class="category-card {{ $bgColorClass }} shadow-sm"
                     :class="{ 'selected-card': section === '{{$type->code}}' }"
                     x-on:click="$wire.setInvitationType({{$type}}), section = '{{$type->code}}', section_name = '{{$type->name}}'">
                    
                    {{-- Icon color logic is now in CSS: .selected-card .category-icon becomes #FFC107, otherwise white (except hardcoded Quince gold removed to let CSS handle) --}}
                    {{-- Actually, for non-selected cards: Quince icon was originally gold. User wants "selected button to be black with white text and yellow icon". --}}
                    {{-- Let's stick to the user's specific request for the selected state. For non-selected, we keep original colors? --}}
                    {{-- Wait, "haz mas pequeños los botones... el boton seleccionado debe ser negro con texto blanco y el icono amarillo" --}}
                    {{-- The previous implementation had Quince icon as Gold by default. --}}
                    {{-- I will set default color to white for simplicity to match the others, but allow Quince to keep its distinctive look if needed? --}}
                    {{-- No, consistent behavior is better. All white when unselected (except maybe quince), yellow when selected. --}}
                    {{-- Let's make Quince icon gold by default too as it looks better on black bg? But if Quince bg is black and selected bg is black... same visual. --}}
                    {{-- I'll use text-white for all unselected icons to be safe, except Quince which was special. --}}
                    
                    <i class="bi {{ $iconName }} category-icon {{ $isQuince ? 'text-gold-custom' : 'text-white' }}"></i>
                    <span class="category-text text-white">{{ $type['name'] }}</span>
                </div>
            @endforeach
        </div>
    </div>


@if($this->templatesComputed)
    <div class="wedding">
        <div class="pb-3">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="fs-sm-24 mb-0 fs-21 fw-bold text-start text-dark d-sm-block d-none"><span x-text="section_name"></span><span style="color: #F1B20A;">.</span>
                </h2>
                {{-- <a href="#" class="text-decoration-underline text-dark btn-underline fw-bold d-sm-block d-none" x-on:click="showHideMore">Ver todo <span x-text="section_name"></span></a> --}}
            </div>
            <div class="my-4 container-slides position-relative" x-show="!showMore" x-transition>
                <div class="row row-cols-1 row-cols-lg-3"> <!--se cambio class models_slider-->
                @foreach ($this->templatesComputed as $template)
                    @php
                        $templateThumbnailUrls = collect();

                        if (!empty($template->img_preview)) {
                            $templateThumbnailUrls->push(Storage::url($template->img_preview));
                        }

                        $extraThumbs = $template->images
                            ->pluck('thumbnail_path')
                            ->filter()
                            ->map(function ($path) {
                                return Storage::url($path);
                            });

                        $templateThumbnailUrls = $templateThumbnailUrls->merge($extraThumbs)->unique()->values();
                    @endphp
                    <div class="col-sm-auto" x-show="section == '{{$template->type->code}}'" x-transition>
                        <div class="card model-card border-shadow border-0 p-2">
                            <div class="position-relative img-card" x-data="thumbnailNavigator(@js($templateThumbnailUrls), {{$template['id']}})">
                                <template x-if="thumbnails.length > 0">
                                    <img :src="thumbnails[currentIndex]" class="card-img-top model-preview" alt="..." @click="$wire.setTemplateAndNext({{$template['id']}})">
                                </template>
                                @if($templateThumbnailUrls->count() > 1)
                                    <button type="button" class="model-thumb-nav model-thumb-nav-left" x-show="currentIndex > 0" @click.stop="prev()" aria-label="Thumbnail anterior">
                                        <i class="bi bi-chevron-left"></i>
                                    </button>
                                    <button type="button" class="model-thumb-nav model-thumb-nav-right" @click.stop="next()" aria-label="Siguiente thumbnail">
                                        <i class="bi bi-chevron-right"></i>
                                    </button>
                                @endif
                            </div>
                            <div class="card-body pb-0 pt-2 px-0">
                                @php
                                    $colorThemes = $template->themes->filter(function ($theme) {
                                        return $theme->type === 'colors';
                                    })->shuffle()->values();
                                    $firstTheme = $colorThemes->first();
                                    $firstThemeColors = $firstTheme
                                        ? $firstTheme->values->pluck('value')->filter(function ($value) {
                                            return strpos($value, '#') === 0;
                                        })->values()->take(4)
                                        : collect();
                                @endphp
                                <div class="model-title-wrap">
                                    <h5 class="model-title">Modelo {{$template['name']}}</h5>
                                </div>
                                @if($colorThemes->count() > 0)
                                    <div class="model-bottom">
                                        <div class="model-info">
                                            <div class="model-colors-text">Colores disponibles →</div>
                                        </div>
                                        <div class="dropdown palette-wrap">
                                            <button class="palette-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="palette-{{$template->id}}">
                                                <span class="palette-swatches">
                                                    @foreach($firstThemeColors as $color)
                                                        <span class="palette-swatch" style="background: {{$color}};"></span>
                                                    @endforeach
                                                </span>
                                                <i class="bi bi-chevron-down palette-chevron"></i>
                                            </button>
                                            <ul class="dropdown-menu palette-dropdown-menu" aria-labelledby="palette-{{$template->id}}">
                                                @foreach($colorThemes as $theme)
                                                    @php
                                                        $themeColors = $theme->values->pluck('value')->filter(function ($value) {
                                                            return strpos($value, '#') === 0;
                                                        })->values();
                                                    @endphp
                                                    @if($themeColors->count() > 0)
                                                        <li>
                                                            <button type="button" class="palette-item">
                                                                <span class="palette-swatches">
                                                                    @foreach($themeColors as $color)
                                                                        <span class="palette-swatch" style="background: {{$color}};"></span>
                                                                    @endforeach
                                                                </span>
                                                            </button>
                                                        </li>
                                                    @endif
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
                </div>
            </div>
            <div class="my-4 container-slides shadow-right position-relative" x-show="showMore" x-transition>
                <div class="row">
                @foreach ($this->templatesComputed as $template)
                    @php
                        $templateThumbnailUrls = collect();

                        if (!empty($template->img_preview)) {
                            $templateThumbnailUrls->push(Storage::url($template->img_preview));
                        }

                        $extraThumbs = $template->images
                            ->pluck('thumbnail_path')
                            ->filter()
                            ->map(function ($path) {
                                return Storage::url($path);
                            });

                        $templateThumbnailUrls = $templateThumbnailUrls->merge($extraThumbs)->unique()->values();
                    @endphp
                    <div class="col col-12 col-md-3" x-show="section == '{{$template->type->code}}'" x-transition>
                        <div class="card model-card border-shadow border-0 p-2">
                            <div class="position-relative img-card" x-data="thumbnailNavigator(@js($templateThumbnailUrls), {{$template['id']}})">
                                <template x-if="thumbnails.length > 0">
                                    <img :src="thumbnails[currentIndex]" class="card-img-top model-preview" alt="..." @click="$wire.setTemplateAndNext({{$template['id']}})">
                                </template>
                                @if($templateThumbnailUrls->count() > 1)
                                    <button type="button" class="model-thumb-nav model-thumb-nav-left" x-show="currentIndex > 0" @click.stop="prev()" aria-label="Thumbnail anterior">
                                        <i class="bi bi-chevron-left"></i>
                                    </button>
                                    <button type="button" class="model-thumb-nav model-thumb-nav-right" @click.stop="next()" aria-label="Siguiente thumbnail">
                                        <i class="bi bi-chevron-right"></i>
                                    </button>
                                @endif
                            </div>
                            <div class="card-body pb-0 pt-2 px-0">
                                @php
                                    $colorThemes = $template->themes->filter(function ($theme) {
                                        return $theme->type === 'colors';
                                    })->shuffle()->values();
                                    $firstTheme = $colorThemes->first();
                                    $firstThemeColors = $firstTheme
                                        ? $firstTheme->values->pluck('value')->filter(function ($value) {
                                            return strpos($value, '#') === 0;
                                        })->values()->take(4)
                                        : collect();
                                @endphp
                                <div class="model-title-wrap">
                                    <h5 class="model-title">Modelo {{$template['name']}}</h5>
                                </div>
                                @if($colorThemes->count() > 0)
                                    <div class="model-bottom">
                                        <div class="model-info">
                                            <div class="model-colors-text">Colores disponibles →</div>
                                        </div>
                                        <div class="dropdown palette-wrap">
                                            <button class="palette-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="palette-more-{{$template->id}}">
                                                <span class="palette-swatches">
                                                    @foreach($firstThemeColors as $color)
                                                        <span class="palette-swatch" style="background: {{$color}};"></span>
                                                    @endforeach
                                                </span>
                                                <i class="bi bi-chevron-down palette-chevron"></i>
                                            </button>
                                            <ul class="dropdown-menu palette-dropdown-menu" aria-labelledby="palette-more-{{$template->id}}">
                                                @foreach($colorThemes as $theme)
                                                    @php
                                                        $themeColors = $theme->values->pluck('value')->filter(function ($value) {
                                                            return strpos($value, '#') === 0;
                                                        })->values();
                                                    @endphp
                                                    @if($themeColors->count() > 0)
                                                        <li>
                                                            <button type="button" class="palette-item">
                                                                <span class="palette-swatches">
                                                                    @foreach($themeColors as $color)
                                                                        <span class="palette-swatch" style="background: {{$color}};"></span>
                                                                    @endforeach
                                                                </span>
                                                            </button>
                                                        </li>
                                                    @endif
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
                </div>
            </div>
            {{-- <a href="#" class="text-decoration-underline text-dark btn-underline fw-bold d-sm-none d-block btn-all" x-on:click="showHideMore">Ver todo <span x-text="section_name"></span></a> --}}
        </div>
    </div>
@endif

    <div class="most-valued d-none">
        <div class="py-3">
            <h2 class="fs-sm-24 mb-0 py-2 fs-21 fw-bold text-start text-dark">Más valoradas<span
                    style="color: #F1B20A;">.</span></h2>

            <div class="my-4 container-slides position-relative">
                <div class="row row-cols-1 row-cols-lg-4"> <!--se cambio class most_valued-->
                    @foreach ($mostValuedTemplates as $valuedTemplate)
                        <div class="col-sm-auto pb-3" wire:click="setTemplateAndNext({{$valuedTemplate['id']}}, {{$valuedTemplate->type}})">
                            <div class="card border-0 rounded-4 p-2">
                                <div class="position-relative img-card">
                                    @if(!empty($valuedTemplate['img_preview']))
                                        <img src="{{Storage::url($valuedTemplate['img_preview'])}}" class="card-img-top" alt="...">
                                    @endif
                                    <p class="score bg-dark rounded-pill text-white position-absolute px-3"><img
                                            class="me-1" src="img/star.svg" alt="">{{$valuedTemplate['rating']}}</p>
                                </div>
                                <div class="card-body">
                                    <h5 class="card-title fw-700">{{$valuedTemplate['name']}}</h5>
                                    <p class="card-text fs-sm-13">{{$valuedTemplate->type->name}}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

        </div>
    </div>

    <div class="invitationes">
        <div class="py-3">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="fs-sm-24 mb-0 fs-21 fw-bold text-start text-dark">Mis invitaciones<span
                        style="color: #F1B20A;">.</span></h2>
                <a href="/invitations" class="text-decoration-underline text-dark btn-underline fw-bold d-sm-block d-none" wire:navigate>Ver todas mis invitaciones</a>
            </div>
        </div>
        <div class="templates">
            @forelse ($myInvites as $invitation)
            <div class="item">
                <div class="tab bg-black text-white rounded-4 fw-bold d-inline-block py-2 px-4 pb-4">{{ $invitation->type->name }}</div>
                <div class="content-template bg-white p-2 rounded-4 position-relative " style="margin-top: -20px;">
                    <div class="position-relative">
                        <a href="#" class="d-block ">
                            @php
                                $backgroundImage = ($invitation->variables->where('name', 'backgroundImage')->first());
                                $cover = $backgroundImage ? Storage::url($backgroundImage['value']) : asset('img/templates/'.strtolower($invitation->template->name).'/cover.jpg');
                            @endphp
                            <img src="{{ $cover }}" alt="" class="img-fluid w-100 rounded-3 mb-2" style="height: 200px; object-fit: cover;">
                        </a>
                    </div>
                    <div class="d-flex gap-2 ">
                        <div class="w-100 bg-gray-light py-1 px-4 rounded-pill">
                            <strong>{{ $invitation->title }}</strong> <br>
                            {{ $invitation->template->name }}
                        </div>
                        <div>
                            <a href="/invitations/{{$invitation->id}}/overview" wire:navigate>
                                <img src="{{asset('img/arrow-forward-circle-sharp.svg')}}" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <p>Aún no tienes una invitación creada</p>
            @endforelse
        </div>
    </div>

</div>

@script
    <script type="text/javascript">
        let modelSlider
        let mostValuedSlider
        let sliderIcons
        Livewire.on('reset-model-slider', () => {
            Alpine.store('step01', {
                model_sliders: false,
            })
            if(modelSlider === undefined) return
            modelSlider.destroy()
        })

        Alpine.data('computedTemplates', (showMore = false) => ({
            showMore,
            section: "{{$form['invitation_type_code']}}",
            section_name : "{{$form['invitation_name']}}",
            showHideMore(){
                this.showMore = !this.showMore
            }
        }))
        Alpine.data('thumbnailNavigator', (thumbnails, templateId) => ({
            thumbnails: thumbnails || [],
            templateId,
            currentIndex: 0,
            prev() {
                if (this.currentIndex <= 0) {
                    return;
                }

                this.currentIndex -= 1;
            },
            next() {
                if (!this.thumbnails.length) {
                    this.$wire.setTemplateAndNext(this.templateId);
                    return;
                }

                if (this.currentIndex >= this.thumbnails.length - 1) {
                    this.$wire.setTemplateAndNext(this.templateId);
                    return;
                }

                this.currentIndex += 1;
            }
        }))
        function initSlider(className, modelSlider, autoplay, numItems, itemsPerPage, itemNumber){
            if(document.getElementsByClassName(className)[0] === undefined){
                return
            }

            modelSlider = tns({
                container: '.'+className,
                items: numItems,
                gutter: 30,
                controlsText: ['', ''],
                nav: false,
                autoplayButtonOutput: false,
                mouseDrag: true,
                slideBy: 1,
                autoplay: false,
                items: itemNumber,
                responsive: {
                    640: {
                    items: 2
                    },
                    900: {
                        items: 3
                    },
                    1400:{
                        items: itemsPerPage
                    }
                }
            });
        }
        Livewire.hook('element.init', ({ component, el }) => {
            setTimeout(() => {
                let initialized = $store.step01 && $store.step01.model_sliders;
                if(initialized){
                    return
                }
                Alpine.store('step01', {
                    model_sliders: true,
                })

                //initSlider('models_slider', modelSlider, false, 8, 4, 1.5)
                // initSlider('most_valued', mostValuedSlider, true, 8, 5, 2.6)
                // initSlider('slider-icons', sliderIcons, false, 8, 5, 8)
        }, 1)
    })
    </script>
@endscript
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const sliderContainer = document.querySelector('.slider-icons');
        if (!sliderContainer) return;

        // Avoid double init (Livewire/Alpine re-renders)
        if (sliderContainer.classList.contains('tns-slider') || sliderContainer.closest('.tns-outer')) {
            return;
        }

        const items = sliderContainer.children || [];

        // Inicializa el carrusel solo si hay más de 3 elementos
        if (items.length > 3) {
            tns({
                container: sliderContainer,
                items: 2,
                gutter: 12,
                controls: true,
                nav: false,
                mouseDrag: true,
                swipeAngle: false,
                responsive: {
                    480: { items: 3 },
                    768: { items: 4 }
                }
            });
        }
    });
</script>