<div class="chaty-popup chatyway-popup" id="chatyway-info-popup" data-step="1">
    <div class="chaty-popup-outer"></div>
    <div class="chaty-popup-inner popup-pos-bottom step-1">
        <div class="chaty-popup-content">
            <div class="chaty-popup-close">
                <a href="#" class="close-delete-pop close-chaty-popup-btn right-2 top-2 relative">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15.6 15.5c-.53.53-1.38.53-1.91 0L8.05 9.87 2.31 15.6c-.53.53-1.38.53-1.91 0s-.53-1.38 0-1.9l5.65-5.64L.4 2.4C-.13 1.87-.13 1.02.4.49s1.38-.53 1.91 0l5.64 5.63L13.69.39c.53-.53 1.38-.53 1.91 0s.53 1.38 0 1.91L9.94 7.94l5.66 5.65c.52.53.52 1.38 0 1.91z"></path></svg>
                </a>
            </div>
            <div class="a-card a-card--normal chatyway-popup-box">
                <div class="cloud-images">
                    <img src="<?php echo esc_url(plugins_url('../../admin/assets/images/modal/cloud-1.png', __FILE__)); ?>" alt="" class="floating-image cloud-1" />
                    <img src="<?php echo esc_url(plugins_url('../../admin/assets/images/modal/cloud-5.png', __FILE__)); ?>" alt="" class="floating-image cloud-5" />
                    <img src="<?php echo esc_url(plugins_url('../../admin/assets/images/modal/cloud-2.png', __FILE__)); ?>" alt="" class="floating-image cloud-2" />
                    <img src="<?php echo esc_url(plugins_url('../../admin/assets/images/modal/cloud-3.png', __FILE__)); ?>" alt="" class="floating-image cloud-3" />
                    <img src="<?php echo esc_url(plugins_url('../../admin/assets/images/modal/cloud-4.png', __FILE__)); ?>" alt="" class="floating-image cloud-4" />
                </div>
                <div class="chatway-steps step-1 w-full" >
                    <div class="chatway-title text-2xl pb-4 font-primary text-[28px] text-[#092030] font-semibold"><?php esc_html_e("Chatway: Live Chat & AI Support", "chaty"); ?></div>
                    <div class="flex justify-center">
                        <div class="inline-flex">
                            <ul class="text-left">
                                <li class="text-[#092030] text-sm flex items-center">
                                    <span class="flex-none inline-flex items-center w-6 h-6 bg-[#e4fff5] mr-2 rounded-full text-center"><svg class="mx-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" svg-inline="" role="presentation" focusable="false" tabindex="-1"><path d="M13.333 4l-7.334 7.333L2.666 8" stroke="#0C7C17" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>
                                    <?php esc_html_e("24/7 AI support that handles repetitive questions", "chaty"); ?>
                                </li>
                                <li class="text-[#092030] text-sm flex items-center">
                                    <span class="flex-none inline-flex items-center w-6 h-6 bg-[#e4fff5] mr-2 rounded-full text-center"><svg class="mx-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" svg-inline="" role="presentation" focusable="false" tabindex="-1"><path d="M13.333 4l-7.334 7.333L2.666 8" stroke="#0C7C17" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>
                                    <?php esc_html_e("All chats in one inbox (Website, Email, Messenger, Instagram)", "chaty"); ?>
                                </li>
                                <li class="text-[#092030] text-sm flex items-center">
                                    <span class="flex-none inline-flex items-center w-6 h-6 bg-[#e4fff5] mr-2 rounded-full text-center"><svg class="mx-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" svg-inline="" role="presentation" focusable="false" tabindex="-1"><path d="M13.333 4l-7.334 7.333L2.666 8" stroke="#0C7C17" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>
                                    <?php esc_html_e("Custom workflows, multiple agents, widgets & inboxes", "chaty"); ?>
                                </li>
                                <li class="text-[#092030] text-sm flex items-center">
                                    <span class="flex-none inline-flex items-center w-6 h-6 bg-[#e4fff5] mr-2 rounded-full text-center"><svg class="mx-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" svg-inline="" role="presentation" focusable="false" tabindex="-1"><path d="M13.333 4l-7.334 7.333L2.666 8" stroke="#0C7C17" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>
                                    <?php esc_html_e("Live visitor insights and Multilingual support", "chaty"); ?>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="chatyway-popup-box-img mb-5">
                        <img src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatyway-app.png'); ?>" alt="chatyway">
                    </div>
                    <div class="flex justify-center items-center mt-5 gap-2">
                        <div class="inline-flex gap-1 items-center">
                            <svg class="h-4 w-auto" width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_11954_22130)">
                                    <path d="M12.5928 5.45882C11.5277 6.11765 10.8699 7.24706 10.8699 8.50196C10.8699 9.91373 11.7157 11.2 13 11.7333C12.7494 12.549 12.3735 13.302 11.9036 13.9922C11.2145 14.9647 10.494 15.9686 9.42892 15.9686C8.36386 15.9686 8.0506 15.3412 6.79759 15.3412C5.5759 15.3412 5.13735 16 4.13494 16C3.13253 16 2.44337 15.0902 1.66024 13.9608C0.626506 12.3922 0.0313253 10.5725 0 8.65882C0 5.55294 2.00482 3.8902 4.00964 3.8902C5.0747 3.8902 5.95181 4.58039 6.60964 4.58039C7.23614 4.58039 8.23855 3.85882 9.42892 3.85882C10.6819 3.82745 11.8723 4.42353 12.5928 5.45882ZM8.86506 2.54118C9.39759 1.91373 9.67952 1.12941 9.71084 0.313726C9.71084 0.219608 9.71084 0.0941177 9.67952 0C8.77108 0.0941177 7.9253 0.533333 7.33012 1.22353C6.79759 1.81961 6.48434 2.57255 6.45301 3.38824C6.45301 3.48235 6.45301 3.57647 6.48434 3.67059C6.54699 3.67059 6.64096 3.70196 6.70361 3.70196C7.5494 3.63922 8.33253 3.2 8.86506 2.54118Z" fill="black"/>
                                </g>
                                <defs>
                                    <clipPath id="clip0_11954_22130">
                                        <rect width="13" height="16" fill="white"/>
                                    </clipPath>
                                </defs>
                            </svg>
                            <svg class="h-4 w-auto" width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M6.07896 6.85522L0.0585938 13.1627C0.126195 13.4023 0.247683 13.6233 0.413771 13.8087C0.57986 13.9942 0.786152 14.1392 1.01688 14.2327C1.2476 14.3262 1.49665 14.3657 1.74498 14.3482C1.99332 14.3307 2.23437 14.2566 2.44969 14.1317L9.22373 10.2736L6.07896 6.85522Z" fill="#EA4335"/>
                                <path d="M12.1564 5.78254L9.22698 4.10474L5.92969 6.99828L9.24044 10.2642L12.1474 8.60431C12.405 8.46947 12.6207 8.26671 12.7712 8.018C12.9217 7.7693 13.0013 7.48413 13.0013 7.19343C13.0013 6.90272 12.9217 6.61756 12.7712 6.36886C12.6207 6.12015 12.405 5.91739 12.1474 5.78254H12.1564Z" fill="#FBBC04"/>
                                <path d="M0.0538511 1.19336C0.0174592 1.32789 -0.000647996 1.46671 1.77075e-05 1.60608V12.7496C0.000381702 12.8889 0.0184715 13.0276 0.0538511 13.1623L6.28058 7.01634L0.0538511 1.19336Z" fill="#4285F4"/>
                                <path d="M6.12383 7.17779L9.23719 4.1048L2.47213 0.228795C2.21762 0.0797396 1.92816 0.000795769 1.63322 3.20853e-06C1.27701 -0.000702686 0.930347 0.115085 0.646064 0.329715C0.36178 0.544345 0.155474 0.846045 0.0585938 1.18882L6.12383 7.17779Z" fill="#34A853"/>
                            </svg>
                        </div>
                        <div class="inline-flex"><?php esc_html_e('Stay connected anywhere with mobile apps', 'chaty'); ?></div>
                    </div>
                    <div class="chatway-footer mt-5">
                        <a target="_blank" href="<?php echo admin_url("admin.php?page=chaty-live-chat") ?>" id="add-live-channel" class="inline-flex font-primary items-center gap-2.5 px-12 border border-solid text-center justify-center border-cht-primary h-10 text-base rounded-lg text-white hover:text-white bg-cht-primary hover:bg-cht-primary-100 shadow-[0px_12px_12px_-6px_#B78DEB85]">
                            <?php esc_html_e("Add Live Chat & AI Support", "chaty") ?>
                            <svg class="ml-1" width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 9.5L5 5.5L1 1.5" stroke="white" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path> </svg>
                        </a>
                    </div>
                </div>
                <div class="chatway-steps step-2 w-full" >
                    <div class="text-center text-2xl font-medium text-cht-gray-150">How Would You Like to Show The Live Chat Icon?</div>
                    <div class="text-center text-cht-primary text-sm">You can change it whenever you like</div>
                    <div class="chatway-positions my-5 has-check-icon">
                        <div class="flex gap-4">
                            <div class="chatway-position">
                                <input type="radio" class="sr-only" name="chatway_position" value="above-chaty" id="above-chaty" checked>
                                <label class="block cursor-pointer rounded-lg border border-[#c6d7e3] pointer relative mb-1" for="above-chaty">
                                    <img class="w-full h-auto" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/above-chaty.svg'); ?>" alt="chatyway">
                                    <img class="w-5 h-5 absolute top-1.5 right-1.5 hidden" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/select-icon.svg'); ?>" alt="chatyway">
                                </label>
                                <span class="block text-center text-sm text-cht-gray-150">An icon above Chaty's icon</span>
                            </div>
                            <div class="chatway-position">
                                <input type="radio" class="sr-only" name="chatway_position" value="inside-chaty" id="inside-chaty">
                                <label class="block cursor-pointer rounded-lg border border-[#c6d7e3] pointer relative mb-1" for="inside-chaty">
                                    <img class="w-full h-auto" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/inside-chaty.svg'); ?>" alt="chatyway">
                                    <img class="w-5 h-5 absolute top-1.5 right-1.5 hidden" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/select-icon.svg'); ?>" alt="chatyway">
                                </label>
                                <span class="block text-center text-sm text-cht-gray-150">Show it as one of Chaty's channel</span>
                            </div>
                            <div class="chatway-position">
                                <input type="radio" class="sr-only" name="chatway_position" value="outside-chaty" id="outside-chaty">
                                <label class="block cursor-pointer rounded-lg border border-[#c6d7e3] pointer relative mb-1" for="outside-chaty">
                                    <img class="w-full h-auto" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/outside-chaty.svg'); ?>" alt="chatyway">
                                    <img class="w-5 h-5 absolute top-1.5 right-1.5 hidden" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/select-icon.svg'); ?>" alt="chatyway">
                                </label>
                                <span class="block text-center text-sm text-cht-gray-150">Place manually from the Chatway settings</span>
                            </div>
                        </div>
                    </div>
                    <div class="text-center">
                        <button type="button" id="chatway-view-button" class="font-primary button-shadow transition items-center gap-2.5 px-12 border border-solid text-center justify-center border-cht-primary h-10 text-base rounded-lg text-white hover:text-white bg-cht-primary hover:bg-cht-primary-100">Select View</button>
                    </div>
                </div>
                <div class="chatway-steps step-3 w-full text-cht-gray-150" >
                    <div class="text-center text-2xl font-medium">Chatway Added Successfully!</div>
                    <div class="text-center mt-1 font-normal text-base"><strong>Note: </strong>Please ensure that you completed the Chatway onboarding</div>
                    <div class="chaty--chatway flex my-10 items-center justify-center gap-2.5">
                        <img class="w-auto h-auto" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/chaty.svg'); ?>" alt="chatyway">
                        <img class="w-auto h-auto" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/chaty-chatway.svg'); ?>" alt="chatyway">
                        <img class="w-auto h-auto" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/chatway.svg'); ?>" alt="chatyway">
                    </div>
                    <div class="text-center">
                        <button type="button" id="add-chatway-channel" class="font-primary w-full button-shadow transition items-center gap-2.5 px-12 border border-solid text-center justify-center border-cht-primary h-10 text-base rounded-lg text-white hover:text-white bg-cht-primary hover:bg-cht-primary-100">Done</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="chaty-popup" id="remove-chatway-channel">
    <div class="chaty-popup-outer"></div>
    <div class="chaty-popup-inner popup-pos-bottom">
        <div class="chaty-popup-content">
            <div class="chaty-popup-close">
                <a href="#" class="close-delete-pop close-chaty-popup-btn relative top-5 right-5">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15.6 15.5c-.53.53-1.38.53-1.91 0L8.05 9.87 2.31 15.6c-.53.53-1.38.53-1.91 0s-.53-1.38 0-1.9l5.65-5.64L.4 2.4C-.13 1.87-.13 1.02.4.49s1.38-.53 1.91 0l5.64 5.63L13.69.39c.53-.53 1.38-.53 1.91 0s.53 1.38 0 1.91L9.94 7.94l5.66 5.65c.52.53.52 1.38 0 1.91z"/></svg>
                </a>
            </div>
            <div class="a-card a-card--normal">
                <div class="chaty-popup-header font-medium text-cht-gray-150 py-4 text-left px-5">
                    <?php esc_html_e("Want to remove Chatway Widget?", "chaty") ?>
                </div>
                <div class="text-cht-gray-150 text-base px-5 py-6">
                    <?php esc_html_e("Chatway widget will continue to appear on your website as a separate icon. To remove it completely you need to uninstall Chatway.", "chaty") ?>
                </div>
                <div class="chaty-popup-footer flex px-5 justify-end">
                    <button type="button" class="remove--chatway btn btn-primary bg-transparent text-cht-gray-150 border-cht-gray-150 hover:bg-transparent hover:text-cht-gray-150 rounded-lg mr-3"><?php esc_html_e("Remove from Channels", "chaty") ?></button>
                    <a target="_blank" href="<?php echo admin_url("plugins.php") ?>" class="btn btn-default btn btn-primary bg-transparent text-cht-primary-100 btn rounded-lg btn-primary "><?php esc_html_e("Manage Plugins", "chaty") ?></a>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="chaty-popup" id="chatway-position-changed" >
    <div class="chaty-popup-outer"></div>
    <div class="chaty-popup-inner popup-pos-bottom w-[640px]">
        <div class="chaty-popup-content">
            <div class="chaty-popup-close">
                <a href="#" class="close-delete-pop close-chaty-popup-btn relative top-5 right-5">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15.6 15.5c-.53.53-1.38.53-1.91 0L8.05 9.87 2.31 15.6c-.53.53-1.38.53-1.91 0s-.53-1.38 0-1.9l5.65-5.64L.4 2.4C-.13 1.87-.13 1.02.4.49s1.38-.53 1.91 0l5.64 5.63L13.69.39c.53-.53 1.38-.53 1.91 0s.53 1.38 0 1.91L9.94 7.94l5.66 5.65c.52.53.52 1.38 0 1.91z"/></svg>
                </a>
            </div>
            <div class="a-card a-card--normal">
                <div class="chaty-popup-header font-medium text-cht-gray-150 py-4 text-left px-5">
                    <?php esc_html_e("View method has been changed 🥳", "chaty") ?>
                </div>
                <div class="modal-details chatway--options p-5" id="chatway--options" >
                    <div class="chatway--option old-view">
                        <div class="chatway--frame old-chatway--frame">
                            <div class="chatway--button">
                                <img class="chatway-view-icon w-12 h-12" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/chatway-icon.svg'); ?>" alt="chatway" />
                            </div>
                            <div class="chaty-icon-buttons">
                                <img class="chaty--channel w-12 h-12" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/chaty-channel.svg'); ?>" alt="chatway" />
                                <div class="chat--cta-button">
                                    <img class="chaty--close-icon w-12 h-12" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/chaty-close-icon.svg'); ?>" alt="chatway" />
                                    <img class="chaty--cta-icon w-12 h-12" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/chaty-icon.svg'); ?>" alt="chatway" />
                                </div>
                            </div>
                            <img class="chatway--area" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/chatway-area.svg'); ?>" alt="chatway" />
                            <img src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/chatway-frame.svg'); ?>" class="chatway--base" alt="" />
                        </div>
                        <div class="view--title">
                            {{ $t('chatway.old_view') }}
                        </div>
                    </div>
                    <div class="chatway-arrow">
                        <img src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/chatway-arrow.svg'); ?>" alt="" />
                    </div>
                    <div class="chatway--option new-view">
                        <div class="chatway--frame new-chatway--frame">
                            <div class="chaty-icon-buttons">
                                <img class="chaty--channel w-12 h-12" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/chaty-channel.svg'); ?>" alt="chatway" />
                                <div class="chat--cta-button">
                                    <img class="chaty--close-icon w-12 h-12" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/chaty-close-icon.svg'); ?>" alt="chatway" />
                                    <img class="chaty--cta-icon w-12 h-12" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/chaty-icon.svg'); ?>" alt="chatway" />
                                </div>
                            </div>
                            <img class="chatway--area" src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/chatway-area.svg'); ?>" alt="chatway" />
                            <img src="<?php echo esc_url(CHT_PLUGIN_URL.'admin/assets/images/chatway/chatway-frame.svg'); ?>" class="chatway--base" alt="" />
                        </div>
                        <div class="view--title">
                            {{ $t('chatway.new_view') }}
                        </div>
                    </div>
                </div>
                <div class="p-5 text-center">
                    <button type="button" class="close-chaty-popup-btn px-5 py-2 text-cht-primary-100 border border-solid border-cht-primary-100 text-sm rounded"><?php esc_html_e('Close', 'chaty'); ?></button>
                </div>
            </div>
        </div>
    </div>
</div>