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

@section('title', env('APP_NAME_DASHBOARD') . ' | Gerenciar Grupos do Telegram')

@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">Gerenciar Grupos do Telegram</h2>
            <p class="text-gray-600 mt-1">Essa funcionalidade é essencial para gerenciar grupos de Telegram associados à plataforma.</p>
        </div>
        <a href="{{ route('modulotelegramboot.create') }}"
            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="plus" class="mr-2"></i> ADICIONAR NOVO GRUPO
        </a>
    </div>


    <!-- Formulário de Filtro -->
    <div class="bg-white shadow rounded-lg p-6 mb-6">
        <form method="GET" action="{{ route('modulotelegramboot.index') }}">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                    <label for="group_token" class="block text-sm font-medium text-gray-700">Token do Grupo</label>
                    <input type="text" name="group_token" id="group_token" autocomplete="off"
                        class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
                        placeholder="Token do Grupo" value="{{ request('group_token') }}">
                </div>
                <div>
                    <label for="group_name" class="block text-sm font-medium text-gray-700">Nome do Grupo</label>
                    <input type="text" name="group_name" id="group_name" autocomplete="off"
                        class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
                        placeholder="Nome do Grupo" value="{{ request('group_name') }}">
                </div>
                <div class="flex items-end">
                    <button type="submit"
                        class="w-full inline-flex items-center justify-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="search" class="mr-2"></i> FILTRAR
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Mensagem de Sucesso -->
    @if (session('success'))
        <div class="flex items-center p-4 mb-6 text-sm text-green-700 bg-green-100 rounded-lg" role="alert">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path
                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-4l6-6-1.414-1.414L9 11.172 6.414 8.586 5 10l4 4z">
                </path>
            </svg>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    <!-- Tabela de Grupos -->
    @if ($groups->count() > 0)
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <!-- <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Token do Grupo
                        </th> -->
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Nome do Grupo
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Tipo de Grupo
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Data de Criação
                        </th>
                        <th scope="col"
                            class="px-0 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Alertas
                        </th>
                        <th scope="col"
                            class="px-0 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Agendamento
                        </th>
                        <th scope="col"
                            class="px-0 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Sinais
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Ações
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach ($groups as $group)
                        @php
                            $created_at = new DateTime($group->created_at);
                            $onlyDate = $created_at->format('d/m/Y');
                        @endphp
                        <tr class="hover:bg-gray-50">
                           <!--  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ $group->group_token }}
                            </td> -->
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ $group->group_name }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ $group->group_type }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ $onlyDate }}
                            </td>

                            <td>
                                <label class="inline-flex items-center me-5 cursor-pointer">
                                  <input  onclick="alerts('check_town_1', '{{ $group->id }}')" id="{{ $group->id }}_check_town_1" type="checkbox" value="" class="sr-only peer">
                                  <div class="relative w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
                                  <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300"></span>
                                </label>
                            </td>
                            <td>
                                <label class="inline-flex items-center me-5 cursor-pointer">
                                  <input  onclick="alerts('check_town_2', '{{ $group->id }}')" id="{{ $group->id }}_check_town_2" type="checkbox" value="" class="sr-only peer">
                                  <div class="relative w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
                                  <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300"></span>
                                </label>
                            </td>
                            <td>
                                <label class="inline-flex items-center me-5 cursor-pointer">
                                  <input  onclick="alerts('check_town_3', '{{ $group->id }}')" id="{{ $group->id }}_check_town_3" type="checkbox" value="" class="sr-only peer">
                                  <div class="relative w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
                                  <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300"></span>
                                </label>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <div class="flex items-center justify-end space-x-4">
                                    <a href="{{ route('modulotelegramboot.edit', $group->id) }}"
                                        class="text-indigo-600 hover:text-indigo-900">
                                        <i data-feather="edit-2"></i>
                                    </a>
                                    <form action="{{ route('modulotelegramboot.destroy', $group->id) }}" method="POST"
                                        onsubmit="return confirm('Tem certeza que deseja excluir este grupo?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-red-600 hover:text-red-800">
                                            <i data-feather="trash-2"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                            
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
            <script type="text/javascript">
                function alerts(val1, val2) {

                    var isChecked = document.getElementById(''+val2+'_'+val1+'').checked;
                    if (isChecked) {
                        values = "true";
                    } else {
                        values = "false";
                    }

                    $.ajax({
                        type: "POST",
                        url: "{{ route('modulotelegramboot.Status') }}", // substitua pelo URL do endpoint onde quer enviar os dados
                        data: {
                            valor1: val1,
                            valor2: val2,
                            valor3: values,
                            _token: '{{ csrf_token() }}' // Incluindo o token CSRF

                        },
                        success: function(response) {
                            //alert("Sucesso: " + response);
                        },
                        error: function(xhr, status, error) {
                            //alert("Erro: " + error);
                        }
                    });
                }
            </script>

            <!-- Paginação -->
            <div class="px-6 py-4">
                {{ $groups->links() }}
            </div>
        </div>
    @else
        <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role="alert">
            <p class="font-bold">Atenção</p>
            <p>Não foram encontrados grupos disponíveis no banco de dados.</p>
        </div>
    @endif
</div>
@endsection