[[- <div id="tab_idInvoiceType">
    <div class="nav nav-pills mb-2" role="tablist">
        <button type="button" class="btn btn-success btn-xs mr-2"
            data-link="{on ~newTypeInv} html{fmtIco:'fa-plus' fw=1}"></button>
        <a href="#itype_list" class="nav-item nav-link active" data-toggle="tab" data-link="~i18n.main.invoices"></a>
        
        <a class="nav-item nav-link pt-1" data-toggle="tab" href="#itype_help" data-kb="passes" data-kbtarget="#itype_help"
             data-link="html{fmtIco:'fa-question-circle-o mt-n1'}"></a>
    </div>
    <div class="tab-content">
        
    </div>
</div>]]

<div class="tab-content section-block my-0" id="tabsInvoiceType">
    <div id="itype_list" class="tab-pane active">
        <div class="mb-2 d-flex align-items-center">
            <button type="button" class="btn btn-sm btn-success mr-2" data-link="{on ~newTypeInv} html{fmtIco:'fa-plus'}"></button>
            <button type="button" class="btn btn-sm btn-secondary mr-2" data-link="visible{:selTypeId} {on ~duplicateIType} html{fmtIco:'fa-copy'}"></button>
            <button type="button" class="btn btn-sm btn-secondary mr-2" data-link="visible{:adm && selCnt > 1} {on ~mergeIType} title{:~i18n.main.unite} html{fmtIco:'fa-compress'}"></button>
        </div>
        <div class="small mb-1" data-link="visible{:adm}">
            <i class="fa fa-info-circle"></i>
            <span data-link="~i18n.idPass.rulesinfo"></span>
            <a href="#" onclick="$('[href$=itype_stype]').click();return false;" data-link="~i18n.idPass.rules"></a>
        </div>
        <table id="grid_idInvoiceType" data-entity="idInvoiceType" class="loadGrid"></table>
    </div>
    <div id="itype_stype" class="tab-pane">
        <table class="table w-auto bg-white">
            <tbody data-link="html{for schStatus tmpl='#tpl_stype_ed'}"></tbody>
        </table>
    </div>
    <div id="itype_help" class="tab-pane card card-body"></div>
</div>

<script id="tpl_stype_ed" type="text/x-jsrender">
<tr>
    <th>{{:name}}</th>
    <td data-link="{checkboxgroup chLesson} {on 'change' 'input' ~chLesson}">
    {{for ~S.clubStatus.idLesson itemVar="~lsn" ~sc=alias}}
        <div class="custom-control custom-control-inline custom-checkbox">
            <input type="checkbox" class="custom-control-input"
                id="chLesson_{{:~sc}}_{{:alias}}" value="{{:alias}}">
            <label class="custom-control-label" for="chLesson_{{:~sc}}_{{:alias}}">
                {{fmtStatus:~lsn}}
            </label>
        </div>
    {{/for}}
    </td>
</tr>
</script>

<script>
SCRM.i18n.set( [[!i18n?cls=`idPass`]] );

