@assets
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js" integrity="sha512-7Pi/otdlbbCR+LnW+F7PwFcSDJOuUJB3OxtEHbg4vSMvzvJjde4Po1v4BR9Gdc9aXNUNFVUY+SK51wWT8WF0Gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.36/fancybox/fancybox.umd.js" integrity="sha512-v80Z62SYCVHA3UxmFG69Vclopt+3ngQDocRjtxnB3htcTs6l9mnXc6SixuDae1rJ3L2J6p2KAuG+soHbhVd+6g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/splide.min.js" integrity="sha512-4TcjHXQMLM7Y6eqfiasrsnRCc8D/unDeY1UGKGgfwyLUCTsHYMxF7/UHayjItKQKIoP6TTQ6AMamb9w2GMAvNg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="stylesheet" type="text/css" href="{{asset('css/panel.css')}}">
@endassets
<div id="customer-edit-page">
    <div class="row justify-content-between image-bg" >
        <div class="modal fade" id="shareModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog"
            aria-labelledby="modalTitleId" aria-hidden="true" x-data='modal'>
            <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <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 tu invitación con todos<span class="c-secondary">.</span></h2>
                        <div class="text-center px-sm-5 mx-sm-5">
                            <div class="fs-sm-14 mb-4">Es el momento perfecto para compartirla
                            y comenzar a difundir la emoción de
                            tu próximo evento.</div>
                            <small class="d-block mb-2 fw-bold ">Link para compartir</small>
                            <input type="text" id="shareUrl" value="{{config('app.url')}}/{{$invitation->type->code}}/{{$invitation->slug}}" class="form-control rounded-4 py-2 shadow-sm border-light " />
                            <a
                                data-url="{{config('app.url')}}/{{$invitation->type->code}}/{{$invitation->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"
                                x-on:click="copyToClipboard()"
                                >Compartir</a>
                            <div class="py-5 mt-2">
                                <img src="{{asset('img/share-invitation.svg')}}" alt="" class="img-fluid ">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- NAV -->
        <nav class="navbar navbar bg-white fixed-top d-sm-none d-block">
                <div class="container-fluid" x-data="navbar">
                    <a class="navbar-brand d-none" href="#">Offcanvas dark navbar</a>
                    @if($showBack ?? true)
                        <a class="navbar-toggler border-0" x-on:click="goBack">
                            <i class="bi bi-arrow-left"></i>
                        </a>
                    @endif

                    <div class="navbar-brand">
                        <h6>
                        <a href="/home" class="d-block pt-2 mb-1 px-3 position-relative">
                        <img src="{{ asset('img/logo-darkgreen.png') }}" alt="" class="logo">
                        @if (auth()->user()->role_id == \App\Models\User::BUSINESS_ROL_ID)
                            <span class="position-absolute top-0 start-100 badge rounded-pill bg-danger" style="transform: translate(-86%,170%)!important">Mi Negocio</span>
                        @endif
                        </a>
                        </h6>
                    </div>
                    <button class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="offcanvas offcanvas-end border-0" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
                        <div class="offcanvas-header bg-dark justify-content-end">
                            <h5 class="offcanvas-title text-white fw-bold" id="offcanvasDarkNavbarLabel">Menú <span style="color: #F1B20A;">.</span></h5>
                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                        </div>
                        <div class="offcanvas-body">
                            <ul class="navbar-nav flex-grow-1">
                                <li class="nav-item d-flex align-items-center gap-3 {{ request()->is('home') ? 'active' : '' }}">
                                    <img src="{{ asset('img/home.svg') }}" alt=""><a class="nav-link fw-600 {{ request()->is('home') ? 'active' : '' }}" aria-current="page" href="/home" wire:navigate>Home</a>
                                </li>
                                <li class="nav-item d-flex align-items-center gap-3 {{ request()->is('invitations') ? 'active' : '' }}">
                                    <img src="{{ asset('img/mis-inv.svg') }}" alt=""><a class="nav-link fw-600 {{ request()->is('invitations') ? 'active' : '' }}" href="/invitations" wire:navigate>Mis invitaciones</a>
                                </li>
                                <li class="nav-item d-flex align-items-center gap-3 {{ request()->is('payments') ? 'active' : '' }}">
                                    <img src="{{ asset('img/mis-pag.svg') }}" alt=""><a class="nav-link fw-600 {{ request()->is('payments') ? 'active' : '' }}" href="/payments" wire:navigate>Mis Pagos</a>
                                </li>

                                @if(auth()->user()->role_id == \App\Models\User::BUSINESS_ROL_ID)
                                    <li class="nav-item d-flex align-items-center gap-3">
                                    <img src="{{ asset('img/invitaciones-nav.png') }}" alt=""><a class="nav-link fw-600" href="/business/customers" wire:navigate>Mis Clientes</a>
                                    </li>
                                    <li class="nav-item d-flex align-items-center gap-3">
                                    <img src="{{ asset('img/invitaciones-nav.png') }}" alt=""><a class="nav-link fw-600" href="/business" wire:navigate>Configuración</a>
                                    </li>
                                @endif
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle d-none" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    Dropdown
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-dark">
                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item d-flex justify-content-center align-items-center gap-2 bg-primary rounded-pill logout">
                                    <form method="post" action="{{ route('logout') }}" class="form text-center">
                                        <img src="{{ asset('img/cerrar-sesion.svg') }}" alt="">
                                        @csrf
                                        <button type="submit" class="btn fw-600 px-0 text-white">Cerrar Sesión</button>
                                    </form>    
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        <!-- END NAV -->

        <!-- modal pemium -->
        <div class="modal fade" id="modal_schedule" 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" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body bg-white d-flex justify-content-center align-items-center">
                        hola!
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3 min-vh-100 bg-black sidebar text-light text-center fs-sm-14" x-data="sidebar">
            <form class="form form-horizontal"
                id="frmSections"
                wire:submit.prevent="submitForm"
                x-on:livewire-upload-start="uploadStart($event)"
                x-on:livewire-upload-finish="finishUpload"
                x-on:livewire-upload-cancel="hideProgress"
                x-on:livewire-upload-error="hideProgress"
                x-on:livewire-upload-progress="progress = $event.detail.progress"
            >
                @csrf
                <a href="#" class=" pt-2 mb-5 px-3 position-relative">
                <img src="{{asset('img/logo-whitegreen.png')}}" alt="" class="w-100 logo" />
                @if (auth()->user()->role_id == \App\Models\User::BUSINESS_ROL_ID)
                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">Mi Negocio</span>
                @endif
                </a>

                <div class="modal fade" id="progressModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog" style="top:200px">
                        <div class="d-flex justify-content-center">
                            <div class="row">
                                <div class="col">
                                    <div class="spinner-border" role="status" style="color: #7FC6BA">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                </div>
                                <div class="col"><h3>Procesando..</h3></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="pt-sm-5 pt-0 pb-3 fs-sm-21 fw-800 position-relative page-edit-title"><h2 class="text-capitalize fw-800">{{$invitation->template->name}} <span style="color: #F1B20A;">.</span></h2></div>
                <p class="fs-sm-14 fw-500 mb-4 position-relative page-edit-text">Selecciona las secciones que quieres que <br> se muestren en tu invitación.</p>
                <div id="panel_edit">
                    <div class="edit mx-2">
                        
                        <!-- modal pemium -->
                        <div class="modal fade" id="modal_premium" 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" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body bg-white d-flex justify-content-center align-items-center">
                                        <div class="bg-white border-0 text-center">
                                            <div class="icon">
                                                <img src="{{asset('img/star.svg')}}" width="80" height="80" alt="">
                                            </div>
                                            <h2 class="mt-4 text-uppercase text-dark fs-21 fs-sm-21 fw-800">¡Sube de nivel tu invitación con Premium!
                                            </h2>
                                            <p class="text-dark pt-2 pb-3 mb-0">¡Sorprende a tus invitados con funciones exclusivas!</p>
                                            <div>
                                                <ul class="text-dark text-start">
                                                    <li><b>Cuenta regresiva:</b> Genera expectación con un contador que marque los días para el gran evento.</li>
                                                    <li><b>Música que no puede faltar:</b> Deja que tus invitados recomienden canciones que son indispensables en tu fiesta.</li>
                                                    <li><b>Mesa de regalos:</b> Facilita a tus invitados la compra de tus regalos favoritos.</li>
                                                    <li class="modalWedding"><b> Padrinos y testigos:</b>Destaca a las personas especiales en tu día.</li>
                                                    <li><b>Frase personalizada:</b> Agrega un toque único con una frase memorable.</li>
                                                    <li><b>Instagram:</b> Publica tu perfil de Instagram y haz que tus invitados no se pierdan ninguna de tus historias.</li>
                                                    <li><b>Álbum de Selpix:</b> Crea un espacio para compartir fotos y recuerdos.</li>
                                                    <li><b>Agenda la fecha:</b> Permite a tus invitados que agenden tu evento especial en sus calendarios.</li>
                                                </ul>
                                            </div>
                                            <a href="/invitations/{{$invitation->id}}/upgrade" wire:navigate class="btn my-2 bg-dark fs-sm-21 fw-800 text-uppercase rounded-pill py-1 px-5 text-white mb-4 h-primary">
                                                Cambiar plan
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- modal vip -->
                        <div class="modal fade" id="modal_vip" 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" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body bg-white d-flex justify-content-center align-items-center">
                                        <div class="bg-white border-0 text-center">
                                            <div class="icon">
                                                <img src="{{asset('img/home-panel/corona.svg')}}" width="80" height="80" alt="">
                                            </div>
                                            <h2 class="mt-4 text-uppercase text-dark fs-21 fs-sm-21 fw-800">¡Tus eventos más importantes merecen invitaciones VIP!
                                            </h2>
                                            <p class="text-dark pt-2 pb-3 mb-0">Destaca tu invitación y hazla única con características VIP </p>
                                            <div>
                                                <ul class="text-dark text-start">
                                                    <li><b>Funciones Premium:</b> Disfruta de todas las ventajas de las invitaciones Premium, como cuenta regresiva, música, mesa de regalos, padrinos y testigos, frase personalizada, álbum Selpix, Instagram y agenda.</li>
                                                    <li><b>Destaca tu invitación:</b> Haz que tu invitación sea más especial con funciones únicas como filtro de Instagram para fotos y videos, y soporte multilenguaje.</li>
                                                    <li><b>Recomendaciones:</b> Muestra a tus invitados sugerencias de hospedajes y transportes para facilitar su traslado y hospedaje.</li>
                                                    <li><b>Seguridad:</b> Protege tu invitación con contraseña.</li>
                                                    <li><b>Transporte privado:</b> Gestiona el transporte privado para tus invitados con facilidad.</li>
                                                </ul>
                                            </div>
                                            <a href="/invitations/{{$invitation->id}}/upgrade" wire:navigate class="btn my-2 bg-dark fs-sm-21 fw-800 text-uppercase rounded-pill py-1 px-5 text-white mb-4 h-primary">Cambiar
                                                plan</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="accordion" id="panel_sections" x-data="sections">
                            @php
                                $uniqid = 'x_'.uniqid();
                                $colorThemes = $invitation->template->themes->filter(function ($theme) {
                                        return $theme->type == 'colors';
                                    });
                                $fontThemes = $invitation->template->themes->filter(function ($theme) {
                                        return $theme->type == 'fonts';
                                    });
                            @endphp
                            @if($colorThemes->count() > 0)
                            <div class="accordion-item mb-2 border-0" :key="{{$uniqid}}" x-data="{ opened : false}">
                                <div class="d-flex gap-1" x-on:click = "opened = !opened">
                                    <div class="form-check h-auto rounded-pill d-flex justify-content-center align-items-center bg-white mb-0 p-3">
                                        <input class="form-check-input rounded-pill ms-0" type="checkbox" value="1" id="flexCheckDefault2"
                                        @if($this->computedThemeId)
                                        wire:change="setColorPalette(null)"
                                        checked
                                        @endif
                                        >
                                        <label class="form-check-label" for="flexCheckDefault2"></label>
                                    </div>
                                    <h2 class="accordion-header w-100">
                                        <button class="accordion-button rounded-pill bg-primary text-white fw-600 collapsed"
                                            type="button"
                                            data-bs-toggle="collapse"
                                            data-bs-target="#{{$uniqid}}"
                                            aria-expanded="true"
                                            aria-controls="panelsStayOpen-collapseOne"
                                            >
                                            Paleta de Colores
                                        </button>
                                    </h2>
                                </div>
                                <div id="{{$uniqid}}" data-bs-parent="#accordionFlushOne" aria-labelledby="headingOne" class="accordion-collapse collapse" :class="{ 'show': opened }">
                                    <div class="accordion-body" style="color: white!important">
                                        @include('invitation-edit-customer.theme-form')
                                    </div>
                                </div>
                            </div>
                            @endif
                            @if($fontThemes->count() > 0)
                            <div class="accordion-item mb-2 border-0" :key="d_{{$uniqid}}" x-data="{ opened2 : false}">
                                <div class="d-flex gap-1" x-on:click = "opened2 = !opened2">
                                    <div class="form-check h-auto rounded-pill d-flex justify-content-center align-items-center bg-white mb-0 p-3">
                                        <input class="form-check-input rounded-pill ms-0" type="checkbox" value="1" id="flexCheckDefault2"
                                        @if($this->computedFontThemeId)
                                        wire:change="setColorThemePalette(null)"
                                        checked
                                        @endif
                                        >
                                        <label class="form-check-label" for="flexCheckDefault2"></label>
                                    </div>
                                    <h2 class="accordion-header w-100">
                                        <button class="accordion-button rounded-pill bg-primary text-white fw-600 collapsed"
                                            type="button"
                                            data-bs-toggle="collapse"
                                            data-bs-target="#d_{{$uniqid}}"
                                            aria-expanded="true"
                                            aria-controls="panelsStayOpen-collapseOne"
                                            >
                                            Tipo de Letras
                                        </button>
                                    </h2>
                                </div>
                                <div id="d_{{$uniqid}}" data-bs-parent="#accordionFlushTwo" aria-labelledby="headingTwo" class="accordion-collapse collapse" :class="{ 'show': opened2 }">
                                    <div class="accordion-body" style="color: white!important">
                                        @include('invitation-edit-customer.theme-fonts-form')
                                    </div>
                                </div>
                            </div>
                            @endif
                            @foreach ($sections as $section)
                                @php
                                $uniqid = 'x_'.uniqid();
                                $sectionChecked = $this->isSectionEnabled($section->code);
                                @endphp

                                <div class="accordion-item mb-2 border-0" :key="{{$uniqid}}">
                                    <div class="d-flex gap-1">
                                        <div class="form-check h-auto rounded-pill d-flex justify-content-center align-items-center bg-white mb-0 p-3">
                                            <input class="form-check-input rounded-pill ms-0" type="checkbox" value="1" id="flexCheckDefault2"
                                            @if($sectionChecked)    
                                            checked
                                            @endif
                                            x-on:change="change($event, '{{$section->code}}')">
                                            <label class="form-check-label" for="flexCheckDefault2"></label>
                                        </div>
                                        <h2 class="accordion-header w-100">
                                            <button class="accordion-button rounded-pill bg-primary text-white fw-600 collapsed"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#{{$uniqid}}"
                                                aria-expanded="true"
                                                aria-controls="panelsStayOpen-collapseOne"
                                                x-on:click="$wire.setSelectedMenu({{$loop->index}})">
                                                {{ $section['name']}}
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="{{$uniqid}}" data-bs-parent="#accordionFlushThree" aria-labelledby="headingThree" class="accordion-collapse collapse {{ $selectedMenu == $loop->index ? 'show' : '' }}">
                                        <div class="accordion-body" style="color: white!important">
                                            @include('invitation-edit-customer.'.str_replace('_', '-', $section['code'].'-form'))
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                            @foreach($sectionsRemaining as $remaining)
                            @php
                            $img = 'img/home-panel/star.svg';
                            $planClass = 'vip';
                            $modal = 'modal_vip';
                            if($remaining->plan_id == \App\Models\Plan::PREMIUM){
                                $img = 'img/home-panel/corona.svg';
                                $planClass = 'premium';
                                $modal = 'modal_premium';

                            }
                            if($remaining->plan_id == \App\Models\Plan::VIP){
                                $img = 'img/home-panel/star.svg';
                                $planClass = 'vip';
                                $modal = 'modal_vip';
                            }
                            @endphp
                            <div :key="uniqid()">
                                <a type="button" data-bs-toggle="modal" data-bs-target="#{{$modal}}" class="w-100 h-100 d-block position-absolute"></a>
                                <div class="d-flex mb-2">
                                    <div class="form-check rounded-pill d-flex justify-content-center align-items-center bg-white mb-0 p-3">
                                        <input class="form-check-input rounded-pill ms-0" type="checkbox" value="" id="flexCheckDefault">
                                        <label class="form-check-label" for="flexCheckDefault"></label>
                                    </div>
                                    <select class="form-select {{$planClass}} ms-1 bg-gray rounded-pill border-0 text-white fs-sm-16 fw-600 py-2" disabled aria-label="Default select example">
                                        <img src="{{$img}}" alt="" class="position-absolute">
                                        <option class="" selected>{{ $remaining->section->name }}</option>
                                    </select>
                                </div>
                            </div>
                            @endforeach
                        </div>

                    </div>
                </div>

                <div class="save border-shadow py-3 bg-black position-sticky bottom-0 start-0">
                    <div class="d-flex gap-2 px-2">
                        <button type="submit" id="btnSubmit" class="rounded-pill text-white bg-gray border-0 py-2 fw-600 px-4 w-100" x-on:click="refreshIframe">
                            Guardar Cambios
                        </button>
                        <a href="/invitations/{{$invitation->id}}/preview" wire:navigate class="rounded-pill text-dark bg-white border-0 py-2 fw-600 px-4 w-auto" id="page-edit-btn-see">
                            Ver
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-sm-9 p-0 invitation" id="invitationColumnRight" x-data="topbar">
            <div class="row">
                <div class="col">
                    <div class="card shadow border-light p-3">
                        <ul class="nav nav-fill">
                            <li class="nav-item" style="text-align: left!important">
                                <a class="nav-link border-0" aria-current="page" x-on:click="goBack" style="border: none!important">
                                    <img src="{{asset('img/home-panel/icon-back.svg')}}" style="height: 35px;">
                                </a>
                            </li>

                            <li>
                                <div class="panel-prev bg-white d-flex gap-4 position-absolute top-0 center" x-data="previewButtons">
                                <a href="#" x-on:click="previewMode('mobile')">
                                    @if($previewDisplay == 'mobile')
                                    <img src="{{asset('img/icon-mobile_selected.svg')}}" />
                                    @else
                                    <img src="{{asset('img/icon-mobile.svg')}}" />
                                    @endif
                                </a>
                                <a href="#" x-on:click="previewMode('desktop')">
                                    @if($previewDisplay == 'desktop')
                                    <img src="{{asset('img/icon-desktop_selected.svg')}}" />
                                    @else
                                    <img src="{{asset('img/icon-desktop.svg')}}" />
                                    @endif
                                </a>
                                </div>
                            </li>

                            <li class="nav-item me-4" style="text-align: right!important">
                                <a href="#" class="btn bg-primary fw-bold text-white rounded-5 px-5 py-2" id="share-modal" data-bs-toggle="modal" data-bs-target="#shareModal"><span>Compartir</span> <img src="{{ asset('img/share.svg') }}" /></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row px-5 py-4" wire:ignore x-data="iframe">
                <div class="col text-center">
                    <div class="spinner-border m-5" role="status" id="loading_iframe">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <div id="stickyCol">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@script
