@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">
    <style>
        .model-bottom {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 12px;
            padding: 0 4px 4px;
        }
        .model-info {
            min-width: 0;
            display: flex;
            align-items: center;
        }
        .model-colors-text {
            margin-top: 0;
            font-size: 0.95rem;
            font-weight: 500;
            color: #1f1f1f;
            line-height: 1;
            text-align: center;
        }
        .palette-wrap {
            width: 100%;
            min-width: 190px;
        }

        @media (min-width: 577px) {
            .model-bottom {
                grid-template-columns: auto auto;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
            }

            .palette-wrap {
                min-width: auto;
                width: auto;
                max-width: 220px;
            }

            #main-carousel {
                max-width: 100%;
                margin: 0;
            }

            #main-carousel .imgShow {
                width: 100%;
                aspect-ratio: 4 / 5;
                object-fit: cover;
            }

            .palette-trigger {
                padding: 6px 8px;
                border-radius: 10px;
                gap: 8px;
            }

            .palette-swatches {
                gap: 6px;
                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;
            }
        }
        .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;
        }

        #main-carousel {
            margin: 0 12px;
            border-radius: 14px;
            overflow: hidden;
        }

        .step02-actions {
            display: flex;
            width: 100%;
            gap: 12px;
            flex-wrap: nowrap;
        }

        .step02-actions .btn {
            flex: 0 0 calc(50% - 6px);
            width: calc(50% - 6px);
            border-radius: 10px !important;
            font-weight: 700 !important;
            background-color: #82C8B8 !important;
            border: 2px solid #6FB8AC !important;
            color: #fff !important;
        }

        .step02-actions .btn:disabled {
            opacity: 1 !important;
        }

        .step02-choose-btn {
            width: 100%;
            display: block;
            border-radius: 10px !important;
        }

        .step02-model-title {
            margin-top: 10px;
        }

        @media (max-width: 576px) {
            .contenedorInterna {
                padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
            }

            #main-carousel .imgShow {
                width: 100%;
                aspect-ratio: 4 / 5;
                object-fit: cover;
            }

            .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;
            }
            .step02-mobile-notification {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 64px;
                z-index: 1049;
                padding: 0 12px 10px;
                background: linear-gradient(to top, rgba(255, 255, 255, 0.98) 80%, rgba(255, 255, 255, 0));
            }
            .step02-mobile-notification .notification-banner {
                background: #d4edda;
                border: 1px solid #c3e6cb;
                color: #155724;
                border-radius: 10px;
                padding: 10px 14px;
                font-size: 0.85rem;
                font-weight: 500;
                display: flex;
                align-items: flex-start;
                gap: 8px;
                line-height: 1.35;
            }
            .step02-mobile-notification .notification-banner i {
                color: #28a745;
                font-size: 1rem;
                flex-shrink: 0;
                margin-top: 1px;
            }
            .step02-mobile-fixed-cta {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 1050;
                padding: 0;
                background: linear-gradient(to top, rgba(255, 255, 255, 0.98) 70%, rgba(255, 255, 255, 0));
            }

            .step02-mobile-fixed-cta .cta-btn {
                width: 100%;
                height: 64px;
                border: 0;
                border-radius: 0;
                background: #212121;
                color: #fff;
                font-size: 1.45rem;
                font-weight: 700;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                text-decoration: none;
                padding: 0;
            }

            .step02-mobile-fixed-cta .cta-btn i {
                color: #f1b20a;
                font-size: 1.9rem;
                line-height: 1;
            }

            .step02-mobile-space {
                padding-bottom: calc(180px + env(safe-area-inset-bottom));
            }

            .step02-model-title {
                margin-top: 14px;
            }
        }
    </style>

    <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">
        @php
            $colorThemes = collect($form['template']->themes ?? [])->filter(function ($theme) {
                return $theme->type === 'colors';
            })->values();
            $firstThemeColors = $colorThemes->first()
                ? $colorThemes->first()->values->pluck('value')->filter(function ($value) {
                    return strpos($value, '#') === 0;
                })->values()->take(4)
                : collect();
            $example = null;
            if ($exampleTemplateId) { $example = \App\Models\Invitation::find($exampleTemplateId); }
        @endphp

        <div class="col-12 text-center mb-3 step02-model-title d-lg-none">
            <h2 class="fw-700 mb-2">Modelo {{$form['template']['name']}}</h2>
            <p class="mb-0">Personaliza cada detalle y visualiza cómo lucirá tu invitación ideal.</p>
        </div>

        <div class="col-12">
            <div class="row g-4 align-items-start">
                <div class="col-12 col-lg-8">
                    <div class="row g-3 align-items-start">
                        <div class="col-sm-2 d-none d-sm-block" style="height: 500px;">
                            <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 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>

                        <div class="col-sm-10 col-12 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>
                </div>

                <div class="col-12 col-lg-4">
                    <div class="d-none d-lg-block mb-3">
                        <h2 class="fw-700 mb-2 text-start">Modelo {{$form['template']['name']}}</h2>
                        <p class="mb-0 text-start">Personaliza cada detalle y visualiza cómo lucirá tu invitación ideal.</p>
                    </div>
                    <div class="bg-white p-4 rounded-4 step02-mobile-space">
                        <div class="trix-content mb-4">{!! $form['template']['description'] !!}</div>

                        @if($colorThemes->count() > 0)
                            <div class="model-bottom mb-4">
                                <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-step2-{{$form['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-step2-{{$form['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

                        @if ( Auth::user() -> role_id == 3 )
                            <div class="step02-actions">
                                <button @if($exampleTemplateId == null) disabled @endif class="btn bg-primary text-white rounded-pill fw-700" x-on:click="showIframe">
                                    Ver ejemplo
                                </button>
                                @if ( $example )
                                    <button type="button" class="btn btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#shareModal">
                                        Compartir
                                    </button>
                                @endif
                            </div>
                        @else
                            <div class="step02-actions">
                                <button @if($exampleTemplateId == null) disabled @endif class="btn bg-primary text-white rounded-pill fw-700" x-on:click="showIframe">
                                    Ver ejemplo
                                </button>
                                <button @if($exampleTemplateId == null) disabled @endif type="button" class="btn btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#shareModalCustomer">
                                    Compartir
                                </button>
                            </div>
                        @endif

                        @if ( Auth::user() -> role_id != 3 )
                            @if ( Auth::user() -> created_by )
                                @php $userCreator = \App\Models\User::find(Auth::user() -> created_by); @endphp
                                @if ( $userCreator )
                                    <a class="btn btn-dark d-sm-inline-block d-none step02-choose-btn 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
                                <button class="btn btn-dark d-sm-inline-block d-none step02-choose-btn fw-700 py-2 my-3" wire:click="nextStep">Elegir modelo</button>
                            @endif
                        @endif
                    </div>
                </div>
            </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>

@if (Auth::user()->role_id != 3)
    {{-- Green notification banner --}}
    <div class="d-sm-none d-block step02-mobile-notification">
        <div class="notification-banner">
            <i class="bi bi-lightbulb-fill"></i>
            <span>¿No te decides? Elegí hoy y cambiá de modelo las veces que quieras después de tu compra.</span>
        </div>
    </div>
    <div class="d-sm-none d-block step02-mobile-fixed-cta">
        @if ( Auth::user()->created_by )
            @php $userCreator = \App\Models\User::find(Auth::user()->created_by); @endphp
            @if ($userCreator)
                <a class="cta-btn" href="https://wa.me/{{ $userCreator->phone }}?text=¡Hola! Elegí el *Modelo {{$form['template']['name']}}* para mi invitación digital" target="_blank">
                    <i class="bi bi-arrow-right"></i>
                    <span>Elegir plantilla</span>
                </a>
            @endif
        @else
            <button class="cta-btn" wire:click="nextStep">
                <i class="bi bi-arrow-right"></i>
                <span>Elegir plantilla</span>
            </button>
        @endif
    </div>
@endif
</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