@extends('layouts.publicador.novo_padrao')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <linK rel="stylesheet" href="{{ asset('css/publicador.css') }}">

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

        .listanoticias {
            max-height: 150px;
            overflow-y: auto;
            background-color: aliceblue;
            padding: 10px 7px;
            box-shadow: inset 0px 0px 6px -3px #000000;
            border-radius: 5px;
        }

        td.progresso {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            flex-wrap: nowrap;
            width: 150px;
        }

        td.progresso p {
            margin-bottom: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-content: flex-start;
            flex-wrap: wrap;
        }


        td.acoes {
            max-width: 50px;
        }

        td.atualizado,
        th {
            text-align: center;
        }

        .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;
            flex-wrap: wrap;
        }

        td.noticias {
            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;
        }



        .noticias: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;
        }

        table td,
        table th {
            font-size: 14px;
        }

        .noticias:hover span.tooltiptext {

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


        }

        .listmodalcheck {
            padding-bottom: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .form-control.half-width {
            max-width: 49%;
        }

        .form-group.halfs {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: flex-start;
            flex-wrap: wrap;
            column-gap: 5px;
        }

        .form-group.halfs label,
        .listbuttonscreate label {
            width: 100%;
        }

        th.namelista {
            text-align: left;
            max-width: 12ch;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>

    <div class="container">
        <div class="content-wrapper">

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

            <hr>

            <div class="row actionbtns">
                <div class="col"></div>
                <div class="col text-right">
                    <a href="#" onclick="CriaPauta()">
                        <button type="button" class="btn btn-success"><i class="fa-regular fa-clock"></i> Criar/Agendar
                            Pauta</button>
                    </a>
                    <a href="{{ route('publicador.geracao.newsletter.grupos') }}">
                        <button type="button" class="btn btn-primary"><i class="fa-solid fa-people-group"></i>
                            Grupos</button>
                    </a>
                </div>
            </div>
            <br>

            <!-- verifica se possui mensagem de erro ou de sucesso -->
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>Sucesso!</strong> {{ session('success') }}

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

                </div>
            @endif

            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th scope="col">Lista</th>
                        <th scope="col">Enviado para</th>
                        <th scope="col">Noticias</th>
                        <th scope="col">Status</th>
                        <th scope="col">Att. por</th>
                        <th scope="col">Progresso</th>
                        <th scope="col">Agendado Para</th>
                        {{--  <th scope="col">Env. Em</th> --}}
                        <th scope="col">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($envios as $envio)
                        <tr>
                            <th scope="row" class="namelista">{{ $envio->titulo }}</th>
                            <td class="grupos">Grupo 01</td>
                            <td class="noticias">
                                <span class="tooltiptext">
                                    @foreach ($envio->titulo_noticias as $titulo)
                                        {{ $titulo !== end($envio->titulo_noticias) ? $titulo . ', ' : $titulo }}
                                    @endforeach
                                </span>
                                {{ implode(',', $envio->titulo_noticias) }}
                            </td>
                            <td class="enviado">{{ $envio->status }}</td>
                            <td class="atualizado">
                                <span class="nameuserdot create">{{ $envio->atualizado_por }}</span>
                            </td>
                            <td class="progresso">
                                <p><b>Total:</b> {{ $envio->a_enviar }}</p>
                                <p><b>Enviados:</b> {{ $envio->enviados }}</p>
                                <p><b>Restante:</b> {{ $envio->a_enviar - $envio->enviados }}</p>
                            </td>
                            <td class="agendado">{{ $envio->enviar_em }}</td>
                            {{--  <td class="enviado">{{ $envio->data_envio }}</td> --}}
                            <td class="acoes">
                                <button class="btn btn-danger"><i class="fa-solid fa-ban"></i></button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="text-center mt-4">
                {{ $envios->links() }}
            </div>


            <script>
                function CriaPauta() {

                    var htmlestrutura = '<form id="createpauta" class="text-left" method="GET" action="">';
                    htmlestrutura += '<div class="form-group">';
                    htmlestrutura += '<label for="titulo_pauta">Título</label>';
                    htmlestrutura += '<input type="text" class="form-control" id="titulo_pauta" name="titulo_pauta">';
                    htmlestrutura += '</div>';
                    htmlestrutura += '<div class="form-group halfs">';
                    htmlestrutura += '<label for="agendamento">Agendar para:</label>';
                    htmlestrutura +=
                        '<input type="date" class="form-control half-width" id="dataagendamento_pauta" name="agendamento" value="{{ today() }}">';
                    htmlestrutura +=
                        '<input type="time" class="form-control half-width" id="horarioagendamento_pauta" name="horarioagendamento" value="{{ now() }}">';
                    htmlestrutura += '</div>';
                    htmlestrutura += '<div class="form-group">';
                    htmlestrutura += '<label for="titulo_pauta">Enviar para os grupos:</label>';
                    htmlestrutura += '<div class="listanoticias">';
                    @foreach ($grupos as $grupo)
                        htmlestrutura += '<div class="form-check listmodalcheck">';
                        htmlestrutura +=
                            '<input class="form-check-input grupodeusuarios" type="checkbox" id="gruposelect{{ $grupo->id }}" value="{{ $grupo->id }}">';
                        htmlestrutura += '<label class="form-check-label" for="gruposelect">';
                        htmlestrutura += '{{ $grupo->nome }}';
                        htmlestrutura += '</label>';
                        htmlestrutura += '</div>';
                    @endforeach
                    htmlestrutura += '</div>';
                    htmlestrutura += '</div>';
                    htmlestrutura += '<div class="form-group listbuttonscreate">';
                    htmlestrutura += '<label for="titulo_pauta">Selecionar notícias:</label>';
                    htmlestrutura +=
                        '<a href="#" onClick="marcartodos(`createpauta`)"><button type="button" class="btn btn-info"><i class="fa-solid fa-check"></i> Selecionar todas</button></a>';
                    htmlestrutura +=
                        '<a href="#" onClick="desmarcartodos(`createpauta`)"><button type="button" class="btn btn-danger"><i class="fa-solid fa-xmark"></i> Desmarcar todas</button></a>';
                    htmlestrutura += '</div>';
                    htmlestrutura += '<div class="listanoticias">';
                    @foreach ($noticias as $noticia)
                        htmlestrutura += '<div class="form-check listmodalcheck">';
                        htmlestrutura +=
                            '<input type="checkbox" class="form-check-input noticias" id="teste" value="{{ $noticia->id }}">';
                        htmlestrutura += '<label class="form-check-label" for="teste">{{ $noticia->titulo }}</label>';
                        htmlestrutura += '</div>';
                    @endforeach ;
                    htmlestrutura += '</div>';
                    htmlestrutura += '</form>';


                    Swal.fire({
                        title: 'Criar pauta',
                        html: htmlestrutura,
                        confirmButtonText: 'Criar',
                        focusConfirm: false,
                        preConfirm: () => {
                            const NomedoGrupo = document.querySelector('#titulo_pauta').value;
                            const dataagendamento = document.querySelector('input#dataagendamento_pauta').value;
                            const horarioagendamento = document.querySelector('input#horarioagendamento_pauta').value;
                            const checkboxes = document.querySelectorAll(
                                `input[type="checkbox"].grupodeusuarios:checked`);
                            let usuarios = [];
                            checkboxes.forEach((checkbox) => {
                                usuarios.push(checkbox.value);
                            });
                            //converte o usuarios para uma string com os numeros separados por virgula
                            usuarios = usuarios.join(',');
                            const noticiasselecionadas = document.querySelectorAll(
                                `input[type="checkbox"].noticias:checked`);
                            let noticias = [];
                            noticiasselecionadas.forEach((noticiasselecionada) => {
                                noticias.push(noticiasselecionada.value);
                            });


                            //vai para a parte de criar a pauta /publicador/geracao-atitude/newsletter/salvarpauta
                            window.location.href =
                                `/publicador/geracao-atitude/newsletter/salvarpauta?titulo_pauta=${NomedoGrupo}&agendamento=${dataagendamento}&horarioagendamento=${horarioagendamento}&grupos=${usuarios}&noticias=${noticias}`;

                        }
                    })



                }

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

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

        </div>
    </div>
@endsection