@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">Inserir Lista de Emails / Início</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">Inserir Lista de Emails</legend>
                            <div class="row">
                                <div class="form-group col-md-12">
                                    <label for="lista">Lista de Emails*</label>
                                    <textarea name="lista" id="lista" rows="10" class="form-control"
                                              required></textarea>
                                </div>
                                <div class="form-group col-md-8">
                                    <label for="senha">Senha*</label>
                                    <input type="text" name="senha" id="senha" class="form-control" required>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="senha">Quota*</label>
                                    <select name="quota" id="quota" class="form-control" required>
                                        <option value="0">Ilimitada</option>
                                        <option value="1024">1 GB</option>
                                        <option value="2048">2 GB</option>
                                        <option value="3072">3 GB</option>
                                        <option value="4096">4 GB</option>
                                        <option value="5120">5 GB</option>
                                        <option value="10240">10 GB</option>
                                        <option value="15360">15 GB</option>
                                        <option value="20480">20 GB</option>
                                        <option value="25600">25 GB</option>
                                        <option value="51200">50 GB</option>
                                        <option value="102400">100 GB</option>
                                    </select>
                                </div>
                                <div class="col-md-12 d-none" id="exibir-tabela">
                                    <label for="">Selecione os Emails*</label>
                                    <div class="table-responsive" id="remover-tabela"
                                         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 id="retorno-options"></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 Inseridos <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">Salvar
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function ($) {
            $('#inserir-emails').DataTable({
                "language": {
                    "url": "https://cdn.datatables.net/plug-ins/1.10.12/i18n/Portuguese-Brasil.json"
                }
            });
        });

        $(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')
            }
        });

        $('#lista').on('change', function () {
            $.post('{{ route('listaEmails') }}', {
                data: {
                    listaEmails: $('#lista').val()
                },
                _token: '{{csrf_token()}}'
            }, function (response) {
                $("#retorno-options").html("");
                $.each(response, function (key, val) {
                    $("#exibir-tabela").removeClass('d-none');
                    $("#retorno-options").append(val);
                });
                //alert('Usuários Listados com Sucesso!');
            })
        });

        $('#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("lista", true);
                    $('#senha').prop("readonly", true);

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

                    var formData = new FormData(form);

                    $.ajax({
                        type: 'POST',
                        url: "{{ route('inserir-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
                                    $('#lista').prop("readonly", false);
                                    $('#senha').prop("readonly", false);

                                    alert('Usuários Inseridos com Sucesso!');

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

                }, 1000 * index);
            });

        });
    </script>

@endsection