<?echo $this->Helper('Html')->script('extjs/plugins/lovCombo/js/Ext.ux.form.LovCombo.js');?>
<script>
    // inicio da paginacao
    var pageSize = 100;

    // exibe o nome do tipo de solicitação
    function cover_status(val){
        if(val==0) {
            return '<span style="color:#EF5C2C;">Offline</span>';
        }else if(val==1)  {
            return '<span style="color:#85C974;">Online</span>';
        }else if(val==2){
            return 'Oculto';
        } else {
            return val;
        }
    }

    Ext.onReady(function(){

    Ext.QuickTips.init();

    store = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: '<?=BASE_URL?>/Produto/DadosLogProduto',
            method:'POST'
        }),
        reader: new Ext.data.JsonReader({
                fields: ['ProdutoNome', 'SiteNome', 'PrecoDe','PrecoPor', 'ParcelamentoMaximo', 'Status', 'DataAlteracao', 'NomeUsuario', 'DescontoAVista', 'UrlEspecialNome','LocalAlteracao'],
                root: 'rows',
                totalProperty: 'results'
        }),
        baseParams:{ start: 0,limit:pageSize},
        autoLoad: false
    });

    // Lista os sites
    var siteStore = new Ext.data.JsonStore({
        url     : '<?=BASE_URL?>/Usuario/GetSiteTodos',
        method  : 'POST',
        root    : 'data',
        baseParams: {id: -1},
        fields  : ['boxLabel','name','value', 'negrito'],
        autoLoad : true
    });
    //Combo MultiSelect com opções dos Grupos e Sites
    var lc = new Ext.ux.form.LovCombo({
        id:'lovcombo'
        ,width:180
        ,hideOnSelect:false
        ,editable: true
        ,store: siteStore
        ,triggerAction:'all'
        ,valueField:'value'
        ,displayField:'boxLabel'
        ,boldField:'negrito'
        ,mode:'local'
        ,fieldLabel:'Sites'
        ,hiddenName: 'Site'
        ,hiddenValue: 'value'
        ,checkField: 'checked'
        ,labelWidth :120
    });

    lc.on('select', function (r,n) {
        if(n.data.value.indexOf('sites') == 0){
            n.data.checked ? lc.selectAll() : lc.deselectAll();
        }

        if(n.data.value.indexOf('all_') == 0){
            var inicio = n.data.value.indexOf('_') + 1;
            var fim = n.data.value.length;
            var GrupoId = n.data.value.substring(inicio, fim);

            n.data.checked ? lc.selectAllGroup(GrupoId) : lc.deselectAllGroup(GrupoId);
        }
    }, this);


    //Cria input para inserção do número do pedido
    var codigoProduto = new Ext.form.TextField({
        id              : 'codigoProduto',
        name            : 'codigoProduto',
        fieldLabel      : 'Código Produto',
        width           : 180,
        fireKey         : function(e){//evento de tecla
            if(e.getKey() == e.ENTER) {//precionar enter
                pesquisaLog();
            }
    }
    });

    var infoProduto = new Ext.form.FieldSet({
        title : 'Filtro',
        items       :
        [
            lc,
            {
                id          : 'EditorCodigoProduto',
                name        : 'EditorCodigoProduto',
                layout      : 'column',
                width       : '100%',
                defaults    :
                {
                    labelWidth  :120,
                    xtype       :'panel',
                    layout      :'form',
                    border      :false
                },
                items:[
                {
                    items    : [
                        codigoProduto
                    ]
                },
                {
                    xtype   :'button',
                    formBind: true,
                    anchor  :'100%',
                    name    :'btnSearch',
                    id      :'btnSearch',
                    text    : ' &nbsp;&nbsp;Procurar&nbsp;&nbsp; ',
                    disabled: false,
                    handler : pesquisaLog
                }
                ]
            },
            {
                layout      : 'column',
                defaults    :
                {
                    xtype       :'panel',
                    layout      :'form',
                    anchor      :'100%',
                    bodyStyle   :'padding: 10px 0 10px 0',
                    border      :false
                },
                items:[
                {
                    items    : [
                    {
                       xtype        :'label',
                       name         :'LblNomeProduto',
                       id           :'LblNomeProduto',
                       width        :125,
                       text         :'Nome Produto: ',
                       cls          :'x-form-item',
                       allowBlank   :true,
                       hidden       :true
                    }
                    ]
                }
                ,{
                    items    : [
                    {
                       xtype        :'label',
                       name         :'NomeProduto',
                       id           :'NomeProduto',
                       text         :'',
                       cls          :'x-form-item',
                       allowBlank   :true,
                       hidden       :false
                    }
                    ]
                }
                ]
            }
        ]
    });



    var PesqLog = new Ext.FormPanel({
        title       : 'Log de Alterações do Produto',
        labelWidth  : 120,
        frame       : true,
        defaultType :'textfield',
        monitorValid: true,
        renderTo    : Ext.getBody(),
        items: infoProduto
    });


    /* #### INÍCIO FUNÇÃO PARA PESQUISAR O Log PELO CODIGO DO PRODUTO #### */
    function pesquisaLog() {
        var codigoProduto = '';
        store.removeAll();
        GridWindow.hide();
        Ext.getCmp('NomeProduto').setText('');
        var values = PesqLog.getForm().getValues();
        codigoProduto = values.codigoProduto;
        site = values.Site;

        if(!codigoProduto){
            Ext.Msg.alert('Pesquisa Log','Informe o código do produto');
        } else {

            store.baseParams.codigoProduto = codigoProduto;
            store.baseParams.siteId = site;
            //store.load();
            GridWindow.show();



            // Cria checkBox com as opcoes de site
            store.load({callback: function(records,o,s){
                if(records.length == 0){
                    Ext.Msg.alert('Pesquisa Log','Log não encontrado para este produto');
                }else{
                    Ext.getCmp('NomeProduto').setText(records[0].get("ProdutoNome"));
                }
            }});
        }
    }
    /* #### FIM FUNÇÃO PARA PESQUISAR O PRODUTO PELO CÓDIGO #### */



    var GridWindow = new Ext.grid.GridPanel({
        title           : ' <div style="width:50%;float:left  "> Log de Alterações do Produto </div> <div style="color:gray;text-align:right;font-weight:normal;width:50%;float:right">  (*duplo clique sobre a linha para editar)</div> '
        ,renderTo       : Ext.getBody()
        ,stateful       : false
        ,frame          : true
        ,id             : 'grid'
        ,height         : 350
        ,store          : store
        ,deferRowRender : false
        ,hidden         : true
        ,viewConfig     : {
            forceFit    : true
        }
        ,hideBorders: true
        ,singleSelect: true
        ,stripeRows : true
        ,width      : '100%'
        ,columns    : [
                {id: 'SiteNome',               header: 'Site',                          dataIndex: 'SiteNome',              width: 100, sortable: true},
                {id: 'PrecoDe',                header: 'Preço De',                      dataIndex: 'PrecoDe',               width: 120, sortable: true},
                {id: 'PrecoPor',               header: 'Preco Por',                     dataIndex: 'PrecoPor',              width: 130, sortable: true},
                {id: 'ParcelamentoMaximo',     header: 'Parcelamento Máximo',          dataIndex: 'ParcelamentoMaximo',    width: 130, sortable: true},
                {id: 'Status',                 header: 'Status',                        dataIndex: 'Status',                width: 130, sortable: true, renderer:cover_status},
                {id: 'DataAlteracao',          header: 'Data de Alteração'            ,   dataIndex: 'DataAlteracao',         width: 130, sortable: true, xtype:'datecolumn', format: 'd/m/Y H:i:s'},
                {id: 'NomeUsuario',            header: 'Usuário',                       dataIndex: 'NomeUsuario',          width: 130, sortable: true},
                {id: 'DescontoAVista',         header: 'Desconto A Vista',              dataIndex: 'DescontoAVista',        width: 130, sortable: true},
                {id: 'UrlEspecialNome',        header: 'Url Especial',                  dataIndex: 'UrlEspecialNome',       width: 130, sortable: true},
                {id: 'LocalAlteracao',         header: 'Local Alteração',               dataIndex: 'LocalAlteracao',       width: 130, sortable: true}
        ]

        ,bbar: new Ext.PagingToolbar({

                pageSize: pageSize,
                store: store,
                displayMsg: 'Mostrando resultados {0} - {1} de {2}',
                emptyMsg: 'Nenhum resultado para mostrar',
                displayInfo: true,
                beforePageText: 'P&aacute;gina',
                firstText: 'Primeira p&aacute;gina',
                lastText: '&Uacute;ltima p&aacute;gina',
                nextText: 'Pr&oacute;xima p&aacute;gina',
                prevText: 'P&aacute;gina anterior',
                refreshText: 'Atualizar',
                afterPageText: 'de {0}',
                emptyMsg: "Sem dados para exibir.",
                plugins: new Ext.ux.ProgressBarPager()

        })


        });
        GridWindow.getSelectionModel().selectFirstRow();

        var FieldSetObs = new Ext.Panel({
            xtype: 'fieldset',
            title: 'Observação',
            collapsible: true,
            autoHeight: true,
            renderTo        : Ext.getBody(),
            html: '<div style="text-align:left;font-weight:normal;width:100%;float:left;padding:10px">Este programa exibe o log de alterações realizadas em um produto.  </div>'
        });
    });

</script>