@extends('layouts.admin')

@section('content')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fas fa-home"></i> Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Enviar Emails</li>
        </ol>
    </nav>

    <div class="container-fluid">
        <div class="card">
            {{-- Messagem de Sucesso --}}
            @if(session('mensagem'))
                <div class="row">
                    <div class="col-md-12">
                        <div style="margin-bottom: 0px!important;" class="alert alert-success text-center">
                            <p style="margin-bottom: 0px!important;">{{ session('mensagem') }}</p>
                        </div>
                    </div>
                </div>
            @endif

            <div class="row">
                <div class="card-body">
                    <form action="#" id="envioFormulario" method="POST">
                        @csrf
                        <input type="hidden" name="email" id="email">
                        <input type="hidden" name="total_selecionados" id="total_selecionados">
                        <input type="hidden" name="total_executado" id="total_executado">
                        <fieldset class="border rounded p-3">
                            <legend style="width: auto!important;" class="text-primary">Enviar Emails</legend>
                            <div class="row">
                                <div class="form-group col-md-12">
                                    <label for="assunto">Assunto*</label>
                                    <input type="text" name="assunto" id="assunto" class="form-control" required>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="mensagem">Mensagem*</label>
                                    <textarea name="mensagem" id="mensagem" class="form-control"></textarea>
                                </div>
                                <div class="col-md-12">
                                    <label for="">Selecione os Emails*</label>
                                    <div class="table-responsive"
                                         style="width: 100%; height: 250px;">
                                        <table class="table table-sm table-striped table-hover"
                                               id="selecionarEmails">
                                            <thead class=" text-primary">
                                            <th>
                                                <button type="button" id="selectAll"
                                                        class="btn btn-sm btn-light"><i
                                                        class="far fa-check-square"></i>
                                                </button>
                                            </th>
                                            <th>{{ ('Email') }}</th>
                                            </thead>
                                            <tbody>

                                            @foreach($emails as $key => $e)
                                                <tr>
                                                    <td class='align-middle' style='white-space: nowrap'><input
                                                            type='checkbox' class='check checkall'
                                                            value='{{ $e->username }}'>
                                                        {{ $key + 1 }}
                                                    </td>
                                                    <td><i class='far fa-envelope'></i> {{ $e->username }}</td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-md-12 border rounded p-2 mb-3 mt-3 " id="remover-class">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <label for="">Emails Enviados <span id="envios_um_de"></span></label>
                                            <div id="progresso">
                                                <div class='progress'>
                                                    <div id="retorno-valor-style"
                                                         class='progress-bar bg-success progress-bar-striped progress-bar-animated'>
                                                        <div id="retorno-valor"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 mt-5 text-center">
                                <span class="text-danger" id="file-input-error"></span>
                            </div>
                        </fieldset>
                        <h6 class="text-left p-1 color-danger">( * ) Campos obrigatórios!</h6>
                        <div class="input-group">
                            <div class="col-md-6 mt-2">
                                <a href="{{ url('/') }}" class="btn btn-block btn-dark text-white">Cancelar
                                </a>
                            </div>
                            <div class="col-md-6 mt-2 text-right">
                                <button type="submit" class="btn btn-primary btn-block text-white">Enviar
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            $('body').on('click', '#selectAll', function () {
                if ($(this).hasClass('allChecked')) {
                    $('input[type="checkbox"]', '#selecionarEmails').prop('checked', false);
                } else {
                    $('input[type="checkbox"]', '#selecionarEmails').prop('checked', true);
                }
                $(this).toggleClass('allChecked');
            })
        });

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#envioFormulario').submit(function (e) {
            e.preventDefault();
            var form = this;


            $('#selecionarEmails .check:checked').each(function (index) {
                var that = this;

                //Carregar Total Selecionado
                $('#total_selecionados').val($('#selecionarEmails .check:checked').length);

                setTimeout(function () {

                    $('#email').val($(that).val());

                    //Atribui o Valor do Laco
                    $('#total_executado').val(index + 1);

                    //Bloquear Formularios
                    $('#assunto').prop("readonly", true);
                    //$('#mensagem').prop("readonly", true);

                    $('#file-input-error').text('')

                    var formData = new FormData(form);

                    $.ajax({
                        type: 'POST',
                        url: "{{ route('enviar-emails.store') }}",
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: (response) => {
                            if (response) {

                                $('#retorno-valor').text(response + '%');
                                $('#retorno-valor-style').css('width', response + '%');

                                // Retorna na Tela o Total de Execucao
                                var t_executado = $('#total_executado').val();
                                var t_selecionado = $('#selecionarEmails .check:checked').length;
                                $('#envios_um_de').html('');
                                $('#envios_um_de').append('(' + t_executado + ' de ' + t_selecionado + ')');

                                if (response === '100.0') {
                                    //Bloquear Formularios
                                    $('#assunto').prop("readonly", false);
                                    //$('#mensagem').prop("readonly", false);

                                    alert('Emails Enviados com Sucesso!');

                                    form.reset();
                                }
                            }
                        },
                        error: function (response) {
                            $('#file-input-error').text(response.responseJSON.message);
                        }
                    });

                }, 1000 * index);
            });

        });
    </script>

    <script src="https://cdn.tiny.cloud/1/{{ env('API_KEY') }}/tinymce/5/tinymce.min.js"
            referrerpolicy="origin"></script>

    <script>
        tinymce.init({
            selector: 'textarea#mensagem',
            skin: 'bootstrap',
            plugins: 'lists, link, image, media',
            toolbar: 'h1 h2 bold italic strikethrough blockquote bullist numlist backcolor | link media | removeformat help',
            menubar: false,
            language: 'pt_BR',
        });
    </script>


@endsection