SCRM.ready('Site:grid', function(){
    var optsData = {
        adm: SCRM.can('Admin')
    };
    var autoOpts = [{
        id: '0', name: SCRM.emptyStr
    }, {
        id: '1', name: SCRM.i18n.main.wopass
    }, {
        id: '-1', name: SCRM.i18n.main.rest + ' 0'
    }, {
        id: '-2', name: SCRM.i18n.main.rest + ' 1'
    }, {
        id: '-3', name: SCRM.i18n.main.rest + ' 2'
    }, {
        id: '-4', name: SCRM.i18n.main.rest + ' 3'
    }];
    var topTabs = [
        {
        	href: '#itype_list', _label: 'main.typeinvoice', active: true
        },
        {
        	name: 'kb',
            href: '#itype_help',
            attr: {
                'data-kb': 'passes',
                'data-kbtarget': '#itype_help'
            }
        }
    ];
    if (optsData.adm) topTabs.splice(1, 0, {href: '#itype_stype', _label: 'idPass.rules'});
    SCRM.add_mnu('topTabs', topTabs);
    
    SCRM.newTypeInv = function() {
        var newRow = {
            menuindex: {
                value: 10,
            },
            name: {
                value: '',
                required: true
            },
            price: {
                value: '',
            },
            amount: {
                value: '',
            },
            auto: {
                value: '0',
            },
            autoOpts: autoOpts,
            period: {
                value: 'last day of this month',
                reqObj: 'pass',
                required: true
            },
            type: ['a'],
            // Админ выбирает: все филиалы (city = 0, по умолчанию) или текущий; остальным бэкенд всегда ставит текущий
            cityAdm: SCRM.can('Admin') && !SCRM.empty(SCRM.app.club_city),
            city: '0',
        };
        var addModal = {
            title: SCRM.i18n.main.add,
            ok: SCRM.i18n.main.save,
            body: '#mdl_jqGridInvoiceAdd',
            newRow: newRow,
            onOK: function(e, mdl){
                var error = false;
                $.each(newRow, function(k, v){
                    if (!v.required) return true;
                    if ( (!v.reqObj || newRow[v.reqObj]) && !v.value) {
                        SCRM.link(v, {bad: true}); 
                        error = true;
                    } else if (v.bad) SCRM.link(v, {bad: false});
                });
                
                if (error){
                    mdl.mdl_loading(false);
                } else{
                    var arr = {
                        oper: 'add',
                        menuindex: newRow.menuindex.value,
                        name: newRow.name.value,
                        price: newRow.price.value,
                        published: '1'
                    };
                    if (!SCRM.empty(newRow.auto.value)) arr.auto = newRow.auto.value;
                    if (newRow.cityAdm) arr.city = newRow.city;
                    if (newRow.pass) {
                        arr = $.extend(arr, {
                            amount: newRow.amount.value,
                            period: newRow.period.value,
                        });
                        
                        if (newRow.type.length) {
                            arr.stype = newRow.type;
                        }
                    }
                    pEDIT('idInvoiceType', arr, function(row){
                        mdl.mdl_hide();
                        grid_idInvoiceType.trigger('reloadGridData');
                    });
                }
            }
        };
        
        club_Modal(addModal, {
            showMenuindex: function(e){
                e.preventDefault();
                SCRM.link(addModal.newRow.menuindex, {edit:true});
            }
        });
    }

    //optsData.Schedule = SCRM.clubStatus.idSchedule
    var selInvoiceType;

    $('#tabsInvoiceType').link(true, optsData, {
        chLesson: function() {
            var chData = this;
        	
        	SCRM.pause(function(){
        		console.log(chData);
        		pEDIT('idConfig', {
	                id: chData.cfgKey,
	                val: chData.chLesson.join('')
	            }, function(result) {
	                SCRM.saved();
	            });
        	}, 777, 'chLesson'+this.cfgKey);
        },
        newTypeInv: SCRM.newTypeInv,
        duplicateIType: function(e, data) {
            var oldValues = [];
            $.each(grid_idInvoiceType.jqGrid('getGridParam', 'colModel'), function(k, v) {
                if (v.canCopy) {
                    var cmEditOpts = key2obj(v, 'editoptions', {});
                    v.oldDefaultValue = cmEditOpts.defaultValue;
                    cmEditOpts.defaultValue = selInvoiceType[v.name];
                    oldValues.push(cmEditOpts);
                }
            });
            
            grid_idInvoiceType.jqGrid('editGridRow', 'new');
            
            $.each(oldValues, function(k, v){
				v.defaultValue = v.oldDefaultValue;
            });
        },
        // Объединение выбранных тарифов в один: связанные записи переводятся на него, остальные снимаются с публикации
        mergeIType: function() {
            SCRM._run('/chunk/merge', {
                ids: optsData.selIDs,
                grid: grid_idInvoiceType,
                table: 'idInvoiceType',
                pickTarget: true,
                exclude: ['published'], // Итоговый тариф остается опубликованным
                heads: function(r) {
                    return r.name +' (id: '+ r.id +')';
                },
                onSubmit: function(m) {
                    return pEDIT('idInvoiceType', $.extend({
                        oper: 'merge',
                        id: m.target.id,
                        _from: $.map(m.others, function(r) { return r.id; })
                    }, m.pick), function(rdata) {
                        if ((rdata || {}).error) return;
                        SCRM.saved();
                        grid_idInvoiceType
                        .trigger('clearSelection')
                        .trigger('reloadGridData');
                    });
                }
            });
        }
    });
    
    var colModel = [
        {name: 'id', hidden: true, template: idFieldTemplate},
        {name: 'name', _label: 'main.name', width: 250,
        	canCopy: true,
            Required: true,
            template: editRowLinkTemplate
        },
        {name: 'price', _label: 'main.price', Ehidden: true,
        	canCopy: true,
            template: numberTemplate
        },
        {name: 'amount', label: 'Количество занятий',
            template: numberTemplate
        },
        {name: 'priceamount', label: 'Расчетное к-во',
            template: numberTemplate
        },
        {name: 'calcamount', label: 'Количество занятий',
        	canCopy: true,
            hidden: true, hidedlg: true,
            Ehidden: true,
            template: numberTemplate
        },
        $.extend(true, {
            name: 'calc', label: 'Расчетное к-во'
        }, $.jgrid.cmTemplate.booleanCheckboxFa, {
        	canCopy: true,
            hidden: true, hidedlg: true,
            Ehidden: true,
            editoptions: {defaultValue: '0'},
            formoptions: {rowpos: 3, colpos: 2}
        }),
        {name: 'period', _label: 'main.period', Ehidden: true, width: 200,
        	canCopy: true,
            formoptions: {
                //elmprefix:"&nbsp;&nbsp;(<span class='mystar' style='color:red'>*</span>)&nbsp;",
                label: SCRM.i18n.main.period +' '+ SCRM.hintLink('options_typeinvoice_period')
            }
        },
        {name: 'stype', _label: 'main.pass', width: 150,
            search: false,
            formatter: function(cellValue, opts, rObj) {
                return SCRM.htmlTag('a', {
                    run: 'chInvTypeSType',
                    'data-id': rObj.id,
                    cls: 'd-block',
                    html: cellValue || SCRM.fmtIco('fa-plus')
                });
            }
        },
        {name: 'auto', label: 'Авто', editable: true,
        	canCopy: true,
            template: gridLookSelTpl
        },
        {name: 'def', _label: 'main.default',
            editable: true,
            template: 'booleanCheckboxFa'
        },
        {name: 'menuindex', canCopy: true, template: menuindexTemplate},
        {name: 'published', template: publishedTemplate, 
            searchoptions: {
                defaultValue: '1'
            }
        }
    ];
    
    
    if (optsData.adm) {
        colModel.push({
            name: 'city', _label: 'main.city', width: 100,
            editable: true,
            canCopy: true,
            sVal: true,
            formatter: function(cv, op, row) {
                return SCRM.empty(cv)? '' : row.city_name;
            },
            template: gridLookSelTpl,
            dbvalues: 'idCity', dbvalues0: 0
        });
    }
    
    var grid_idInvoiceType = $('#grid_idInvoiceType')
    .on('GridSelectRows', function(e, data) {
    	SCRM.link(optsData, {
    		selTypeId: data.selID||0,
    		selIDs: data.selIDs.slice(),
    		selCnt: data.selCnt
    	});
    	if (optsData.selTypeId) {
    		selInvoiceType = $(e.target).jqGrid('getRowData', optsData.selTypeId);
    	}
    })
    .on('jqGridBeforeProcessing', function(e, data, textStatus, jqXHR) {
        $.each(data.rows, function(n, r) {
            if (r.def !== '0') r.def = '1';
            r.calcamount = r.amount;
            if (!SCRM.empty(r.priceamount)) {
                r.calcamount = r.priceamount;
                r.calc = '1';
            }
        });
        if (data.ScheduleCfg && !optsData.schStatus) {
            var schStatus = $.map(SCRM.clubStatus.idSchedule, function(v, i) {
            	var cfgKey = 'schedule_'+v.alias;
            	return SCRM.mergeobj({
            		cfgKey: cfgKey,
            		chLesson: data.ScheduleCfg[ cfgKey ]
            	}, v);
            });
            SCRM.link(optsData, 'schStatus', schStatus);
            console.log('schStatus', schStatus);
        }
    })
    .jqGridInit({
        multiSort: true,
        sortname: 'menuindex asc, name',
        sortorder: 'asc',
        search: true,
        rowNum: 25, rowList: false, pginput: false,
        multiselect: optsData.adm,
        colModel: colModel,
        navOpts: {add: false, edit: true, del: false, search: false},
        fltrToolbar: true,
        btnExport: true,
        btnColumns: true
    })
    .jqGridSetLookup(autoOpts, 'auto');
    
    /* ========================================================= */
    
    SCRM._service.chInvTypeSType = function(e) {
        var typeinvoice = $(this).data('id');
        
        var sitdata = {
            body: '#tpl_idSInvType_edit',
            cm_size: 'sm'
        };
            
        club_Modal(sitdata, {
            selType: function(invType) {
                if (sitdata.ready) {
                    pEDIT('idSInvType', {
                        oper: 'change',
                        id: 'xXx',
                        typeinvoice: typeinvoice,
                        stype: invType
                    }, function(data){
                        grid_idInvoiceType.trigger('reloadGridData');
                    });
                }
            }
        });
        
        pDATA('idSInvType', {
            rows: 1001,
            _where: {
                typeinvoice: typeinvoice
            }
        }, function(data){
            var nType = $.map(data.rows, function(v, i) {
                return v.stype;
            });
            SCRM.link(sitdata, 'invType', nType);
            sitdata.ready = true;
        });
    }
});
</script>

