@assets

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<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/splidejs/4.1.4/css/splide.min.css" integrity="sha512-KhFXpe+VJEu5HYbJyKQs9VvwGB+jQepqb4ZnlhUF/jQGxYJcjdxOTf6cr445hOc791FFLs18DKVpfrQnONOB1g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

@endassets

<div class="container-fluid py-5 px-sm-5 contenedorInterna">

    <div class="d-flex justify-content-between top-text pb-4 d-sm-flex d-none">
        <div class="top-text pb-4">
            <div class="actions">
                <a class="d-inline-block" wire:click="previousStep">
                    <img src="{{ asset('img/home-panel/icon-back.svg') }}" alt="" class="" />
                </a>
            </div>
        </div>
        <div class="actions">
            <a href="#" class="d-inline-block p-2 bg-white rounded-3 ">
                <img src="{{ asset('img/user.svg') }}" alt="" width="25" height="18" class="" />
            </a>
        </div>
    </div>

    <div class="d-flex justify-content-between homeNav pb-4 d-sm-none d-block">
        <div class="arrowBack">
            <div class="actions">
                <a class="d-inline-block" wire:click="previousStep">
                    <i class="bi bi-arrow-left text-dark fs-3"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="row info-product" data-bs-ride="" id="" x-data="description">
        <!-- miniatura -->
        <div class="col-sm-1" style="height: 500px; width: 12%;">
            <div class="splide splide__thumbnails mt-0" id="thumbnail-carousel">
                <div class="splide__track">
                    <ul class="splide__list d-flex flex-column align-items-center gap-3 me-0">
                        @foreach ($form['template']['images'] as $image)
                            <li class="splide__slide splide__slide d-flex justify-content-center border-0 me-0">
                                <img src="{{Storage::url($image['image_path'])}}" alt="Thumbnail {{$image['id']}}">
                            </li>
                        @endforeach

                    </ul>
                </div>
            </div>
        </div>
        <!-- carousel -->
        <div class="col p-0 h-auto">
            <div class="splide" id="main-carousel">
                <div class="splide__track">
                    <ul class="splide__list">
                        @foreach ($form['template']['images'] as $image)
                            <li class="splide__slide">
                                <img src="{{Storage::url($image['image_path'])}}" class="w-100 imgShow" alt="Slide {{$image['id']}}">
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-sm-5 description d-sm-block d-none" >
            <div class="bg-white h-100 p-5 rounded-4">
                <h2 class="fw-700 py-3">Modelo {{$form['template']['name']}}</h2>
                <div class="bg-dark d-inline-block text-white rounded-4 py-1 px-3">
                    <img class="me-2" src="{{asset('img/star.svg')}}" alt=""><b>{{$form['template']['rating'] ?? '4,6'}}</b> <span style="font-size: 13px;">(520 Reseñas)</span>
                </div>
                <p class="my-3">{{$form['template']['tags']}}</p>

                <h4 class="fw-700">Descripción</h4>
                {{-- <p class="">{{$form['template']['description']}}</p> --}}
                <div class="trix-content">{!! $form['template']['description'] !!}</div>

                @if ( Auth::user() -> role_id == 3 )
                <button @if($exampleTemplateId == null) disabled @endif class="btn bg-primary mt-4 text-white rounded-pill fw-700" x-on:click="showIframe">
                    Ver ejemplo <i class="bi bi-eye"></i>
                </button>
                @else
                    <div class="d-flex gap-3 mt-4">
                        <button @if($exampleTemplateId == null) disabled @endif class="btn bg-primary text-white rounded-pill fw-700" x-on:click="showIframe">
                            Ver ejemplo <i class="bi bi-eye"></i>
                        </button>

                        <button @if($exampleTemplateId == null) disabled @endif type="button" class="btn btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#shareModalCustomer">
                            <i class="bi bi-share"></i>
                        </button>
                    </div>
                @endif

                @if ( Auth::user() -> role_id == 3 )
                    @php
                        $example = null;
                        if ( $exampleTemplateId ) { $example = \App\Models\Invitation::find($exampleTemplateId); }
                    @endphp
                    @if ( $example )
                        <div class="btn btn-dark d-block rounded-pill fw-700 py-2 my-3" data-bs-toggle="modal" data-bs-target="#shareModal">Compartir</div>
                    @endif
                @else
                    @php
                    $example = null;
                        if ( $exampleTemplateId ) { $example = \App\Models\Invitation::find($exampleTemplateId); }
                    @endphp
                    @if ( Auth::user() -> created_by )
                        @php $userCreator = \App\Models\User::find(Auth::user() -> created_by); @endphp
                        @if ( $userCreator )
                            <a class="btn btn-dark d-block rounded-pill fw-700 py-2 my-3" href="https://wa.me/{{ $userCreator -> phone }}?text=¡Hola! Elegí el *Modelo {{$form['template']['name']}}* para mi invitación digital" target="_blank">Elegir modelo</a>
                        @endif
                    @else
                        <div class="btn btn-dark d-block rounded-pill fw-700 py-2 my-3" wire:click="nextStep">Elegir modelo</div>
                    @endif
                @endif
            </div>
        </div>
        {{-- mobile --}}
        <div class="d-sm-none d-block position-relative p-0 model-preview">
            <div
                class="template-details d-flex justify-content-between py-3 bg-white px-4 rounded-4 align-items-center">
                <div class="model bg-transparent p-0">
                    <h2 class="fw-700 py-3 fs-21 mb-0 pt-0">Modelo {{$form['template']['name']}}</h2>
                    <div class="bg-dark d-inline-block text-white rounded-4 py-1 px-3"><img class="me-2"
                            src="{{asset('img/star.svg')}}" alt=""><b>{{$form['template']['rating'] ?? '4,6'}}</b> <span style="font-size: 13px">(520 Reseñas)</span></div>
                </div>
                @if ( Auth::user() -> role_id == 3 )
                    <button @if($exampleTemplateId == null) disabled @endif class="btn bg-primary text-white rounded-pill fw-700" x-on:click="showIframe">
                        <i class="bi bi-eye fs-4"></i>
                    </button>
                @else
                    <div class="d-flex gap-3">
                        <button @if($exampleTemplateId == null) disabled @endif class="btn bg-primary text-white rounded-pill fw-700" x-on:click="showIframe">
                            <i class="bi bi-eye fs-4"></i>
                        </button>

                        <button @if($exampleTemplateId == null) disabled @endif type="button" class="btn btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#shareModalCustomer">
                            <i class="bi bi-share fs-4"></i>
                        </button>
                    </div>
                @endif
                <!-- modal share -->

            </div>
            <div class="px-3 pt-sm-5 pt-3">
                <p class="fs-14">{{$form['template']['tags']}}</p>
                <h2 class="fw-800 py-3 fs-21">Descripción</h2>
                {{-- <p class="fs-14">{{$form['template']['description']}}</p> --}}
                <div class="trix-content">{!! $form['template']['description'] !!}</div>
				@if ( Auth::user() -> role_id == 3 )
					@php
						$example = null;
						if ( $exampleTemplateId ) { $example = \App\Models\Invitation::find($exampleTemplateId); }
					@endphp
					@if ( $example )
						<div class="btn btn-dark d-block rounded-pill fw-700 py-2 my-3 w-100 mt-5" data-bs-toggle="modal" data-bs-target="#shareModal">Compartir</div>
					@endif
				@else
					@if ( Auth::user() -> created_by )
						@php $userCreator = \App\Models\User::find(Auth::user() -> created_by); @endphp
						@if ( $userCreator )
							<a class="btn btn-dark d-block rounded-pill fw-700 py-2 my-3 w-100 mt-5" href="https://wa.me/{{ $userCreator -> phone }}?text=¡Hola! Elegí el *Modelo {{$form['template']['name']}}* para mi invitación digital" target="_blank">Elegir modelo</a>
						@endif
					@else
						<button class="btn btn-dark d-block rounded-pill fw-700 py-2 my-3 w-100 mt-5" wire:click="nextStep">Elegir</button>
					@endif
				@endif
            </div>
        </div>
    </div>

    <div class="interna-options mt-4">
        <div class="py-3">
            <h2 class="fs-sm-24 mb-0 py-2 fs-21 fw-bold text-start text-dark">Otras opciones que te pueden gustar<span
                    style="color: #F1B20A;">.</span></h2>

            <div class="my-4 container-slides position-relative">
                <div class="other-options-slide">
                    @foreach ($this->templatesComputed as $template)
                    <div class="col-sm-auto" x-show="'{{$form['invitation_type_code']}}' == '{{$template->type->code}}'">
                        <div class="card 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>
    </div>

    <div class="modal fade modalContainerInterna" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="position: absolute;right:20px;top:15px"></button>
            <div id="id_del_div">
            </div>
            </div>
        </div>
    </div>

    {{-- modales --}}
    @if (Auth::user()->role_id == 3)
    <div class="modal fade" id="shareModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog"
        aria-labelledby="modalTitleId" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered mx-sm-auto mx-4" role="document">
                <div class="modal-content">
                    <div class="modal-header py-sm-3 py-0">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <h2 class="fs-sm-21 fw-bold text-center ">Comparte esta invitación con tus clientes<span class="c-secondary">.</span></h2>
                        <div class="text-center px-sm-3">
                            <small class="d-block mb-2 fw-bold ">Link para compartir</small>
                            @isset($example)
                                <input type="text" id="shareUrl" value="{{ url('/') . '/' . $form['invitation_type_code'] . '/' . $example->slug }}" class="form-control rounded-4 py-2 shadow-sm border-light " />
                                <div class="d-flex">
                                    <a data-url="{{ url('/') . '/' . $form['invitation_type_code'] . '/' . $example->slug }}"
                                        data-networks="instagram,whatsapp,twitter,facebook,email"
                                        class="btn btn-dark bg-primary fw-bold border-0 rounded-5 mt-3 w-100 py-2" id="shareButton" onclick="copyToClipboard()">Compartir</a>

                                    <a
                                        href="https://wa.me/?text={{ urlencode('¡Hola! Te comparto este modelo de invitación: ' . url('/' . $form['invitation_type_code'] . '/' . $example->slug)) }}"
                                        target="_blank"
                                        class="btn btn-dark bg-primary fw-bold w-100 border-0 rounded-5 mt-3 py-2 ms-2">
                                        Whatsapp <i class="bi bi-whatsapp"></i>
                                    </a>
                                </div>
                            @endisset
                            <div class="py-5 mt-2 d-sm-block d-none">
                                <img src="{{asset('img/share-invitation.svg')}}" width="200" alt="" class="img-fluid ">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    @else
        <div class="modal fade" id="shareModalCustomer" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog"
        aria-labelledby="modalTitleId" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered mx-sm-auto mx-4" role="document">
                <div class="modal-content">
                    <div class="modal-header py-sm-3 py-0">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <h2 class="fs-sm-21 fw-bold text-center ">Comparte esta invitación con todos<span class="c-secondary">.</span></h2>
                        <div class="text-center px-sm-3">
                            <small class="d-block mb-2 fw-bold ">Link para compartir</small>
                            @isset($example)
                                <input type="text" id="shareUrl" value="{{ url('/') . '/' . $form['invitation_type_code'] . '/' . $example->slug }}" class="form-control rounded-4 py-2 shadow-sm border-light " />
                                <div class="d-flex">
                                    <a data-url="{{ url('/') . '/' . $form['invitation_type_code'] . '/' . $example->slug }}"
                                        data-networks="instagram,whatsapp,twitter,facebook,email"
                                        class="btn btn-dark bg-primary fw-bold border-0 rounded-5 mt-3 w-100 py-2" id="shareButton" onclick="copyToClipboard()">Compartir</a>

                                    <a
                                        href="https://wa.me/?text={{ urlencode('¡Hola! Te comparto este modelo de invitación: ' . url('/' . $form['invitation_type_code'] . '/' . $example->slug)) }}"
                                        target="_blank"
                                        class="btn btn-dark bg-primary fw-bold w-100 border-0 rounded-5 mt-3 py-2 ms-2">
                                        Whatsapp <i class="bi bi-whatsapp"></i>
                                    </a>
                                </div>
                            @endisset
                            <div class="py-5 mt-2 d-sm-block d-none">
                                <img src="{{asset('img/share-invitation.svg')}}" width="200" alt="" class="img-fluid ">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

