@extends('layouts.publicador.novo_padrao')
@section('content')
    <style>
        .listaparticipantes {
            overflow-y: scroll;
            max-height: 20vh;
        }

        .listaparticipantes .form-check {
            border-bottom: solid 1px #00000059;
            padding: 10px 1.5rem;
        }

        .form-group.listbuttonscreate {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        td.description {
            max-width: 30ch;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        td.created_by,
        td.updated_by,
        td.participants {
            text-align: center;
        }

        span.nameuserdot {
            background-color: #004071;
            color: #ffffff;
            font-size: 11px;
            padding: 1px 10px;
            border-radius: 15px;
        }



        .description:hover {
            cursor: pointer;
        }

        span.tooltiptext {
            position: absolute;
            margin-top: 0rem;
            max-width: 0vw;
            white-space: normal;
            background-color: #138bb2;
            padding: 0px;
            font-size: 0px;
            border-radius: 10px;
            color: #ffffff;
            box-shadow: 5px 5px 5px -5px #000;
            transition: .3s;
            opacity: 0;
        }

        .description:hover span.tooltiptext {

            margin-top: -3rem;
            max-width: 30vw;
            font-size: 14px;
            padding: 10px;
            opacity: 1;


        }
    </style>

    <div class="container my-4 py-3">
        <h4 class="mb-4">
            Geração Atitude / <a href="{{ route('publicador.geracao.newsletter.index') }}">Newsletter</a>
            <small class="text-muted">Grupos</small>
        </h4>

        <hr>

        <!-- se tiver mensagem de sucesso mostra mensagem -->
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>{{ session('success') }}</strong>
            </div>
        @endif

        <!-- se tiver mensagem de erro mostra mensagem -->

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <strong>{{ session('error') }}</strong>
            </div>
        @endif


        <div class="row actionbtns">
            <div class="col"></div>
            <div class="col text-right">
                <a href="#" onclick="CriaGrupo()"><button type="button" class="btn btn-primary">Criar
                        Grupo</button></a>

            </div>
        </div>
        <br><br>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th scope="col" class="name">Nome</th>
                    <th scope="col" class="description">Descricao</th>
                    <th scope="col" class="created_by">Criado por</th>
                    <th scope="col" class="updated_by">Atualizado por</th>
                    <th scope="col" class="participants">Participantes</th>
                    <th scope="col" class="actions">Ações</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($grupos as $grupo)
                    <tr>
                        <th scope="row" class="name">{{ $grupo->nome }}</th>
                        <td class="description">
                            <span class="tooltiptext">{{ $grupo->descricao }}</span>
                            {{ $grupo->descricao }}

                        </td>
                        <td class="created_by"><span class="nameuserdot create">{{ $grupo->atualizado_por }}</span></td>
                        <td class="updated_by"><span class="nameuserdot update">{{ $grupo->atualizado_por }}</span></td>
                        <td class="participants">{{ $grupo->qtd_participantes }}</td>
                        <td class="actions">
                            <a href="#" onclick="EditarGrupo({{ $grupo->id }})"><button type="button"
                                    class="btn btn-primary"><i class="fa-solid fa-pencil"></i></button></a>
                            @if ($grupo->qtd_participantes != 'Todos')
                                <a href="{ { route('publicador.geracao.newsletter.grupos.delete', $grupo->id) }}"><button
                                        type="button" class="btn btn-danger"><i class="fa-solid fa-trash"></i></button></a>
                            @endif
                        </td>
                    </tr>
                @endForEach
            </tbody>
        </table>


        <script>
            function CriaGrupo() {


                Swal.fire({
                    title: 'Criar Grupo',
                    html: '<form id="myForm" class="text-left" method="GET" action="/publicador/geracao-atitude/newsletter/salvargrupos">' +
                        '<div class="form-group">' +
                        '<label for="nome_grupo">Nome do grupo</label>' +
                        '<input type="text" class="form-control" id="nome_grupo" name="nome_grupo">' +
                        '</div>' +
                        '<div class="form-group">' +
                        '<label for="descricao">Descrição</label>' +
                        '<textarea class="form-control" id="descricao" name="descricao"></textarea>' +
                        '</div>' +
                        '<div class="form-group listbuttonscreate">' +
                        '<a href="#" onClick="marcartodos(`myForm`)"><button type="button" class="btn btn-info"><i class="fa-solid fa-check"></i> Selecionar todos</button></a>' +
                        '<a href="#" onClick="desmarcartodos(`myForm`)"><button type="button" class="btn btn-danger"><i class="fa-solid fa-xmark"></i> Desmarcar todos</button></a>' +
                        '</div>' +
                        '<div class="listaparticipantes">' +
                        @foreach ($participantes as $participante)
                            '<div class="form-check">' +
                            '<input type="checkbox" class="form-check-input" id="teste" value="{{ $participante->id }}">' +
                            '<label class="form-check-label" for="teste">{{ $participante->email }}</label>' +
                            '</div>' +
                        @endforeach
                    '</div>' +
                    '</form>',
                    confirmButtonText: 'Criar',
                    focusConfirm: false,
                    preConfirm: () => {
                        const NomedoGrupo = document.querySelector('#nome_grupo').value;
                        const DescricaodoGrupo = document.querySelector('#descricao').value;
                        const checkboxes = document.querySelectorAll(`input[type="checkbox"]:checked`);
                        let values = [];
                        checkboxes.forEach((checkbox) => {
                            values.push(checkbox.value);
                        });
                        //converte o values para uma string com os numeros separados por virgula
                        values = values.join(',');
                        console.log(values, NomedoGrupo, DescricaodoGrupo);

                        //vai para o caminho publicador/geracao-atitude/newsletter/salvargrupos com os parametros via get
                        window.location.href =
                            '/publicador/geracao-atitude/newsletter/salvargrupos?participantes=[' + values +
                            ']&nome_grupo=' + NomedoGrupo + '&descricao=' + DescricaodoGrupo;

                    }
                })



            }

            function marcartodos(form) {
                document.querySelectorAll('#' + form + ' input').forEach(function(obj) {
                    obj.checked = true;
                })
            }

            function desmarcartodos(form) {
                document.querySelectorAll('#' + form + ' input').forEach(function(obj) {
                    obj.checked = false;
                })
            }

            function EditarGrupo(id) {
                //pegar os dados do grupo via ajax(get) com a rota pegargrupo/{id}
                $.get('/publicador/geracao-atitude/newsletter/pegargrupo/' + id, function(data) {

                    if (data.lista_participantes == "Todos") {
                        var btnsselecionar = '<hr>';
                        var participantes = '';
                    } else {
                        var btnsselecionar = '<div class="form-group listbuttonscreate">' +
                            '<a href="#" onClick="marcartodos(`EDITmyForm`)"><button type="button" class="btn btn-info"><i class="fa-solid fa-check"></i> Selecionar todos</button></a>' +
                            '<a href="#" onClick="desmarcartodos(`EDITmyForm`)"><button type="button" class="btn btn-danger"><i class="fa-solid fa-xmark"></i> Desmarcar todos</button></a>' +
                            '</div>';

                        var participantes = '<div class="listaparticipantes">';
                        data.lista_participantes.forEach(function(participante) {
                            //verifica se o id do participante esta na lista de participantes do grupo ( data.ids_participantes)
                            if (data.ids_participantes.includes(participante.id)) {
                                var checked = 'checked';
                            } else {
                                var checked = '';
                            }
                            participantes += '<div class="form-check">' +
                                '<input type="checkbox" class="form-check-input" id="EDITteste" value="' +
                                participante.id + '" ' + checked + '>' +
                                '<label class="form-check-label" for="teste">' + participante.email +
                                '</label>' +
                                '</div>';
                        });
                        participantes += '</div>';
                    }


                    Swal.fire({
                        title: 'Editar ' + data.nome,
                        html: '<form id="EDITmyForm" class="text-left" method="GET" action="/publicador/geracao-atitude/newsletter/atualizargrupo">' +
                            '<div class="form-group">' +
                            '<label for="nome_grupo">Nome do grupo</label>' +
                            '<input type="text" class="form-control" id="EDITnome_grupo" name="nome_grupo" value="' +
                            data.nome + '">' +
                            '</div>' +
                            '<div class="form-group">' +
                            '<label for="descricao">Descrição</label>' +
                            '<textarea class="form-control" id="EDITdescricao" name="descricao">' + data
                            .descricao + '</textarea>' +
                            '</div>' +
                            btnsselecionar +
                            participantes +
                            '</form>',
                        confirmButtonText: 'Criar',
                        focusConfirm: false,
                        preConfirm: () => {
                            const idgrupo = id;
                            const NomedoGrupo = document.querySelector('#EDITnome_grupo').value;
                            const DescricaodoGrupo = document.querySelector('#EDITdescricao').value;
                            const checkboxes = document.querySelectorAll(
                                `#EDITmyForm input[type="checkbox"]:checked`);
                            let values = [];
                            checkboxes.forEach((checkbox) => {
                                values.push(checkbox.value);
                            });
                            //converte o values para uma string com os numeros separados por virgula
                            values = values.join(',');
                            console.log(values, NomedoGrupo, DescricaodoGrupo);

                            //vai para o caminho publicador/geracao-atitude/newsletter/salvargrupos com os parametros via get
                            window.location.href =
                                '/publicador/geracao-atitude/newsletter/atualizargrupo?participantes=[' +
                                values +
                                ']&nome_grupo=' + NomedoGrupo + '&descricao=' + DescricaodoGrupo +
                                '&idgrupo=' + idgrupo;

                        }
                    });


                });

            }
        </script>


    </div>
@endsection