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

@section('title', env('APP_NAME_DASHBOARD') . ' | Realizar Envios')

@section('content')
<div class="container mx-auto px-4 py-8">
    <!-- Título e Botão de Adicionar Novo Grupo -->
    <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-800 uppercase">Realizar Envios</h2>
            <p class="text-gray-600 mt-1">Essa funcionalidade é essencial para gerenciar envios de mensagens usando o WhatsApp.</p>
        </div>
        <a href="{{env('APP_URL')}}user/whatsapp/dispositivos" style="text-transform: uppercase; cursor: pointer; border-radius: 25px;" 
            class="mt-4 md:mt-0 inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
            <i data-feather="phone" class="mr-2"></i> ADICIONAR NOVO DISPOSITIVO
        </a>
    </div>

    <style type="text/css">
        .id-liner-whatsapp button { text-transform: uppercase!important; }
        #navbar-phones { overflow-y: auto; width: 100%; height: 250px; }
        #navbar-phones li { width: 33.3%; float: left; }
        #navbar-phones > li { border-bottom: solid 0.5px #ddd;}
        .for-buttons { 
          text-transform: uppercase; background-color: #3b82f6!important; border-radius: 25px!important;
          color: #fff; padding: 0.5em 1.5em!important; font-size: 0.9em!important; 
        }
        #message-container .items-center { 
          background-color: #f9fafb; border: solid 1px #d1d5db47;
          padding: 1em; border-radius: 5px; 
        }

        #message-container span { width: 11em; max-width: 11em; }
    </style>

    @if(session('success'))
        <div id="alert-border-3" class="flex items-center p-4 mb-4 text-green-800 border-t-4 border-green-300 bg-green-50 dark:text-green-400 dark:bg-gray-800 dark:border-green-800" role="alert" style="margin-bottom: 0em; margin-top: 0.5em;">
          <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">
            {{ session('success') }}
          </div>
          <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-green-50 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700"  data-dismiss-target="#alert-border-3" 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>
    @endif

    @if(session('error'))
        <div id="alert-border-2" class="flex items-center p-4 mb-4 text-red-800 border-t-4 border-red-300 bg-red-50 dark:text-red-400 dark:bg-gray-800 dark:border-red-800" role="alert" style="margin-bottom: 0em; margin-top: 0.5em;">
            <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">
                {{ session('error') }}
            </div>
            <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-red-50 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700"  data-dismiss-target="#alert-border-2" 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>
    @endif

    @if ($errors->any())
      <div class="flex p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert" style="margin-bottom: 0em; margin-top: 1em;">
        <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">Danger</span>
        <div>
          <span class="font-medium">Forneça todos os dados para continuar:</span>
            <ul class="mt-1.5 list-disc list-inside">
              @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
              @endforeach
          </ul>
        </div>
      </div>
    @endif

    <div class="mx-auto mt-10 bg-white p-6 shadow-md rounded-lg id-liner-whatsapp">
        <form action="{{env('APP_URL')}}user/whatsapp/messages/store" method="POST" enctype="multipart/form-data" id="sendForm" class="space-y-6">
            @csrf
            <div style="display: none;">
                <input type="text" name="title" value="Novo Envio">
                <input type="text" name="status" value="draft">
            </div>

            <div class="p-5 mb-0 border border-gray-100 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
                <time class="text-lg font-semibold text-gray-900 dark:text-white" style="text-transform: uppercase; font-size: 1em!important;">
                    <input onclick="toggleAllCheckboxes(this)" type="checkbox" name="whatsapp-all" id="whatsapp-all" class="h-4 w-4 text-blue-500 border-gray-300 rounded focus:ring-blue-500" style="margin-right: 0.5em; margin-top: -0.2em;"> 
                    Selecione os números disponíveis:
                </time>
                <hr style="margin-bottom: 0.8em; margin-top: 0.8em;">
                <ol class="" id="navbar-phones">
                    @foreach ($pages as $whatsapp)
                        <li onclick="toggleCheckbox(event, 'whatsapp-{{ $whatsapp->id }}')" style="cursor: pointer">
                            <a class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
                                <input type="checkbox" name="whatsapp_ids[]" value="{{ $whatsapp->id }}" id="whatsapp-{{ $whatsapp->id }}" class="h-4 w-4 text-blue-500 border-gray-300 rounded focus:ring-blue-500" style="margin-right: 1em;">
                                <img class="w-12 h-12 mb-3 me-3 rounded-full sm:mb-0" src="{{ $whatsapp->thumbnail ? asset('thumbnails/avatar/' . $whatsapp->thumbnail) : asset('images/avatar.jpg') }}" alt="Jese Leos image"/>
                                <div class="text-gray-600 dark:text-gray-400">
                                    <div class="text-base font-normal">
                                    <span class="font-medium text-gray-900 dark:text-white">
                                        {{ $whatsapp->name }}
                                    </span>
                                    </div>
                                    <div class="text-sm font-normal" style="display: inline-flex;"><i style="width: 1em; margin-top: -0.15em;" data-feather="phone" class="mr-1"></i> {{ $whatsapp->phone }}</div>
                                </div>
                            </a>
                        </li>
                    @endforeach
                </ol>
            </div>

            <div class="flex items-center justify-center w-full" style="background-color: #f9fafb;">
                <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-34 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
                        <svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
                        </svg>
                        <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">Selecione uma lista de <span class="font-semibold">contatos</span>, em formato <strong>.TXT</strong></p>
                        <span id="file-name" style="margin-bottom: 1em;" class="text-xs text-gray-500 dark:text-gray-400">Nenhum arquivo selecionado</span>
                    </div>
                    <input id="dropzone-file" name="file" type="file" class="hidden" onchange="updateFileName()" required>
                </label>
            </div> 

            <!-- Mensagens Dinâmicas -->
            <div id="message-container" class="space-y-4">
                <div class="flex items-center space-x-4">
                    <textarea name="messages[]" id="message_1" placeholder="Digite sua mensagem"
                        class="flex-1 px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" rows="3"></textarea>
                    <input type="file" name="media[]" id="media_1" accept="image/*,video/*,.pdf,.docx,.txt,.zip,.mp3" 
                        class="hidden" onchange="updateMediaName(this)">
                    <label for="media_1" class="flex items-center px-4 py-2 bg-gray-100 text-gray-700 font-semibold rounded-md cursor-pointer hover:bg-gray-200 focus:ring focus:ring-gray-300 for-buttons">
                        <i data-feather="upload-cloud" class="mr-2" style="margin-right: 1em;"></i>
                        Selecionar Mídia
                    </label>
                    <span id="media-name_1" class="ml-4 text-sm text-gray-500">Nenhum arquivo</span>
              
                    <button onclick="removeMessage(this)" type="button" class="inline-flex items-center p-1  ms-2 text-sm text-red-400 bg-transparent rounded-sm hover:bg-red-200 hover:text-red-900 dark:hover:bg-red-800 dark:hover:text-red-300" data-dismiss-target="#badge-dismiss-red" aria-label="Remove">
                    <svg class="w-2 h-2" 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>

            <div class="flex space-x-4">
                <!-- Botão para Adicionar Mensagem -->
                <button type="button" id="addMessage" 
                    class="w-full py-3 px-4 bg-blue-500 text-white font-semibold rounded-md shadow hover:bg-blue-600 focus:ring focus:ring-blue-300 focus:outline-none" style="display: inline-flex; text-align: center; justify-content: center;">
                    Adicionar Nova Mensagem <i data-feather="message-square" class="mr-2" style="margin-left: 1em;"></i>
                </button>

                <!-- Botão de Envio -->
                <button type="submit" 
                    class="w-full py-3 px-4 bg-green-500 text-white font-semibold rounded-md shadow hover:bg-green-600 focus:ring focus:ring-green-300 focus:outline-none" style="display: inline-flex; text-align: center; justify-content: center;">
                    Enviar mensagens <i data-feather="send" class="mr-2" style="margin-left: 1em;"></i>
                </button>
            </div>

        </form>
    </div>

  <script>
      // Atualiza o nome do arquivo selecionado
      function updateFileName() {
          let fileInput = document.getElementById('dropzone-file');
          let fileName = fileInput.files.length > 0 ? fileInput.files[0].name : 'Nenhum arquivo selecionado';
          document.getElementById('file-name').textContent = fileName;
      }


      function toggleAllCheckboxes(source) {
          const checkboxes = document.querySelectorAll('input[name="whatsapp_ids[]"]');
          checkboxes.forEach(checkbox => {
              checkbox.checked = source.checked;
          });
      }


      function toggleCheckbox(event, checkboxId) {
          const checkbox = document.getElementById(checkboxId);

          // Evita que o clique no checkbox ou outros elementos interfira no evento
          if (event.target.tagName === 'INPUT') {
              return;
          }

          // Alterna o estado do checkbox
          checkbox.checked = !checkbox.checked;
      }

      // Atualiza o nome do arquivo de mídia selecionado
      function updateMediaName(input) {
          let maxLength = 20; // Define o limite de caracteres
          let fileName = input.files.length > 0 ? input.files[0].name : 'Nenhum arquivo';
          let truncatedName = truncateString(''+fileName+'', maxLength);
          let id = input.id.split('_')[1];
          document.getElementById('media-name_' + id).textContent = truncatedName;
      }

      // Função para truncar uma string
      function truncateString(str, num) {
          if (str.length > num) {
              return str.slice(0, num) + '...';
          }
          return str;
      }

      // Adiciona nova mensagem e campo de mídia
      document.getElementById('addMessage').addEventListener('click', function() {
          let container = document.getElementById('message-container');
          let id = container.children.length + 1;

          let newMessage = document.createElement('div');
          newMessage.classList.add('flex', 'items-center', 'space-x-4');
          
          newMessage.innerHTML = `
              <textarea name="messages[]" id="message_${id}" placeholder="Digite sua mensagem"
                  class="flex-1 px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                  rows="3"></textarea>
              <input type="file" name="media[]" id="media_${id}" accept="image/*,video/*,.pdf,.docx,.txt,.zip,.mp3"
                  class="hidden" onchange="updateMediaName(this)">
              <label for="media_${id}" class="flex items-center px-4 py-2 bg-gray-100 text-gray-700 font-semibold rounded-md cursor-pointer hover:bg-gray-200 focus:ring focus:ring-gray-300 for-buttons">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud mr-2" style="margin-right: 1em;"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
                  Selecionar Mídia
              </label>
              <span id="media-name_${id}" class="ml-4 text-sm text-gray-500">Nenhum arquivo</span>
              <button onclick="removeMessage(this)" type="button" class="inline-flex items-center p-1  ms-2 text-sm text-red-400 bg-transparent rounded-sm hover:bg-red-200 hover:text-red-900 dark:hover:bg-red-800 dark:hover:text-red-300" data-dismiss-target="#badge-dismiss-red" aria-label="Remove">
                <svg class="w-2 h-2" 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>
          `;

          container.appendChild(newMessage);
      });

      // Remove uma mensagem e seu campo de mídia
      function removeMessage(button) {
          button.parentElement.remove();
      }
  </script>

</div>
@endsection