@extends('theme::layout.layout')

@section('title', ''.env('APP_NAME').' | Agendar Envios para Grupos')

@section('content')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <div class="section" style="width: 100%;">
        <div class="space-y-12">
            <div class="border-gray-900/10 pb-0">
                <div class="title-drake-fusion-formated">
                    <h2 class="text-base font-semibold leading-4 text-gray-900 inline-flex-aliest" style="text-transform: uppercase;">
                        Realizar envio para Grupos <a href="{{ url('user/facebook/add/account') }}" style="cursor: pointer;" onclick="add_account();" class="group inline-flex items-center justify-center whitespace-nowrap rounded-lg py-2 align-middle text-sm font-semibold leading-none transition-all duration-300 ease-in-out disabled:cursor-not-allowed bg-blue-700 stroke-white text-white hover:bg-blue-950 h-[30px] min-w-[30px] gap-2 disabled:bg-slate-100 disabled:stroke-slate-400 disabled:text-slate-400 disabled:hover:bg-slate-100 px-4">
                        <i data-feather="plus" class='mr-0'></i> <span>ADICIONAR CONTA</span>
                    </a>
                    </h2>
                    <p class="mt-0 text-sm leading-0 text-gray-600">Gostaria de realizar ou agendar envios para grupos?</p>
                </div>
                <hr style="margin-top: 1em;">
            </div>
        </div>
    </div>


    <div class="section" style="width: 100%;">
        <div style="margin-top: 1.5em;">
            <div>

                <dl class="mt-2 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-2">
                    <div class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden">
                        <div class="" style="width: 100%;">
                            <div class="mb-4">
                                <div id="nnnnn"></div>
                                <div class="w-full">
                                    <textarea placeholder="Mensagem" style="height: 8em;" id="emojionearea1" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"></textarea>
                                </div>
                            </div>
                            <hr style="margin-top: 1em;">
                            <div class="bg-white">
                                <nav class="tabs flex flex-col sm:flex-row">
                                    <button data-target="panel-1" class="active tab ext-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none">
                                        Link
                                    </button><button data-target="panel-2" class="tab ext-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none">
                                        Foto
                                    </button><button data-target="panel-3" class="tab ext-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none">
                                        Vídeo
                                    </button>
                                </nav>
                            </div>
                            <hr style="margin-top: 0.2em;">
                            <div id="panels" style="margin-top: -1em;">
                                <div class="panel-1 tab-content active py-5">
                                    <div class="mt-4">
                                        <input class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6" type="text" id="link_post" placeholder="Link da postagem" onkeyup="Changeiframe('link_post')">
                                    </div>
                                </div>
                                <div class="panel-2 tab-content py-5">
                                    <div class="mt-4">
                                        <input class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6" type="text" id="link_img" placeholder="Link da imagem" onkeyup="Changeimage('link_img')">
                                    </div>
                                </div>
                                <div class="panel-3 tab-content py-5">
                                    <div class="mt-4">
                                        <input class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6" onkeyup="Changevideo('link_video')" type="text" id="link_video" placeholder="Link do vídeo">
                                    </div>
                                </div>
                            </div>
                                                        <div class="flex p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400" role="alert">
                              <svg class="flex-shrink-0 inline w-4 h-4 me-3 mt-[2px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
                              </svg>
                              <span class="sr-only">Info</span>
                              <div>
                                <span class="font-medium">Algumas informações:</span>
                                  <ul class="mt-1.5 list-disc list-inside">
                                    <li>O <strong>delay</strong> é de 1 a 60, recomendamos o uso do delay entre 2-4</li>
                                    <li>Caso queira <strong>agendar</strong>, basta alterar o horário de inicio das postagens</li>
                                    <li>Preencha as informações e selecione os grupos para agendar</li>
                                </ul>
                              </div>
                            </div>

                            <ul class="grid w-full gap-6 md:grid-cols-3" style="margin-bottom: 1em; display: none;">
                                <li>
                                    <input type="checkbox" id="react-option" value="" class="hidden peer" required="">
                                    <label for="react-option" class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border-2 border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 peer-checked:border-blue-600 hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">                           
                                        <div class="block">
                                            <svg class="mb-2 w-7 h-7 text-sky-500" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z"/></svg>
                                            <div class="w-full text-lg font-semibold">React Js</div>
                                            <div class="w-full text-sm">A JavaScript library for building.</div>
                                        </div>
                                    </label>
                                </li>
                                <li>
                                    <input type="checkbox" id="flowbite-option" value="" class="hidden peer">
                                    <label for="flowbite-option" class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border-2 border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 peer-checked:border-blue-600 hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
                                        <div class="block">
                                            <svg class="mb-2 text-green-400 w-7 h-7" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M356.9 64.3H280l-56 88.6-48-88.6H0L224 448 448 64.3h-91.1zm-301.2 32h53.8L224 294.5 338.4 96.3h53.8L224 384.5 55.7 96.3z"/></svg>
                                            <div class="w-full text-lg font-semibold">Vue Js</div>
                                            <div class="w-full text-sm">Vue.js is an model–view.</div>
                                        </div>
                                    </label>
                                </li>
                                <li>
                                    <input type="checkbox" id="angular-option" value="" class="hidden peer">
                                    <label for="angular-option" class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border-2 border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 peer-checked:border-blue-600 hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
                                        <div class="block">
                                            <svg class="mb-2 text-red-600 w-7 h-7" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M185.7 268.1h76.2l-38.1-91.6-38.1 91.6zM223.8 32L16 106.4l31.8 275.7 176 97.9 176-97.9 31.8-275.7zM354 373.8h-48.6l-26.2-65.4H168.6l-26.2 65.4H93.7L223.8 81.5z"/></svg>
                                            <div class="w-full text-lg font-semibold">Angular</div>
                                            <div class="w-full text-sm">A TypeScript-based webk.</div>
                                        </div>
                                    </label>
                                </li>
                            </ul>
        
                            <div class="mt-0 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6" style="margin-bottom: 1em; margin-top: 1em;">
                                <div class="sm:col-span-3">
                                    <label> Horário para inciar</label>
                                    <input class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6" type="datetime-local" id="calendar" value="2026-08-23T09:41">
                                </div>

                                <div class="sm:col-span-3">
                                    <label>Máximo de Delay</label>
                                    <input class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6" type="number" value="3" id="delay" min="1" max="6">
                                </div>
                            </div>

                            <button style="text-transform: uppercase; width: 100%; margin-bottom: 1em;" class="group inline-flex items-center justify-center whitespace-nowrap rounded-lg py-6 align-middle text-sm font-semibold leading-none transition-all duration-300 ease-in-out disabled:cursor-not-allowed bg-blue-700 stroke-white text-white hover:bg-blue-950 h-[30px] min-w-[30px] gap-2 disabled:bg-slate-100 disabled:stroke-slate-400 disabled:text-slate-400 disabled:hover:bg-slate-100 px-4" type="button" onclick="Add_Post();">
                                Agendar Postagem
                                <i data-feather="facebook" class='mr-0'></i>
                                <img style="width: 1em; display: none;" id="loading-x" src="{{ asset('images/loading-gif.gif') }}">
                            </button>
                        </div>
                    </div>

                    <div class="relative overflow-hidden">
                        <!-- component -->
                        <div style="width: 100%; margin-bottom: 1em;">
                          <div class="px-5 py-4 bg-white dark:bg-gray-800 shadow rounded-lg">
                            <div class="flex mb-4">
                              <img class="w-12 h-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"/>
                              <div class="ml-2 mt-0.5">
                                <span class="block font-medium text-base leading-snug text-black dark:text-gray-100">Loyce Kuvalis</span>
                                <span class="block text-sm text-gray-500 dark:text-gray-400 font-light leading-snug">30 min</span>
                              </div>
                            </div>
                            <p id="text-face" class="text-gray-800 dark:text-gray-100 leading-snug md:leading-normal" style="margin-top: -0.6em;">
                                <div role="status" class="max-w-sm animate-pulse" id="loft-timer" style="">
                                    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
                                    <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5"></div>
                                    <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
                                    <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[330px] mb-2.5"></div>
                                    <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[300px] mb-2.5"></div>
                                    <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </p>
                            <img src="" id="imageface" style="width: 100%; max-height: 600px; display: none; margin-top: 0.5em;">
                            <iframe id="iframe0face" src="" width="500" height="500" style="border:none;overflow:hidden; display: none; margin-top: 0.5em; width: 100%;" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
                            <video style="display: none; margin-top: 0.5em;" src="" id="video_frame" controls="" controlslist="nodownload"></video>

                            <div class="flex justify-between items-center mt-5">
                            <div class="flex ">
                              <svg class="p-0.5 h-6 w-6 rounded-full z-20 bg-white dark:bg-gray-800 " xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 16 16'><defs><linearGradient id='a1' x1='50%' x2='50%' y1='0%' y2='100%'><stop offset='0%' stop-color='#18AFFF'/><stop offset='100%' stop-color='#0062DF'/></linearGradient><filter id='c1' width='118.8%' height='118.8%' x='-9.4%' y='-9.4%' filterUnits='objectBoundingBox'><feGaussianBlur in='SourceAlpha' result='shadowBlurInner1' stdDeviation='1'/><feOffset dy='-1' in='shadowBlurInner1' result='shadowOffsetInner1'/><feComposite in='shadowOffsetInner1' in2='SourceAlpha' k2='-1' k3='1' operator='arithmetic' result='shadowInnerInner1'/><feColorMatrix in='shadowInnerInner1' values='0 0 0 0 0 0 0 0 0 0.299356041 0 0 0 0 0.681187726 0 0 0 0.3495684 0'/></filter><path id='b1' d='M8 0a8 8 0 00-8 8 8 8 0 1016 0 8 8 0 00-8-8z'/></defs><g fill='none'><use fill='url(#a1)' xlink:href='#b1'/><use fill='black' filter='url(#c1)' xlink:href='#b1'/><path fill='white' d='M12.162 7.338c.176.123.338.245.338.674 0 .43-.229.604-.474.725a.73.73 0 01.089.546c-.077.344-.392.611-.672.69.121.194.159.385.015.62-.185.295-.346.407-1.058.407H7.5c-.988 0-1.5-.546-1.5-1V7.665c0-1.23 1.467-2.275 1.467-3.13L7.361 3.47c-.005-.065.008-.224.058-.27.08-.079.301-.2.635-.2.218 0 .363.041.534.123.581.277.732.978.732 1.542 0 .271-.414 1.083-.47 1.364 0 0 .867-.192 1.879-.199 1.061-.006 1.749.19 1.749.842 0 .261-.219.523-.316.666zM3.6 7h.8a.6.6 0 01.6.6v3.8a.6.6 0 01-.6.6h-.8a.6.6 0 01-.6-.6V7.6a.6.6 0 01.6-.6z'/></g></svg>
                              <span class="ml-1 text-gray-500 dark:text-gray-400  font-light">0</span>
                            </div>  
                            <div class="ml-1 text-gray-500 dark:text-gray-400 font-light">0 comments</div>
                            </div>
                          </div>
                        </div>

                        <div id="alert-border-4" class="flex items-center p-4 mb-4 text-yellow-800 border-t-4 border-yellow-300 bg-yellow-50 dark:text-yellow-300 dark:bg-gray-800 dark:border-yellow-800" role="alert">
                            <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                              <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
                            </svg>
                            <div class="ms-3 text-sm font-medium">
                              Exemplo de como sua postagem vai ficar no facebook
                            </div>
                            <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-yellow-50 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-yellow-300 dark:hover:bg-gray-700" data-dismiss-target="#alert-border-4" aria-label="Close">
                              <span class="sr-only">Dismiss</span>
                              <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                              </svg>
                            </button>
                        </div>
                    </div>
                </dl>

            </div>

            <script type="text/javascript">
                function Changetext(event) {
                    const value = $("#"+event+"").val();
                    $("#text-face").html(value);

                    if (value != "") {
                        $("#loft-timer").css("display", "none");
                    }
                }
                setInterval(function(){ Changetext('emojionearea1') }, 100);

                function Changeiframe(event) {
                    $("#link_img").val('');
                    $("#link_video").val('');
                    $("#imageface").css("display", "none");
                    $("#video_frame").css("display", "none");
                    const value_int = $("#"+event+"").val();

                    if (value_int == "") {
                        $("#iframe0face").css("display", "none");
                    } else {
                        $("#loft-timer").css("display", "none");
                        html_url = "https://www.facebook.com/plugins/post.php?href="+value_int+"&width=500&show_text=true&appId=209992240802900&height=674";
                        $("#iframe0face").attr('src', html_url);
                        $("#iframe0face").css("display", "unset");
                    }
                }

                function Changeimage(event) {
                    $("#link_post").val('');
                    $("#link_video").val('');
                    $("#iframe0face").css("display", "none");
                    $("#video_frame").css("display", "none");
                    const value_int = $("#"+event+"").val();

                    if (value_int == "") {
                        $("#imageface").css("display", "none");
                    } else {
                        $("#loft-timer").css("display", "none");
                        $("#imageface").attr('src', value_int);
                        $("#imageface").css("display", "unset");
                    }
                }


                function Changevideo(event) {
                    $("#link_post").val('');
                    $("#link_img").val('');
                    $("#iframe0face").css("display", "none");
                    $("#imageface").css("display", "none");
                    const value_int = $("#"+event+"").val();

                    if (value_int == "") {
                        $("#video_frame").css("display", "none");
                    } else {
                        $("#loft-timer").css("display", "none");
                        $("#video_frame").attr('src', value_int);
                        $("#video_frame").css("display", "unset");
                    }
                }
            </script>

            <div class="my-8">
                <hr class="border-gray-300">
            </div>
            <div class="w-full sm:w-1/2">
                <div class="line-section-list mb-4">
                    <h1 class="text-xl font-semibold mb-2" style="margin-bottom: 0em; margin-top: -1em; text-transform: uppercase; font-size: 1em; font-weight: 500;">Seus grupos: <strong>(<span id="group-ss">0</span>)</strong></h1>
                    <p class="text-gray-600" style="margin-top: 0em;">Veja os seus grupos e quais perfis estão vinculados a eles.</p>
                </div>
            </div>
            <div class="my-4">
                <hr class="border-gray-300">
            </div>
            <input type="checkbox" id="selectAll" class="mr-2 leading-tight w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"><span style="text-transform: uppercase; font-size: 0.8em;">Selecionar todos os grupos</span>
            @php
                // Inicializa a variável para armazenar a contagem total de grupos
                $totalGroupCount = 0;

                // Calcula a quantidade total de grupos
                foreach ($Accounts as $key_Select_Accounts) {
                    $totalGroupCount += DB::table("shippings_groups")
                        ->where('user_account', $key_Select_Accounts->id)
                        ->count();
                }
            @endphp

            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-4" id="item-accounts">
                @foreach ($Accounts as $key_Select_Accounts)
                    @foreach (DB::table("shippings_groups")->where('user_account', $key_Select_Accounts->id)->get() as $Select_Accounts_2_deload)

                        <div class="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700" id="account-{{ $Select_Accounts_2_deload->id }}">
                            <div class="flex justify-end px-4 pt-4">
                                <button id="dropdownButton" data-dropdown-toggle="dropdown{{$Select_Accounts_2_deload->id}}" class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5" type="button">
                                    <span class="sr-only">Open dropdown</span>
                                    <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 3">
                                        <path d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z"/>
                                    </svg>
                                </button>
                                <!-- Dropdown menu -->
                                <div id="dropdown{{$Select_Accounts_2_deload->id}}" class="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-900" style="position: absolute; margin-top: 3em; border: solid 1px #00000038;">
                                    <ul class="py-2" aria-labelledby="dropdownButton">
                                        <li>
                                            <a style="cursor: pointer;" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white" onclick="Remove_Count('{{$Select_Accounts_2_deload->id}}');">Excluir</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="flex flex-col items-center pb-10">
                                <div class="relative" style="margin-bottom: 0.5em;">
                                    <img class="w-10 h-10 rounded-full" src="{{ $Select_Accounts_2_deload->photo }}" alt="">
                                    <span class="top-0 left-7 absolute  w-3.5 h-3.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
                                </div>
                                <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white" style="font-size: 1.1em;">{{ Str::limit($Select_Accounts_2_deload->name, 20, '...') }}</h5>
                                <div class="flex mt-4 md:mt-6">
                                    <ul class="w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                        <li  style="display: inline-flex; justify-content: space-between;" class="w-full px-4 py-2 border-b border-gray-200 rounded-t-lg dark:border-gray-600">
                                            <span style="display: inline-flex; align-items: center;"><i data-feather="user" style="width: 1em; margin-right: 0.5em;" class='mr-0'></i></span>
                                            <span style="margin-left: 0.5em; display: inline-flex; align-items: center;" id="Count-{{ $Select_Accounts_2_deload->id }}">{{$key_Select_Accounts->name}}</span>
                                        </li>

                                        <li  style="display: inline-flex; justify-content: space-between;" class="w-full px-4 py-2 border-b border-gray-200 rounded-t-lg dark:border-gray-600">
                                            <span style="display: inline-flex; align-items: center;"><i data-feather="check-square" style="width: 1em; margin-right: 0.5em;" class='mr-0'></i></span>
                                            <strong style="margin-left: 0.5em; display: inline-flex; align-items: center;" id="Count-{{ $Select_Accounts_2_deload->id }}"><input class="item mr-2 leading-tight w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" name="option[]" type="checkbox" value="{{$Select_Accounts_2_deload->group_id}}"></strong>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endforeach
                @endforeach
            </div>

        </div>
    </div>


    <style type="text/css">
        .tab-content {
          display: none;
        }

        .tab-content.active {
          display: block;
        }
        .active { color: {{config('colors.primary_color_user')}} }
        .tabs button { display: block!important; font-weight: 500; }
    </style>

    <script>
        $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
        });

        const tabs = document.querySelectorAll(".tabs");
        const tab = document.querySelectorAll(".tab");
        const panel = document.querySelectorAll(".tab-content");

        function onTabClick(event) {
          // deactivate existing active tabs and panel
          for (let i = 0; i < tab.length; i++) {
            tab[i].classList.remove("active");
          }

          for (let i = 0; i < panel.length; i++) {
            panel[i].classList.remove("active");
          }

          // activate new tabs and panel
          event.target.classList.add('active');
          let classString = event.target.getAttribute('data-target');
          console.log(classString);
          document.getElementById('panels').getElementsByClassName(classString)[0].classList.add("active");
        }

        for (let i = 0; i < tab.length; i++) {
          tab[i].addEventListener('click', onTabClick, false);
        }
 
        $('#group-ss').html('{{$totalGroupCount}}');
        $(document).ready(function() {
            $('#selectAll').click(function() {
                $('.item').prop('checked', this.checked);
            });

            $('.item').click(function() {
                if ($('.item:checked').length == $('.item').length) {
                    $('#selectAll').prop('checked', true);
                } else {
                    $('#selectAll').prop('checked', false);
                }
            });
        });

        function Remove_Count(Remove_Count) {
            var x;
            var r = confirm("Você realmente quer remover esse grupo?!");
            if (r == true) {
                $.ajax({
                    type: 'POST',
                    url: "{{env('APP_URL')}}user/facebook/Remove_Group",
                    data: { Remove_Count: Remove_Count },
                    success: function (data) {
                        if (data.errors == undefined) {
                            if (data.status == "true") {
                                //alert(data.log);
                                $('#account-' + Remove_Count).remove();
                            } else {
                                //UIkit.notification(data.log, 'danger');
                                alert(data.log);
                            }
                        } else {
                            $.each(data.errors, function (index, value) {
                                //UIkit.notification(value, 'danger');
                                alert(value);
                            });
                        }
                    }
                });
            }   
        }

        function Add_Post() {
            document.getElementById("loading-x").style.display = "unset";
            emojionearea1 = $("#emojionearea1").val();
            var options = [];
            $('input[name="option[]"]:checked').each(function() {
                options.push($(this).val());
            });

            var jsonPost = JSON.stringify(options);
            if (jsonPost == "[]") {
                alert("Selecione algum grupo para continuar..");
                document.getElementById("loading-x").style.display = "none";
            } else {
                link_img = $("#link_img").val();
                link_video = $("#link_video").val();
                link_post = $("#link_post").val();
                calendar = $("#calendar").val();
                delay = $("#delay").val();

                $.ajax({
                    type: 'POST',
                    url: "{{env('APP_URL')}}user/facebook/Add_Sends_Groups",
                    data: { 
                        emojionearea1: emojionearea1,
                        options: jsonPost,
                        link_img: link_img,
                        link_video: link_video,
                        link_post: link_post,
                        calendar: calendar,
                        delay: delay,
                        type: 'group'
                    },
                    success: function (data) {
                        if (data.errors == undefined) {
                            if (data.status == "true") {
                                $('#emojionearea1').val('');
                                // alert(data.log);
                                
                                window.location.href = "{{env('APP_URL')}}user/facebook/shipments/details/"+data.id+"";
                                // UIkit.notification(data.log, 'success');
                            } else {
                                alert(data.log);
                                //UIkit.notification(data.log, 'danger');
                            }
                        } else {
                            $.each(data.errors, function (index, value) {
                                //UIkit.notification(value, 'danger');
                                alert(value);
                            });
                        }
                    }
                });
                document.getElementById("loading-x").style.display = "none";
            }
        }
    </script>
@endsection