</div>
</div>

@script
    <script type="text/javascript">
        Alpine.data('description', () => ({
            showIframe() {
                let exampleTemplateId = $wire.entangle('exampleTemplateId').initialValue;

                let shareUrl = document.getElementById('shareUrl')?.value;

                if (shareUrl) {
                    let iframeUrl = shareUrl + "?simple=true";
                    window.open(iframeUrl, '_blank');
                } else {
                    console.error('No se encontró el input con ID shareUrl');
                }
            },
        }));
        Livewire.hook('element.init', ({ component, el }) => {
            setTimeout(() => {
                Livewire.dispatch('reset-model-slider')

                var splideCheck = document.getElementById("main-carousel");

                if(!splideCheck){
                    return
                }

                var main = new Splide('#main-carousel', {
                    type: 'fade',
                    rewind: true,
                    pagination: false,
                    arrows: true,
                });

                var thumbnails = new Splide('#thumbnail-carousel', {
                    fixedWidth: 100,
                    gap: 10,
                    rewind: true,
                    pagination: false,
                    isNavigation: true,
                    arrows: false,
                    breakpoints: {
                        600: {
                            fixedWidth: 60,
                        },

                    },
                });

                main.sync(thumbnails);
                main.mount();
                thumbnails.mount();
        }, 1000)
    })
    </script>
@endscript

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

        function initSlider(className, modelSlider, autoplay, numItems){
            if(document.getElementsByClassName(className)[0] === undefined){
                return
            }
            modelSlider = tns({
                container: '.'+className,
                items: numItems,
                gutter: 30,
                loop: false,
                controlsText: ['', ''],
                nav: false,
                autoplayButtonOutput: false,
                mouseDrag: true,
                slideBy: 1,
                autoplay,
                responsive: {
                    640: {
                        items: 2
                    },
                    900: {
                        items: 5
                    }
                }
            });
        }
        Livewire.hook('element.init', ({ component, el }) => {
            setTimeout(() => {
                let initialized = $store.step02 && $store.step02.model_sliders;
                if(initialized){
                    return
                }
                Alpine.store('step02', {
                    model_sliders: true,
                })

                initSlider('other-options-slide', modelSlider, false, 5)
        }, 1)
    })
    </script>
@endscript