<script id="mdl_jqGridInvoiceAdd" type="text/x-jsrender">
{{include newRow}}
    <div class="form-row">
    
        <div class="col-6 col-md-3 mb-3 offset-md-9 offset-6" data-link="visible{:menuindex.edit}">
            <label for="mdlGridAdd_menuindex" data-link="~i18n.main.menuindex"></label> 
            <input type="number" class="form-control" id="mdlGridAdd_menuindex" data-link="{:menuindex.value:} ">
        </div>
    
        <div class="col-12 mb-3">
            <div class="d-flex">
                <label for="mdlGridAdd_name">{{:~i18n.main.name}} <abbr title="Required">*</abbr></label> 
                <label class="ml-auto"><a href="#" class="dashed" data-link="visible{:!menuindex.edit} {on ~showMenuindex}">{{:menuindex.value}}</a></label> 
            </div>
            <input type="text" class="form-control" id="mdlGridAdd_name" data-link="{:name.value:} class{merge:name.bad toggle='is-invalid'}">
        </div>
        
        <div class="col-6 col-md-9 mb-3">
            <label for="mdlGridAdd_price" data-link="~i18n.main.price"></label> 
            <input type="number" class="form-control" id="mdlGridAdd_price" data-link="{:price.value:} ">
        </div>
        
        <div class="col-12 col-md-12">
            <div class="custom-control custom-checkbox mb-3">
                <input type="checkbox" class="custom-control-input" id="mdlGridAdd_pass" data-link="pass"> 
                <label class="custom-control-label" for="mdlGridAdd_pass" data-link="~i18n.main.pass"></label>
            </div>
        </div>
    </div>
    
    <div class="form-row" data-link="visible{:pass}"> 
        <div class="col-12 col-md-9 mb-3">
            <label for="mdlGridAdd_period">Период <abbr title="Required">*</abbr> {{:~S.hintLink('options_typeinvoice_period')}}</label>
            <input type="text" class="form-control" id="mdlGridAdd_period" data-link="{:period.value:} class{merge:period.bad toggle='is-invalid'}"">
        </div>
        
        <div class="col-6 col-md-3 mb-3">
            <label for="mdlGridAdd_amount">Кол-во занятий</label> 
            <input type="number" class="form-control" id="mdlGridAdd_amount" data-link="{:amount.value:} ">
        </div>
        
        <div class="col-12 col-md-9 mb-3">
            <label data-link="~i18n.main.type"></label>
            <div data-link="html{for ~S.clubStatus.idSchedule tmpl='#tpl_idSInvType'} {checkboxgroup type}"></div>
        </div>
        
        <div class="col-6 col-md-3 mb-3">
            <label for="mdlGridAdd_auto">Авто</label>
            <select class="custom-select" id="mdlGridAdd_auto" data-link="{:auto.value:}">
                {{for autoOpts}}<option value="{{:id}}">{{:name}}</option>{{/for}}
            </select>
        </div>
    </div>
    {{if cityAdm}}
    <hr>
    <div data-link="{radiogroup city}">
        <div class="custom-control custom-control-inline custom-radio">
            <input type="radio" class="custom-control-input" id="mdlGridAdd_cityAll" value="0">
            <label class="custom-control-label" for="mdlGridAdd_cityAll">{{:~i18n.main.allcity}}</label>
        </div>
        <div class="custom-control custom-control-inline custom-radio">
            <input type="radio" class="custom-control-input" id="mdlGridAdd_cityMy" value="{{:~S.app.club_city}}">
            <label class="custom-control-label" for="mdlGridAdd_cityMy"><i class="fa fa-map-marker"></i> {{:~S.app.city_name}}</label>
        </div>
    </div>
    {{/if}}
{{/include}}
</script>

<script id="tpl_idSInvType_edit" type="text/x-jsrender">
    <div data-link="html{for ~S.clubStatus.idSchedule tmpl='#tpl_idSInvType'} {checkboxgroup invType ~selType(invType)}">
    </div>
</script>

<script id="tpl_idSInvType" type="text/x-jsrender">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="its_{{:alias}}" value="{{:alias}}">
        <label class="custom-control-label" for="its_{{:alias}}">{{:name}}</label>
    </div>
</script>