@extends('admin.master')
@section('content')
    <section id="dashboard-content">
        <div class="panel panel-default">
            <div class="panel-heading">
                @if(session()->has('message'))
                    <div class="alert alert-success">
                        {{session()->get('message')}}
                    </div>
                @endif
                <h4 class="card-title" style="padding-left: 15px;">Usuários</h4>
            </div>
            <div class="panel-body">
                <div class="card">
                    <div class="card-block">
                        <div class="row">
                            <div class="col-xs-12">
                                {!! Form::open(['method' => 'post', 'id' => 'frmPesquisaUsuario', 'route' => ['admin.user.search.submit']]) !!}
                                <div class="row">
                                    <div class="col-lg-3">
                                        {!! Form::openGroup('user_type', 'Tipo de Usuário') !!}
                                        {!! Form::select('user_type', $user_types, null, ['multiple' => 'multiple', 'name' => 'user_types[]' ]) !!}
                                        {!! Form::closeGroup() !!}
                                    </div>
                                    <div class="col-lg-3">
                                        {!! Form::openGroup('is_aprovado', 'Situação do usuário') !!}
                                        {!! Form::select('is_aprovado', $status, null, ['multiple' => 'multiple', 'name' => 'is_aprovado[]']) !!}
                                        {!! Form::closeGroup() !!}
                                    </div>
                                    <div class="col-lg-3">
                                        {!! Form::openGroup('state', 'Estado') !!}
                                        {!! Form::select('state', $states, null) !!}
                                        {!! Form::closeGroup() !!}
                                    </div>
                                    <div class="col-lg-3">
                                        {!! Form::openGroup('user_id', 'Id Usuário') !!}
                                        {!! Form::text('user_id') !!}
                                        {!! Form::closeGroup() !!}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-3">
                                        {!! Form::openGroup('name', 'Nome / Loja') !!}
                                        {!! Form::text('name') !!}
                                        {!! Form::closeGroup() !!}
                                    </div>
                                    <div class="col-lg-3">
                                        {!! Form::openGroup('document', 'Documento CPF/CNPJ') !!}
                                        {!! Form::text('document') !!}
                                        {!! Form::closeGroup() !!}
                                    </div>
                                    <div class="col-lg-3">
                                        {!! Form::openGroup('telephone', 'Telefone') !!}
                                        {!! Form::text('telephone') !!}
                                        {!! Form::closeGroup() !!}
                                    </div>
                                    <div class="col-lg-3">
                                        {!! Form::openGroup('email', 'Email') !!}
                                        {!! Form::text('email') !!}
                                        {!! Form::closeGroup() !!}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-3">
                                        {!! Form::openGroup('created_at_start', 'Cadastrado de') !!}
                                        {!! Form::date('created_at_start') !!}
                                        {!! Form::closeGroup() !!}
                                    </div>
                                    <div class="col-lg-3">
                                        {!! Form::openGroup('created_at_end', 'Cadastrado até') !!}
                                        {!! Form::date('created_at_end') !!}
                                        {!! Form::closeGroup() !!}
                                    </div>
                                    <div class="col-lg-3">
                                        {!! Form::openGroup('last_seen_start', 'Visto por último de') !!}
                                        {!! Form::date('last_seen_start') !!}
                                        {!! Form::closeGroup() !!}
                                    </div>
                                    <div class="col-lg-3">
                                        {!! Form::openGroup('last_seen_end', 'Visto por último até') !!}
                                        {!! Form::date('last_seen_end') !!}
                                        {!! Form::closeGroup() !!}
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button type="button" class="btn btn-primary" id="btn-pesquisar-usuario"><span
                                                id="spin"
                                                class="glyphicon glyphicon-search"></span> Pesquisar
                                    </button>
                                </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-xs-12">
                                <h4>Resultados da pesquisa<span id="totalResultadoPesquisa"></span></h4>
                                <div class="table-responsive">
                                    <table class="table table-condensed table-hover" id="tblResultadosPesquisa">
                                        <thead>
                                        <tr>
                                            <th>Cadastro</th>
                                            <th>Tipo</th>
                                            <th>Nome</th>
                                            <th>Responsável</th>
                                            <th>Localização</th>
                                            <th>E-mail</th>
                                            <th>Telefone</th>
                                            <th>Celular</th>
                                            <th>V. Último</th>
                                            <th>Ações</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tblBodyResuladoPesquisa">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" tabindex="-1" role="dialog" id="modal-plans">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Selecionar Plano</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="frm-plan">
                        {{csrf_field()}}
                        <input type="hidden" name="user_id" id="user_id_plan">
                        <div class="form-group">
                            <label for="inputProduto" class="control-label col-xs-2">Selecione:</label>
                            <div class="col-xs-9">
                                <select class="form-control" id="select-plan" name="plan_id">
                                    <option disabled value="" selected> - Selecione - </option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="btn-salva">Selecionar</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@endsection
