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

@section('title', ''.env('APP_NAME').' | Enviar Mensagens em Páginas - Leads')

@section('content')
    <style>
        .text-gray-900 { color: #fff; }
        .text-gray-600 { color: #ffffffb3; }
        th { background-color: #1f2937 !important; }
        #massDeleteForm > div > div > div { background-color: #1f2937 !important; }
        #additional-fields input, select { color: #fff!important; }
    </style>

    <div class="section container px-5 py-8 mx-auto" 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;">
                        Enviar mensagens em suas Páginas
                        <a href="{{ env('APP_URL') }}user/facebook/meta/pages/list/send" 
                           style="cursor: pointer;" 
                           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="send" class='mr-0'></i> 
                            <span>MENSAGENS ENVIADAS</span>
                        </a>
                    </h2>
                    <p class="mt-0 text-sm leading-0 text-gray-600">Gostaria de enviar mensagens em páginas administradas por você?</p>
                </div>
                <hr style="margin-top: 1em; border-color: #e5e7eb36;">
            </div>
            
             <div style="margin-top: 1em; display: flex; width: 100%;">
              <h2 style="margin-right: 1em; text-transform: uppercase; font-weight: 400;">Desativar ou ativar CRON</h2>
              <label class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" id="toggleSwitch" class="sr-only peer" 
                  {{ env('TOGGLE_STATE') === 'ON' ? 'checked' : '' }}>
                <div class="w-14 h-7 bg-red-500 peer-checked:bg-green-500 rounded-full peer transition-all duration-300"></div>
                <div class="absolute left-1 top-1 bg-white w-5 h-5 rounded-full shadow-md transition-all duration-300 peer-checked:translate-x-7"></div>
              </label>
            </div>
            <hr style="margin-top: 1em; border-color: #e5e7eb36;">
    
            <script>
            document.addEventListener("DOMContentLoaded", function () {
                const toggleSwitch = document.getElementById("toggleSwitch");
    
                // Alterar estado no .env
                toggleSwitch.addEventListener("change", function () {
                    fetch("{{env('APP_URL')}}toggle", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({ state: toggleSwitch.checked ? "ON" : "OFF" })
                    });
                });
            });
            </script>

            @if(session('success'))
                <div class="p-4 mb-4 text-sm text-green-700 bg-green-100 rounded-lg border border-green-400">
                    <span class="font-medium">Sucesso!</span> {{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div class="p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg border border-red-400">
                    <span class="font-medium">Erro!</span> {{ session('error') }}
                </div>
            @endif

            @if($errors->any())
                <div class="p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg border border-red-400">
                    <span class="font-medium">Erros encontrados:</span>
                    <ul class="mt-2 list-disc list-inside">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <!-- Formulário -->
            <form method="POST" action="{{ env('APP_URL') }}user/facebook/meta/send/messages/pages" class="mt-6 space-y-6" enctype="multipart/form-data" style="margin-top: -0.5em;">
                @csrf
                <div>
                    <h3 style="text-transform: uppercase; font-size: 1em!important;" class="text-lg font-semibold text-gray-100 flex items-center">
                        Selecione as páginas ({{ $Count_Accounts }}):
                        <input style="opacity: 0.5;"
                            type="checkbox" 
                            id="select-all" 
                            class="form-checkbox h-5 w-5 text-blue-600 ml-2 border-gray-300 focus:ring focus:ring-blue-500 rounded"
                        >
                    </h3>

                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-6 mt-4">
                        @foreach($Accounts as $account)
                            <div 
                                class="bg-gray-800 p-4 rounded-lg shadow-lg text-center cursor-pointer group transition hover:bg-gray-700"
                                onclick="toggleCardCheckbox({{ $account->id }})">
                                <!-- Checkbox -->
                                <div class="flex items-center" style="justify-content: end;">
                                    <input 
                                        type="checkbox" 
                                        name="accounts[]" 
                                        value="{{ $account->id }}" 
                                        id="account-{{ $account->id }}" 
                                        class="form-checkbox h-5 w-5 text-blue-600 account-checkbox border-gray-300 focus:ring focus:ring-blue-500 rounded"
                                        onclick="event.stopPropagation();" style="opacity: 0.5;">
                                </div>
                                <!-- Image -->
                                <div>
                                    @php
                                        $pictureUrl = "https://graph.facebook.com/v12.0/{$account->page_id}/picture?type=large&access_token={$account->access_token}";
                                    @endphp
                                    <img  style="width: 4em!important; height: auto;" 
                                        src="{{ $pictureUrl }}" 
                                        alt="{{ $account->name }}" 
                                        class="w-20 h-20 mx-auto rounded-full object-cover"
                                    >
                                </div>
                                <!-- Name -->
                                <label 
                                    for="account-{{ $account->id }}" 
                                    class="mt-2 text-sm font-medium text-gray-100 block"
                                >
                                    {{ $account->name }}
                                </label>
                            </div>
                        @endforeach
                    </div>
                </div>

                <script>
                    // Função para selecionar/deselecionar todos os checkboxes
                    document.getElementById('select-all').addEventListener('change', function () {
                        const checkboxes = document.querySelectorAll('.account-checkbox');
                        checkboxes.forEach(checkbox => checkbox.checked = this.checked);
                    });

                    // Função para alternar o estado do checkbox ao clicar no card
                    function toggleCardCheckbox(accountId) {
                        const checkbox = document.getElementById(`account-${accountId}`);
                        checkbox.checked = !checkbox.checked;
                    }
                </script>

                <div class="mt-6">
                  <hr style="margin-top: 1em; border-color: #e5e7eb36;">
                </div>

                <div class="mt-6">
                    <label for="input-2" class="block text-sm font-medium">Título da Campanha</label>
                    <input id="input-camp" type="text" name="camp" class="mt-2 block w-full rounded-md border-gray-600 bg-gray-800 text-white shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Digite um título para a campanha">
                </div>

                <div class="mt-6">
                    <label for="input-data" class="block text-sm font-medium">Agendar Horário?</label>
                    <input id="input-data" 
                           type="datetime-local" 
                           name="data_hora" 
                           class="mt-2 block w-full rounded-md border-gray-600 bg-gray-800 text-white shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                </div>

                <script>
                // Função para formatar data no padrão "YYYY-MM-DDTHH:MM"
                function getCurrentDateTime() {
                    const now = new Date();
                    const year = now.getFullYear();
                    const month = String(now.getMonth() + 1).padStart(2, '0');
                    const day = String(now.getDate()).padStart(2, '0');
                    const hours = String(now.getHours()).padStart(2, '0');
                    const minutes = String(now.getMinutes()).padStart(2, '0');
                    
                    return `${year}-${month}-${day}T${hours}:${minutes}`;
                }

                // Define a data atual no input
                document.addEventListener('DOMContentLoaded', function () {
                    document.getElementById('input-data').value = getCurrentDateTime();
                });
                </script>



                <div class="mt-6">
                    <label for="message" class="block text-sm font-medium text-gray-900">Digite sua Mensagem:</label>
                    <textarea id="message" name="message" rows="5"
                    class="mt-2 block w-full rounded-md border-gray-600 bg-gray-800 text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                    placeholder="Escreva sua mensagem aqui..."></textarea>
                </div>

                <div class="mt-6">
                    <div class="col-span-full">
                        <label for="cover-photo" class="block text-sm font-medium leading-6 text-gray-900">Selecionar Mídia (opcional)</label>
                        <div class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10" style="border-color: #e5e7eb36;">
                            <div class="text-center">
                                <div id="img-upload">
                                    <!-- Pré-visualização da imagem -->
                                    <img id="preview-image" class="mx-auto h-24 w-24 object-cover rounded-md hidden" alt="Preview da Imagem">
                                    
                                    <!-- Ícone padrão -->
                                    <svg id="placeholder-icon" class="mx-auto h-12 w-12 text-gray-300" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="mt-0 flex text-sm leading-6 text-gray-600">
                                    <label style="background-color: #1f2937!important; color: #fff!important;" for="file-upload" class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500">
                                        <span style="background-color: #1f2937!important; color: #fff!important;">Carregar um arquivo</span>
                                        <input id="file-upload" accept="image/*,video/*" name="media" type="file" class="sr-only">
                                    </label>
                                    <p class="pl-1" style="color: #ffffffb3;">ou arraste e solte</p>
                                </div>
                                <p class="text-xs leading-5 text-gray-600" style="color: #ffffffb3;"><strong>PNG, JPG, GIF, MP3, MP4</strong></p>
                            </div>
                        </div>
                    </div>

                    <!-- Elementos que aparecem ao selecionar a imagem -->
                    <div id="additional-fields" class="hidden mt-4 bg-black text-white p-6 rounded-md shadow-lg" style="background-color: #1f2937; margin-top: 2em;">
                        <div class="grid grid-cols-2 gap-6">
                            <div>
                                <label for="input-1" class="block text-sm font-medium">Título</label>
                                <input id="input-1" type="text" name="title" class="mt-2 block w-full rounded-md border-gray-600 bg-gray-800 text-white shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                            </div>

                            <div>
                                <label for="input-2" class="block text-sm font-medium">Subtítulo</label>
                                <input id="input-2" type="text" name="subtitle" class="mt-2 block w-full rounded-md border-gray-600 bg-gray-800 text-white shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                            </div>

                            <div>
                                <label for="input-3" class="block text-sm font-medium">Link para a Imagem</label>
                                <input id="input-3" type="text" name="imageUrlClick" class="mt-2 block w-full rounded-md border-gray-600 bg-gray-800 text-white shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                            </div>

                            <div>
                                <label for="select-option" class="block text-sm font-medium">Opção de Exibição</label>
                                <select id="select-option" name="imageAspectRatio" class="mt-2 block w-full rounded-md border-gray-600 bg-gray-800 text-white shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                    <option value="square">Square</option>
                                    <option value="horizontal">Horizontal</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div id="additional-fields1" class="hidden">
                        <div class="bg-gray-900 rounded-lg p-6 shadow-lg" style="background-color: #1f2937; margin-top: 2em;">
                            <!-- Container flex para alinhar os itens -->
                            <div class="flex justify-between items-center mb-4">
                                <!-- Título alinhado à esquerda -->
                                <h1 class="text-2xl font-semibold" style="text-transform: uppercase; font-size: 1.2em!important">Botões da Mensagem</h1>
                                
                                <!-- Botão alinhado à direita -->
                                <button style="text-transform: uppercase; font-weight: 500; font-size: 0.9em;" type="button" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600" onclick="addButtonField()">Adicionar Novo Botão</button>
                            </div>

                            <hr style="margin-top: 1em; border-color: #e5e7eb36; margin-bottom: 1.5em;">

                            <!-- Container para os botões -->
                            <div id="buttons-container"></div>

                            <!-- Input hidden para armazenar os dados JSON -->
                            <input type="hidden" id="buttons-data" name="buttonsData">
                        </div>
                    </div>
                </div>

                <div class="mt-6" style="display: none;">
                    <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">Informação</span>
                      <div>
                        <span class="font-medium">Configuração recomendada para envio de leads:</span>
                        <ul class="mt-1.5 list-disc list-inside">
                          <li>Recomendamos uma taxa padrão de **500 leads por minuto**, ideal para campanhas com uma média de 30.000 leads.</li>
                          <li>Para campanhas com maior volume, considere aumentar a taxa para **1000–1500 leads por minuto** para um desempenho otimizado.</li>
                          <li>Certifique-se de que o sistema suporte o aumento de taxa para evitar atrasos ou falhas no envio.</li>
                        </ul>
                      </div>
                    </div>
                    <label for="input-timer" class="block text-sm font-medium">Quantidade por minuto:</label>
                    <input id="input-timer" type="number" name="timer" class="mt-2 block w-full rounded-md border-gray-600 bg-gray-800 text-white shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Quantidade de envios por minuto" value="500">
                </div>


                <div class="mt-6">
                    <button style="width: 100%; text-transform: uppercase;" type="submit" 
                            class="inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                        Enviar Mensagens <i data-feather="message-square" class='mr-0' style="margin-left: 0.5em;"></i> 
                    </button>
                </div>
            </form>
        </div>
    </div>

    <style type="text/css">
        #buttons-container { display: unset; }
        #buttons-container button { font-weight: 500; }
    </style>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
        });

        document.getElementById('file-upload').addEventListener('change', function (event) {
            const file = event.target.files[0]; // Obter o arquivo selecionado
            const previewImage = document.getElementById('preview-image');
            const placeholderIcon = document.getElementById('placeholder-icon');
            const additionalFields = document.getElementById('additional-fields'); // Campos adicionais
            const additionalFields1 = document.getElementById('additional-fields1'); // Campos adicionais

            if (file) {
                // Verifica se é uma imagem
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();

                    // Define o que fazer quando o arquivo for carregado
                    reader.onload = function (e) {
                        previewImage.src = e.target.result; // Define a URL da imagem
                        previewImage.classList.remove('hidden'); // Mostra a imagem
                        placeholderIcon.classList.add('hidden'); // Esconde o ícone
                        additionalFields.classList.remove('hidden'); // Mostra os campos adicionais
                        additionalFields1.classList.remove('hidden'); // Mostra os campos adicionais
                    };

                    reader.readAsDataURL(file); // Lê o arquivo como Data URL
                } else {
                    alert('Por favor, selecione uma imagem válida!');
                }
            } else {
                // Caso nenhum arquivo seja selecionado, restaura o estado inicial
                previewImage.src = '';
                previewImage.classList.add('hidden');
                placeholderIcon.classList.remove('hidden');
                additionalFields.classList.add('hidden'); // Esconde os campos adicionais
                additionalFields1.classList.remove('hidden'); // Mostra os campos adicionais
            }
        });

        let buttonsArray = [];

        function renderButtons() {
            const container = document.getElementById('buttons-container');
            container.innerHTML = ''; // Limpa o container

            buttonsArray.forEach((button, index) => {
                if (!button) return;

                // Cria o wrapper para os inputs
                const wrapper = document.createElement('div');
                wrapper.classList.add('flex', 'items-center', 'space-x-4', 'mb-4');
                wrapper.dataset.index = index;

                // Input para URL
                const urlInput = document.createElement('input');
                urlInput.type = 'text';
                urlInput.placeholder = 'URL do botão';
                urlInput.value = button.url || '';
                urlInput.classList.add('flex-1', 'px-4', 'py-2', 'rounded-md', 'border-gray-600', 'bg-gray-800', 'text-white', 'shadow-sm', 'focus:ring-blue-500', 'focus:border-blue-500', 'mt-1', 'block', 'w-full', 'sm:text-sm');

                // Input para título
                const titleInput = document.createElement('input');
                titleInput.type = 'text';
                titleInput.placeholder = 'Título do botão';
                titleInput.value = button.title || '';
                titleInput.classList.add('flex-1', 'px-4', 'py-2', 'rounded-md', 'border-gray-600', 'bg-gray-800', 'text-white', 'shadow-sm', 'focus:ring-blue-500', 'focus:border-blue-500', 'mt-1', 'block', 'w-full', 'sm:text-sm');

                // Botão para remover
                const removeButton = document.createElement('button');
                removeButton.type = 'button';
                removeButton.textContent = 'Remover';
                removeButton.classList.add('bg-red-500', 'text-white', 'px-4', 'py-2', 'mt-1', 'rounded-lg', 'hover:bg-red-600');
                removeButton.onclick = () => removeButtonField(index);

                // Eventos para sincronizar valores com o array
                urlInput.addEventListener('input', () => updateButtonData(index, 'url', urlInput.value));
                titleInput.addEventListener('input', () => updateButtonData(index, 'title', titleInput.value));

                // Adiciona os inputs e o botão ao wrapper
                wrapper.appendChild(urlInput);
                wrapper.appendChild(titleInput);
                wrapper.appendChild(removeButton);

                // Adiciona o wrapper ao container
                container.appendChild(wrapper);
            });

            // Atualiza o input hidden com os dados JSON
            updateHiddenInput();
        }

        function addButtonField() {
            // Adiciona um novo botão ao array
            buttonsArray.push({ type: 'web_url', url: '', title: '' });
            renderButtons();
        }

        function updateButtonData(index, field, value) {
            // Atualiza os dados no array
            if (buttonsArray[index]) {
                buttonsArray[index][field] = value;
            }
            updateHiddenInput();
        }

        function removeButtonField(index) {
            // Remove o botão do array
            buttonsArray[index] = null;
            renderButtons();
        }

        function updateHiddenInput() {
            // Atualiza o input hidden com o JSON
            const filteredButtons = buttonsArray.filter(Boolean);
            const jsonString = JSON.stringify(filteredButtons);
            document.getElementById('buttons-data').value = jsonString;

            console.log('Botões atualizados:', jsonString);
        }
    </script>
@endsection