<tmpl_include header.inc>
<style>
 .roundBorder  {
        border:solid 1px #D2D2D2;
        -moz-border-radius: 3px;
        border-radius:3px 3px 3px 3px;
        -webkit-border-radius: 3px;
    }
table.prefEdit th{
    width:100px;
}
table.prefEdit {
    padding:5px;
    width:670px;
    border:solid lightgray 1px;
    border-radius:1
    background-color: #000000;

}
table.userAuthType th,table.userAuthType td{
    border:none;
    padding:7px;
}

table.userAuthType th{
    width:80px;
}
table.userAuthType td{
    width:400px;
}

.sortable-placeholder{
        border: 1px dotted black;
        background:#d9ffb3;
        margin: 0 1em 0em 0;
        height: 20px;
        width:350px;
    }

fieldset {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}

.txtLargeBrown{
    color:brown;font-size:110%;
    font-weight:bold;
}
input:invalid{
    border:1px red solid;
}
</style>


<div id='title'><div style='float:right;'>
<a href=# onclick="showHelpInst('<tmpl_var hlpUrl default="https://help.opalsinfo.net">');"><img src='/theme/opals/image/hlp.gif'></a>
</div>System Preference</div>

<script type='text/javascript'>

//----------------------------------------------------------------------------
opalsApp.controller('sysPrefCtrl', ['$scope','$http','$location','waitingAnimation',
    function ($scope,$http,$location,waitingAnimation) {
    $scope.oplMsg=oplMsg;
    $scope.sysPref=prefJson;
    $scope.editItem=<tmpl_var EditItem default=0>;
    $scope.prefMenu=<tmpl_var prefMenu default=[]>;
    $scope.sysParams={};
    $scope.prefEdit={};
    $scope.opalsMenu=<tmpl_var opalsMenuJson default=[]>;
    $scope.userAuthType={type:"default"};
    $scope.timeUnit=[{name:'day',val:'d'},
                      {name:'hour',val:'h'},
                      {name:'minute',val:'m'}
                      ];
    $scope.spAcsUrl = $location.protocol() + "://" +$location.host() +"/saml/acs.php";                  
    $scope.spEntityId = $location.protocol() + "://" +$location.host() +"/saml/metadata.php";                  
    //----------------------------------------------------------------------------
    $scope.isEbookSet=function(){  
        var retVal=true;
        angular.forEach($scope.prefMenu,function(g){
            if(g.grpTitle =='Ebook Settings'){
                var sList= g.prefVarList;
                angular.forEach(sList,function(p){    
                    if(p.var =="ebs_libCode" && p.val == ""){      
                       retVal=false;
                    }
                    else{
                      angular.forEach(sList,function(p){
                        if(p.var =="ebs_host" && p.val == "" ){      
                          retVal=false;
                        }
                      })
                    }

                });
            }
        });
        return retVal;
    }
    //----------------------------------------------------------------------------
    $scope.verifyEbookOnclick=function(p){
        if(p.var == 'ebookModule' && p.val==0){
            //console.log($scope.isEbookSet());
           if(!$scope.isEbookSet()){
                $("#supportInfoDiv").dialog({modal:true,resize:'auto',width:690,closeText:'',
                      buttons: [
                        {text: "Close",  click: function(){$("#supportInfoDiv").dialog("close")}}
                      ]
                });
                return; 
            }

        }
    }
    //----------------------------------------------------------------------------
    $scope.updateFields=function(){
        var tmpFieldList=[];
        $("#fieldSelection input[type=checkbox]").each(function(){
             var fName=$(this).attr("field");
             angular.forEach($scope.prefEdit.valParamList,function(e){
                if(fName == e.val ){
                    tmpFieldList.push(e);
                }
             });
        });
        angular.copy(tmpFieldList,$scope.prefEdit.valParamList);
        angular.copy(tmpFieldList,$scope.prefCopy.valParamList);
        $scope.$digest();
    }
    //----------------------------------------------------------------------------
    $scope.isModuleEnable=function(p){
        var retVal=true;
        var varNameMap={
            textbookHeader:"textbookMgmnt",
            eqmntHeader:"equipmentMgmnt",
            ebookHeader:"ebookModule",
            illHeader:"unionId"
            };

        if(varNameMap[p.mainMenuId]){
            retVal=false;
            $scope.prefMenu.forEach(function(i){
                i.prefVarList.forEach(function(s){
                    if(s.var == varNameMap[p.mainMenuId]){
                       if(s.val=="1" || (s.var=="unionId" && s.val!="")){
                            retVal=true;
                       }
                    }
                });
            });
        }
        return retVal;
       
    }
    //----------------------------------------------------------------------------
    $scope.editPrefMenu=function(pref){
        var menuItem={};
        pref.val.split(",").forEach(function(i){
            menuItem[i]=false;
            });
        $scope.opalsMenu.forEach(function(m){
            m.submenuItem.forEach(function(s){
                s.show=(menuItem[s.path]!=null);
            });
        });
        $scope.prefEditDlg =$("#prefMenuEditDlg").dialog({modal:true,resize:'auto',width:950,height:500,closeText:'',
                 title:"Setting: Menu" ,
                 close: function(){},
                 buttons: [
                        {text: "Save", click: function(){$scope.savePref();$scope.mouseOut("row_" +pref.var);}},
                        {text: "Cancel",  click: function(){$($scope.prefEditDlg).dialog("close");$scope.mouseOut("row_" +pref.var);}}
                ]});

    }
    //----------------------------------------------------------------------------
    $scope.validateLdapCfgForm=function(){
        if($scope.userAuthCfg.ldap.port==""){
            if($scope.userAuthCfg.ldap.isSSL==1){
                $scope.userAuthCfg.ldap.port=636;
            }
            else{
                $scope.userAuthCfg.ldap.port=389;
            }
            $scope.$digest();
        }
        if($scope.userAuthCfg.ldap.host=='' || $scope.userAuthCfg.ldap.baseDN==''){
            return false
        }
        else if($scope.userAuthCfg.ldap.anonymousAuth==0 &&
            ( $scope.userAuthCfg.ldap.ldapUserDN=='' 
             || $scope.userAuthCfg.ldap.ldapUsePass=='')){
            return false;
        }
        return true;
    }
    //----------------------------------------------------------------------------
    $scope.validateSamlCfgForm=function(){
        if($scope.userAuthCfg.samlSso.singleSignOnService=="" 
            || $scope.userAuthCfg.samlSso.entityId==""
            || $scope.userAuthCfg.samlSso.x509cert=="" ){

            return false;

        }
        return true;
    }
    //----------------------------------------------------------------------------
    $scope.saveLdapAuthCfg=function(){
        $scope.prefCopy.val=$scope.prefEdit.val;
        //verify form
        if($scope.prefEdit.var=='ldapAuthentication' && $scope.prefEdit.val=='1' && !$scope.validateLdapCfgForm()) {
            return; 
        }
        //else if($scope.prefEdit.var=='samlSSO' && $scope.prefEdit.val=='1' && !$scope.validateSamlCfgForm()){
        //   return;
        //}
        angular.forEach($scope.prefCopy.valParamList,function(p){
                p.selected=0;
                if(p.val==$scope.prefCopy.val){
                  $scope.prefCopy.valShow=p.name;
                  p.selected=1;
                }
            });

        param= {op:'s', prefList:[{var:$scope.prefCopy.var,val:$scope.prefCopy.val,valShow:$scope.prefCopy.valShow},
                                  {var:"extUserAuthCfg",val:JSON.stringify($scope.userAuthCfg)}] };
        $http.post("/bin/ajax/util/sysPref",param).success(
            function(data){
                $($scope.prefEditDlg).dialog("close");
         });
    }
    //----------------------------------------------------------------------------
    $scope.editUserAuthPref=function(pref){
        var param={op:'r',var:'extUserAuthCfg'};
        $http.post("/bin/ajax/util/sysPref",param).success(
            function(data){
                $scope.userAuthCfg=JSON.parse(data.extUserAuthCfg);
                $scope.prefEditDlg =$("#userAuthTypeEditDlg").dialog({modal:true,resize:'auto',width:550,height:450,closeText:'',
                    title:"Setting: Menu" ,
                    close: function(){},
                    buttons: [
                        {text: "Save", click: function(){$scope.saveUserAuthCfg();$scope.mouseOut("row_" +pref.var);}},
                        {text: "Cancel",  click: function(){$($scope.prefEditDlg).dialog("close");$scope.mouseOut("row_" +pref.var);}}
                ]});
            });

    }
    //----------------------------------------------------------------------------
    $scope.editLdapAuth=function(pref){
        var param={op:'r',var:'extUserAuthCfg'};
        $http.post("/bin/ajax/util/sysPref",param).success(
            function(data){
                $scope.userAuthCfg=JSON.parse(data.extUserAuthCfg);
                $scope.prefEditDlg =$("#ldapAuthCfgDlg").dialog({modal:true,resize:'auto',width:550,height:450,closeText:'',
                    title:"Setting: Menu" ,
                    close: function(){},
                    buttons: [
                        {text: "Save", click: function(){$scope.saveLdapAuthCfg();$scope.mouseOut("row_" +pref.var);}},
                        {text: "Cancel",  click: function(){$($scope.prefEditDlg).dialog("close");$scope.mouseOut("row_" +pref.var);}}
                ]});
            });

    }
    //----------------------------------------------------------------------------
    $scope.editGoogleSSO=function(pref){
        var param={op:'r',var:'extUserAuthCfg'};
        $http.post("/bin/ajax/util/sysPref",param).success(
            function(data){
                $scope.userAuthCfg=JSON.parse(data.extUserAuthCfg);
                $scope.prefEditDlg =$("#googleSsoCfgDlg").dialog({modal:true,resize:'auto',width:650,height:250,closeText:'',
                    title:"Setting: Menu" ,
                    close: function(){},
                    buttons: [
                        {text: "Save", click: function(){$scope.saveLdapAuthCfg();$scope.mouseOut("row_" +pref.var);}},
                        {text: "Cancel",  click: function(){$($scope.prefEditDlg).dialog("close");$scope.mouseOut("row_" +pref.var);}}
                ]});
            });

    }
    //----------------------------------------------------------------------------
    $scope.editSamlSSO=function(pref){
        var param={op:'r',var:'extUserAuthCfg'};
        $http.post("/bin/ajax/util/sysPref",param).success(
            function(data){
                $scope.userAuthCfg=JSON.parse(data.extUserAuthCfg);
                $scope.prefEditDlg =$("#samlCfgDlg").dialog({modal:true,resize:'auto',width:530,height:400,closeText:'',
                    title:"Setting: Menu" ,
                    close: function(){},
                    buttons: [
                        {text: "Save", click: function(){$scope.saveLdapAuthCfg();$scope.mouseOut("row_" +pref.var);}},
                        {text: "Cancel",  click: function(){$($scope.prefEditDlg).dialog("close");$scope.mouseOut("row_" +pref.var);}}
                ]});
            });

    }
    
    //----------------------------------------------------------------------------

    $scope.addDelRepBkgRcvOpts=function(o){
        var idx=$scope.bkgModuleOptions.receivingOptions.indexOf(o.val);
        if(o.selected && idx>=0){
            $scope.bkgModuleOptions.receivingOptions.splice(idx,1);
        }
        else if(!o.selected ){
            $scope.bkgModuleOptions.receivingOptions.push(o.val);
        }
    }
    //----------------------------------------------------------------------------
    $scope.saveBkgModuleCfg=function(){
        var param=$scope.bkgModuleOptions;
        param.enable=(param.catalogs.enableLib==1 || param.catalogs.enableTb==1 || param.catalogs.enableEq==1)?1:0;
        var valShow=$scope.bkgModuleOptions.enable==1?'On':'Off';
        var val=JSON.stringify($scope.bkgModuleOptions);
        $scope.prefCopy.val=val;
        $scope.prefCopy.valShow=valShow;
        if($scope.bkgModuleOptions.enable==1 && $scope.bkgModuleOptions.receivingOptions.length==0){
            return;
        }
        param= {op:'s',
                 prefList:[
                    {var:'bookingModule',
                     val:val,
                     valShow:valShow
                    }
                 ]
         };
        $http.post("/bin/ajax/util/sysPref",param).success(
            function(data){
                $($scope.prefEditDlg).dialog("close");
        });

    }
    //----------------------------------------------------------------------------
    $scope.saveClassLinkRosterCfg=function(){
        var param=$scope.classLinkRosterCfg;
        var val=JSON.stringify($scope.classLinkRosterCfg);
        var valShow=$scope.classLinkRosterCfg.enable==1?'On':'Off';
        $scope.prefCopy.val=val;
        $scope.prefCopy.valShow=valShow;
        if(param.enable==1){
            for(var field in param){
                if(!param[field] || param[field].trim()==''){
                     return;
                }
            }
        }
        param= {op:'s',
                prefList:[
                    {var:'classLinkRoster',
                     val:val,
                     valShow:valShow
                    }
                 ]
         };
        $http.post("/bin/ajax/util/sysPref",param).success(
            function(data){
                $($scope.prefEditDlg).dialog("close");
        });
    }
 
    //----------------------------------------------------------------------------
    $scope.catalogEnableChange=function(){
        var enabled=$scope.bkgModuleOptions.enable;
        $scope.bkgModuleOptions.catalogs.enableLib=enabled;
        $scope.bkgModuleOptions.catalogs.enableTB =enabled; 
        $scope.bkgModuleOptions.catalogs.enableEQ =enabled;
        
     
    }
    
     //----------------------------------------------------------------------------
    $scope.saveSendTrs2ParentCfg=function(){
        const prefVal={
                   enable:$scope.prefEdit.enable,
                   fieldInc:$scope.prefEdit.fieldInc};
        const valShow=prefVal.enable==0?'Off': 'On';
        $scope.prefEdit.valShow=valShow;
         param= {op:'s',
                 prefList:[
                    {var:'parentTxnNotification',
                     val:JSON.stringify(prefVal),
                     'valShow':valShow
                    }
                 ]
         };

        $scope.prefCopy.val=JSON.stringify(prefVal);
        $scope.prefCopy.valShow=valShow;
        $http.post("/bin/ajax/util/sysPref", param).success(
            function(data){
                $($scope.prefEditDlg).dialog("close");
        });

    }

    //----------------------------------------------------------------------------
    $scope.ratingEnableChange=function(val){
        $scope.prefEdit.val=val;
        if(val ==1){
            $scope.enabledRatingSel_2=0;
        }
        if(val ==2)  {
            $scope.enabledRatingSel_1=0;
        }
        if($scope.enabledRatingSel_1 ==0 && $scope.enabledRatingSel_2==0)
            $scope.prefEdit.val=0;    


    }
    //----------------------------------------------------------------------------
    $scope.editRatingOpt=function(pref){
        $scope.enabledRatingSel_1=$scope.enabledRatingSel_2=0;
        $scope.sysPref.ratingLoginReq=parseInt($scope.sysPref.ratingLoginReq);
        if(pref.val ==1)
            $scope.enabledRatingSel_1=1;
        if(pref.val ==2)  
            $scope.enabledRatingSel_2=2;
              
        $scope.prefEditDlg =$("#ratingEditDlg").dialog(
                            {modal:true,resize:'auto',width:600,height:350,closeText:'',
                            title:"Setting: Rating" ,
                            close: function(){},
                            buttons: [
                                { text: "Save", 
                                  click: function(){
                                      $scope.savePref();
                                      $scope.mouseOut("row_" +pref.var);}
                                },
                                { text: "Cancel", 
                                  click: function(){
                                            $($scope.prefEditDlg).dialog("close");
                                            $scope.mouseOut("row_" +pref.var);}
                                }
                            ]});
     }
    //----------------------------------------------------------------------------
    $scope.togglePredueRecipient=function(recipient){
        const idx= $scope.prefEdit.recipient.findIndex(s=>s===recipient);
        if(idx>=0){
            $scope.prefEdit.recipient.splice(idx,1);
        }
        else{
             $scope.prefEdit.recipient.push(recipient);
        }
    }
   //----------------------------------------------------------------------------
    $scope.togglePredueFields=function(field){
        const idx= $scope.prefEdit.fieldInc.findIndex(s=>s===field);
        if(idx>=0){
            $scope.prefEdit.fieldInc.splice(idx,1);
        }
        else{
             $scope.prefEdit.fieldInc.push(field);
        }
    }
   //----------------------------------------------------------------------------
    $scope.savePredueNoticeCfg=function(){
        const prefVal={
                   days:$scope.prefEdit.days,
                   subject:$scope.prefEdit.subject,
                   incPrefName:$scope.prefEdit.incPrefName,
                   fieldInc:$scope.prefEdit.fieldInc,
                   recipient:$scope.prefEdit.recipient,
                   msgTop:$scope.prefEdit.msgTop,
                   msgBottom:$scope.prefEdit.msgBottom};
        const valShow=prefVal.days==0?'Off': `${prefVal.days} ${prefVal.days>1?'days':'day'}`;
        $scope.prefEdit.valShow=valShow;
         param= {op:'s',
                 prefList:[
                    {var:'preDueNotice',
                     val:JSON.stringify(prefVal),
                     'valShow':valShow
                    }
                 ]
         };

        $scope.prefCopy.val=JSON.stringify(prefVal);
        $scope.prefCopy.valShow=valShow;
        $http.post("/bin/ajax/util/sysPref", param).success(
            function(data){
                $($scope.prefEditDlg).dialog("close");
        });

    }
    //----------------------------------------------------------------------------
    $scope.saveSchelODNoticeCfg=function(){
        const prefVal={
                   days:$scope.prefEdit.days,
                   subject:$scope.prefEdit.subject,
                   incPrefName:$scope.prefEdit.incPrefName,
                   fieldInc:$scope.prefEdit.fieldInc,
                   recipient:$scope.prefEdit.recipient,
                   msgTop:$scope.prefEdit.msgTop,
                   msgBottom:$scope.prefEdit.msgBottom};
        const valShow=prefVal.days==0?'Off': `${prefVal.days} ${prefVal.days>1?'days':'day'}`;
        $scope.prefEdit.valShow=valShow;
         param= {op:'s',
                 prefList:[
                    {var:'OD_emailScheduler',
                     val:JSON.stringify(prefVal),
                     'valShow':valShow
                    }
                 ]
         };

        $scope.prefCopy.val=JSON.stringify(prefVal);
        $scope.prefCopy.valShow=valShow;
        $http.post("/bin/ajax/util/sysPref", param).success(
            function(data){
                $($scope.prefEditDlg).dialog("close");
        });

    }
    //----------------------------------------------------------------------------
    $scope.editSchelDueNoticeCfg=function(pref){
        if(Number.isInteger(parseInt(pref.val))){
            $scope.prefEdit={
                            days:pref.val,
                            subject:'',
                            recipient:['student','guardian'],
                            fieldInc:['title','price','callNum'],
                            msgTop:'Our records indicate these items are overdue. Please return these materials.',
                            msgBottom:'Thank you.'
                            };
        }
        else{
            try{
                $scope.prefEdit=JSON.parse(pref.val);
            }
            catch(e){
                $scope.prefEdit={days:0}
            }
        }
        //console.log(pref.val);
        $scope.prefEdit.valParamList=[...pref.valParamList];

        $scope.prefEditDlg =$("#scheDueNotice").dialog({modal:true,resize:'auto',width:700,height:450,closeText:'',
                    title:"Scheduled Emailing Overdue Notice Setting" ,
                    close: function(){},
                    buttons: [
                        {text: "Save", click: function(){$scope.saveSchelODNoticeCfg();$scope.mouseOut("row_" +pref.var);}},
                        {text: "Cancel",  click: function(){$($scope.prefEditDlg).dialog("close");$scope.mouseOut("row_" +pref.var);}}
                ]});
    }

   //----------------------------------------------------------------------------
    $scope.editPreDueCfg=function(pref){
        if(Number.isInteger(parseInt(pref.val))){
            $scope.prefEdit={
                            days:pref.val,
                            subject:'Upcoming Materials Due',
                            recipient:['student','guardian'],
                            fieldInc:['title','price','callNum'],
                            msgTop:'Our records indicate these items are due soon. Please return these materials on or by their due date',
                            msgBottom:'Thank you.'
                            };
        }
        else{
            try{
                $scope.prefEdit=JSON.parse(pref.val);
            }
            catch(e){
                $scope.prefEdit={days:0}
            }
        }
       //console.log($scope.prefEdit);
        $scope.prefEdit.valParamList=[...pref.valParamList];

        $scope.prefEditDlg =$("#preDueNotice").dialog({modal:true,resize:'auto',width:600,height:450,closeText:'',
                    title:"Pre-due Notice Setting" ,
                    close: function(){},
                    buttons: [
                        {text: "Save", click: function(){$scope.savePredueNoticeCfg();$scope.mouseOut("row_" +pref.var);}},
                        {text: "Cancel",  click: function(){$($scope.prefEditDlg).dialog("close");$scope.mouseOut("row_" +pref.var);}}
                ]});
    }
    //----------------------------------------------------------------------------
    $scope.editBookingModule=function(pref){
        $scope.bkgModuleOptions=JSON.parse(pref.val);
        if(!$scope.bkgModuleOptions.catalogs){
            $scope.bkgModuleOptions.catalogs={
                    enableLib:1,
                    enableTB:0,
                    enableEQ:0
                };
        }
        if(!$scope.bkgModuleOptions.allowQuickProcessing){
            $scope.bkgModuleOptions.allowQuickProcessing='0';
        }


        $scope.bkgReceiveOpts=[
            {label:"SHIP", val:"SHIP",selected:false},
            {label:"Library Pickup", val:"LIB_PICKUP",selected:false},
            {label:"Curbside Pickup", val:"CURB_PICKUP",selected:false},
            {label:"Classroom Pickup", val:"CLRM_PICKUP",selected:false} //khanh added 2021-04-27 15:47:41 EDT, Tue Apr

        ]

        $scope.bkgModuleOptions.receivingOptions.forEach(function(o){
                $scope.bkgReceiveOpts.forEach(function(v){
                    if(o==v.val)
                        v.selected=true;
                }
            )});

        $scope.prefEditDlg =$("#bookingModuleEditDlg").dialog({modal:true,resize:'auto',width:600,height:500,closeText:'',
                    title:"Setting: Booking Module" ,
                    close: function(){},
                    buttons: [
                        {text: "Save", click: function(){$scope.saveBkgModuleCfg();$scope.mouseOut("row_" +pref.var);}},
                        {text: "Cancel",  click: function(){$($scope.prefEditDlg).dialog("close");$scope.mouseOut("row_" +pref.var);}}
                ]});
    }
    //----------------------------------------------------------------------------
    $scope.editClasslinkRosterCfg=function(pref){
        $scope.classLinkRosterCfg=JSON.parse(pref.val);
        $scope.prefEditDlg =$("#classlinkRosterCfgEditDlg").dialog({modal:true,resize:'auto',width:500,height:380,closeText:'',
            title:"ClassLink Rostering Configuration" ,
            close: function(){},
            buttons: [
                {text: "Save", click: function(){$scope.saveClassLinkRosterCfg();$scope.mouseOut("row_" +pref.var);}},
                {text: "Cancel",  click: function(){$($scope.prefEditDlg).dialog("close");$scope.mouseOut("row_" +pref.var);}}
        ]});

    }
   //----------------------------------------------------------------------------
    $scope.editParentTxnNotificationCfg=function(pref){
        if(Number.isInteger(parseInt(pref.val))){
            $scope.prefEdit={
                            enable:pref.val,
                            fieldInc:['title','price','callNum','bookcover']
                            };
        }
        else{
            try{
                $scope.prefEdit=JSON.parse(pref.val);
            }
            catch(e){
                $scope.prefEdit={enable:0}
            }
        }

        $scope.prefEditDlg =$("#parentTxnNotification").dialog({modal:true,resize:'auto',width:650,height:280,closeText:'',
            title:"Sending Transactions configuration" ,
            close: function(){},
            buttons: [
                {text: "Save", click: function(){$scope.saveSendTrs2ParentCfg();$scope.mouseOut("row_" +pref.var);}},
                {text: "Cancel",  click: function(){$($scope.prefEditDlg).dialog("close");$scope.mouseOut("row_" +pref.var);}}
        ]});

    }
    //----------------------------------------------------------------------------
    $scope.editPref=function(pref){
        $scope.prefCopy=pref;
        if(pref.var=='menuConfig'){
            $scope.editPrefMenu(pref);
            return;
        }
        else if(pref.var=='ldapAuthentication'){
            angular.copy(pref,$scope.prefEdit);
            $scope.editLdapAuth($scope.prefEdit);
            return;
        }
        else if(pref.var=='googleSignin'){
            angular.copy(pref,$scope.prefEdit);            
            $scope.editGoogleSSO($scope.prefEdit);
            return;
        }
        else if(pref.var=='samlSSO'){
            angular.copy(pref,$scope.prefEdit);            
            $scope.editSamlSSO($scope.prefEdit);
            return;
        }
        else if(pref.var=='bookingModule'){
            //angular.copy(pref,$scope.prefEdit);
            $scope.editBookingModule($scope.prefCopy);
            return;
        }
        else if(pref.var=='rating'){
            angular.copy(pref,$scope.prefEdit);            
            $scope.editRatingOpt($scope.prefCopy);
            return;
        }
       else if(pref.var=='preDueNotice'){
            $scope.editPreDueCfg(pref);
            return;
        }
       else if(pref.var=='OD_emailScheduler'){
            $scope.editSchelDueNoticeCfg(pref);
            return;
        }
 
       else if(pref.var=='classLinkRoster'){
            $scope.editClasslinkRosterCfg($scope.prefCopy);
            return;
        }
       else if(pref.var=='parentTxnNotification'){
            angular.copy(pref,$scope.prefEdit);
            $scope.editParentTxnNotificationCfg($scope.prefEdit);
            return;
        }

        
        angular.copy(pref,$scope.prefEdit);
        if($scope.prefEdit.varType=='timeLength'){
          var rs=$scope.prefEdit.val.match(/(\d+)([mdh])/);
          $scope.prefEdit.timeLength=rs[1];
          $scope.prefEdit.unit=rs[2];
          angular.forEach($scope.timeUnit,function(p){
              p.selected=false;
              if(p.val ==$scope.prefEdit.unit){
                p.selected=true;
            }
          });

        }
        else if(pref.varType=='checkbox'){
            $scope.selVal={};
            $scope.selAll.selected=true;
            //console.log($scope.prefEdit.valParamList)
            if(pref.var == 'showARL'){
                $scope.prefEdit.valParamList.push({ name: "Other", val: "", selected: 0});
            }
            angular.forEach($scope.prefEdit.valParamList,function(p){
                $scope.selVal[p.val]=(p.selected==1)?true:false;
                if(p.selected!=1){
                    $scope.selAll.selected=false;
                }
            });
            if(pref.var.search('briefRecFields')==-1){
                setTimeout(function(){
                    $("#fieldSelection").sortable({
                        placeholder: "sortable-placeholder",
                        stop:function(){$scope.updateFields()}
                        });
                    $( "#fieldSelection" ).disableSelection();
                    },100);

            }
        }
        else if(pref.varType=='textList'){
            $scope.prefEdit.txtList=[];
            if(!$scope.isJsonString($scope.prefEdit.val))
                $scope.prefEdit.txtList.push($scope.prefEdit.val);
            else    
                $scope.prefEdit.txtList=JSON.parse($scope.prefEdit.val);
            $scope.prefEdit.txtList.push("");
        }
        else if(pref.varType=='userImport'){
            var defUserType=$scope.getDefaultUserType();
            if(pref.val!="" && $scope.isJsonString(pref.val)){
                $scope.prefEdit.params=JSON.parse(pref.val);
            }
            else{
                $scope.prefEdit.params=[{src:pref.val,defUserType:defUserType}];
            }
            if($scope.prefEdit.params.length==0 || $scope.prefEdit.params[$scope.prefEdit.params.length-1].src.trim()!=""){
                $scope.prefEdit.params.push({src:"",defUserType:defUserType});
            }
                                   
        }
        setTimeout(function(){$scope.mouseOver("row_" +pref.var);},100);

        $scope.prefEditDlg =$("#sysPrefEditDlg").dialog({modal:true,resize:'auto',width:690,closeText:'',
                         title:"Setting: " + $scope.prefEdit.var,
                         close: function(){},
                         buttons: [
                                {text: "Save", click: function(){$scope.savePref();$scope.mouseOut("row_" +pref.var);}},
                                {text: "Cancel",  click: function(){$($scope.prefEditDlg).dialog("close");$scope.mouseOut("row_" +pref.var);}}
                        ]});

    }
    //----------------------------------------------------------------------------
    $scope.addRemoveEmptyEntry=function() {
        var n=$scope.prefEdit.params.length -1;
        if($scope.prefEdit.params[n].src!=""){
            var defUserType=$scope.getDefaultUserType();
            $scope.prefEdit.params.push({src:"",defUserType:defUserType});
        }
  }
  //----------------------------------------------------------------------------
    $scope.getDefaultUserType=function() {
        var defUserType;
        angular.forEach($scope.prefMenu,function(m){
            angular.forEach(m.prefVarList,function(p){      
                if(p.var=='defCategory'){
                    defUserType=p.val;
                    
                }
            });
        });
        return defUserType;
    }
   //----------------------------------------------------------------------------
    $scope.getUserTypeName=function(type) {
        var userTypeName;
         angular.forEach($scope.prefEdit.valParamList,function(ut){
             if(ut.val==type)
                 userTypeName=ut.name;
         });
        
        return userTypeName;
    }
   //----------------------------------------------------------------------------
    $scope.isJsonString=function(str) {
        if (/^[\],:{}\s]*$/.test(str.replace(/\\["\\\/bfnrtu]/g, '@').
            replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
            replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
              return true;
        }
        else{
          return false;
        }
    }
   //----------------------------------------------------------------------------
    $scope.toggleMenuSel=function(m){
        var show=!(m.show || m.show==null);
        m.submenuItem.forEach(function(s){
            s.show=show;
        });
    }
   //----------------------------------------------------------------------------
    $scope.toggleSubMenuSel=function(m,s){
        $scope.opalsMenu.forEach(m=>{
            m.submenuItem.forEach(i=>{
                if(s.path==i.path){
                    i.show=s.show;
                }
            });
        })
        if(s.show){
            m.show=true;
        }

    }
   //----------------------------------------------------------------------------
    $scope.savePref=function(){
        if($scope.prefCopy.var=='menuConfig'){
             var valArr=[];
             $scope.opalsMenu.forEach(function(m){
                m.submenuItem.forEach(function(s){
                    if(s.show){
                        console.log(s);
                        valArr.push(s.path);
                    }
                });
            })
            $scope.prefCopy.val=valArr.join(",");

        }
        else if($scope.prefCopy.varType=='timeLength'){
            $scope.prefCopy.val=$scope.prefEdit.timeLength + $scope.prefEdit.unit;
            $scope.prefCopy.valShow=$scope.prefCopy.val;
        }
        else if($scope.prefCopy.varType=='text'){
            $scope.prefCopy.val=$scope.prefEdit.val;
            $scope.prefCopy.valShow=$scope.prefEdit.val;
        }
        else if($scope.prefCopy.varType=='checkbox'){
            var valArr=[];
            var valShowArr=[];
///////////HA
            if($scope.prefCopy.var == 'showARL' && $scope.prefEdit.otherVal !=''){
                $scope.prefCopy.valParamList.push({val:$scope.prefEdit.otherVal,
                                                   name:$scope.prefEdit.otherVal,
                                                   selected:1});
                
            }
         
/////////HA            
            angular.forEach($scope.prefCopy.valParamList,function(p){
                if($scope.selVal[p.val]){
                    valArr.push(p.val);
                    valShowArr.push(p.name);
                    p.selected=1;
                }
                else{
                    p.selected=0;
                }
            });
            $scope.prefCopy.val= valArr.join(',');
            $scope.prefCopy.valShow=valShowArr.join(', ');
        }
        else if($scope.prefCopy.varType=='radio' || $scope.prefCopy.varType=='select'){
            $scope.prefCopy.val=$scope.prefEdit.val;
            angular.forEach($scope.prefCopy.valParamList,function(p){
                 p.selected=0;
                if(p.val==$scope.prefCopy.val){
                  $scope.prefCopy.valShow=p.name;
                  p.selected=1;
                }
            });

        }
        else if($scope.prefCopy.varType=='textList'){
            txtArr=[];
            angular.forEach($scope.prefEdit.txtList,function(t){
                if(t.trim() != "")
                  txtArr.push(t);
            });
            $scope.prefCopy.val=JSON.stringify(txtArr);
        }

        else if($scope.prefCopy.varType=='userImport'){
            var pArr=[];
            var vShowArr=[];
            angular.forEach($scope.prefEdit.params,function(p){
                if(p.src.trim()!=""){
                    pArr.push({src:p.src,defUserType:p.defUserType});
                    var userTypeName=$scope.getUserTypeName(p.defUserType);
                    vShowArr.push("source:<b> " + p.src + "</b>; user type: <b>" + userTypeName + "</b>");
                }
            });
            $scope.prefCopy.val=JSON.stringify(pArr);
            $scope.prefCopy.valShow=vShowArr.join("<br>");;

        }
        else{
           $scope.prefCopy.val= $scope.prefEdit.val;
           angular.forEach($scope.prefEdit.valParamList,function(p){
               if(p.val==$scope.prefCopy.val)
                   $scope.prefCopy.valShow=p.name;
           });

        }

        var  param= {op:'s', prefList:[{'var':$scope.prefCopy.var,
                                'valShow':$scope.prefCopy.valShow,
                                'val':$scope.prefCopy.val}]
                    };
        if($scope.prefCopy.var=='rating'){
            param.prefList.push({'var':'ratingLoginReq','val':$scope.sysPref.ratingLoginReq});

        }


        $http.post("/bin/ajax/util/sysPref",param).success(
        function(data){
            if(data){
                $(".ui-dialog-buttonpane").append("<div id='additionalMsg' style='display:inline-block;color:red;padding-left:250px'>Save successfully.</div>");
                setTimeout(function(){
                    $("div").remove( "#additionalMsg" );
                    $($scope.prefEditDlg).dialog("close");},1000);
                var url ="/bin/ajax/util/sysPref?op=r&var="+$scope.prefCopy.var;
                $http({url:url}).
                    success(function(rs) {
                        angular.forEach($scope.prefMenu,function(g){
                            var sList= g.prefVarList;
                            angular.forEach(sList,function(p){
                                if(p.var==$scope.prefCopy.var){
                                    p.val=rs[$scope.prefCopy.var];
                                   // p.valShow=rs[$scope.prefCopy.varShow];
                                }
                            });
                        });
                    
                    });
                

            }                    
        });
        
 
        
    }
   //----------------------------------------------------------------------------
    $scope.selAll={};   
   //----------------------------------------------------------------------------
    $scope.toggleSelAll=function(){
        var sel=!(typeof( $scope.selAll.selected) !='undefined' && $scope.selAll.selected);
        angular.forEach($scope.prefEdit.valParamList,function(p){
            $scope.selVal[p.val]=sel;
        });
    }

    //----------------------------------------------------------------------------
    $scope.setShowARLOther=function(){
        if($scope.prefEdit.otherVal !=''){
            $scope.selVal[$scope.prefEdit.otherVal]=true;
        }
     }
    //----------------------------------------------------------------------------
    $scope.paramItemOnclick=function(v){
        if(v.name=='Other' && v.val=='' ){
            v.showInput=true;
        }
        else{
            if($scope.selVal[v.val]){
              $scope.selAll.selected=false;
            }
            
            if($scope.prefCopy.var=='anonymizeLoan'||$scope.prefCopy.var=='eqAnonymizeLoan'||$scope.prefCopy.var=='tbAnonymizeLoan'){
                if(v.val=='0' && !$scope.selVal[v.val]){
                    angular.forEach($scope.selVal,function(d,i){
                        $scope.selVal[i]=false
                    });
                }
                else{
                    if(parseInt(v.val) <1000000){
                        angular.forEach($scope.selVal,function(d,i){
                            if(parseInt(i) <1000000){
                                $scope.selVal[i]=false;
                            }
                        });
                    }
                    else{
                        $scope.selVal['0']=false;
                    }

                }
             }
        }
        
     }

    //----------------------------------------------------------------------------
    $scope.setTimeLength=function(p){
        p.val= p.timeLength+p.unit;
        angular.forEach(p.valParamList,function(e,i){
            e.selected=0;
        });


    }
    //----------------------------------------------------------------------------
    $scope.mouseOver=function(id){
        $("#" +id).css("background","yellow");
    }
    //----------------------------------------------------------------------------
    $scope.mouseOut=function(id){
        $("#" +id).css("background","white");
    }
    //----------------------------------------------------------------------------

}])//END CONTROLLER   sysPrefCtrl;


</script>
<center>
<div ng-controller="sysPrefCtrl" ng-cloak> 
    <div  id="sysPrefEditDlg" style="display:none;padding:10px"  ng-switch on="prefEdit.varType">
        <table class='prefEdit' >
            <tr ng-show="prefEdit.varType != 'userImport'">
                <th>Variable</th>
                <td style="font-size:120%;font-weight:bold;color:green">{{prefEdit.var}}</td>
            </tr> 
          <tbody  ng-switch-when="text">
            <tr>
                <th valign=top>Value</th>
                <td><input type="text" name="val"  style="width:450px" ng-model="prefEdit.val"></td>
            </tr>
            <tr>
                <th>Option</th>
                <td><input type="text" name="opt" value="{{prefEdit.opt}}"> </td>
            </tr>

          </tbody>
         <tbody ng-switch-when="select">
             <tr>
                <th valign=top >Value   </th>
                <td><select ng-model="prefEdit.val" >
                      <option ng-repeat="v in prefEdit.valParamList" value='{{v.val}}'  
                              ng-selected= "v.selected">{{v.name}}</option>
                    </select>
                </td>
             </tr>
          </tbody>
          <tbody ng-switch-when="radio">
             <tr valign=top>
                <th valign=top>Value</th>
                <td><div  ng-repeat="v in prefEdit.valParamList">
                      <label for="{{prefEdit.var}}_{{v.val}}">
                      <input type=radio  ng-model="prefEdit.val" ng-click="verifyEbookOnclick(prefEdit)" 
                                         ng-value="v.val" name="{{prefEdit.var}}" id="{{prefEdit.var}}_{{v.val}}"
                                         ng-checked="v.selected"> {{v.name}}      
                      </label>                     
                   </div>
                </td>
             </tr>
            
                        
          </tbody>

          <tbody ng-switch-when="checkbox"  >
             <tr valign=top>
                <th valign=top>Value</th>
                <td >
                  <div ng-hide="prefEdit.var=='anonymizeLoan' || prefEdit.var=='eqAnonymizeLoan' || prefEdit.var=='tbAnonymizeLoan'">
                    <label for="{{prefEdit.var}}_all" ng-hide="prefEdit.var=='srchMediaFormatOrder'">
                    <input type=checkbox ng-click="toggleSelAll()"  ng-model="selAll.selected" id="{{prefEdit.var}}_all"> All</label>
                    </div>
                    <div id="fieldSelection">
                      <div  ng-repeat="v in prefEdit.valParamList" title="To order the list: left click and hold... then move up or down"
                            class="prefChkbox ui-state-default" 
                            style="width:350px" ng-style="{cursor:(prefEdit.var.search('briefRecFields')==-1)?'move':'default'}" >
                          <label for="{{prefEdit.var}}_{{v.val}}" style="cursor:move">
                              <input type=checkbox  ng-model="selVal[v.val]" 
                                        ng-click="paramItemOnclick(v)"  
                                        field={{v.val}}    
                                        id="{{prefEdit.var}}_{{v.val}}"
                                        ng-hide="prefEdit.var=='srchMediaFormatOrder'"
                                        style="cursor:pointer"                  
                                        value="{{v.val}}" > 
                                        
                                  <img ng-if="prefEdit.var=='srchMediaFormatOrder'" ng-src="/theme/opals/image/medium/{{v.val}}.png" style="width:17px;">
                                  &nbsp;{{v.name}} &nbsp;&nbsp;
                                  
                                  <input type=text  ng-show="v.showInput"  
                                         ng-model="prefEdit.otherVal"  
                                         ng-blur='setShowARLOther()'
                                         value=''>
                         </label>
                      </div>
                  </div>
                </td>
             </tr>
          </tbody>

          <tbody ng-switch-when="timeLength">
             <tr valign=top>
                <th valign=top>Value </th>
                <td >
                    <input type=text   ng-model="prefEdit.timeLength"  
                                       ng-change='setTimeLength(prefEdit)'
                           value='{{prefEdit.timeLength}}'>
                    <select  ng-model="prefEdit.unit">
                      <option ng-repeat="v in timeUnit"  value="{{v.val}}" 
                              ng-selected="v.selected">{{v.name}} </option>
                    </select>

                </td>
             </tr>
            </tbody>
          <tbody ng-switch-when="textList">
             <tr valign=top>
                <th valign=top>Value </th>
                
                <td >
                   <textarea  ng-repeat="txt in prefEdit.txtList track by $index" ng-model=" prefEdit.txtList[$index]" style="width:95%"></textarea>
                </td>
             </tr>
            </tbody>
         <tbody ng-switch-when="userImport" style="" class="roundBorder" >
             <tr>
                <th style="width:85%;text-align:center;color:blue">Source</th>
                <th style="width:20%;text-align:center;color:blue">Default User Category</th>
             </tr>
             <tr valign=top ng-repeat="u in prefEdit.params track by $index" >
               <td >
                   <input type="text"  ng-change="addRemoveEmptyEntry()" ng-model="prefEdit.params[$index].src" style="width:95%"></input>
                   </td>
               <td >
                  <select ng-model="prefEdit.params[$index].defUserType" >
                      <option ng-repeat="v in  prefEdit.valParamList" value='{{v.val}}'  
                              ng-selected= "u.defUserType==v.val">{{v.name}} </option>
                    </select>
                </td>
             </tr>
            </tbody>

            <tr style="text-align:left;margin-top:5px;" ng-show="prefEdit.varType != 'userImport' && prefEdit.description && prefEdit.description !=''">
                <th>Description</th>
                <td><div style="width:450px;display:inline-block;font-size:110%"><i>{{prefEdit.description}}</i></div>
                </td>
            </tr>
        </table>
    </div>

    <div  id="prefMenuEditDlg" style="display:none;padding:10px;">
        <div ng-repeat="m in opalsMenu" style="width:300px;display:inline-block;vertical-align:top;" ng-hide="!isModuleEnable(m) || m.title=='Administration'">
         <label><input type="checkbox" ng-model="m.show" 
                           ng-true-value=false ng-false-value=true
                           ng-click="toggleMenuSel(m)">
            <b style="color:#3d6e9e;font-size:120%;">&nbsp;{{m.title}}</b>
        </label>
        <ul style="list-style-type: none;">
        <li ng-repeat="s in m.submenuItem" >
            <label><input type="checkbox" ng-model="s.show" 
                   ng-true-value=false ng-false-value=true
                   ng-change="toggleSubMenuSel(m,s)">&nbsp;
                <span style="color:#3d6e9e;font-size:100%;">{{s.title}}</span>
            </label>
        </li>
        </ul>
        </div>
    </div>
    <div  id="googleSsoCfgDlg" style="display:none;padding:10px;">
        <center><h3>Google Single Sign On </h3></center>
        <table class="userAuthType">
        <tr>
            <td colspan=2 style="text-align:center">
                <label><input type="radio" name="gSSO" ng-model="prefEdit.val" value=1 >&nbsp;On</label> &nbsp;&nbsp;
                <label><input type="radio" name="gSSO" ng-model="prefEdit.val" value=0 >&nbsp;Off</label>
            </td>
        </tr>
        <tr ng-show="prefEdit.val==1">
                <th>Client ID </th>
                <td><input type="text" style="width:480px"  ng-model="userAuthCfg.googleSignin.clientId" 
                           ng-style="{'border-color':(userAuthCfg.googleSignin.clientId=='')?'red':''}"> <span style="color:red">*</span> </td>
            </tr>

       </table>
    </div>   
    <div  id="samlCfgDlg" style="display:none;padding:10px;">
        <center><h3>SAML SSO </h3></center>
        <table class="userAuthType">
        <tr>
            <td colspan=2 style="text-align:center">
                <label><input type="radio" name="sSso" ng-model="prefEdit.val" value=1 >&nbsp;On</label> &nbsp;&nbsp;
                <label><input type="radio" name="sSso" ng-model="prefEdit.val" value=0 >&nbsp;Off</label>
            </td>
        </tr>
        <tbody ng-show="prefEdit.val==1">
          <tr >
          <td colspan=2>
              <div style="padding:7px;">
                <div style="display:inline-block;width:70px;">Button text </div>
                <div style="display:inline-block;">
                     <input type=text style="idth:450px"ng-model="userAuthCfg.samlSso.ssoBtnTxt"
                       placeholder="ex: Sign in with SAML" >
                </div>
             </div><br>
<div ng-hide="true"><!-- turn off the SAML direct connection /use OPALS SSO instead. -->
            <fieldset style="padding:1em;" ng-hide="true">
            <legend>OPALS service provider details</legend>
            <div style="display:inline-block;width:60px">ACS URL:</div><div style="display:inline-block;">{{spAcsUrl}}</div><br><br>
            <div style="display:inline-block;width:60px">Entity ID:</div><div style="display:inline-block;">{{spEntityId}}</div>
            </fieldset><br><br>
            <fieldset style="padding:1em;">
            <legend>IDP details</legend>
         
            <div style="padding:7px;">
                <div style="display:inline-block;width:60px" >SSO URL:</div>
                <div style="display:inline-block;">
                    <input type="text" style="width:450px" ng-model="userAuthCfg.samlSso.singleSignOnService"
                       ng-style="{'border-color':(userAuthCfg.samlSso.singleSignOnService=='')?'red':''}">
                </div>
                <span style="color:red">*</span>
            </div>    
            <div style="padding:7px;">
                <div style="display:inline-block;width:60px">Entity ID:</div>
                <div style="display:inline-block;">
                    <input type="text" style="width:450px" ng-model="userAuthCfg.samlSso.entityId" 
                         ng-style="{'border-color':(userAuthCfg.samlSso.entityId=='')?'red':''}">
                </div>
                <span style="color:red">*</span>
            </div>    
            <div style="padding:7px;vertical-align:top">
                <div style="display:inline-block;width:60px;vertical-align:top">Certificate:</div>
                <div style="display:inline-block;">
                    <textarea style="width:450px" rows=8 ng-model="userAuthCfg.samlSso.x509cert"
                        ng-style="{'border-color':(userAuthCfg.samlSso.x509cert=='')?'red':''}"></textarea></div>
                <span style="color:red">*</span>
            </div>    
            <div>
             <div><i style="font-size:90%"> <span style="color:red">*</span> required field</i></div>       
            </fieldset>
</div>
          </td>
         </tr>
        </tbody>
       </table>
    </div>
    <div  id="ldapAuthCfgDlg" style="display:none;padding:10px;">
        <center><h3>LDAP authentication setting</h3></center>
        <table class="userAuthType">
        <tr>
            <td colspan=2 style="text-align:center">

                <label><input type="radio" name="ldapAuth" ng-model="prefEdit.val" value=1 >&nbsp;On</label> &nbsp;&nbsp;
                <label><input type="radio" name="ldapAuth" ng-model="prefEdit.val" value=0 >&nbsp;Off</label> 
                
            </td>
        </tr>
        <tbody ng-show="prefEdit.val=='1'">
        <tr>
            <th>Host</th>
            <td><input type="text" style="width:200px" ng-style="{'border-color':(userAuthCfg.ldap.host=='')?'red':''}"
                       ng-model="userAuthCfg.ldap.host"> <span style="color:red">*</span> &nbsp;&nbsp;port <input type="text" ng-model="userAuthCfg.ldap.port" style="width:30px">
                <label>&nbsp;&nbsp;<input type="checkbox" 
                    ng-model="userAuthCfg.ldap.isSSL"
                    ng-checked="userAuthCfg.ldap.isSSL==1"
                    ng-true-value="1"
                    ng-false-value="0"> SSL/TLS</label>
            </td>
        </tr>
        <tr>
            <th>Base DN</th>
            <td><input type="text" style="width:300px" ng-style="{'border-color':(userAuthCfg.ldap.baseDN=='')?'red':''}"
                       ng-model="userAuthCfg.ldap.baseDN"> <span style="color:red">*</span></td>
        </tr>
        <tr>
            <th>Username pattern </th>
                 
            <td>USERNAME@<input type="text" style="width:200px"  ng-model="userAuthCfg.ldap.userEmailDomain" placeholder="myschool.edu"></td>
        </tr>
           <tr>
            <th></th>
            <td>
            <fieldset style="padding:1em;">
                <legend> Connection Credentials</legend>
                <label><input type="radio" name="anonymousAuth" ng-model="userAuthCfg.ldap.anonymousAuth" value=1> Anonymous</label>&nbsp;&nbsp;
                <label><input type="radio" name="anonymousAuth" ng-model="userAuthCfg.ldap.anonymousAuth" value=0> Simple Authentication</label>
                <div style="padding:1em;" ng-hide="userAuthCfg.ldap.anonymousAuth==1">
                    <div style="display:inline-block;width:80px;text-align:right" >User DN</div>
                    <div style="display:inline-block;">
                             <input type="text" ng-model="userAuthCfg.ldap.ldapUserDN" 
                             ng-style="{'border-color':(userAuthCfg.ldap.ldapUserDN=='')?'red':''}"> <span style="color:red">*</span></div><br><br>
                    <div style="display:inline-block;width:80px;text-align:right">Password</div>
                    <div style="display:inline-block;"><input type="text" ng-model="userAuthCfg.ldap.ldapUserPass" 
                             ng-style="{'border-color':(userAuthCfg.ldap.ldapUserPass=='')?'red':''}"> <span style="color:red">*</span> </div><br><br>
                </div>
            </fieldset><br>
             <div><i style="font-size:90%"> <span style="color:red">*</span> required field</i></div>       
            </td>
       </tr>
       </tbody>
        </table>
    </div>


    <div  id="ratingEditDlg" style="display:none;padding:10px;">
       <center> <h3 style="color:green;">Rating</h3></center>
        <table class="userAuthType" style="font-size:110%">
            <tr>
                <td colspan=6>
                    <div  style="margin-left:30px;padding:10px">
                        <label><input type="checkbox"  
                                ng-model="enabledRatingSel_1" 
                                ng-change="ratingEnableChange(1)" 
                                ng-true-value='1' ng-false-value='0'>&nbsp;Show reader rating item in expand record page</label> 
                    </div>
                    <div style="margin-left:30px;padding:10px">
                        <label><input type="checkbox" 
                                ng-model="enabledRatingSel_2" 
                                ng-change="ratingEnableChange(2)" 
                                ng-true-value='2' ng-false-value='0'>&nbsp;Show reader rating item in search result and expand record pages </label><br>
                    </div>
                    <div style="margin-left:30px;padding:10px">
                        <label><input type="checkbox" 
                                ng-model="sysPref.ratingLoginReq" 
                                ng-true-value=1 ng-false-value=0 >&nbsp;Require login to write review
                         </label>
                </td>
            </tr>
        </table> 
    </div>

    <!-- -------------------------- -->

    <div  id="scheDueNotice" style="display:none;padding:10px;">
    <center><h3>Scheduled Emailing Overdue Notice</h3></center>
        <table class="prefEdit">
        <tr>
            <th >Emailing Overdue Notice after </th>
            <td >
            <select ng-model="prefEdit.days">
                 <option ng-repeat="v in  prefEdit.valParamList" value='{{v.val}}'ng-selected="prefEdit.days==v.val" >{{v.name}}</option>
            </select>
            </td>
        </tr>
        <tr>
            <th>Subject</th>
            <td ><input style="width:95%" type="text" ng-model=" prefEdit.subject" 
                                   placeholder="Subject of the notice">
            </td>
        </tr>
        <tr>
            <th>Send to</th>
            <td>
            <div style="margin-right:17px;display:inline-block;width:80px">
                <input type="checkbox" id="incStdChkbx" ng-click="togglePredueRecipient('student')" ng-checked="prefEdit.recipient.includes('student')"><label for="incStdChkbx">&nbsp;Student</label>
            </div>
            <div style="margin-left:5px;display:inline-block;width:130px">
                <input type="checkbox" id="incGuadianChkbx" ng-click="togglePredueRecipient('guardian')"  ng-checked="prefEdit.recipient.includes('guardian')"><label for="incGuadianChkbx">&nbsp;Parents / Guardians</label>
            </div>
            </td>
        </tr>
        <tr>
            <th>Include Preferred Name</th>
            <td ><input type="checkbox" id="incPrefnameChkbx" ng-click="prefEdit.incPrefName=(prefEdit.incPrefName=='1')?'0':'1'"" ng-checked="prefEdit.incPrefName=='1'"><label for="incStdChkbx"> Yes</label>

                            </td>
        </tr>

        <tr>
            <th>Message Top</th>
            <td >
                <textarea style="width:95%" ng-model="prefEdit.msgTop"  rows=3
                          placeholder="Message to appear at the top of the notice">
                
                </textarea>
            </td>
        </tr>
        <tr>
            <th>Message Bottom</th>
            <td >
                <textarea style="width:95%" ng-model="prefEdit.msgBottom" rows=3
                          placeholder="Message to appear at the bottom of the notice"
                ></textarea>
            </td>
        </tr>
        <tr>
            <th>Fields</th>
            <td>
            <div style="margin-left:4px;display:inline-block;width:90px">
                <input type="checkbox" id="incTitleChkbx" ng-click="togglePredueFields('title')" ng-checked="prefEdit.fieldInc.includes('title')"><label for="incTitleChkbx" >&nbsp;Title</label>
             </div>
            <div style="margin-left:4px;display:inline-block;width:90px">
                <input type="checkbox" id="incPriceChkbx" ng-click="togglePredueFields('price')" ng-checked="prefEdit.fieldInc.includes('price')" ><label for="incPriceChkbx">&nbsp;Price</label>
            </div>
            <div style="margin-left:4px;display:inline-block;width:110px">
                <input type="checkbox" id="incCallNumChkbx" ng-click="togglePredueFields('callNum')" ng-checked="prefEdit.fieldInc.includes('callNum')" ><label for="incCallNumChkbx">&nbsp;Call Number</label>
            </div>
            <div style="margin-left:5px;display:inline-block;width:110px">
                <input type="checkbox" id="incBookcoverChkbx" ng-click="togglePredueFields('bookcover')" ng-checked="prefEdit.fieldInc.includes('bookcover')" ><label for="incBookcoverChkbx">&nbsp;Book cover</label>
            </div>
            </td>
        </tr>
        </table>

    </div>
<!-- -------------------------- -->
   <div  id="parentTxnNotification" style="display:none;padding:10px;font-size:110%">
    <h3 style="text-align:center">Send Loan Transactions to Parent/Guardian</h4>
    <table class="userAuthType" >
        <tr valign=top>
            
            <th>Enable</th>
            <td  >
                  <label style="padding-left:4px;padding-right:10px;">
                  <input type=radio  ng-model="prefEdit.enable"  
                                     ng-value="1" 
                                     ng-checked="v.selected"> Yes      
                  </label>                     
                  <label >
                   <input type=radio  ng-model="prefEdit.enable"  
                                     ng-value="0" 
                                     ng-checked="v.selected"> No     
                  </label>
           </td>
         </tr>
        
         <tr>
            <th>Fields</th>
            <td>
                <div style="margin-left:4px;display:inline-block;width:90px">
                    <input type="checkbox" id="incTitleChkbx" ng-click="togglePredueFields('title')" 
                              ng-checked="prefEdit.fieldInc.includes('title')">
                              <label for="incTitleChkbx" >&nbsp;Title</label>
                </div>
                <div style="margin-left:4px;display:inline-block;width:90px">
                    <input type="checkbox" id="incPriceChkbx" ng-click="togglePredueFields('price')" 
                            ng-checked="prefEdit.fieldInc.includes('price')" >
                        <label for="incPriceChkbx">&nbsp;Price</label>
                </div>
                <div style="margin-left:4px;display:inline-block;width:110px">
                    <input type="checkbox" id="incCallNumChkbx" ng-click="togglePredueFields('callNum')" 
                            ng-checked="prefEdit.fieldInc.includes('callNum')" >
                           <label for="incCallNumChkbx">&nbsp;Call Number</label>
                </div>
                <div style="margin-left:5px;display:inline-block;width:110px">
                    <input type="checkbox" id="incBookcoverChkbx" ng-click="togglePredueFields('bookcover')" 
                    ng-checked="prefEdit.fieldInc.includes('bookcover')" ><label for="incBookcoverChkbx">&nbsp;Book cover</label>
                </div>
            
            </td>
        </tr>

    </table>
   </div>



    <div  id="preDueNotice" style="display:none;padding:10px;">
    <center><h3>Pre-due Notice</h3></center>
        <table class="prefEdit">
        <tr>
            <th >Send Notice in Advance</th>
            <td >
            <select ng-model="prefEdit.days">
                 <option ng-repeat="v in  prefEdit.valParamList" value='{{v.val}}'ng-selected="prefEdit.days==v.val" >{{v.name}}</option>
            </select>
            </td>
        </tr>
        <tr>
            <th>Subject</th>
            <td ><input style="width:95%" type="text" ng-model=" prefEdit.subject" 
                                   placeholder="Subject of the notice">
            </td>
        </tr>
        <tr>
            <th>Send to</th>
            <td>
            <div style="margin-right:17px;display:inline-block;width:80px">
                <input type="checkbox" id="incStdChkbx" ng-click="togglePredueRecipient('student')" ng-checked="prefEdit.recipient.includes('student')"><label for="incStdChkbx">&nbsp;Student</label>
            </div>
            <div style="margin-left:5px;display:inline-block;width:130px">
                <input type="checkbox" id="incGuadianChkbx" ng-click="togglePredueRecipient('guardian')"  ng-checked="prefEdit.recipient.includes('guardian')"><label for="incGuadianChkbx">&nbsp;Parents / Guardians</label>
            </div>
            </td>
        </tr>
        <tr>
            <th>Include Preferred Name</th>
            <td ><input type="checkbox" id="incPrefnameChkbx" ng-click="prefEdit.incPrefName=(prefEdit.incPrefName=='1')?'0':'1'"" ng-checked="prefEdit.incPrefName=='1'"><label for="incStdChkbx"> Yes</label>

                            </td>
        </tr>

        <tr>
            <th>Message Top</th>
            <td >
                <textarea style="width:95%" ng-model="prefEdit.msgTop"  rows=3
                          placeholder="Message to appear at the top of the notice">
                
                </textarea>
            </td>
        </tr>
        <tr>
            <th>Message Bottom</th>
            <td >
                <textarea style="width:95%" ng-model="prefEdit.msgBottom" rows=3
                          placeholder="Message to appear at the bottom of the notice"
                ></textarea>
            </td>
        </tr>
        <tr>
            <th>Fields</th>
            <td>
            <div style="margin-left:5px;display:inline-block;width:110px">
                <input type="checkbox" id="incTitleChkbx" ng-click="togglePredueFields('title')" ng-checked="prefEdit.fieldInc.includes('title')"><label for="incTitleChkbx" >&nbsp;Title</label>
             </div>
            <div style="margin-left:5px;display:inline-block;width:110px">
                <input type="checkbox" id="incPriceChkbx" ng-click="togglePredueFields('price')" ng-checked="prefEdit.fieldInc.includes('price')" ><label for="incPriceChkbx">&nbsp;Price</label>
            </div>
            <div style="margin-left:5px;display:inline-block;width:110px">
                <input type="checkbox" id="incCallNumChkbx" ng-click="togglePredueFields('callNum')" ng-checked="prefEdit.fieldInc.includes('callNum')" ><label for="incCallNumChkbx">&nbsp;Call Number</label>
            </div>
            </td>
        </tr>
        </table>

    </div>
   <!-- -------------------------- -->
    <div  id="classlinkRosterCfgEditDlg" style="display:none;padding:10px;">
        <center><h3>ClassLink Rostering setting</h3></center>
        <center>
                <label><input type="radio" name="classlinkRosterEnable" ng-model="classLinkRosterCfg.enable" value='1' >&nbsp;On</label> &nbsp;&nbsp;
                <label><input type="radio" name="classlinkRosterEnable" ng-model="classLinkRosterCfg.enable" value='0' >&nbsp;Off</label>
        </center><br><br>
        <table class="userAuthType" ng-show="classLinkRosterCfg.enable==1">
            <tr>
                <th>endpoint_url</th>
                <td><input type='text' required style="width:300px" ng-model="classLinkRosterCfg.endpoint_url"><span style="padding-left:3px;color:red">*</span></td>
            </tr>
            <tr>
                <th>School ID</th>
                <td><input type='text' required style="width:100px" ng-model="classLinkRosterCfg.schoolId"><span style="padding-left:3px;color:red">*</span></td>
            </tr>
            <tr>
                <th>client_id</th>
                <td><input type='text' required style="width:300px" ng-model="classLinkRosterCfg.client_id"><span style="padding-left:3px;color:red">*</span></td>
            </tr>
           <tr>
                <th>client_secret</th>
                <td><input type='text' required style="width:300px" ng-model="classLinkRosterCfg.client_secret"><span style="padding-left:3px;color:red">*</span></td>
            </tr>
            <tr>
            <td></td><td style="color:red;font-style:italic">* required field</td>
            </tr>
       </table>
    </div>

    <div  id="bookingModuleEditDlg" style="display:none;padding:10px;">
        <center><h3>Booking Module </h3></center>
        <table class="userAuthType">
        <tr>
            <td colspan=6 style="text-align:center">
                <label><input type="radio" name="bkgenable" ng-model="bkgModuleOptions.enable" ng-change="catalogEnableChange()"  value=1 >&nbsp;On</label> &nbsp;&nbsp;
                <label><input type="radio" name="bkgenable" ng-model="bkgModuleOptions.enable" ng-change="catalogEnableChange()" value=0 >&nbsp;Off</label>
            </td>
        </tr>

        <tr ng-show="bkgModuleOptions.enable && bkgModuleOptions.enable=='1'" >
         <td colspan=6 style="padding-top:12px;"><fieldset style="padding:1.2em;">
                <legend>Catalog Options</legend>
                <div style="width:31%;display:inline-block">
                    <label><input type="checkbox" ng-model="bkgModuleOptions.catalogs.enableLib" 
                            ng-true-value='1' ng-false-value='0'>&nbsp;
                        <span class="txtLargeBrown">LIBRARY</span>
                    </label>
               </div>
                <div style="width:31%;display:inline-block">
                    <label><input type="checkbox" ng-model="bkgModuleOptions.catalogs.enableTB" 
                            ng-true-value='1' ng-false-value='0'>&nbsp;
                        <span class="txtLargeBrown">TB</span>
                    </label>
               </div>
                <div style="width:31%;display:inline-block;">
                    <label><input type="checkbox" ng-model="bkgModuleOptions.catalogs.enableEQ" 
                            ng-true-value='1' ng-false-value='0'>&nbsp;
                        <span class="txtLargeBrown">EQ</span>
                    </label>
               </div>
             </fieldset>
         </td>

       
        <tr ng-show="bkgModuleOptions.enable=='1'">
         <td colspan=6 style="padding-top:12px;"><fieldset style="padding:1.2em;">
                <legend>Receiving Options</legend>
                <div  ng-repeat="o in bkgReceiveOpts">
                   <label><input type="checkbox" ng-model="o.selected" 
                               ng-value="{{o.val}}"
                                ng-checked="o.selected" 
                                ng-click="addDelRepBkgRcvOpts(o)"
                           >&nbsp;{{o.label}} 
                  </label>
               </div>
               <div ng-show="bkgModuleOptions.receivingOptions.length==0" style="text-align:center"><i style="color:red">*Receiving option required</i></div>
             </fieldset>
         </td>
  
            </tr>
         <tr>
          <td colspan=6 style="padding-top:15px;">
          Allow steps skipping 
                <label><input type="radio" name="skippingStepEnable" ng-model="bkgModuleOptions.allowQuickProcessing" value=1 >&nbsp;Yes</label> &nbsp;&nbsp;
                <label><input type="radio" name="skippingStepEnable" ng-model="bkgModuleOptions.allowQuickProcessing" value=0  >&nbsp;No</label> &nbsp;&nbsp;
                </td>
         </tr>
        <tr>
          <td colspan=6 >
                <input type="checkbox" ng-model="bkgModuleOptions.autoEmailShippedOrder" 
                        ng-true-value='1' ng-false-value='0'> 
                       automatically send email when order shipped
                </td>
         </tr>

       </table>
    </div>   


    <div ng-hide"editItem" id="sysPrefListDiv">
        <div style='border:1px; width:98%;background:white;padding:5px'  ng-repeat="p in  prefMenu">
            <div style='margin-right:50px;font-weight:bold;color:blue;height:25px ;text-align:left' >{{p.gid}}. {{p.grpTitle}}</div>
                <div  style='margin:10px;display:block'>
                    <table width=90%><tr style='background:#3E7E76;color:white;font-weight:bold;height:25px' >
                        <td style="width:250px">Variable</td><td>Value</td><td>Description</td><td width=30>Edit</td></tr>
                            <tr ng-repeat="r in p.prefVarList" id="row_{{r.var}}"
                                ng-mouseover="mouseOver('row_'+ r.var)" ng-mouseout="mouseOut('row_' + r.var)" 
                                ng-click='editPref(r)' style="cursor:pointer">
                                <td style='font-weight:bold;color:green;cursor:pointer'
                                    title='click to edit::  {{r.var}}'  >
                                    {{r.var}}</td>
                                <td ng-if="r.var!='emailAddress'" ng-bind-html="r.valShow"></td>
                                <td ng-if="r.var=='emailAddress'">{{r.val}}</td>
                                <td>{{r.description}}</td>
                                <td><a href='' ng-click='editPref(r)'>Edit</a></td>
                            </tr>
                     </table> 
                </div>
          </div>
        </div>
    </div> <!--ng-hide=editItem-->
   
      <div id="supportInfoDiv" style="display:none;font-size:10pt;font-family:arial" class="roundBorder" title="Support Ebook Setting">
         To complete setting eBook Module, please contact us
        <ul>
            <li>U.S. toll free support line is : (877) 331-1022
            <li>Canadian toll free support line : (866) 263-4340
            <li>International line: 1-514-336-4340
            <li>E-mail us at our support address : support(at)opals-na.org
        </ul>
    </div>

</div>   <br> 
</center>

<tmpl_include footer.inc>
