@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)">
    <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" wire:click="setInvitationType({{$type}})">
                        <div class="{{isset($form['invitation_type_id']) && $form['invitation_type_id'] == $type['id'] ?'filter-icon' :'bg-primary'}} d-flex align-items-center justify-content-center p-3 rounded-3">
                            <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">
                    <div class="slider-icons row justify-content-center pb-4 pt-3">
                            @foreach ($invitationTypes as $type)
                                <div class="col-sm-auto w-auto align-items-center d-flex flex-column" wire:click="setInvitationType({{$type}})">
                                    <div class="{{isset($form['invitation_type_id']) && $form['invitation_type_id'] == $type['id'] ?'filter-icon' :'bg-primary'}} d-flex align-items-center justify-content-center p-3 rounded-3">
                                        <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">{{$form['invitation_name']}}<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 {{$form['invitation_name']}}</a>
            </div>
            <div class="my-4 container-slides position-relative" x-show="!showMore">
                <div class="models_slider">
                @foreach ($this->templatesComputed as $template)
                    <div class="col-sm-auto">
                        <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 position-relative" style="container-slides::before:" x-show="showMore">
                <div class="models_slider">
                @foreach ($this->templatesComputed as $template)
                    <div class="col col-12 col-md-3">
                        <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="#" id="seeMore" class="text-decoration-underline text-dark btn-underline fw-bold d-sm-none d-block btn-all" x-on:click="showHideMore">Ver todo {{$form['invitation_name']}}</a>
        </div>
    </div>
@endif

    <div class="most-valued">
        <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="most_valued">
                    @foreach ($mostValuedTemplates as $valuedTemplate)
                        <div class="col-sm-auto pb-5" 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,
            init() {

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

if ( $('.slider-icons').length > 0 ) {
        var slider2 = tns({
                container: '.slider-icons',                
                slideBy: "page",
                "loop": false,
                items: 1,
                "swipeAngle": false,
                "startIndex": 1,
            });
    }

    // if ( $('.slider-icons').length > 0 ) {
    //     var slider2 = tns({
    //         container: '.slider-icons',
    //         "items": 2,
    //         "slideBy": "page",
    //         "loop": false,
    //         "startIndex": 6,
    //         "swipeAngle": false,
    //         "speed": 400
    //     });
    // }


</script>