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

@section('title', '' . env('APP_NAME_DASHBOARD') . ' | Editar Grupo do Telegram')

@section('content')
    <div class="container mx-auto px-4 py-8">
        <!-- Formulário Principal para Editar o Grupo -->
        <div class="bg-white shadow-md rounded-lg p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-2xl font-bold text-gray-800 uppercase">Editar Grupo</h2>
                <a href="{{ url('/user/telegram/index') }}" class="flex items-center text-blue-600 hover:text-blue-800">
                    <i data-feather="arrow-left" class="mr-2"></i> Voltar
                </a>
            </div>

            <p class="text-gray-600 mb-6" style="margin-top: -1em;">Altere as informações do grupo e clique em "Salvar Alterações".</p>
            <hr style="margin-bottom: 1em;">

            @if ($errors->any())
                <div class="bg-red-50 border-l-4 border-red-400 p-4 mb-6">
                    <ul class="list-disc pl-5 text-red-700">
                        @foreach ($errors->all() as $error)
                            <li class="mt-1">{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <style type="text/css">
                .shadow-md { border: solid 1px #dddddd96; }
            </style>

            <form action="{{ route('modulotelegramboot.update', $group->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Token do Grupo (ocupa 2 colunas) -->
                    <div class="md:col-span-1">
                        <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" value="{{ $group->group_token }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
                            required>
                    </div>

                    <!-- Nome do Grupo (ocupa 1 coluna) -->
                    <div class="md:col-span-1">
                        <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" value="{{ $group->group_name }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
                            required>
                    </div>

                    <!-- Tipo de Grupo (ocupa 1 coluna) -->
                    <div class="md:col-span-1">
                        <label for="group_type" class="block text-sm font-medium text-gray-700">Tipo de Grupo</label>
                        <select name="group_type" id="group_type"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
                            required>
                            <option value="">Selecione um tipo</option>
                            <option value="Mines" {{ $group->group_type == 'Mines' ? 'selected' : '' }}>Mines</option>
                            <option value="BacBo" {{ $group->group_type == 'BacBo' ? 'selected' : '' }}>BacBo</option>
                            <option value="Roleta" {{ $group->group_type == 'Roleta' ? 'selected' : '' }}>Roleta</option>
                            <option value="Aviator" {{ $group->group_type == 'Aviator' ? 'selected' : '' }}>Aviator</option>
                        </select>
                    </div>

                    <!-- ID do Grupo (ocupa 2 colunas) -->
                    <div class="md:col-span-1">
                        <label for="group_id" class="block text-sm font-medium text-gray-700">ID do Grupo</label>
                        <input type="text" name="group_id" id="group_id" value="{{ $group->group_id }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
                            required>
                    </div>

                    <!-- Taxa de Green (ocupa 1 coluna) -->
                    <div class="md:col-span-1">
                        <label for="taxa_de_green" class="block text-sm font-medium text-gray-700">Taxa de Green: %</label>
                        <input type="number" name="taxa_de_green" id="taxa_de_green" value="{{ $group->taxa_de_green }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
                            required max="100" min="1">
                    </div>

                    <!-- Bet (ocupa 1 coluna) -->
                    <div class="md:col-span-1">
                        <label for="bet" class="block text-sm font-medium text-gray-700">Bet</label>
                        <input type="text" name="bet" id="bet" value="{{ $group->bet }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
                            required>
                    </div>
                </div>

                <div class="mt-6">
                    <button type="submit"
                        class="w-full px-6 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 uppercase flex items-center justify-center">
                        <i data-feather="save" class="mr-2"></i> Salvar Alterações
                    </button>
                </div>
            </form>


        </div>

        <!-- Gerenciamento de Mensagens -->
        <div class="mt-10">
            <h3 class="text-xl font-semibold text-gray-800 mb-4" style="text-transform: uppercase; color: #333;">Mensagens do Grupo</h3>
            <hr style="margin-bottom: 1em;">

            <!-- Formulário para Adicionar Nova Mensagem -->
            <div class="bg-white shadow-md rounded-lg p-6 mb-6">
                <h4 class="text-lg font-semibold text-gray-700 mb-4"  style="text-transform: uppercase; color: #333; font-size: 1em;">Adicionar Nova Mensagem</h4>
                <hr style="margin-bottom: 1em;">
                <form action="{{ route('modulotelegramboot.menssage.store', $group->id) }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

                        <!-- Tipo de Mensagem -->
                        <div>
                            <label for="menssage_type" class="block text-sm font-medium text-gray-700">Tipo de
                                Mensagem</label>
                            <select name="menssage_type" id="menssage_type"
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
                                required onchange="capturarValor(this)">
                                <option value="agend" data-group-type="all">Agendamento</option>
                                <option value="info" data-group-type="all">Alerta Informativo</option>
                                <option value="mines-1" data-group-type="Mines">MINES -> 🔔 𝗘𝗡𝗧𝗥𝗔𝗗𝗔
                                    𝗖𝗢𝗡𝗙𝗜𝗥𝗠𝗔𝗗𝗔!</option>
                                <option value="mines-2" data-group-type="Mines">MINES -> ✅ VITÓRIA CONFIRMADA ✅</option>
                                <option value="mines-3" data-group-type="Mines">MINES -> ❌ PERDEMOS</option>

                                <option value="bacbo-1" data-group-type="BacBo">BACBO -> 🔔 𝗘𝗡𝗧𝗥𝗔𝗗𝗔
                                    𝗖𝗢𝗡𝗙𝗜𝗥𝗠𝗔𝗗𝗔!</option>
                                <option value="bacbo-2" data-group-type="BacBo">BACBO -> ✅ VITÓRIA CONFIRMADA ✅</option>
                                <option value="bacbo-3" data-group-type="BacBo">BACBO -> ❌ PERDEMOS</option>

                                <option value="roleta-1" data-group-type="Roleta">ROLETA -> 🔔 𝗘𝗡𝗧𝗥𝗔𝗗𝗔
                                    𝗖𝗢𝗡𝗙𝗜𝗥𝗠𝗔𝗗𝗔!</option>
                                <option value="roleta-2" data-group-type="Roleta">ROLETA -> ✅ VITÓRIA CONFIRMADA ✅</option>
                                <option value="roleta-3" data-group-type="Roleta">ROLETA -> ❌ PERDEMOS</option>

                                <option value="aviator-1" data-group-type="Aviator">AVIATOR -> 🔔 𝗘𝗡𝗧𝗥𝗔𝗗𝗔
                                    𝗖𝗢𝗡𝗙𝗜𝗥𝗠𝗔𝗗𝗔!</option>
                                <option value="aviator-2" data-group-type="Aviator">AVIATOR -> ✅ VITÓRIA CONFIRMADA ✅</option>
                                <option value="aviator-3" data-group-type="Aviator">AVIATOR -> ❌ PERDEMOS</option>
                            </select>
                        </div>

                        <script type="text/javascript">
                            function capturarValor(selectElement) {
                                // Captura o valor da opção selecionada
                                const valorSelecionado = selectElement.value;

                                // Captura o data-attribute da opção selecionada
                                const grupoTipo = selectElement.options[selectElement.selectedIndex].getAttribute('data-group-type');

                                if (valorSelecionado == "mines-1") {
                                    mensagem = '🔔 𝗘𝗡𝗧𝗥𝗔𝗗𝗔 𝗖𝗢𝗡𝗙𝗜𝗥𝗠𝗔𝗗𝗔!\n\n💣 Minas: ${minas}\n🔐 Fazer até ${tentativas} proteções\n⏰ Validade: ${validade} minutos\n\n${mines_game}\n\n🚨 PLATAFORMA REGULARIZADA ⬇️\n🎰 𝗖𝗮𝗱𝗮𝘀𝘁𝗿𝗲-𝘀𝗲: ${plataforma}\n⚠️ NÃO TENTE EM OUTRO SITE ⬆\n\n🔞 Jogue com responsabilidade!';

                                } else if (valorSelecionado == "mines-2") {
                                    mensagem = '✅✅✅ VITÓRIA ✅✅✅';

                                } else if (valorSelecionado == "mines-3") {
                                    mensagem = '❌ PERDEMOS';
                                }


                                if (valorSelecionado == "bacbo-1") {
                                    mensagem = '🔔 𝗘𝗡𝗧𝗥𝗔𝗗𝗔 𝗖𝗢𝗡𝗙𝗜𝗥𝗠𝗔𝗗𝗔!\n\n👉 Entrada: ${bacbo_game}\n🧠 Fazer até ${tentativas} proteções \n🔐 Proteja o Empate\n\n🚨 PLATAFORMA REGULARIZADA ⬇️\n🎰 𝗖𝗮𝗱𝗮𝘀𝘁𝗿𝗲-𝘀𝗲: ${plataforma}\n⚠️ NÃO TENTE EM OUTRO SITE ⬆️\n\n🔞 Jogue com responsabilidade!';

                                } else if (valorSelecionado == "bacbo-2") {
                                    mensagem = '✅✅✅ VITÓRIA ✅✅✅';
                                    
                                } else if (valorSelecionado == "bacbo-3") {
                                    mensagem = '❌ PERDEMOS';
                                }


                                if (valorSelecionado == "roleta-1") {
                                    mensagem = '🔔 𝗘𝗡𝗧𝗥𝗔𝗗𝗔 𝗖𝗢𝗡𝗙𝗜𝗥𝗠𝗔𝗗𝗔!\n\n💸 NOVA ENTRADA!\n👉 Entrada: ${roleta_game} COLUNA\n🟢 Cobrir o ZERO [0️⃣]\n⏩ Fazer até ${tentativas} proteções\n\n🚨 PLATAFORMA REGULARIZADA ⬇️\n🎰 𝗖𝗮𝗱𝗮𝘀𝘁𝗿𝗲-𝘀𝗲: ${plataforma}\n⚠️ NÃO TENTE EM OUTRO SITE ⬆️\n\n🔞 Jogue com responsabilidade!';

                                } else if (valorSelecionado == "roleta-2") {
                                    mensagem = '✅✅✅ VITÓRIA ✅✅✅';
                                    
                                } else if (valorSelecionado == "roleta-3") {
                                    mensagem = '❌ PERDEMOS';
                                }


                                if (valorSelecionado == "aviator-1") {
                                    mensagem = '🤑 ENTRADA CONFIRMADA\n\n🚀 Jogo: Aviator - Oficial\n✅ Sair em: ${aviator_game2}\n🧠 Fazer até ${tentativas} proteções\n\n🚨 PLATAFORMA REGULARIZADA ⬇️\n🎰 𝗖𝗮𝗱𝗮𝘀𝘁𝗿𝗲-𝘀𝗲: ${plataforma}\n\n⚠️ NÃO TENTE EM OUTRO SITE ⬆️\n🔞 Jogue com responsabilidade!';

                                } else if (valorSelecionado == "aviator-2") {
                                    mensagem = '✅✅✅ VITÓRIA ✅✅✅';
                                    
                                } else if (valorSelecionado == "aviator-3") {
                                    mensagem = '❌ PERDEMOS';
                                }

                                // Captura o elemento textarea pelo ID
                                const textarea = document.getElementById('menssage');
                                textarea.value = mensagem;
                            }
                        </script>

                        <!-- Frequência (Hora) -->
                        <div>
                            <label for="type_time" class="block text-sm font-medium text-gray-700" id="label_for"></label>
                            <input type="time" step="1" name="type_time" id="type_time"
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
                                required>
                        </div>


                        <!-- Dias da Semana -->
                        <div>
                            <label for="days" class="block text-sm font-medium text-gray-700">Dias</label>
                            <select name="days" id="days"
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
                                required>
                                <option value="Todos">Todos</option>
                                <option value="Segunda">Segunda</option>
                                <option value="Terça">Terça</option>
                                <option value="Quarta">Quarta</option>
                                <option value="Quinta">Quinta</option>
                                <option value="Sexta">Sexta</option>
                                <option value="Sábado">Sábado</option>
                                <option value="Domingo">Domingo</option>
                            </select>
                        </div>
                        <!-- Mensagem -->
                        <div class="md:col-span-2 lg:col-span-3">
                            <label for="menssage" class="block text-sm font-medium text-gray-700">Mensagem</label>
                            <textarea name="menssage" id="menssage"
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
                                rows="8" required></textarea>
                        </div>

                        <!-- Upload de Imagem -->
                        <div class="lg:col-span-3">
                            <label for="image" class="block text-sm font-medium text-gray-700">Upload de Imagem</label>
                            <input type="file" name="image" id="image"
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                        </div>

                    </div>

                    <!-- Botão de Adicionar -->
                    <div class="mt-6">
                        <button type="submit"
                            class="w-full px-6 py-2 bg-green-600 text-white font-medium rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 uppercase flex items-center justify-center">
                            <i data-feather="plus" class="mr-2"></i> Adicionar Mensagem
                        </button>

                    </div>
                </form>

            </div>

            <!-- Lista de Mensagens Cadastradas -->
            <h4 class="text-lg font-semibold text-gray-800 mb-4">Mensagens Cadastradas</h4>
            <div class="space-y-6">
                @foreach ($menssages as $menssage)
                    <div class="bg-white shadow-md rounded-lg p-6 mb-6">
                        <form action="{{ route('modulotelegramboot.menssage.update', [$group->id, $menssage->id]) }}"
                            method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-4">
                                                                <div class='md:col-span-{{$grid_tail}}'>
                                    <label  for="menssage_type_{{ $menssage->id }}"
                                        class="block text-sm font-medium text-gray-700">Tipo de Mensagem</label>
                                    <select style="{{$type}}" name="menssage_type" id="menssage_type_{{ $menssage->id }}"
                                        class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">

                                        <option value="info" data-group-type="all"
                                            {{ $menssage->menssage_type == 'agend' ? 'selected' : '' }}>Agendamento</option>

                                        <option value="info" data-group-type="all"
                                            {{ $menssage->menssage_type == 'info' ? 'selected' : '' }}>Alerta Informativo</option>

                                        <option value="mines-1" data-group-type="Mines"
                                            {{ $menssage->menssage_type == 'mines-1' ? 'selected' : '' }}>MINES -> 🔔
                                            𝗘𝗡𝗧𝗥𝗔𝗗𝗔 𝗖𝗢𝗡𝗙𝗜𝗥𝗠𝗔𝗗𝗔!</option>
                                        <option value="mines-2" data-group-type="Mines"
                                            {{ $menssage->menssage_type == 'mines-2' ? 'selected' : '' }}>MINES -> ✅
                                            VITÓRIA CONFIRMADA ✅</option>
                                        <option value="mines-3" data-group-type="Mines"
                                            {{ $menssage->menssage_type == 'mines-3' ? 'selected' : '' }}>MINES ->
                                            ❌ PERDEMOS</option>

                                        <option value="bacbo-1" data-group-type="BacBo"
                                            {{ $menssage->menssage_type == 'bacbo-1' ? 'selected' : '' }}>BACBO -> 🔔
                                            𝗘𝗡𝗧𝗥𝗔𝗗𝗔 𝗖𝗢𝗡𝗙𝗜𝗥𝗠𝗔𝗗𝗔!</option>
                                        <option value="bacbo-2" data-group-type="BacBo"
                                            {{ $menssage->menssage_type == 'bacbo-2' ? 'selected' : '' }}>BACBO -> ✅
                                            VITÓRIA CONFIRMADA ✅</option>
                                        <option value="bacbo-3" data-group-type="BacBo"
                                            {{ $menssage->menssage_type == 'bacbo-3' ? 'selected' : '' }}>BACBO ->
                                            ❌ PERDEMOS</option>

                                        <option value="roleta-1" data-group-type="Roleta"
                                            {{ $menssage->menssage_type == 'roleta-1' ? 'selected' : '' }}>ROLETA -> 🔔
                                            𝗘𝗡𝗧𝗥𝗔𝗗𝗔 𝗖𝗢𝗡𝗙𝗜𝗥𝗠𝗔𝗗𝗔!</option>
                                        <option value="roleta-2" data-group-type="Roleta"
                                            {{ $menssage->menssage_type == 'roleta-2' ? 'selected' : '' }}>ROLETA -> ✅
                                            VITÓRIA CONFIRMADA ✅</option>

                                        <option value="roleta-3" data-group-type="Roleta"
                                            {{ $menssage->menssage_type == 'roleta-3' ? 'selected' : '' }}>ROLETA ->
                                            ❌ PERDEMOS</option>


                                        <option {{ $menssage->menssage_type == 'aviator-1' ? 'selected' : '' }} value="aviator-1" data-group-type="Aviator">AVIATOR -> 🔔 𝗘𝗡𝗧𝗥𝗔𝗗𝗔 𝗖𝗢𝗡𝗙𝗜𝗥𝗠𝗔𝗗𝗔!</option>
                                        <option {{ $menssage->menssage_type == 'aviator-2' ? 'selected' : '' }} value="aviator-2" data-group-type="Aviator">AVIATOR -> ✅ VITÓRIA CONFIRMADA ✅</option>
                                        <option {{ $menssage->menssage_type == 'aviator-3' ? 'selected' : '' }} value="aviator-3" data-group-type="Aviator">AVIATOR -> ❌ PERDEMOS</option>
                                    </select>
                                </div>

                                <div style="display: {{$display}};">
                                    <label for="type_time_{{ $menssage->id }}"
                                        class="block text-sm font-medium text-gray-700">{{$grid}}</label>
                                    <input type="time" step="1" name="type_time"
                                        id="type_time_{{ $menssage->id }}" value="{{ $menssage->type_time }}"
                                        class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                                </div>

                                <!-- Dias da Semana -->
                                <div style="display: {{$display}};">
                                    <label for="days_{{ $menssage->id }}"
                                        class="block text-sm font-medium text-gray-700">Dias</label>
                                    <select name="days" id="days_{{ $menssage->id }}"
                                        class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                                        <option value="Todos" {{ $menssage->days == 'Todos' ? 'selected' : '' }}>Todos
                                        </option>
                                        <option value="Segunda" {{ $menssage->days == 'Segunda' ? 'selected' : '' }}>
                                            Segunda</option>
                                        <option value="Terça" {{ $menssage->days == 'Terça' ? 'selected' : '' }}>Terça
                                        </option>
                                        <option value="Quarta" {{ $menssage->days == 'Quarta' ? 'selected' : '' }}>Quarta
                                        </option>
                                        <option value="Quinta" {{ $menssage->days == 'Quinta' ? 'selected' : '' }}>Quinta
                                        </option>
                                        <option value="Sexta" {{ $menssage->days == 'Sexta' ? 'selected' : '' }}>Sexta
                                        </option>
                                        <option value="Sábado" {{ $menssage->days == 'Sábado' ? 'selected' : '' }}>Sábado
                                        </option>
                                        <option value="Domingo" {{ $menssage->days == 'Domingo' ? 'selected' : '' }}>
                                            Domingo</option>
                                    </select>
                                </div>

                                <!-- Mensagem -->
                                <div class="md:col-span-3">
                                    <label for="menssage_{{ $menssage->id }}"
                                        class="block text-sm font-medium text-gray-700">Mensagem</label>
                                    <textarea name="menssage" id="menssage_{{ $menssage->id }}"
                                        class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
                                        rows="8">{{ $menssage->menssage }}</textarea>
                                </div>

                                <!-- Exibição da Imagem (caso haja) -->
                                @if ($menssage->image)
                                    <div class="md:col-span-3 mt-0">
                                        <img style="width: 5em; border-radius: 5px;" src="{{ asset('thumbnails/' . $menssage->image) }}" alt="Imagem da Mensagem"
                                            class="w-full h-auto rounded-md shadow-lg mt-2">
                                    </div>
                                @endif

                                <!-- Upload de Imagem -->
                                <div class="md:col-span-3">
                                    <label for="image_{{ $menssage->id }}"
                                        class="block text-sm font-medium text-gray-700">Upload de Imagem</label>
                                    <input type="file" name="image" id="image_{{ $menssage->id }}"
                                        class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                                </div>
                            </div>

                            <!-- Botões -->
                            <div class="flex justify-between items-center mt-6">
                                <!-- Botão Atualizar -->
                                <button type="submit"
                                    class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 uppercase flex items-center justify-center">
                                    <i data-feather="refresh-cw" class="mr-2"></i> Atualizar
                                </button>

                                <!-- Botão Excluir -->
                                <button type="button" onclick="confirmDeletion({{ $menssage->id }})"
                                    class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 uppercase flex items-center justify-center">
                                    <i data-feather="trash-2" class="mr-2"></i> Excluir
                                </button>

                            </div>
                        </form>
                        <!-- Formulário de Exclusão -->
                        <form id="delete-form-{{ $menssage->id }}"
                            action="{{ route('modulotelegramboot.menssage.destroy', [$group->id, $menssage->id]) }}"
                            method="POST" style="display: none;">
                            @csrf
                            @method('DELETE')
                        </form>
                    </div>
                @endforeach

            </div>
        </div>
    </div>

    <!-- Script para confirmação de exclusão -->
    <script>
        function confirmDeletion(id) {
            if (confirm('Tem certeza que deseja excluir esta mensagem?')) {
                document.getElementById('delete-form-' + id).submit();
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Função para filtrar os tipos de mensagens de acordo com o tipo de grupo selecionado
            function filterMessageType() {
                var groupType = document.getElementById('group_type').value;
                var messageTypeSelect = document.getElementById('menssage_type');
                var options = messageTypeSelect.options;

                // Mostrar todas as opções de mensagem
                for (var i = 0; i < options.length; i++) {
                    var option = options[i];
                    if (option.value === 'info' || option.dataset.groupType === groupType || option.dataset
                        .groupType === 'all') {
                        option.style.display = 'block';
                    } else {
                        option.style.display = 'none';
                    }
                }
            }

            // Chamar a função ao carregar a página para filtrar com base no valor selecionado inicialmente
            filterMessageType();

            // Adicionar o evento de change para refiltrar sempre que o tipo de grupo for alterado
            document.getElementById('group_type').addEventListener('change', filterMessageType);

            // Função para desabilitar os campos de frequência e dias quando o tipo de mensagem não for informativa
            document.getElementById('menssage_type').addEventListener('change', function() {
                var selectedType = this.value;
                var timeInput = document.getElementById('type_time');
                var daysSelect = document.getElementById('days');

                if (selectedType == "info") {
                    document.getElementById("label_for").textContent = "A cada x tempo enviaremos";
                } else if (selectedType == "agend") {
                    document.getElementById("label_for").textContent = "Enviaremos sempre no horário x";
                }

                if (selectedType === 'info' || selectedType === 'agend') {
                    timeInput.style.pointerEvents  = 'auto';
                    daysSelect.style.pointerEvents  = 'auto';
                    // timeInput.disabled = false;
                    // daysSelect.disabled = false;
                } else {
                    timeInput.style.visibility = 'none';
                    daysSelect.style.visibility = 'none';

                    // timeInput.disabled = true;
                    // daysSelect.disabled = true;
                }
            });

            // Chamar a função de desabilitar os campos se a página já tiver um tipo de mensagem selecionado
            document.getElementById('menssage_type').dispatchEvent(new Event('change'));
        });
        document.addEventListener('DOMContentLoaded', function() {
            // Função para filtrar os tipos de mensagens de acordo com o tipo de grupo selecionado
            function filterMessageType(groupType, messageTypeSelectId) {
                var messageTypeSelect = document.getElementById(messageTypeSelectId);
                var options = messageTypeSelect.options;

                // Mostrar todas as opções de mensagem
                for (var i = 0; i < options.length; i++) {
                    var option = options[i];
                    if (option.value === 'info' || option.dataset.groupType === groupType || option.dataset
                        .groupType === 'all') {
                        option.style.display = 'block';
                    } else {
                        option.style.display = 'none';
                    }
                }
            }

            // Aplicar a função para todas as mensagens cadastradas ao carregar a página
            var groupType = document.getElementById('group_type').value;
            @foreach ($menssages as $menssage)
                filterMessageType(groupType, 'menssage_type_{{ $menssage->id }}');

                // Função para desabilitar os campos de frequência e dias quando o tipo de mensagem não for informativa
                document.getElementById('menssage_type_{{ $menssage->id }}').addEventListener('change',
                    function() {
                        var selectedType = this.value;
                        var timeInput = document.getElementById('type_time_{{ $menssage->id }}');
                        var daysSelect = document.getElementById('days_{{ $menssage->id }}');

                        if (selectedType === 'info') {
                            timeInput.disabled = false;
                            daysSelect.disabled = false;
                        } else {
                            timeInput.disabled = true;
                            daysSelect.disabled = true;
                        }
                    });

                // Chamar a função de desabilitar os campos se a página já tiver um tipo de mensagem selecionado
                document.getElementById('menssage_type_{{ $menssage->id }}').dispatchEvent(new Event('change'));
            @endforeach

            // Função para refiltrar o tipo de mensagem quando o tipo de grupo é alterado
            document.getElementById('group_type').addEventListener('change', function() {
                var newGroupType = this.value;
                @foreach ($menssages as $menssage)
                    filterMessageType(newGroupType, 'menssage_type_{{ $menssage->id }}');
                @endforeach
            });
        });
    </script>
@endsection