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

@section('title', ''.env('APP_NAME').' | Agendar Envios para Páginas')

@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 Páginas <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 class="grid grid-cols-1 gap-4">

                <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
                    <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">
                            </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">
                            </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" type="text" id="link_video" placeholder="Link do vídeo">
                            </div>
                        </div>
                    </div>
                                        <div class="mt-0 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6" style="margin-bottom: 1em;">
                        <div class="sm:col-span-3">
                            <label>Qual horário deve começar as postagens?</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="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;">Suas páginas: <strong>(<span id="group-ss">0</span>)</strong></h1>
                    <p class="text-gray-600" style="margin-top: 0em;">Veja as suas páginas e quais perfis estão vinculados a elas.</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 todas as páginas</span>
            @php
                // Inicializa a variável para armazenar a contagem total de paginas
                $totalGroupCount = 0;

                // Calcula a quantidade total de paginas
                foreach ($Accounts as $key_Select_Accounts) {
                    $totalGroupCount += DB::table("shippings_pages")
                        ->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_pages")->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" 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" 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="mr-2 item" 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 essa página?!");
            if (r == true) {
                $.ajax({
                    type: 'POST',
                    url: "{{env('APP_URL')}}user/facebook/Remove_Page",
                    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: 'page'
                    },
                    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