@section('scripts')
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>

    <script>
        function formataNumeroTelefone(numero) {
            numero = numero.replace(/\D/g, '');
            var telefoneFormatado;
            var length = numero.length;

            if (length === 10) {
                telefoneFormatado = '(' + numero.substring(0, 2) + ') ' + numero.substring(2, 6) + '-' + numero.substring(6, 10);
            } else if (length === 11) {
                telefoneFormatado = '(' + numero.substring(0, 2) + ') ' + numero.substring(2, 7) + '-' + numero.substring(7, 11);
            }
            return telefoneFormatado;
        }

        function spinOn(element) {
            element.removeClass('glyphicon glyphicon-search').addClass('fa fa-spinner fa-spin');
        }

        function spinOff(element) {
            element.removeClass('fa fa-spinner fa-spin').addClass('glyphicon glyphicon-search');
        }

        $(document).ready(function () {

            var spinElement = $("#spin");

            $("#btn-pesquisar-usuario").on('click', function () {

                $(this).attr('disabled', true);
                spinOn(spinElement);
                $("#tblBodyResuladoPesquisa").html('');
                $("#totalResultadoPesquisa").html('').hide('slow');

                $.ajax({
                    url: '{{route('admin.user.search.submit')}}',
                    method: 'POST',
                    dataType: 'json',
                    data: $("#frmPesquisaUsuario").serialize()

                }).done(function (result) {
                    $("#btn-pesquisar-usuario").attr('disabled', false);
                    spinOff(spinElement);

                    var total = result.length;


                    if (total < 1) {
                        alert('Nenhum resultado encontrado!');
                        return false;
                    }

                    dados = '';

                    $("#totalResultadoPesquisa").html(': ' + total).show('slow');
                    $.each(result, function () {
                        //console.log(this);
                        var type = (this.type === null) ? 'Não Informado' : this.type.name;
                        var telefone = (this.phone === null || this.phone === "") ? 'Não Informado' : formataNumeroTelefone(this.phone);
                        var linkTelefone = (this.phone === null || this.phone === "") ? 'Não informado' : '<a href="https://wa.me/+55' + this.phone + '">' + telefone +  '</a>';
                        var celular = (this.cell_phone === null) ? 'Não Informado' : formataNumeroTelefone(this.cell_phone);
                        var linkCelular = (this.cell_phone === null) ? 'Não Informado' : '<a href="https://wa.me/+55' + this.cell_phone + '">' + celular +  '</a>';
                        var dtcadastro = moment(this.created_at).format("DD/MM/YYYY");
                        var dtlastseen = moment(this.last_seen);
                        var dtlastseenformated = dtlastseen.isValid() ? dtlastseen.format("DD/MM/YYYY HH:mm:ss") : 'Nunca';

                        //console.log(dtcadastro.format("DD/MM/YYYY"));

                        button = 'btn-success btn-status';
                        icon = 'fa fa-check';
                        action = 'liberar';
                        btnplanstatus = '';

                        btnlead = '';

                        if (this.is_aprovado === 1) {
                            button = 'btn-danger btn-status';
                            icon = 'fa fa-ban';
                            action = 'bloquear';
                        }

                        // Botão para dispensar leads
                        if (this.is_aprovado === 3) {
                            btnlead = ' <button type="button" data-id="' + this.id + '" class="btn btn-sm btn-info btn-lead" title="Dispensar Lead"><span class="fa fa-level-down"></span></button> ';

                        }


                        if (this.user_type === 3 || this.user_type === 4) {
                            btnplanstatus = 'disabled'
                        }

                        btnplan = ' <button type="button" class="btn btn-sm btn-warning btn-plan" data-toggle="modal" data-target="#modal-plans" data-id="' + this.id + '" title="Selecionar Plano do Usuário" ' + btnplanstatus + '><span class="fa fa-list"></span></button> ';


                        //table.row().data('<tr><td>' + this.created_at +'</td><td>' + type + '</td><td>'+ this.dealership  +'</td><td>' + this.name + '</td><td>' + this.city + '/' + this.state + '</td><td>' + this.email + '</td><td>' + telefone + '</td><td>' + celular + '</td><td><button class="btn btn-sm ' + button +'" data-id="' + this.id + '" data-action="' + action +'"><i class="' + icon + '"></i></button> <a href="/admin/relatorio/Estoque/'+ this.id +'" class="btn btn-sm btn-default" target="_blank"><i class="fa fa-car"></i></a> <a href="/admin/user/' + this.id + '/edit" class="btn btn-sm btn-default" target="_blank"><i class="fa fa-pencil"></i></a> </td></tr>');
                        dados += '<tr><td>' + dtcadastro + '</td><td>' + type + '</td><td>' + this.dealership + '</td><td>' + this.name + '</td><td>' + this.city + '/' + this.state + '</td><td>' + this.email + '</td><td>' + linkTelefone + '</td><td>' + linkCelular + '</td><td>' + dtlastseenformated + '</td><td><button class="btn btn-sm ' + button + '" data-id="' + this.id + '" data-action="' + action + '"><i class="' + icon + '"></i></button> ' + btnplan + ' ' + btnlead + ' <a href="/admin/relatorio/Estoque/' + this.id + '" class="btn btn-sm btn-default" target="_blank"><i class="fa fa-car"></i></a> <a href="/admin/user/' + this.id + '/edit" class="btn btn-sm btn-default" target="_blank"><i class="fa fa-pencil"></i></a> </td></tr>';
                    });

                    $("#tblBodyResuladoPesquisa").append(dados);
                    //console.log(JSON.stringify(result));

                }).complete(function () {
                    //table.draw();
                    /*
                                        $.fn.dataTable.moment( "DD/MM/YYYY" );


                                        if ( $.fn.dataTable.isDataTable( '#tblResultadosPesquisa' ) ) {
                                            table = $('#tblResultadosPesquisa').DataTable();
                                            return true;
                                            //
                                        }
                    */

                });
            });

            // Bloquear / Liberar usuário
            $(document).on('click', '.btn-status', function () {

                var btn = $(this);
                var data = {
                    "_token": "{{ csrf_token() }}",
                    action: btn.data('action'),
                    userid: [btn.data('id')]
                };

                var confirma = confirm('Atenção: Deseja ' + data.action + ' este usuário?');

                if (confirma) {
                    $.ajax({
                        url: '{{route('admin.multi.update')}}',
                        method: 'POST',
                        dataType: 'json',
                        data: data,
                        success: function () {
                            alert('Sucesso!');
                            // inverte o botão: remove class add class, troca action
                            if (data.action === 'liberar') {
                                btn.data('action', 'bloquear');
                                btn.attr('class', 'btn btn-sm btn-danger btn-status');
                                btn.find('i').attr('class', 'fa fa-ban');
                            } else {
                                btn.data('action', 'liberar');
                                btn.attr('class', 'btn btn-sm btn-success btn-status');
                                btn.find('i').attr('class', 'fa fa-check');
                            }
                        }

                    });
                }


            });

            $(document).on('click', '.btn-lead', function() {
                var btn = $(this);

                var confirma = confirm('Deseja dispensar esta Lead?');

                if (confirma) {
                    var data = {
                        "_token": "{{ csrf_token() }}",
                        action: 'dispensar',
                        userid: [btn.data('id')]
                    };

                    $.ajax({
                        url: '{{route('admin.multi.update')}}',
                        method: 'POST',
                        dataType: 'json',
                        data: data,
                    }).done(function() {
                        alert('Lead dispensada com sucesso! O usuário foi bloqueado.');
                        btn.attr('disabled', true);
                    });
                }


            });


            $('#modal-plans').on('show.bs.modal', function(event) {
                var btn_plan_selected = $(event.relatedTarget);

                $("#user_id_plan").val(btn_plan_selected.data('id'));

                $.ajax({
                    method: 'GET',
                    url: '{{route('admin.ajax.plans.index')}}'
                }).done(function(response) {

                    var selectProdutos = $("#select-plan");

                    selectProdutos.empty();
                    var options = '<option disabled value="" selected> - Selecione - </option>';
                    $.each(response.data.items, function() {
                        options += '<option value="' + this.id + '">' + this.title + ' R$ ' + this.price + ',00 </option>';
                    });

                    selectProdutos.append(options).change();

                }).fail(function() {
                    console.log('erro');
                });
            });

            $(document).on('click', '#btn-salva', function() {
                // form data

                var formdata = $('#frm-plan').serializeArray();
                formdata.user_id = '';

                var confirmar = confirm('Confirma a seleção deste plano para este usuário?');

                if (confirmar) {
                    // ajax
                    $.ajax({
                        method: 'POST',
                        url: '{{route('admin.ajax.user.planselect')}}',
                        data: formdata
                    }).done(function() {
                        alert('Selecionado com sucesso!');
                        $("#modal-plans").modal('hide');

                        console.log('sucesso!');
                    }).error(function(error) {
                        if (error.responseText) {
                            resp = JSON.parse(error.responseText);
                            alert('Erro: ' + resp.msg);
                        }
                        console.log(JSON.stringify(error));
                    });
                }
            });

        });
    </script>
@endsection