@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)">
    <style>
    /* Small, scoped styles to match Canva-like round icons and NEW badge */
    .icon-circle{ width: 84px; height: 84px; border-radius: 9999px; display:flex; align-items:center; justify-content:center; }
    .icon-circle img{ width: 34px; height: 34px; }
        .icon-item{ position: relative; }
        .badge-new{ position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background:#7B61FF; color:#fff; font-weight:700; font-size:12px; line-height:1; padding:6px 10px; border-radius:9999px; box-shadow:0 2px 6px rgba(0,0,0,.15); }
        /* Mobile carousel: horizontal scroll fallback when slider is not initialized */
        .slider-icons{ overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 16px; flex-wrap: nowrap; padding: 0 8px; }
        .slider-icons .icon-item{ flex: 0 0 auto; padding: 0 7px; }
        /* On desktop keep the same size to avoid a "bump" on selection */
        @media (min-width:576px){
            .icon-circle{ width: 84px; height: 84px; }
            .icon-circle img{ width: 34px; height: 34px; }
        }
    </style>
    <div class="pb-5 d-sm-block d-none">
        <div class="header-invitation text-center rounded-4 text-white fs-sm-48 lh-1" style="background-image: url({{asset('img/bg-home.jpg')}});">
            <div class="w-100 d-flex flex-column align-items-center justify-content-center bg-black bg-opacity-50 position-relative">
                <h2 class="py-4 my-3 fs-sm-28 fs-24 position-relative fw-800">¿Qué vas a festejar?</h2>
                <div class="row pb-4 justify-content-center position-relative">
                @foreach ($invitationTypes as $type)
                    <div class="col-sm-auto w-auto align-items-center d-flex flex-column icon-item" x-on:click="$wire.setInvitationType({{$type}}), section = '{{$type->code}}', section_name = '{{$type->name}}'">
                        @if (in_array(strtolower($type['code']), ['egresados','graduation','graduaciones']))
                            <span class="badge-new">Nuevo</span>
                        @endif
                        <div :class="{ 'filter-icon': {{'"'.$type['code'].'"'}} == section, 'bg-primary': {{'"'.$type['code'].'"'}} != section }" class="icon-circle">
                            <img src="{{asset('img/'.$type['code'].'-landing-btn.svg')}}" alt="" class="">
                        </div>
                        <p class="fs-sm-16 fw-600 mt-3">{{$type['name']}}</p>
                    </div>
                @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- mobile -->
    <div class="container">
        <div class="d-sm-none d-block">
            <div class="header-invitation">
                <h2 class="py-4 my-3 fs-24 position-relative fw-800">¿Qué vas a festejar?</h2>
                <div class="position-relative">
                    <!-- Use a plain container for tiny-slider (avoid Bootstrap row/col to prevent layout conflicts) -->
                    <div class="slider-icons d-flex justify-content-start pb-4 pt-3">
                            @foreach ($invitationTypes as $type)
                                <div class="w-auto align-items-center d-flex flex-column icon-item" x-on:click="$wire.setInvitationType({{$type}}), section = '{{$type->code}}', section_name = '{{$type->name}}'">
                                    @if (in_array(strtolower($type['code']), ['egresados','graduation','graduaciones']))
                                        <span class="badge-new">Nuevo</span>
                                    @endif
                                    <div :class="{ 'filter-icon': {{'"'.$type['code'].'"'}} == section, 'bg-primary': {{'"'.$type['code'].'"'}} != section }" class="icon-circle">
                                        <img src="{{asset('img/'.$type['code'].'-landing-btn.svg')}}" alt="" class="">
                                    </div>
                                    <p class="fs-sm-16 fw-600 mt-3">{{$type['name']}}</p>
                                </div>
                            @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>


@if($this->templatesComputed)
    <div class="wedding">
        <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 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)
                    <div class="col-sm-auto" x-show="section == '{{$template->type->code}}'" x-transition>
                        <div class="card border-shadow border-0 rounded-4 p-2">
                            <div class="position-relative img-card" wire:click="setTemplateAndNext({{$template['id']}})">
                                @if(!empty($template['img_preview']))
                                    <img src="{{Storage::url($template['img_preview'])}}" class="card-img-top" style="height: 200px; object-fit: cover;" alt="...">
                                @endif
                                <p class="score bg-dark rounded-pill text-white position-absolute px-3"><img
                                        class="me-1" src="{{asset('img/star.svg')}}" alt="">{{$template['rating']}}</p>
                            </div>
                            <div class="card-body pb-0">
                                <h5 class="card-title fw-700 fs-sm-16">Modelo {{$template['name']}}</h5>
                                <div class="texto">
                                    <p class="card-text fs-sm-13">{{$template['tags']}}</p>
                                    <span class="boton-leer-mas fs-sm-13" ><img src="{{ asset('img/home-panel/Icon_ion-ios-arrow-down.svg') }}" alt=""></span>
                                </div>
                            </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)
                    <div class="col col-12 col-md-3" x-show="section == '{{$template->type->code}}'" x-transition>
                        <div class="card border-shadow border-0 rounded-4 p-2">
                            <div class="position-relative img-card" wire:click="setTemplateAndNext({{$template['id']}})">
                                @if(!empty($template['img_preview']))
                                    <img src="{{Storage::url($template['img_preview'])}}" class="card-img-top" style="height: 200px; object-fit: cover;" alt="...">
                                @endif
                                <p class="score bg-dark rounded-pill text-white position-absolute px-3"><img
                                        class="me-1" src="{{asset('img/star.svg')}}" alt="">{{$template['rating']}}</p>
                            </div>
                            <div class="card-body pb-0">
                                <h5 class="card-title fw-700 fs-sm-16">Modelo {{$template['name']}}</h5>
                                <div class="texto">
                                    <p class="card-text fs-sm-13">{{$template['tags']}}</p>
                                    <span class="boton-leer-mas fs-sm-13" ><img src="{{ asset('img/home-panel/Icon_ion-ios-arrow-down.svg') }}" alt=""></span>
                                </div>
                            </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
            }
        }))
        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>