<script>
    let iframeUrl = "{{config('app.url')}}/{{$invitation->type->code}}/{{$invitation->slug}}?edit=true"
    let divContenedor = document.getElementById('stickyCol');

    function loadIframe(iframeUrl){
        let iframe = document.createElement('iframe');

        iframe.src = iframeUrl;
        iframe.style.width = "100%";
        iframe.style.height = "100vh";
        iframe.setAttribute("scrolling", "yes");
        iframe.sandbox = "allow-same-origin allow-scripts allow-forms allow-popups";
        return iframe
    }

    let progressModal = new bootstrap.Modal(document.getElementById('progressModal'));

    Alpine.data('previewButtons', () => ({
        previewMode(mode){
            $wire.set('previewDisplay', mode)
            if(mode == 'mobile'){
                this.setMobile()
                return
            }

            this.setDesktop()
        },
        setMobile(){
            let iframeEl = document.getElementsByTagName('iframe')[0]
            iframeEl.style.width = "360px"
            iframeEl.style.height = "740px";
        },
        setDesktop(){
            let iframeEl = document.getElementsByTagName('iframe')[0]
            iframeEl.style.width = "100%"
            iframeEl.style.height = "100vh";
        }
    }))

    Alpine.data('sections', () => ({
        customUpload(event, model){
            const fileList = [...event.target.files];
            let uploadedCount = 0;
            fileList.forEach((file, index) => {
                $wire.upload(
                    model+'.'+index,
                    file,
                    (n)=>{
                        uploadedCount++;
                        if (uploadedCount === fileList.length) {
                            progressModal.hide();
                            $wire.submitForm(true)
                        }
                    }, ()=>{
                    }, (event)=>{
                    }
                );
            });
        }
    }))
    Alpine.data('iframe', () => ({
        init(){
            iframeUrl = "{{config('app.url')}}/{{$invitation->type->code}}/{{$invitation->slug}}?edit=true"
            divContenedor.innerHTML = ""
            this.showIframe()
        },
        refreshIframe() {
            $('#loading_iframe').show()
            divContenedor.innerHTML = ""
            this.showIframe()
        },
        showIframe() {
            let divContenedor = document.getElementById('stickyCol');

            let existingIframe = divContenedor.querySelector('iframe');

            if (existingIframe) {
                existingIframe.src = iframeUrl;
                return
            }

            setTimeout(()=>{
                let iframe = loadIframe(iframeUrl)
                divContenedor.appendChild(iframe);
                $('#loading_iframe').hide()

            },1000)
        },
    }));

    Alpine.data('topbar', () => ({
        goBack() {
            divContenedor.innerHTML = ""

            Livewire.navigate('/invitations/{{$invitation->id}}/overview')
        }
    }));

    Alpine.data('modal', () => ({
        copyToClipboard() {
            var inputElement = document.getElementById("shareUrl");

            inputElement.select();

            document.execCommand("copy");

            inputElement.setSelectionRange(0, 0);

            alert("Texto copiado al portapapeles: " + inputElement.value);
        }
    }));
    Alpine.data('sidebar', () => ({
        progress:0,
        uploading: 0,
        saveWhenFinish: false,
        uploadStart(event){
            let property = event.detail.property
            let target = event.target
            this.saveWhenFinish = target.hasAttribute('autoupload')
            this.showProgress()
        },
        showProgress(){
            this.uploading = true
            progressModal.show();
        },
        hideProgress(){
            this.uploading = false
            progressModal.hide();
            this.saveWhenFinish = false
        },
        finishUpload(){
            if(this.saveWhenFinish){
                this.saveWhenFinish = false
                setTimeout(()=>{
                    document.getElementById('btnSubmit').click()
                }, 100)
            }
            this.hideProgress()
        },
        refreshIframe() {
            $('#loading_iframe').show()

            divContenedor.innerHTML = ""

            let existingIframe = divContenedor.querySelector('iframe');

            if (existingIframe) {
                existingIframe.src = iframeUrl;
            }

            let iframe = loadIframe(iframeUrl)

            setTimeout(()=>{
                $('#loading_iframe').hide()
                divContenedor.appendChild(iframe);
            },1000)

        },
        change(event, sectionCode){
            let status = event.target.checked ? 'habilitar' : 'deshabilitar'
            if(!window.confirm('Desear cambiar el estado a '+ status)){
                event.target.checked = !event.target.checked
                return
            }

            let newState = event.target.checked

            Livewire.dispatch('changeSectionStatusEvent', { section: sectionCode, state: newState})
        },
    }));

    Livewire.on('show-schedule', () => {
        $('#modal_schedule').modal('show')
    })

    Livewire.on('freshIframe', () => {
        $('#loading_iframe').show()

        divContenedor.innerHTML = ""

        let existingIframe = divContenedor.querySelector('iframe');

        if (existingIframe) {
            existingIframe.src = iframeUrl;
            return
        }

        let iframe = loadIframe(iframeUrl)

        setTimeout(()=>{
            $('#loading_iframe').hide()
            divContenedor.appendChild(iframe);
        },1000)
    })
</script>
@endscript