@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">Copiar Emails Via IMAP / 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="origemSenha" id="origemSenha">
                        <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">Copiar Emails Via IMAP</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-10">
                                    <label for="origemHost">Host Origem*</label>
                                    <input type="text" name="origemHost" id="origemHost" class="form-control" required>
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="origemHost">Porta Origem*</label>
                                    <input type="text" name="origemPorta" id="origemPorta" class="form-control"
                                           required>
                                </div>
                                <div class="col-md-12">
                                    <hr>
                                </div>
                                <div class="form-group col-md-5">
                                    <label for="destinoHost">Host Destino*</label>
                                    <input type="text" name="destinoHost" id="destinoHost" class="form-control"
                                           required>
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="destinoHost">Porta Destino*</label>
                                    <input type="text" name="destinoPorta" id="destinoPorta" class="form-control"
                                           required>
                                </div>
                                <div class="form-group col-md-5">
                                    <label for="destinoSenha">Senha Destino*</label>
                                    <input type="text" name="destinoSenha" id="destinoSenha" class="form-control"
                                           required>
                                </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>
                                            <th>{{ ('Senha') }}</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 id="resultadoErro"></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('listaEmailsCopiar') }}', {
                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;
                var valores = $(that).val().split(';'); // Dividir o valor em array [email, senha]

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

                setTimeout(function () {
                    $('#email').val(valores[0]); // Definir o email
                    $('#origemSenha').val(valores[1]); // Definir a senha

                    //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('copiar-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);
                                    $('#origemHost').prop("readonly", false);
                                    $('#origemPorta').prop("readonly", false);
                                    $('#destinoHost').prop("readonly", false);
                                    $('#destinoPorta').prop("readonly", false);
                                    $('#destinoSenha').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