@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;">Lojas</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('plans', 'Plano') !!}
                                        {!! Form::select('plans', $plans, null, ['multiple' => 'multiple', 'name' => 'plans[]' ]) !!}
                                        {!! Form::closeGroup() !!}
                                    </div>
                                    <div class="col-lg-3">
                                        {!! Form::openGroup('has_site', 'Loja tem site?') !!}
                                        {!! Form::select('has_site', $sites, null, ['multiple' => 'multiple', 'name' => 'has_site[]']) !!}
                                        {!! Form::closeGroup() !!}
                                    </div>
                                    <div class="col-lg-3">
                                        {!! Form::openGroup('has_delivery', 'Repasse Express?') !!}
                                        {!! Form::select('has_site', $deliveries, null, ['multiple' => 'multiple', 'name' => 'has_delivery[]']) !!}
                                        {!! 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('state', 'Estado') !!}
                                        {!! Form::select('state', $states, null) !!}
                                        {!! Form::closeGroup() !!}
                                    </div>
                                    <div class="col-lg-3">
                                        {!! Form::openGroup('store_id', 'Id Loja') !!}
                                        {!! Form::text('store_id') !!}
                                        {!! 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>
                                <div class="form-actions">
                                    <button type="button" class="btn btn-primary" id="btn-pesquisar-usuario"><span
                                                id="spin"
                                                class="fa fa-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>Nome</th>
                                            <th>Nome Fantasia</th>
                                            <th>Localização</th>
                                            <th>Plano</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 spinOn(element) {
            element.removeClass('fa fa-search').addClass('fa fa-spinner fa-spin');
        }

        function spinOff(element) {
            element.removeClass('fa fa-spinner fa-spin').addClass('fa fa-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.store.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 () {

                        var dtcadastro = moment(this.created_at).format("DD/MM/YYYY");
                        var plan = 'Nenhum';
                        var btnremoveplan = '';
                        if (this.plans.length > 0) {
                            plan = this.plans[0].title;
                        }

                        if (plan !== 'Nenhum') {
                            btnremoveplan = ' <button type="button" class="btn btn-sm btn-danger btn-remove-plan" data-id="' + this.id +'"><i class="fa fa-remove"></i></button> ';
                        }

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

                        var btnedit = ' <a class="btn btn-default btn-sm" href="/admin/stores/' + this.id + '" target="_blank" title="Editar Loja"><span class="fa fa-pencil"></span></a> ';
                        // console.log(this.city);
                        var cidade = this.city !== null ? this.city.name : 'Não informado';
                        var estado = this.city !== null ? this.city.state.initials : 'NI';

                        dados += '<tr><td>' + dtcadastro + '</td><td>' + this.company_name + '</td><td>' + this.trade_name + '</td><td>' + cidade + '/' + estado + '</td><td>' + plan + '</td><td>' + btnplan + btnremoveplan + btnedit + '</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;
                                            //
                                        }
                    */

                });
            });

            $(document).on('click', '.btn-remove-plan', function() {
                var btn = $(this);
                var store_id = btn.data('id');
                console.log('clicoou: ' + store_id);
                if (confirm('Deseja remover o plano desta loja?')) {
                    // ajax
                    $.ajax({
                        method: 'POST',
                        url: '{{route('admin.ajax.store.removeplan')}}',
                        data: {
                            "_token": "{{ csrf_token() }}",
                            store_id: store_id
                        },
                        error: function(erro) {
                            console.log('Ocorreu um erro ');
                            JSON.stringify(erro);
                        }
                    }).done(function() {
                        alert('Plano removido com sucesso!');
                        btn.hide('fast');
                    });

                }
            });


            $('#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