<tmpl_include headerBase.inc>

<style type="text/css">
.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
	  /*max-height: 600px !important; */
}
ul, li {
    margin: 0;
    padding: 0;
}

ul#nav li a:link,ul#nav li a:visited {
    color: #39aea8;
    text-decoration: none;
}

ul#nav li a:hover,ul#nav li a:active {
    color: #f4ba51;
    text-decoration: none;
}
#borrowerList ul li:hover {
    background: lightgrey;
}
#borrowerList ul li:active {
    background:#ccebff ;
}
.transfer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.transfer-footer .teacher-select {
    width: 300px;
    display: inline-block;
}
.loan-list-header {
    position: relative;
    text-align: center;
    color: brown;
    font-weight: bold;
    font-size: 110%;
}

.transfer-btn-wrap {
    position: absolute;
    right: 10px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" >
	 var curUid;
	 opalsApp.controller('tbLoanCtrl',['$scope','$http','$timeout','waitingAnimation','oplSound',
			function($scope,$http,$timeout,waitingAnimation,oplSound) {
				$scope.oplMsg=oplMsg;
        $scope.pref = prefJson;
        $scope.userInfo=loginUser;
				$scope.tb_fm = {"circ" : <tmpl_var tb_fm_circ default={}> };
				$scope.tb_pref = <tmpl_var tb_pref default={}>;
				$scope.loanFieldList = $scope.tb_fm.circ.loan.loanList || [];
				$scope.lostFieldList = $scope.tb_fm.circ.loan.lostList || [];
        $scope.fineRateTbl = <tmpl_var fineRateTbl default=[]>;
        $scope.today = "<tmpl_var today>";
        $scope.confirmFine="";
        $scope.ignoreTeacher = false;
        $scope.loanTypes = [
          {name:"User Name/Barcode",val:"nameBc"},
          {name:"Teacher",val:"teacher"},
          {name:"Homeroom",val:"homeroom"}
        ];
        $scope.teacherList = <tmpl_var teacherList>;
        $scope.homeroomList = <tmpl_var teacherList>;
        $scope.gradeList = <tmpl_var gradeList default=[]>;
        $scope.user_teachers = <tmpl_var user_teachers default=[]>;
        $scope.loanBy = $scope.loanTypes[0];
        $scope.preListOpt=<tmpl_var userListOpt default=[] >;
        $scope.selListOpt=$scope.preListOpt[0];
        angular.forEach($scope.preListOpt,function(e,i){
          if(e.type=='<tmpl_var loanGrp default=nameBc>')
            $scope.selListOpt=$scope.preListOpt[i];
        });
        $scope.selList=null;
        $scope.showFineList=false;
        $scope.transferLoanList=[];
        $scope.loanList=[];
        $scope.selectedTeacher={uid:0};
        $scope.charge = {
            lost    : <tmpl_var chargeLost default=0>,
            overdue : <tmpl_var chargeOverdue default=0>,
            damage  : <tmpl_var chargeDamage default=0>
        };
        $scope.ODexemption=0;
        $(document).bind("keydown", function (event) {
            if(event.which === 27) {
                $scope.onSwitchUser();
            }
        });
        $scope.getTime=function(){
          var dt= new Date();
          return dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds()
        }
        $scope.patron=null;
        $scope.userLookupList = [];
        $scope.returnFineList = [];
        $scope.paymentRefundList=[];
				$scope.email = {
					 address : "",
					 subject : oplMsg.listIoLoanTxt,
					 message : "",
					 statusMsg: ""
				}	;
        $scope.loanParam = {
            uid     : 0,
            ubarcode:"",
            loanType:'standard',
            barcode : '',
            dateDue : '',
            hourDue : '',
            cmdCode : 0,
            op      : '',
            sessionDueDate : false
        };
        $scope.sortParam = {
            type : 'title',
            reverse : false
        }
        $scope.loanProcess = {
            msg : "",
            code: 0,
            itemMsgCode: 0,
            itemInfo : null,
            processCode : 0,
            userMsgCode : 0,
            inAction:0
        };
				$scope.courses=<tmpl_var courses default=[]>;
        $scope.teacherCourseList = <tmpl_var teacherCourseList>;
        $scope.teacher = {};
        $scope.course = {};
        $scope.courseList = [];
				$scope.deleteItems=[];
        $scope.setCourseList=function(){
            $scope.course.id="0";
            $scope.courseList = [];
            angular.forEach($scope.teacherCourseList,function(t){
                if (t.tId == $scope.teacher.tId){
                    $scope.teacher.firstname = t.firstname;    
                    $scope.teacher.lastname = t.lastname;    
                    $scope.courseList = t.courseList;
                }
            });
        }
        $scope.setCourse=function(){
            angular.forEach($scope.courseList,function(c){
                if (parseInt(c.courseId) == parseInt($scope.course.id)){
                    $scope.tsId = c.tsId;
                    $scope.course.courseCode = c.courseCode;
                    $scope.course.courseId = c.courseId;
                    $scope.course.courseName = c.courseName;
                    $scope.course.tsId=c.tsId;
                }
            });
        }
        $scope.sortList=function(list,field){
            waitingAnimation.start();
            var n = list.length || 0;
            $scope.sortParam.type=field; 
            list.sort(function(a,b){
                if (field=='dateDue' || field=='dateLoan' || field=='lostdate') {
                   var aa = new Date(a[field]), bb= new Date(b[field]);
                   return (aa.getTime() - bb.getTime() );
                }
                else{
                    if (a[field] < b[field]) return -1;
                    if (a[field] > b[field]) return 1;
                    return 0;
                }
            });
            setTimeout(function() {waitingAnimation.stop();},n);
        },
        $scope.onSwitchUser=function(){
            $.cookie('borrower','',{path:"/"});
            $scope.patron=null;
            $scope.borrowerList=null;
            //$scope.loanParam.barcode = "";
            $scope.resetLoanParam();
            $scope.resetProcessLoan();
            setTimeout(function(){
                $scope.lookup_nameBc="";
                $("#opl-userlookup-nameBc").focus();
                $scope.$digest()},10);
            $scope.selListOpt=$scope.preListOpt[0];
            $scope.selList=null;  
        };
        $scope.setBorrowerFromLookup=function(){
            if($scope.lookupUid && $scope.lookupUid>0){
                $scope.getBorrowerList('uid',$scope.lookupUid);
                setTimeout(function(){$("#userListDivDlg").dialog('close');},1);
            }
			  }
        $scope.getBorrowerList=function(selType,selVal){
            var sCtr='{"selType":"' + selType +'","selVal":"' +selVal +'"}';
            $.cookie('circGrpList',sCtr,{path:"/"});  
            waitingAnimation.start();
            var url="/bin/txtbk/ajax/circ/getUserCircInfo";
            var params={};
            params[selType]=selVal;
            //var data=$.param(params);
            $http({method: 'POST',
                   url: url,
                   data: params,
                   headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .success(
                function(data){
                    if(data){
                        $scope.borrowerList=data;
                        $("#tabs").tabs({active:0});
                        if($scope.borrowerList && $scope.borrowerList.length==1){
                            $scope.setBorrower($scope.borrowerList[0]);
                        }
                        else{
                            var uid=$.cookie("borrower");
                            var borrower=$scope.borrowerLookup(null,uid);
                            if(borrower)
                                $scope.setBorrower(borrower);
                           else{
                               setTimeout(function(){$("#processLoanBcInput").focus();},10);
                           }
                           $scope.sortPreList();
                        }
                        waitingAnimation.stop();
                    }                    
                }
            )
            .error(function(data){
                waitingAnimation.stop();
            });
        }
        $scope.setBorrower=function(u){
          if($scope.patron){
            if($scope.patron.info.uid==u.info.uid)
                return;
            $scope.loanLostList = [];
            $scope.loanHistoryList = [];
            $scope.resetProcessLoan();
            
            $("#tabs").tabs({active:0});
            if($scope.chkHasChanged($scope.patron)){
                $scope.patron.done=true;
            }
            $scope.patron.md5Val="";
          }
          u.selected=true;
          u.md5Val=$scope.getObjectMD5Val(u);
          $scope.patron = u;
          $.cookie('borrower',$scope.patron.info.uid,{path:"/"}); 
				  $scope.email.address = $scope.patron.info.email;
        }
        $scope.countOverdue=function(u){
          var overdueCnt=0;
          if(u){
            angular.forEach(u.loanList, function(l, index){
                if(l.overdue==1)
                    overdueCnt++;
            });
          }
          return overdueCnt;
        }
        $scope.getObjectMD5Val=function(o){
          var t={loanList:[],reserveList:[]};
          angular.copy(o.loanList,t.loanList);
          //angular.copy(o.reserveList,t.reserveList);
          t.loanList.sort(function(a,b){return a.id>b.id;});
          //t.reserveList.sort(function(a,b){return a.idReserve>b.idReserve;});
          var oStr = JSON.stringify(t);
          return MD5(oStr);
        }
        $scope.createCustomGroupList=function(){
          var urlStr="<tmpl_var url_customGroupList>";
          window.location=urlStr;
        }

        $scope.getPatronInfo=function(uid){
            waitingAnimation.start();
            var url="/bin/txtbk/ajax/circ/getUserCircInfo";
            var params={};
            params['uid']=uid;
            $scope.loanParam.uid=uid;
            $scope.loanLostList = [];
            $scope.loanHistoryList = [];
            //var data=$.param(params);
            var data = {uid:uid};
            $http({method: 'POST',
                   url: url,
                   data: data,
                   headers: {'Content-Type':'application/x-www-form-urlencoded'}})
            .success(
                function(result){                    
                    if ($scope.patron){
                      console.log("patron:", $scope.patron);
                      var md5Val = $scope.patron && $scope.patron.md5Val?$scope.patron.md5Val:"";
                      var done = $scope.patron && $scope.patron.done?$scope.patron.done:false;
                      $scope.patron.md5Val = md5Val;
                      $scope.patron.done = done;
                      if (result[0]){
                        $scope.patron = result[0];
                      }
                    }
                    else{
                      $scope.patron = result[0];
                      $.cookie('borrower',$scope.patron.info.uid,{path:"/"}); 
										  $scope.email.address = $scope.patron.info.email;
                    }
                    $scope.paymentRefundList=$scope.patron.paymentRefundList;
                    $("#tabs").tabs({active:0})
                    setTimeout(function(){
                        $("#bc").focus();
                        $scope.$digest()},10);
                    waitingAnimation.stop();
                    $scope.ODexemption=$scope.patron.fineParam.ODexemption;
                    console.log("ODexemption:",$scope.ODexemption ,":", $scope.patron.fineParam);
                }
            )
            .error(function(data){
                waitingAnimation.stop();
            }); 
        }
        $scope.lookupUser=function() {
            var url="/bin/ajax/circ/userLookup";
            var params={};
              //params["type"]=$scope.loanBy.val;
              //params["user"]=$scope.lookup_nameBc;
            params["type"]=$scope.selListOpt.type;
            params["user"]=$scope.lookup_nameBc;
            if ($scope.selListOpt.type!='nameBc'){
              params["user"]=$scope.selList;
            }
            var data=$.param(params);
            waitingAnimation.start();
                $http({method: 'POST',
                       url: url,
                       data: data,
                       headers: {'Content-Type':'application/x-www-form-urlencoded'}})
                .success(
                    function(data){
                        if(data){
                            $scope.userLookupList=data;
                            if($scope.userLookupList && $scope.userLookupList.length ==1){
                                $scope.getPatronInfo($scope.userLookupList[0].uid);
                                if ($("#userListDivDlg").hasClass("ui-dialog-content") &&
                                    $("#userListDivDlg").dialog("isOpen")){
                                    setTimeout(function(){$("#userListDivDlg").dialog("close");},1);
                                }
                            }
                            else{
                                if($scope.userLookupList.length>0)
                                    $scope.lookupUid=$scope.userLookupList[0].uid;
                                setTimeout(function(){$("#userListDivDlg").dialog({modal:true,autoResize:true,closeText:'',height:330,width:500});},2);
                            }
                            waitingAnimation.stop();
                        }
                        else{
                            //console.log("test");
                        }
                    }
                )
                .error(function(data){
                    waitingAnimation.stop();
                }); 
				}
        $scope.onSelectList=function(){
          $scope.getBorrowerList($scope.selListOpt.type,$scope.selList.val);
          $scope.borrower=null;
        }
        $scope.borrowerLookup=function(bc,uid){
          var borrower=null
          if(bc && bc !=""){
            angular.forEach($scope.borrowerList, function(b, index){
                if((b.info.userbarcode && b.info.userbarcode.toLowerCase()==bc.toLowerCase()) 
                   || (b.info.sid && b.info.sid.toLowerCase()==bc.toLowerCase())){
                    borrower=b;
                    return true;
                }
            });
          }
          if(!borrower && uid && uid>0){
            angular.forEach($scope.borrowerList, function(b, index){
                if(b.info.uid==uid){
                    borrower=b;
                    return true;
                }
            });
          }
          return borrower;
        }
        $scope.userListSortOpt='lastname';
        $scope.sortPreList=function(){
          field=$scope.userListSortOpt;
          $scope.borrowerList.sort(function(a,b){
            if(a.info[field]==b.info[field])
                return 0;
            else
                return (a.info[field] > b.info[field])?1:-1;
            });
        }

				$scope.saveUserNotes=function(){
						var params = {	noteType:'notes', 
                        uid:$scope.patron.info.uid,
                        notes:$scope.patron.info.notes};
						waitingAnimation.start();
						var url="/bin/ajax/user/saveUserNote";
            $http({method: 'POST',
                   url: url,
                   data: params,
                   headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .success(
                function(data){
									 if(data){
                       $scope.patron.note==data.userNote;
                       alert("Saved successfully");
                       waitingAnimation.stop();
                    }                    
                }
            )
            .error(function(data){
                alert("Save fail. Please try again");
                waitingAnimation.stop();
            });  
			}
			//-------------------------------------------------------------------------------- 
        $scope.loadLostList=function(){
            $scope.sortParam = {
                type : 'title',
                reverse : false
            }
            if ($scope.loanLostList && $scope.loanLostList.length> 0){
                return;
            }
            waitingAnimation.start();
            var url="/bin/txtbk/ajax/circ/getUserCircLostList";
            var params={};
            var uid = $scope.patron.info.uid;
            params['uid']=uid;
            $scope.loanParam.uid=uid;
            $scope.loanHistoryList = [];
            var data=$.param(params);
            $http({method: 'POST',
                   url: url,
                   data: data,
                   headers: {'Content-Type':'application/x-www-form-urlencoded'}})
            .success(
                function(result){
                  console.log("lostList : uid: ", $scope.patron.info.uid," : ",$scope.loanLostList);
                    $scope.loanLostList = result.userCircLostList;
                    waitingAnimation.stop();
                }
            )
            .error(function(data){
                waitingAnimation.stop();
            }); 
        }
        //-------------------------------------------------------------------------------- 
        $scope.loadHistoryList=function(){
            $scope.sortParam = {
                type : 'title',
                reverse : false
            }
            if ($scope.loanHistoryList && $scope.loanHistoryList.length>0){
                return;
            }
            waitingAnimation.start();
            var url="/bin/txtbk/ajax/circ/getUserCircLoanHistoryList";
            var params={};
            var uid = $scope.patron.info.uid;
            params['uid']=uid;
            $scope.loanParam.uid=uid;
            $scope.loanHistoryList = [];
            var data=$.param(params);
            $http({method: 'POST',
                   url: url,
                   data: data,
                   headers: {'Content-Type':'application/x-www-form-urlencoded'}})
            .success(
                function(result){
                    $scope.loanHistoryList = result.userCircLoanHistoryList;
                    waitingAnimation.stop();
                }
            )
            .error(function(data){
                waitingAnimation.stop();
            }); 
        }
        //---Quick Title Search---
        $scope.qsParam = {
            kw : '',
            sfield : '245_a'
        }
        $scope.qs_show=function() {
            $scope.qsParam = { kw:'',sfield:'245_a' };
            $scope.qsResult={};
            $("#tbQuickSearchDivDlg").dialog(
                {modal:true,autoResize:true,closeText:'',height:330,width:640}
            );
        }
        $scope.qs_searchTextbook=function() {
            var url="/bin/txtbk/ajax/search/quickSearch";
            var params={};
            waitingAnimation.start();    
            $http({method: 'POST',
                   url: url,
                   data: $scope.qsParam
            })
            .success(
                function(data){
                    $scope.qsResult= data;
                    waitingAnimation.stop();
                }
            )
            .error(function(data){
                waitingAnimation.stop();
            });
        }
        $scope.qs_selectLoanBc = function(bc){
            $scope.loanParam.barcode = bc;
            $("#tbQuickSearchDivDlg").dialog("close");
        }
        $scope.teacherCourseSelect=function(){
            $scope.loanProcess.inAction=0;
            $("#tbTeacherCourseDlg").dialog('close');
        }
        $scope.teacherCourseIgnore=function(){
            $scope.loanProcess.inAction=0;
            $scope.ignoreTeacher = true;
            $scope.onProcessLoan();
            $("#tbTeacherCourseDlg").dialog('close');
        }
        $scope.saveSessionDueDate=function(a){
            //$scope.loanParam.loanType = ""
            if ($scope.loanParam.sessionDueDate){
                $scope.loanParam.loanType = 'day';
            }
        }
        $scope.onProcessLoan=function(){
            $scope.loanProcess = { code :0, msg : "" ,itemMsgCode:""};
            $scope.loanProcess.inAction= 1;
            $scope.loanParam.teacher = $scope.teacher;
            $scope.loanParam.course = $scope.course;
            if (!$scope.ignoreTeacher && 
                   (!$scope.teacher.tId||parseInt($scope.teacher.tId)<0) && (!$scope.course.id || parseInt($scope.course.id)<0)  ){
                $("#tbTeacherCourseDlg").dialog({modal:true,autoResize:true,closeText:'',height:200,width:400});
                return;
            }
            waitingAnimation.start();
            $scope.loanParam.uid=$scope.patron.info.uid;
            setTimeout(function() {
                $scope.$apply(function() {
                $scope.loanParam.cmdCode = $scope.loanProcess.itemMsgCode;
              });
            },1000);    
            $http.post("/bin/txtbk/ajax/circ/doLoan",$scope.loanParam)
                .success(
                    function(data){
                      $scope.processLoanMsgCode(data);
                        waitingAnimation.stop();
                        if (data.uid) {
                           $scope.getPatronInfo(data.uid);
                        }
                        
                        setTimeout(function(){
                          $scope.loanProcess.inAction=0;
                          $scope.updateTransList(data);
                        },3000);
                    })
                    .error(function(data){
                        waitingAnimation.stop();
                        setTimeout(function(){$scope.loanProcess.inAction=0;},1000);
                    });
        }
        $scope.processLoanMsgCode=function(data){
            console.log("processLoanMsgCode data>>",data);
            console.log("loanProcess", $scope.loanProcess);
            var sound='positive';
            $scope.loanProcess.code = data.msgCode;
            $scope.loanProcess.itemMsgCode = data.itemMsgCode;    
            if ($scope.loanProcess.processCode != '') {
              $scope.loanProcess.itemMsgCode= data.itemMsgCode;
              //console.log("loanProcess", $scope.loanProcess);
              switch($scope.loanProcess.itemMsgCode){
                case "00" : case "02" : case "25" :
                    $scope.loanProcess.itemMsgCode = data.itemMsgCode;        
                    $scope.loanProcess.msg = $scope.loanParam.barcode;
                    $scope.loanProcess.itemInfo = data.itemInfo;
                    sound='negative';
                break;
                case "07" :
                    $scope.loanProcess.msg = $scope.oplMsg['circ_loan_itemStatus_'+data.itemMsgCode];
                    $scope.loanProcess.itemInfo = data.itemInfo;
                    //console.log("case if loanProcess.processCode !='' ", $scope.loanProcess);
                    sound='negative';
                break;
                case "03" : case "04" : case "05" : case "06" :
                case "08" : case "09" : case "10" : case "12" :
                case "13" : case "14" : case "16" : case "17" :
                case "18" : case "26" : case "27" :
                    $scope.loanProcess.msg = $scope.loanParam.barcode;
                    $scope.loanProcess.itemMsgCode = data.itemMsgCode;        
                    $scope.loanProcess.msg = $scope.oplMsg['circ_loan_loanProcess_'+data.processCode];
                    $scope.loanProcess.msg =($scope.loanProcess.msg)?($scope.loanProcess.msg).replace('#{dueDate}',data.dueDate):"";
                    $scope.loanProcess.msg =($scope.loanProcess.msg)?($scope.loanProcess.msg).replace('#{barcode}',data.barcode):"";
                    $scope.loanProcess.itemInfo = data.itemInfo;
                    $scope.loanProcess.processCode = data.processCode;
                    $scope.loanProcess.userMsgCode = data.userMsgCode;
                    $scope.loanParam.barcode = (data.processCode)? "":$scope.loanParam.barcode;
                    sound='negative';
                    if ($scope.loanProcess.itemMsgCode == "17"){
                      sound='positive';
							 if ($scope.loanProcess.processCode == "p1_26"){
									$scope.loanProcess.msg = "This item is Consumable Textbook! Item is set returned and removed from Textbook Collection";
							 }
                    }
                break;
                case "11": case "15":
                    $scope.loanProcess.userMsgCode = data.userMsgCode;
                    $scope.loanProcess.msg = $scope.loanParam.barcode;
                    $scope.loanProcess.itemMsgCode = data.itemMsgCode;        
                    //$scope.loanProcess.msg = $scope.oplMsg['circ_loan_loanProcess_'+data.processCode];
                    $scope.loanProcess.msg = $scope.oplMsg['circ_loan_itemStatus_'+data.itemMsgCode];
                    $scope.loanProcess.msg =($scope.loanProcess.msg)?($scope.loanProcess.msg).replace('#{dueDate}',data.dueDate):"";
                    $scope.loanProcess.msg =($scope.loanProcess.msg)?($scope.loanProcess.msg).replace('#{barcode}',data.barcode):"";
                    $scope.loanProcess.itemInfo = data.itemInfo;
                    //$scope.loanProcess.processCode = data.processCode;
                    //$scope.loanProcess.userMsgCode = data.userMsgCode;
                    $scope.loanParam.barcode = (data.processCode)? "":$scope.loanParam.barcode;
                    sound='positive';
                break;
                case "19":
                    $scope.loanProcess.msg = "User Changed";
                    $scope.loanParam.uid=data.uid;
                    $scope.loanProcess.itemMsgCode = "";
                    $scope.loanParam.barcode = "";
                    sound='negative';
                break;

                default:
                    alert("Something happens unexpected");   
                    sound='negative';
              } //end switch
            }
            else{
              console.log("case else", $scope.loanProcess.msg);
            }
            oplSound.play(sound);
        }
        $scope.resetLoanParam=function(){
            if (!$scope.loanParam.sessionDueDate) {
                $scope.loanParam.loanType = 'standard';
                $scope.loanParam.barcode = "";
                $scope.loanParam.dateDue = "";
                $scope.loanParam.hourDue = "";
                $scope.loanParam.cmdCode = 0;
                $scope.loanParam.op      = "";
            }
        }
        $scope.resetProcessLoan=function(){
            $scope.loanProcess = {
                msg : "",
                code: 0,
                itemMsgCode: 0,
                itemInfo : null,
                processCode : 0,
                userMsgCode : 0,
                cmdCode : 0,
                returnMsgList: []
            };
            //$scope.loanParam.barcode = "";
        }
        $scope.callbackLoanFn=function(data){
            console.log("data from callbackLoanFn>>",data);
        }
        // Return functions
        $scope.callbackReturnFn=function(data){
            var lList = data.loanList;
            var lParam = data.loanParam;
            angular.forEach(lParam,function(value,key){;
               $scope.loanParam[key]= value;
            });
            $scope.loanParam.bcList = [];
            angular.forEach(lList,function(l){
                if (l.selected) 
                    $scope.loanParam.bcList.push(l.barcode) ;
            });
            $scope.onProcessReturn();
        }

        $scope.callbackTransferFn = function() {
          console.log("data.loanList =", $scope.patron.loanList);
          $scope.loanList = $scope.patron.loanList;
          angular.forEach($scope.loanList, function(item) {
            item.selected = true;
          });
          $timeout(function() {
            $scope.loanList = $scope.patron.loanList;
              $("#transferLoanModal").modal({
                  backdrop: "static",
                  keyboard: true,
                  show: true
              });
          }, 10);
        };
        $scope.onProcessReturn=function(){
            $scope.loanProcess = {code:0,msg:""};
            $scope.returnFineList = [];
            waitingAnimation.start();
            $http.post("/bin/txtbk/ajax/circ/doReturn",$scope.loanParam)
                .success(
                    function(data){
                      $scope.loanProcess.returnMsgList = data.returnMsgList;
                      $scope.loanProcess.returnLostMsgList = data.returnLostMsgList;
                      $scope.loanProcess.returnDamageMsgList = data.returnDamageMsgList;
                      $scope.loanProcess.returnOverdueMsgList = data.returnOverdueMsgList;
                      $scope.processReturnMsg();
                      $scope.loanHistoryList = [];
                      $scope.returnFineList = [];
                      if ($scope.loanParam.op == 'lost') {
                          $scope.loanLostList = [];
                          $scope.returnLostList = data.returnLostMsgList;
                          $scope.returnFineList = data.returnLostMsgList;
                      }
                      if ($scope.loanParam.op == 'damage') {
                          $scope.returnFineList = data.returnDamageMsgList;
                      }
                      if (data.returnOverdueMsgList && data.returnOverdueMsgList.length>0){
                          $scope.returnFineList = data.returnOverdueMsgList;
                      }
                      if (data.uid) {
                          $scope.getPatronInfo(data.uid)
                      setTimeout(function(){
                          $scope.loanProcess.inAction=0;
                          $scope.updateTransList(data);
                          },2000);
                      }
                      waitingAnimation.stop();
                      if ( ($scope.loanParam.op=='lost' && $scope.charge.lost && $scope.returnFineList.length>0) || 
                           ($scope.loanParam.op=='damage' && $scope.charge.damage && $scope.returnFineList.length>0) ||
                           ($scope.charge.overdue && $scope.returnFineList.length>0 && $scope.ODexemption!=1) ){
                          $scope.updateTotalCharge();
                          setTimeout(function(){$("#fineDlg").dialog({
                                  closeOnEscape:false,
                                  modal:true,closeText:'',
                                  autoResize:true,
                                  height:330,
                                  width:800,
                                  open: function(event, ui) {   // It'll hide Close button
                                     $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
                                  },
                                  buttons :{
                                      "save":{
                                          text : 'Save',
                                          click :function(){
                                              $scope.processFine();
                                          }
                                       }
                                  }
                              });                     
                          },2);
                        } // end if
                    })
                    .error(function(data){
                        waitingAnimation.stop();
                    });
        }
        $scope.processReturnMsg=function(){
            var msg="";
            angular.forEach($scope.loanProcess.returnMsgList,function(r){
                msg = $scope.oplMsg['circ_return_returnProcess_retStatusCode_'+r.retStatusCode] || "";
                var newMsg = msg;
                if (msg) {
                  newMsg=msg;
                  newMsg=msg.replace('#{dueDate}',r.dueDate);
                }
              r.msg=newMsg;
            });
        }
        $scope.callbackRenewFn=function(data){
            var lList = data.loanList;
            var lParam = data.loanParam;
            angular.forEach(lParam,function(value,key){;
               $scope.loanParam[key]= value;
            });
            $scope.loanParam.bcList = [];
            angular.forEach(lList,function(l){
               if (l.selected) 
                $scope.loanParam.bcList.push(l.barcode) ;
            });
            $scope.onProcessRenew();
        }
        $scope.onProcessRenew=function(){
            $scope.resetProcessLoan();
            waitingAnimation.start();
            $http.post("/bin/txtbk/ajax/circ/doRenew",$scope.loanParam)
                .success(
                    function(data){
                        $scope.loanProcess.renewalMsgList = data.renewalMsgList;
                        $scope.processRenewalMsg($scope.loanProcess.renewalMsgList);
                         if (data.uid)
                            $scope.getPatronInfo(data.uid)
                        waitingAnimation.stop();
                    })
                    .error(function(data){
                        waitingAnimation.stop();
                    });
        }
        $scope.processRenewalMsg=function(msgList) {
          var msg="";
          var r_msg="";
            angular.forEach($scope.loanProcess.renewalMsgList,function(r){
                msg = "";
                msg = $scope.oplMsg['circ_renew_renewProcess_renewalStatusCode_'+r.renewalStatusCode];
                if (msg){
                  r_msg = msg.replace(/#{dueDate}/gi,r.itemInfo.dueDate);
                }
                r.msg=r_msg;
            });
        }
		  	$scope.replaceMessageField = function(msg, field) {
            var message = msg || "";
            if (field == 'name') {
                var info = ($scope.patron && $scope.patron.info)
                    ? $scope.patron.info
                    : {};
                var name = (
                    (info.lastname || "") + " " +
                    (info.firstname || "")
                ).trim();
                return message.replace(/#\{name\}/g, name);
            }
            return message;
        };
        /*$scope.callbackDeleteFn=function(data){
			  $scope.deleteItems=[];
			  angular.forEach(data.loanList,function(l){
				  if (l.selected){
				  	$scope.deleteItems.push(l);
				  }
			  });
				var $dialog = $("#deleteDlg")
				.dialog({
					modal:true,closeText:'',
					autoResize:true,
					height:400,
					width:800,
					title :  "Confirm Deletion",
					buttons : [
						{
							id : "btn-delete",
							text : oplMsg.deleteTxt,
							class: "red",
							click : function(){
								$scope.delete();
							}
						},
						{
							id : "btn-cancel",
							text : oplMsg.cancelTxt,
							click : function(){
								$dialog.dialog('close');
							}
						}
					]
				});
				$dialog.dialog("open");
		  }
		  $scope.delete=function(){
			  $scope.loanParam.deleteList = $scope.deleteItems;
            $http.post("/bin/txtbk/ajax/circ/doReturnDelete",$scope.loanParam)
                .success(
                    function(data){
                        $scope.loanProcess.renewalMsgList = data.renewalMsgList;
                        $scope.processRenewalMsg($scope.loanProcess.renewalMsgList);
                         if (data.uid)
                            $scope.getPatronInfo(data.uid)
                        waitingAnimation.stop();
								$("#deleteDlg").dialog("close");
                    })
                    .error(function(data){
                        waitingAnimation.stop();
                    });
		  }
			*/
        //-------------------------------------------------------------------------------- 
        //Fine func
        $scope.doWaive=function(fine){
            fine.fineRateTbl.waived =(fine.fineRateTbl.forgiven)?parseFloat(fine.fineRateTbl.fee):"0.00";
            fine.fineRateTbl.charge = parseFloat(fine.fineRateTbl.fee) - parseFloat(fine.fineRateTbl.waived);
            $scope.updateTotalCharge();
        }
        $scope.reCalCharge=function(fine){
            if (fine.fineRateTbl.forgiven){
                fine.fineRateTbl.waived=(parseFloat(fine.fineRateTbl.waived)>parseFloat(fine.fineRateTbl.fee))?fine.fineRateTbl.fee:fine.fineRateTbl.waived; 
            }
            if (fine.fineRateTbl.forgiven && parseFloat(fine.fineRateTbl.waived)>0){
                fine.fineRateTbl.charge = parseFloat(fine.fineRateTbl.fee)>0?parseFloat(fine.fineRateTbl.fee)-parseFloat(fine.fineRateTbl.waived):0.00;
            }
            else{
                fine.fineRateTbl.charge = parseFloat(fine.fineRateTbl.fee);
            }

            $scope.updateTotalCharge();
        }
        $scope.updateTotalCharge=function(){
            $scope.totalCharge=0.00;
            angular.forEach($scope.returnFineList,function(fine){
                if (!fine.fineRateTbl.fee || fine.fineRateTbl.fee == ""){
                    fine.fineRateTbl.fee=0.0;
                    fine.fineRateTbl.charge = 0.0;
                }
                $scope.totalCharge += (parseFloat(fine.fineRateTbl.charge)>0)?parseFloat(fine.fineRateTbl.charge):0.00;
            });
        }

        $scope.processFine=function(){
            if (($scope.totalCharge=="" || parseInt($scope.totalCharge<=0)) ){
                $("#fineConfirmationDlg").dialog({
                    modal:true,closeText:'',
                    autoResize:true,
                    height:200,
                    width:400,
                    buttons : {
                        "yes": {text: 'Yes',click:function (){$scope.confirmFineYes();} },
                        "no" : {text:'No',click:function (){$scope.confirmFineNo();} }
                        }
                });
            }
            else {
                $scope.doFine();
            }
        }
        $scope.doFine=function() {
            $scope.confirmFine ="";
            waitingAnimation.start();
                $http.post("/bin/txtbk/ajax/circ/doFine",$scope.returnFineList)
                .success(
                    function(data){
                         if (data.uid)
                            $scope.getPatronInfo(data.uid)
                            setTimeout(function(){$("#fineDlg").dialog('close');},1);
                            $scope.confirmFine="";
                        waitingAnimation.stop();
                    })
                    .error(function(data){
                        waitingAnimation.stop();
                    });

        }
        $scope.confirmFineYes=function() {
            $scope.confirmFine ="yes";
            $("#fineConfirmationDlg").dialog('close');
            $scope.doFine();
        };
        $scope.confirmFineNo=function() {
            $("#fineConfirmationDlg").dialog('close');
        };
        $scope.doPayment=function(){
            window.location.href="/bin/txtbk/circ/payment?uid=" + $scope.patron.info.uid;            
        }
        //-------------------------------------------------------------------------------- 
        $scope.showUserCircList=function(){
            $("#userCircPrintDlg").dialog({
                modal:true,closeText:'',
                autoResize:true,
                height:500,
                width:900,
                buttons :{
                        "print":{
                            text : $scope.oplMsg.printTxt,
                            click :function(){$scope.printUserCircInfo(); }
                         },
                        "email":{
                            text : $scope.oplMsg.emailTxt,
                            click :function(){
                                $scope.emailUserCircInfo();
                            }
                         },
                        "close":{
                            text : 'Close',
                            click :function(){
                                 $("#userCircPrintDlg").dialog('close');
                            }
                         },
                    }
            });
        }
				$scope.onOpenUserCircDlg=function(){
					 $scope.email.statusMsg="";
           $scope.printUserCircInfo(); 
				}
        $scope.printUserCircInfo=function(){
            var content="";
                //content = document.getElementById("content").innerHTML;
                content = document.getElementById("print-section").innerHTML;
            if ((!$scope.patron.loanList||$scope.patron.loanList.length<=0) && (!$scope.patron.transList||$scope.patron.transList.length<=0) ) {
                content += "<div><span style='color:red;font-style:italic;'>  There are no transactions! </span></div>";
            }
            var popupWin = window.open();
            popupWin.document.write ('<html><head></head><body>'+content +'</body></html>');
            popupWin.print();
        }
        $scope.emailUserCircInfo=function() {
            var content = "";
            content += "<form id='emailFrm' name='emailFrm' >";
            content += "<div style='margin:5px;'><b>To</b><br><input type='text' name='emailTo' id='emailTo' value='"+ $scope.patron.info.email +"' size=50></div>";
            content += "<div style='margin:5px;'><b>Subject</b><br><input type='text' name=emailSubject id=emailSubject value='Borrower Transaction Information' size=50></div>";
            content += "</form>";
            var $dialog = $("<div id='' class='dialog' style='font-size:12px;'></div>")
            .html(content)
            .dialog({
                closeOnEscape:false,
                open: function(event,ui){
                    //$(".ui-dialog-titlebar-close").hide();
                },
                autoOpen: false,
                title : $scope.oplMsg.emailOnloanListTxt,
                modal: true,closeText:'',
                height: 200,
                width:  500,
                buttons : [
                    {   id: "button-send",
                        text: "Send",
                        click : function() {
                            $scope.sendEmail1($dialog);
                            //$dialog.dialog('close');
                            //$dialog.dialog('destroy').remove();
                        }
                    },
                    {   id: "button-cancel",
                        text: "Close",
                        click : function() {
                            $dialog.dialog('close');
                            $dialog.dialog('destroy').remove();
                        }
                    },
                ]
            });
            $dialog.dialog("open");
        }

			  $scope.sendEmail1=function(dialog) {
            var dataStr = $("#emailFrm").serialize();        
            dataStr += "&uid="+$scope.patron.info.uid;
            var emailRex = /^[a-z0-9\._]*[a-z0-9_]@[a-z0-9][a-z0-9\-\.]*[a-z0-9]\.[a-z]{2,6}$/;
            var emails = $("#emailTo").val().split(",");
            var msg = "";
            for(var i =0; i<emails.length;i++){
                if (!emailRex.test(emails[i].trim())){
                   msg += emails[i] +"-";
                }
            }
            if (msg != ""){
                alert("Invalid Email Address: " + msg);
                $("#emailTo").focus();
                return false;
            }
            dataStr += "&op=email";
            $.ajax({
                type:"POST",
                url:"/bin/txtbk/util/save_sendUserCircInfo",
                data:dataStr,
                dataType:"json",
                async :false,
                success: function(result){
                    if (result.done == 1){
                        dialog.html("<br><br><p>Borrower Transaction Information has been sent to " + result.email + ".</p>");
                        $("#button-send").hide();
                    }
                    else{
                        dialog.html("<br><br><p>There is an error while sending Borrower Transaction Information to user.Please close and try again!");
                    }   
                },
                error : function(XMLHttpRequest, textStatus, errorThrown){
                    dialog.html("<br><br><p>There is an error while sending Borrower Transaction Information to user. Please report to OPALS!");
                    $("#button-send").hide();
                },
                complete : function() {
                }
            });
        }

				$scope.sendEmail=function(op){
					 $scope.email.statusMsg="";
					 var emails = ($scope.email.address).split(",");
           var emailRex = /^[a-z0-9\._]*[a-z0-9_]@[a-z0-9][a-z0-9\-\.]*[a-z0-9]\.[a-z]{2,6}$/;
           var msg = "";
					 for(var i =0; i<emails.length;i++){
                if (!emailRex.test(emails[i].trim())){
                   msg += emails[i] +"-";
                }
            }
            if (msg != ""){
                alert("Invalid Email Address: " + msg);
                $("#emailTo").focus();
                return false;
            }
					 var params = {};
					 params.email = $scope.email.address;
					 params.subject= $scope.email.subject;
					 params.message= $scope.email.message;
					 params.uid=$scope.patron.info.uid;
					 var data=$.param(params);
					 var url = "/bin/txtbk/ajax/util/emailUserCircInfo";
					 $http({method: 'POST',
                   url: url,
                   data: data,
                   headers: {'Content-Type':'application/x-www-form-urlencoded'}})
            .success(
                function(ret){
									if (ret.status==1 ){
										 $scope.email.statusMsg="Email for list of items on loan sent sucessfully to " + $scope.email.address + "!";
                     op && op.alert?alert($scope.email.statusMsg):"";
									}
									else{
										 $scope.email.statusMsg="There is an error sending Email for list of items on loan to " + $scope.email.address + ". Please try again!";
                     op && op.alert?  alert($scope.email.statusMsg):"";
									}
             })
            .error(function(data){
                //waitingAnimation.stop();
								$scope.email.statusMsg="There is an error sending Email for list of items on loan to " + $scope.email.address + ". Please report to OPALS support staff!";
            }); 
				}
        $scope.getSelectedLoanCount = function () {
            var count = 0;
            angular.forEach($scope.loanList, function (item) {
                if (item.selected) {
                    count++;
                }
            });
            return count;
        };  
        
        $scope.onTransfer=function(){
          var msg = "Are you sure you want to transfer " + $scope.getSelectedLoanCount() +  " textbooks to teacher " + $scope.selectedTeacher.lastname + ", " + $scope.selectedTeacher.firstname + "?";
          if (confirm(msg)) {
            $scope.doTransfer();
          }
        }
        $scope.doTransfer=function(){
          var selectedList = $scope.loanList.filter(function (item) {
            return item.selected;
          });
          if (selectedList.length === 0) {
            alert("Please select at least one textbook.");
            return;
          }
          console.log("writing function to send this list", selectedList , " to teacher ", $scope.selectedTeacher);
           var url='/bin/txtbk/ajax/circ/circFn';
            var param={
                'op':'transferLoan',
                'list':selectedList,
                'teacher':$scope.selectedTeacher
            };
            waitingAnimation.start();
				    console.log("param",param);
            $http.post(url,param)
					    .success(function(data){
					      console.log("data:",data);
                waitingAnimation.stop();
                //close dialog
                $("#transferLoanModal").modal("hide");
                $scope.getPatronInfo(data.uid);
              })
					.error(function(errorHandle){
						console.log("error", errorHandle);
						 waitingAnimation.stop();
					});
        }

        $scope.init=function(){
            var curUid=$.cookie("borrower");
            $("#opl-userlookup-nameBc").focus();
            if(curUid && curUid>0){
              $scope.getPatronInfo(curUid);
            }
            $scope.lookup_nameBc="";
						$scope.loadDefaultFieldList();
            $scope.ignoreTeacher =false;
            if ($scope.tb_pref.circ.loan && !$scope.tb_pref.circ.loan.item){
              $scope.ignoreTeacher =true;
            }
						else if ($scope.tb_pref && $scope.tb_pref.circ.loan.item && $scope.tb_pref.circ.loan.item.indexOf('teacher') && $scope.tb_pref.circ.loan.item.indexOf('teacher')<0){
							 $scope.ignoreTeacher =true;
						}
            angular.forEach($scope.preListOpt,function(o){
                if($scope.oplMsg[o.msgKey])
                    o.name=$scope.oplMsg[o.msgKey];
            });
            var circGrpListStr=$.cookie("circGrpList");
            var curUid=$.cookie("borrower");
            var loanGrp='<tmpl_var loanGrp default=nameBc>';
            if(circGrpListStr && circGrpListStr!=""){
              var circGrpList= JSON.parse(circGrpListStr);
              if(loanGrp != circGrpList.selType){
                $scope.onSwitchUser();
                $scope.selType=loanGrp;
              }
              else{
                $scope.selType=circGrpList.selType;   
                $scope.selVal=circGrpList.selVal;   
                $scope.getBorrowerList($scope.selType,$scope.selVal);
              }
              angular.forEach($scope.preListOpt,function(o){
                if($scope.selType!='nameBc' && o.type == $scope.selType){
                    $scope.selListOpt=o;
                    $scope.selList=o.list;
                }
            });
          }
          else if(curUid && curUid>0){
           //$scope.getBorrowerList("uid",curUid);
          }
        }  
				$scope.loadDefaultFieldList=function(){
						if ($scope.tb_pref && $scope.tb_pref.circ && $scope.tb_pref.circ.loan.loanList.length>0){
							 $scope.loanFieldList = $scope.tb_pref.circ.loan.loanList;
						}
						if ($scope.tb_pref && $scope.tb_pref.circ && $scope.tb_pref.circ.loan.lostList.length>0){
							 $scope.lostFieldList = $scope.tb_pref.circ.loan.lostList;
						}
			  }
        $scope.countOverdue=function(u) {
            var overdueCnt = 0;
            if (u) {
                angular.forEach(u.loanList, function(l,i){
                    if(l.overdue==1)
                        overdueCnt++;
                })
            } 
            return overdueCnt;
        }
        
        $scope.chkHasChanged=function(o){
          if(!o.md5Val || o.md5Val==''){
            console.log("no md5Val");
            return false;
          }
          var oldMd5Val=o.md5Val;
          o.md5Val="";
          var newMD5Val =$scope.getObjectMD5Val(o);
          console.log("md5Val: ",oldMd5Val,"vs",newMD5Val);
          return (oldMd5Val!=newMD5Val);
        }
        $scope.updateTransList=function(data){
          $.each($scope.borrowerList,function(i,b){
            console.log("b->uid vs patron uid : ", b.info.uid , "==", $scope.patron.info.uid);
            if (b.info.uid==$scope.patron.info.uid ){
              //b.loanList=[];
              console.log("loanList in updateTransList>>", $scope.patron.loanList);
              b.loanList = angular.copy($scope.patron.loanList);
              $scope.$digest();
              return false;
            }
          });
        }
	      $scope.printInvoice=function(tid){
			    var url="/bin/txtbk/billing/invoice?tid=" + tid;
          window.open(url,'mywin','left=20,top=20,width=720,height=500,toolbar=1,resizable=0');
        }

}]);
//*--------------------------------------------------------------------------------*/
</script>

<div ng-controller="tbLoanCtrl" style="margin:0 auto;" ng-init="init();" class="bootstrap-iso" >
  <div id="txtbk_title" class="txtbk_title">
    <h4> {{oplMsg.textbkTxt}} {{oplMsg.loansTxt}} </h4>
  </div> 
  <div id='tbPrintUserCircInfoBtn' style='float:right;margin-right:1em;;margin-top:-10px;' ng-show="patron.info">
    <button type="button" class="btn-info btn-sm" data-toggle="modal" data-target="#circDlg" data-keyboard="false" data-backdrop="static" ng-click="onOpenUserCircDlg();">
			<span class="glyphicon glyphicon-print"></span> {{oplMsg.CirculationTxt}}
		</button>
  </div>
  <hr>
  <div id="switchUserDiv"  align=center style="color:green;font-style:italic;margin:10px;">
        {{oplMsg.switchUserInst}} &nbsp;&nbsp;&nbsp;<input type="button" value="{{oplMsg.switchUserBtnTxt}}" ng-click="onSwitchUser();">
  </div>
  <div align=center ng-hide="patron || borrowerList.length>0" >
      <select ng-model="selListOpt" ng-options="t as t.name for t in preListOpt"> </select>
      <input type='text' name='opl-userlookup-nameBc' size='16' 
        ng-model="lookup_nameBc" ng-enter="lookupUser()" id="opl-userlookup-nameBc" ng-show="selListOpt.type=='nameBc'">
      <select ng-model="selList" ng-change="onSelectList()" ng-hide="selListOpt.type=='nameBc'"
        ng-options="s as s.name for s in selListOpt.list" >
      </select>
      <input  type='button' value='OK' ng-click="lookupUser();" ng-show="selListOpt.type=='nameBc'">
      <button ng-show="selListOpt.type=='preSelListId'" 
                  ng-click="createCustomGroupList();"> {{oplMsg.createCustomListTxt}}&nbsp;
                  <span class="glyphicon glyphicon-pencil" style="font-size:130%;color:green"></span>             
      </button>
  </div>
  <table ng-show="patron || borrowerList" style="width:100%">
    <tr>
      <td rowspan="6" style='vertical-align:top; max-width:20%' ng-show="selListOpt.type!='nameBc'">
        <div style="width:98%;padding:5px;height:500px;overflow-y:auto;margin-top:5px;margin-left:5px;border:1px grey solid;" 
          ng-hide="selListOpt.type=='nameBc'" class="txtbk_border;" class="container" id="borrowerList">
          <div style="text-align:right;padding:5px;" ng-show="borrowerList && borrowerList.length>1">
            <span style="font-weight:bold;">{{oplMsg.sortByTxt}}</span>
            <select ng-model="userListSortOpt" ng-change="sortPreList()">
              <option value='lastname'>{{oplMsg.lastnameTxt}}</option> 
              <option value='firstname'>{{oplMsg.firstnameTxt}}</option> 
            </select>
          </div>
          <ul class="list-group">
            <li ng-repeat="b in borrowerList" style="padding:5px;" ng-click="setBorrower(b);" class="list-group-item" >
              <span ng-show=" b.done"  class="glyphicon glyphicon-ok" style="color:green;font-size:120%;vertical-align:top" > </span>
              <div style="display:inline-block;width:45px;vertical-align:top;margin-left:5px;">
                <img ng-src="/bin/user/userImg?uid={{b.info.uid}}" style="max-width:40px;max-height:55px">
              </div>
              <div style="display:inline-block;max-width:200px;vertical-align:top;">
                <span>{{b.info.lastname}},{{b.info.firstname}}<span><br>
                <span style='font-weight:bold;color:#46883E;'>{{b.info.userbarcode}}</span>
                <span style='text-align:right;color:brown'><br>
                  <span ng-show="b.loanList.length>0">#{{oplMsg.loansTxt}}: <b>{{b.loanList.length}}</b></span>
                  <span ng-show="countOverdue(b)>0">&nbsp;|&nbsp;#{{oplMsg.overdueTxt}}:<b>{{countOverdue(b)}}</b></span>
                  <br ng-show='b.loanList.length||countOverdue(b)>0'>
                  <span ng-show="b.info.status==2||b.info.status==0||(b.info.status==1&&b.info.expired=='1')">
                    {{oplMsg.statusTxt}}:<b>{{b.info|oplUserStatus}}</b>
                  </span>
                </span>
              </div>  
            </li>
          </ul>   
        </div>
      </td>
      <td ng-style="{'width':(selListOpt.type=='nameBc')?'45%':'35%', 'vertical-align':'top','padding':'5px'}" >
        <fieldset class="txtbk-border">
            <legend class="txtbk-border">&nbsp;{{oplMsg.userAccTxt}}&nbsp; </legend>
            <div ng-show="!patron"><span> {{oplMsg.noUserSelTxt}}</span> </div>
            <div ng-show="patron">
               <div style="height:30px;padding:5px;"> 
                  <span ng-if="tb_pref.circ.loan.user"> 
                    <span style="margin-right:15px" ng-repeat="field in tb_pref.circ.loan.user" ng-init="label=field +'Txt'">  
                      {{oplMsg[label]}} : <b>{{patron.info[field]}}</b>
                    </span> 
                  </span>
                  <span ng-if="!tb_pref.circ.loan.user"> 
                    <span style="margin-right:15px"> {{oplMsg.homeroomLbl}}: <b>{{patron.info.homeroom}}</b></span> 
                    <span style="margin-right:15px"> {{oplMsg.gradeLbl}}: <b>{{patron.info.grade}}</b></span>
                    <span style=""> {{oplMsg.teacherLbl}}: <b>{{patron.info.teacher}}</b></span>
                  </span>   
               </div> 
               <div>
                  <div  style="display:inline-block">
                    <img ng-src="/bin/user/userImg?uid={{patron.info.uid}}" style="width:72px;max-height:96px">
                  </div>    
                  <div  style="display:inline-block">
                    <span style="color:#4284F7;vertical-align:top; font-size:110%;font-weight:bold" ng-show="patron">
                        {{patron.info.lastname}},{{patron.info.firstname}} {{patron.info.userbarcode}}
                    </span> 
                    <span ng-show="patron.info.expired==1" class="text-danger">
                      {{replaceMessageField(oplMsg.circ_loan_userSelPan_userExpiredTxt,'name')}}
                    </span>
                    <span ng-show="ODexemption==1" class="text-primary"> <strong> OD Exemption </strong></span>
                    <span class="text-success" ng-show="patron.info.catname" style="margin-right: 50px;">
                       --- {{oplMsg.catTxt || " Category"}}:<strong> {{patron.info.catname}} </strong>
                    </span>
                    <span><br>
                        <textarea ng-model="patron.info.notes" style="width:400px;height:50px">{{patron.info.notes}}</textarea>
                            <img ng-src="/theme/opals/image/save.png" ng-click="saveUserNotes()"></a>
                    </span><br> 
                    <span style="padding:5px"> 
                      #{{oplMsg.loansTxt}}:<b style='background:#ccffcc'>&nbsp;&nbsp;{{patron.loanList.length||0}}&nbsp;&nbsp;</b>
                    </span> 
                    <span style="padding:5px">
                      #{{oplMsg.overdueTxt}}:<b style='background:#ffcccc'>&nbsp;&nbsp;{{countOverdue(patron)}}&nbsp;&nbsp;</b>
                    </span>
                    <span style="padding-left:5px">
                       #{{oplMsg.reservesTxt}}:<b style='background:#ffffcc'>&nbsp;&nbsp;{{patron.reservedList.length||0}}&nbsp;&nbsp;</b>
                    </span>
                </div>
              </div>
              <div style="padding:5px;">
                 <div  style="display:inline-block;width:300px;float:left;">
                    <button class="btn-warning btn-sm" ng-click="showFineList=!showFineList" ng-show="patron.info.balance>0"> 
                        <span ng-bind="showFineList?oplMsg.circ_loan_userInfo_transHideBtn:oplMsg.circ_loan_userInfo_transShowBtn"></span>
                    </button>
                 </div>   
                <div  style="display:inline-block;float:right;padding-right:100px;" ng-show="patron.info.balance">
                    {{oplMsg.circ_loan_userInfo_balanceTxt}}&nbsp;$ <b>{{patron.info.balance}}</b>&nbsp;&nbsp;
                    <button class="btn-danger btn-sm" ng-click="doPayment();" ng-show="patron.info.balance>0">{{oplMsg.circ_loan_userInfo_paidBtn}}</button>
                    <button class="btn-success btn-sm" ng-click="doPayment();" ng-show="patron.info.balance<0">{{oplMsg.circ_loan_userInfo_refundBtn}}</button>
                </div>   
             </div>
            </div>      
        </fieldset>
      </td>
      <td ng-style="{'width':(selListOpt.type=='nameBc')?'55%':'45%', 'vertical-align':'top','padding':'5px'}" >
          <fieldset class="txtbk-border" ng-show="patron">
              <legend class="txtbk-border">&nbsp;{{oplMsg.processLoanLbl}}&nbsp; </legend>
              <span style='margin:70px;font-size:150%;color:brown;font-weight:bold' 
                ng-show="patron.info.status==0 || patron.info.status==2"><br>{{oplMsg.circ_loan_userSelPan_userBlockTxt}}
              </span>
              <h3 ng-show="patron.info.expired==1" class="text-danger">
                {{replaceMessageField(oplMsg.circ_loan_userSelPan_userExpiredTxt,'name')}}
              </h3>
              <span ng-show="patron.info.status!=0 && patron.info.status!=2 && patron.info.expired !='1'">
              <table class="table table-hover" style="padding:5px;margin-bottom:10px;">
                  <tr class="success">
                      <th colspan=3 style="border:0;">
                          <button type="button" class="btn-default btn-sm" style="float:right;" ng-click="qs_show();">
                            <span class="glyphicon glyphicon-search"></span> {{oplMsg.circ_loan_loanPanel_quickTitleSrchTxt}}
                          </button>  
                      </th>
                  </tr>
                  <tr class="active" ng-show="tb_pref.circ.loan.item && tb_pref.circ.loan.item.indexOf('teacher')>=0">                            
                      <td style="border:0;"> 
                          <span style="font-weight:bold;">Teacher</span>
                          <select ng-model="teacher.tId" ng-change="setCourseList();">
                              <option value="0">N/A</option>
                              <option ng-repeat="t in teacherCourseList" value="{{t.tId}}" >{{t.lastname}},{{t.firstname}}</option>
                          </select>
                      </td>
                      <td style="border:0;">          
                          <span style="font-weight:bold;">Course</span>
                          <select ng-model="course.id" ng-change="setCourse();">
                              <option value="0">N/A</option>
                              <option ng-repeat="c in courseList" value="{{c.courseId }}" >{{c.courseName}} [{{c.courseCode}}]</option>
                           </select>
                      </td>
                      <td style="border:0;">      
                           <span style="font-weight:bold;">Ignore</span>
                           <input type="checkbox" name="ignoreTeacher" ng-model="ignoreTeacher">
                      </td>
                  </tr>    
                  <tr class="info" style="height:10px;">
                      <td style="border:0;"><span style="font-weight:bold;">{{oplMsg.circ_loan_loanPanel_itemBarcodeLbl}}<span></td>
                      <td style="border:0;">
                          <input type='radio' name='loanDDType' value='standard' ng-model="loanParam.loanType">
                          <span style="font-weight:bold;">Standard</span>
                          <input type='radio' name='loanDDType' value='day' ng-model="loanParam.loanType">
                          <span style="font-weight:bold;">Set Date</span>
                      </td>
                      <td style="border:0;"><span style="font-weight:bold;">{{oplMsg.circ_loan_loanPanel_setSessionTxt}}</span>&nbsp;
                          <input type="checkbox" ng-model="loanParam.sessionDueDate" ng-change="saveSessionDueDate();" > 
                      </td>
                  <tr>
                  <tr class="default">
                      <td style="border:0;margin:5px;"> 
                          <input type='text' id='bc' name='bc' ng-model="loanParam.barcode" 
                              ng-enter="loanParam.op='';onProcessLoan();" ng-change="loanProcess.code=0" >    
                      </td>
                       <td style="border:0;">   
                          <span ng-show="loanParam.loanType=='day'"> 
                              <input ng-model="loanParam.dateDue" type="text" min-date=0  
                                  opl-datepicker opl-datepicker-locale="en" opl-datepicker-yearrange="c+00:c+10"  
                                  cal-image="/theme/opals/image/calendarIconBlue.png" style="padding-top:5px;" />
                          </span>
                       </td>
                       <td >
                          <button type="button"
                            class=" btn btn-warning btn-sm"
                            ng-click="loanParam.cmdCode=''; loanParam.op=''; onProcessLoan();"
                            ng-disabled="!loanParam.barcode ||
                                         (loanParam.loanType=='day' && !loanParam.dateDue) ||
                                         (loanParam.loanType=='hour' && !loanParam.hourDue) ||
                                         loanProcess.inAction==1">
                            {{oplMsg.loanTxt}} 
                          </button>
                          <button class="btn btn-lg" type="button" ng-show="patron&&patron.info.email&&patron.loanList.length>0"
                             ng-click="sendEmail({alert:1});">
                            <i class="glyphicon glyphicon-envelope squareBgIcon" 
                              style="color:white;cursor:pointer;margin-left:5px;"></i>
                          </button>
                      </td>
                  </tr>
              </table> 
              </span>
          </fieldset>   
      </td>
    </tr>
    <tr ng-show="showFineList==true">
        <td colspan=2   style="padding:10px;">
            <fieldset class="txtbk-border" >
                <legend class="txtbk-border">{{oplMsg.unpaidFineListTxt}}</legend>
                <table class="table table-hover">
                    <tr>
                        <th>{{oplMsg.titleTxt}}</th>
                        <th>{{oplMsg.barcodeTxt}}</th>
                        <th>{{oplMsg.circ_loan_unpaidFineList_typeLbl}}</th>
                        <th>{{oplMsg.circ_loan_unpaidFineList_dateLbl}}</th>
                        <th>{{oplMsg.circ_loan_unpaidFineList_chargeLbl}}</th>
                        <th>{{oplMsg.circ_loan_unpaidFineList_paidLbl||"Paid"}}</th>
                        <th>{{oplMsg.circ_loan_unpaidFineList_waivedLbl||"Waived"}}</th>
                        <th>{{oplMsg.circ_loan_unpaidFineList_totalChargeLbl||"Total Charge"}}</th>
                    </tr>
                    <tr>
                      <td colspan=8>
                        {{patron.info.transList}}
                      </td>
                    </tr>
                    <tr ng-repeat="f in patron.transList">
                        <td> {{f.title}} </td>      
                        <td> {{f.barcode}} </td>      
                        <td style="text-transform:uppercase;color:red"> {{f.fineType}} </td>      
                        <td> {{f.date}} </td>      
                        <td class="amountRight"> {{f.fineAmount}} </td>      
                        <td class="amountRight"> {{f.paidAmount}} </td>      
                        <td class="amountRight"> {{f.forgivenAmount}} </td>      
                        <td class="amountRight"> {{f.dueAmount}} </td>      
                    </tr>
                </table>
            </fieldset>
        </td>    
    </tr>
    <tr>
        <td colspan=2> 
            <div id="loanMsg" style="font-weight:bold;background-color:#FFFFCC;text-align:center;margin:0 auto;color:red;padding:0px;width:99%">
                <div ng-show="loanProcess.itemInfo && loanProcess.itemInfo.title" style="color:#000;"> 
                    {{loanProcess.itemInfo.title}} {{loanProcess.itemInfo.author}} [{{loanProcess.itemInfo.barcode}}]
                    <span ng-repeat=" f in loanProcess.itemInfo.sfList | filter:'sfShowOnBrief'">{{f.sfname}}:{{sfval}}</span>
                </div>
                <div ng-show="loanProcess.code==1"> 
                    {{loanProcess.msg}}
                    <span ng-show="loanProcess.msg && loanProcess.itemMsgCode">-</span>
                    {{oplMsg['circ_loan_itemStatus_'+loanProcess.itemMsgCode]}}
                </div>
                <div ng-show="loanProcess.processCode" style="color:red;">
                    <span>{{loanProcess.msg | json}}</span>
                </div>
                <div ng-show="(loanProcess.userMsgCode || loanProcess.itemMsgCode) && !loanProcess.processCode &&
                    loanProcess.itemMsgCode!='00' && loanProcess.itemMsgCode!='25' ">
                    {{oplMsg['circ_loan_userStatus_'+loanProcess.userMsgCode]}} <br>
                     {{oplMsg['circ_loan_itemStatus_'+loanProcess.itemMsgCode]}}<br>
                     {{oplMsg.circ_loan_question_loan}}
                     <input type='button' name='Yes' value='Yes' ng-click='loanParam.cmdCode=(loanProcess.itemMsgCode + "_R");onProcessLoan();' />&nbsp;
                     <input type='button' name='No' value='No'  ng-click="resetProcessLoan();"/>
                </div>
                <div ng-show="loanProcess.returnMsgList.length>0">
                    <div ng-repeat="i in loanProcess.returnMsgList"> 
                       {{i.itemInfo.title}}  {{i.itemInfo.author}} - {{i.itemInfo.barcode}} : {{i.msg}} 
                    </div>
                </div>
                <div ng-show="loanProcess.returnLostMsgList.length>0">
                    <div ng-repeat="i in loanProcess.returnLostMsgList"> 
                       {{oplMsg['circ_retLost_retLostProcess_'+i.retStatusCode]}} 
                    </div>
                </div>
                <div ng-show="loanProcess.renewalMsgList.length>0">
                    <div ng-repeat="i in loanProcess.renewalMsgList"> 
                       {{i.itemInfo.title}} {{i.itemInfo.author}} - {{i.itemInfo.barcode}} : {{i.msg}} 
                    </div>
                </div>
                <div ng-show="loanProcess.returnDamageMsgList.length>0">
                    <div ng-repeat="i in loanProcess.returnDamageMsgList"> 
                       {{oplMsg['circ_loan_itemStatus_'+i.damageMsgCode]}} 
                    </div>
                </div>
            </div> 
        </td>        
      </tr>
      <tr>
          <td colspan="2" style='vertical-align:top'>
              <div id="tabs" ng-style="{'top':(selListOpt.type=='nameBc')?'0px':'10px','margin':'5px'};" ng-show="patron">
                  <ul>
                     <li><a href="#tabLoanList"><b>{{oplMsg.circ_loan_loanList_loanListHdr}}</b></a></li>
                     <li><a href="#tabLoanLostList" ng-click="loadLostList();"><b>{{oplMsg.lostItemListTxt}}</b></a></li>
                     <li><a href="#tabLoanHistory" ng-click="loadHistoryList();"><b>Loan History List</b></a></li>
                     <li><a href="#tabPaymentRefundList" ng-show="paymentRefundList.length>0"><b>Payment/Waive/Refund List</b></a></li>
                  </ul>
                  <div id="tabLoanList" style="min-height:150px;">
                      <tb-loan-list loan-list="patron.loanList" user="patron.info" field-list="loanFieldList" 
                          cb-loan-fn="callbackLoanFn(loanListParam);" 
                          cb-renew-fn="callbackRenewFn(loanListParam);" 
                          cb-return-fn="callbackReturnFn(loanListParam);" 
                          cb-transfer-fn="callbackTransferFn();">
                      </tb-loan-list>
                  </div>
                  <div id="tabLoanLostList" style="min-height:150px;">
                      <p style="text-align:center;color:brown;font-weight:bold;font-size:110%;">
                          {{oplMsg.textbkTxt}} {{oplMsg.lostItemListTxt}} ({{loanLostList.length}})
                      </p>
                      <table class="table table-hover" ng-show="loanLostList.length>0">
                          <tr>
                            <th ng-repeat="field in lostFieldList" ng-init="label=field+'Txt'">
                               <a href="#" ng-click="sortList(loanLostList,field);sortParam.reverse=!sortParam.reverse">{{oplMsg[label]}}</a>
                            </th>
                            <th><a href="#" ng-click="sortList(loanLostList,'loanDate');sortParam.reverse=!sortParam.reverse"> {{oplMsg.loanDateTxt}}</a></th>
                            <th><a href="#" ng-click="sortList(loanLostList,'lostDate');sortParam.reverse =!sortParam.reverse"> {{oplMsg.lostDateTxt}}</a></th>
                         </tr>
                         <tr ng-repeat ="loan in loanLostList | orderBy: sortParam.type:sortParam.reverse" ng-class="{success:loan.selected}">
                           <td ng-repeat="field in lostFieldList">
                              <span> {{loan[field]}} </span>
                           </td>
                           <td>{{loan.loanDate}}</td>
                           <td>{{loan.lostDate}} </td>
                         </tr>
                       </table>
                  </div>
                  <div id="tabLoanHistory" ng-show="loanHistoryList.length>0">
                      <p style="text-align:center;color:brown;font-weight:bold;font-size:110%;">
                          Textbook Loan History List ({{loanHistoryList.length}})
                      </p>
                      <table class="table table-hover" >
                        <tr>
                          <th ng-repeat="field in loanFieldList" ng-init="label=field+'Txt'">
                            <a href="#" ng-click="sortList(loanHistoryList,field);sortParam.reverse=!sortParam.reverse">{{oplMsg[label]}}</a>
                          </th>
                          <th><a href="#" ng-click="sortList(loanHistoryList,'dateLoan');sortParam.reverse=!sortParam.reverse">{{oplMsg.loanDateTxt}}</a></th>
                          <th><a href="#" ng-click="sortList(loanHistoryList,'dateDue');sortParam.reverse=!sortParam.reverse">{{oplMsg.dueDateTxt}}</a></th>
                          <th><a href="#" ng-click="sortList(loanHistoryList,'dateReturn');sortParam.reverse =!sortParam.reverse">{{oplMsg.returnDateTxt}}</a></th>
                          <th><a href="#" ng-click="sortList(loanLostList,'lostDate');sortParam.reverse =!sortParam.reverse">{{oplMsg.lostDateTxt}}</a></th>
                        </tr>		
                        <tr ng-repeat ="h in loanHistoryList | orderBy: sortParam.type:sortParam.reverse">
                          <td ng-repeat="field in loanFieldList">
                            <span > {{h[field]}} </span>
                          </td>
                          <td>{{h.loanDate }}</td>
                          <td>{{h.dueDate }}</td>
                          <td><span ng-if="h.itemStatus.status!=7">{{h.returnDate }}</span></td>
                          <td><span ng-if="h.itemStatus.status==7">{{h.returnDate}}</span></td>
                        </tr>
                      </table>
                  </div>
                  <div id="tabPaymentRefundList" style="min-height:150px;">
                      <p style="text-align:center;color:brown;font-weight:bold;font-size:110%;">
                          {{oplMsg.textbkTxt}} Payment/Waive/Refund List ({{paymentRefundList.length}})
                      </p>
                      <table class="table table-hover" ng-show="paymentRefundList.length>0">
                          <tr>
                            <th>Responsible</th>
                            <th>Title</th>
                            <th>Barcode</th>
                            <th>Type</th>
                            <th>Date</th>
                            <th>Amount</th>
                         </tr>
                         <tbody ng-repeat ="pr in paymentRefundList">
                            <tr ng-repeat="tr in pr.transList|orderBy:date">
                              <td>{{tr.firstname}} {{tr.lastname}}</td>
                              <td>{{pr.title}}</td>
                              <td>{{pr.barcode}} </td>
                              <td>{{tr.code_str}}
					                      <a ng-show="1" href="#" ng-click="printInvoice(tr.ptid);">(Print Invoice)</a>
                              </td>
                              <td>{{tr.date}}</td>
                              <td>{{tr.tamount}}</td>
                            </tr>
                         </tbody>
                       </table>
                  </div>
              </div>
        </td>
    <tr>
    <tr>
      <td colspan=2>
          <span ng-if="patron.info.uid && pref.libraryOnLoanDisplayInTB=='1'">
              <rpt-od-list uid='patron.info.uid' allow-display='1' collection='lib' page-size='10' user-permissions=userInfo.permissions></rpt-od-list>
          </span>
      </td>
    </tr>
    <tr>
      <td colspan=3>
          <span ng-if="patron.info.uid && pref.equipmentOnLoanDisplayInTB=='1'">
              <rpt-od-list uid='patron.info.uid' allow-display='1' collection='eq' page-size='10' user-permissions=userInfo.permissions></rpt-od-list>
          </span>
      </td>
    </tr>
  </table>

  
    <!-- Loan List from teach to transfer to anther teacher-->
    <div class="modal" id="transferLoanModal" tabindex="-1" role="dialog" >
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" >  
                  Textbook Loan List  ({{getSelectedLoanCount()}} selected / {{loanList.length || 0}} total)
                </h4>
                <button type="button" class="close" data-dismiss="modal"  aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
              <div ng-if="!loanList || loanList.length == 0"class="alert alert-info">
                  No textbook loans found.
              </div>
              <div class="table-responsive" ng-if="loanList && loanList.length > 0">
                <table class="table table-bordered table-striped table-hover table-condensed">
                  <thead>
                      <tr>
                          <th>#</th>
                          <th></th>
                          <th>Barcode</th>
                          <th>Title</th>
                          <th>ISBN</th>
                          <th>Loan Date</th>
                          <th>Due Date</th>
                          <th>Price</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr ng-repeat="item in loanList track by $index">
                          <td>{{$index + 1}}</td>
                          <td class="text-center">
                            <input type="checkbox" ng-model="item.selected">
                          </td>
                          <td>{{item.barcode || '-'}}</td>
                          <td>{{item.title || '-'}}</td>
                          <td>{{item.callNumber || item.classNumber || '-'}}</td>
                          <td>{{item.dateLoanTxt || item.dateLoan || item.loanDate || '-'}}</td>
                          <td ng-class="{'text-danger': item.overdue == 1, 'text-bold': item.overdue == 1}">
                            {{item.dateDueTxt || item.dateDue || item.dueDate || '-'}}
                          </td>
                          <td>
                              <span ng-if="item.price">${{item.price}}</span>
                              <span ng-if="!item.price">-</span>
                          </td>
                        </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="modal-footer transfer-footer">
                <select id="uid"
                  class="form-control teacher-select"
                  ng-model="selectedTeacher"
                  ng-options="t as (t.lastname + ', ' + t.firstname) for t in user_teachers">
                  <option value="">-- Select Teacher --</option>
                </select>{{selectedTeacher.uid}}
                <button type="button" class="btn btn-success" 
                  ng-disabled="!selectedTeacher ||
                         !selectedTeacher.uid ||
                         getSelectedLoanCount() == 0"
                  ng-click="onTransfer();">
                  Transfer
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>      
      </div>
    </div> 

  <!-- USER CIRC DIALOG -->
	<div id="circDlg" class="modal" role="dialog" style="display:none;">
		<div class="modal-dialog modal-sm" style="width:80%;">
			<div class="modal-content">
				 <div id="print-section">
						<div class="modal-header">
							 <h4 class="modal-title">{{oplMsg.CirculationTxt}}</h4>

						</div>
						<div class="modal-body"> 
							 <div style="float:right"> {{today}}</div>
							 <div style="text-align:center;font-weight:bold;"> {{pref.libname}}</div>
							 <div style="float:left"ng-if="tb_pref.circ.loan.user">
									<span style="margin-right:15px">  
										 {{oplMsg.nameLbl}} : <b>{{patron.info.fullname}}</b>
									</span> 
									<span style="margin-right:15px" ng-repeat="field in tb_pref.circ.loan.user" ng-init="label=field +'Txt'">  
										 {{oplMsg[label]}} : <b>{{patron.info[field]}}</b>
									</span> 
							 </div>
							 <div style="float:left"ng-if="!tb_pref.circ.loan.user">
									<span><b>{{patron.info.firstname}}  {{patron.info.lastname}}</b></span> <br>
									<span style="margin-right:15px"> {{oplMsg.homeroomLbl}}: <b>{{patron.info.homeroom}}</b></span> 
									<span style="margin-right:15px"> {{oplMsg.gradeLbl}}:<b>{{patron.info.grade}}</b></span>
									<span style="margin-right:15px"> {{oplMsg.teacherLbl}}:<b>{{patron.info.teacher}}</b></span>
							 </div>
							 <!--div style="float:left" ng-show="pref.libraryType=='K-12'">
									<span><b>{{patron.info.firstname}}  {{patron.info.lastname}}</b></span> <br>
									<span style="margin-right:15px"> {{oplMsg.homeroomLbl}}: <b>{{patron.info.homeroom}}</b></span> 
									<span style="margin-right:15px"> {{oplMsg.gradeLbl}}:<b>{{patron.info.grade}}</b></span>
									<span style="margin-right:15px"> {{oplMsg.teacherLbl}}:<b>{{patron.info.teacher}}</b></span>
							 </div>
							 <div style="float:left" pref.libraryType=='public'>
									<span style="margin-right:15px" ng-show="patron.info.schoolName"> {{oplMsg.schoolNameTxt}}:<b>{{patron.info.schoolName}}</b></span>
									<span style="margin-right:15px" ng-show="patron.info.district"> {{oplMsg.districtTxt}}:<b>{{patron.info.district}}</b></span>
							 </div-->
							 <h4 style="clear:both;text-align:center;font-weight:bold;margin:5px;" ng-if="patron.loanList.length>0"> {{oplMsg.loanItemTxt}}</h4>
							 <h6 style="clear:both;text-align:center;font-style:italic;margin:5px;" ng-if="patron.loanList.length<=0">{{oplMsg.loanItemsTxt}}:{{oplMsg.noResultMsg}}</h6>
							 <table class='table table-condensed' ng-if="patron.loanList.length>0">
							   <tr>
								   <th ng-repeat="field in loanFieldList" ng-init="label=field+'Txt'">{{oplMsg[label]}}</th>
									 <th>{{oplMsg.loanDateTxt}}</th>
									 <th>{{oplMsg.dueDateTxt}}</th>
								</tr>		
								<tr ng-repeat ="loan in patron.loanList">
								  <td ng-repeat="field in loanFieldList"> <span> {{loan[field]}} </span> </td>
									<td>{{loan.loanDate}}</td>
									<td>{{loan.dueDate}} </td>
								</tr>
							 </table>
							 <h4 style="clear:both; text-align:center;font-weight:bold;margin:10px;" ng-if="patron.transList.length>0">{{oplMsg.unpaidFineListTxt}}</h4>
							 <table class='table table-condensed' ng-if="patron.transList.length>0">
								 <tr>
									 <th>{{oplMsg.titleLbl}}</th>
									 <th>{{oplMsg.isbnLbl}}</th>
									 <th>{{oplMsg.barcodeTxt}}</th>
									 <th>{{oplMsg.circ_loan_unpaidFineList_typeLbl}}</th>
									 <th>{{oplMsg.circ_loan_unpaidFineList_dateLbl}}</th>
									 <th>{{oplMsg.circ_loan_unpaidFineList_chargeLbl}}</th>
									 <th>{{oplMsg.circ_loan_unpaidFineList_paidLbl||"Paid"}}</th>
									 <th>{{oplMsg.circ_loan_unpaidFineList_waivedLbl||"Waived"}}</th>
									 <th>{{oplMsg.circ_loan_unpaidFineList_totalChargeLbl||"Total Charge"}}</th>
								 </tr>
								 <tr ng-repeat="f in patron.transList">
									 <td> {{f.title}} </td>      
									 <td >{{f.isbn}}</td>
									 <td> {{f.barcode}} </td>      
									 <td style="text-transform:uppercase;color:red"> {{f.fineType}} </td>      
									 <td> {{f.date}} </td>      
									 <td class="amountRight"> {{f.fineAmount}} </td>      
									 <td class="amountRight"> {{f.paidAmount}} </td>      
									 <td class="amountRight"> {{f.forgivenAmount}} </td>      
									 <td class="amountRight"> {{f.dueAmount}} </td>      
								 </tr>
							 </table>
						</div>		
				 </div>				
				 <div class="modal-footer">
						<div style="float:left">
							 <form>
									<div class="form-group" style="margin-bottom:2px;">
										 <label for="emailTo">{{oplMsg.emailAddrTxt}}</label>
										 <input type='text' name='emailTo' id='emailTo' ng-model="email.address" size=50>
									</div>
									<div class="form-group" style="margin-bottom:2px;">
										 <label for="subject">{{oplMsg.subjectTxt}}</label>
										 <input type='text' name='subject' id='subject' ng-model="email.subject" size=50>
									</div>
									<div class="form-group" style="margin-bottom:2px;">
										 <label for="message">{{oplMsg.messageTxt}}</label>
										 <input type='text' name='message' id='message' ng-model="email.message" size=50>
									</div>
							 </form>
						</div>						
						<div style="float:left;vertical-align:center;">
							 <p ng-show="email.statusMsg" style="color:red;font-style:italic;">{{email.statusMsg}}</p>
						</div>	 
						<div style="float:right;">							 
							 <button type="button" class="btn btn-default" ng-click="sendEmail();">
									<span class="glyphicon glyphicon-envelope">{{oplMsg.emailBtn}}</span>
							</button>
							 &nbsp;&nbsp;&nbsp;&nbsp;
							 <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="printUserCircInfo();">
									<span class="glyphicon glyphicon-print">{{oplMsg.printBtn}}</span></button>
							 &nbsp;&nbsp;&nbsp;&nbsp;
							 <button type="button" class="btn btn-default" data-dismiss="modal" >
									<span class="glyphicon glyphicon-remove">{{oplMsg.closeBtn}}</span>
							</button>
						</div>		 
				 </div>
			</div>
		</div>
	</div>			

<!--  USER LOOKUP LIST DIALOG -->
    <div id='userListDivDlg' style='margin-top:20px;display:none;' title="User Lookup"><center>
        <input type="text" ng-model="lookup_nameBc" size=20 id="opl-userlookup-dlg-nameBc" ng-enter="lookupUser()">&nbsp; &nbsp;       
        <input type ="button" ng-click="lookupUser()" value="OK"> 
        <input type ="button" ng-click="clearLookupUser()" value="{{oplMsg.clearBtn}}"> 

        <select  ng-show="userLookupList.length" ng-model="lookupUid"
                 size="10" style="width:96%;font-size:120%">
            <option ng-repeat="t in userLookupList" ng-dblclick="setBorrowerFromLookup()"
                    ng-style='t.status==0 || t.status==2?{"background":"#FFBFBF"}:{"background":""}'
                    value="{{t.uid}}" >{{t.fullname}} <span ng-show="t.userbarcode && t.userbarcode !=''">({{t.userbarcode}})</span></option>
        </select><br><br>
        <span ng-show="userLookupList.length==0" style="font-size:120%;color:brown"><b><br><br>{{oplMsg.user_msg_01}}</b></span>
        <button ng-click="setBorrowerFromLookup();" ng-hide="userLookupList.length==0" >Select</button> 
        </center>
    </div>
<!-- Quick Search Dialog -->
    <div id='tbQuickSearchDivDlg' style='margin-top:20px;display:none;' title="Quick Search">
        <div>
            <input type="text" name="title" ng-model="qsParam.kw"  size="40" ng-enter="qs_searchTextbook()"> 
            <input type="radio" name="type" ng-model="qsParam.sfield" value="245_a" >Title
            <input type="radio" name="type" ng-model="qsParam.sfield" value="852_p" >Barcode
            <input type="radio" name="type" ng-model="qsParam.sfield" value="000_a" >Keyword
            <button ng-click="qs_searchTextbook();"> Search</button> 
        </div>
        <table ng-show="qsResult.size>0">
            <tr>
                <td colspan=5> <div style="text-align:center;font-weight:bold;">Found:{{qsResult.size}}</div></td>
            </tr>
            <tr> 
                <th width=30%>{{oplMsg.circ_loan_loanList_titleLbl}}</th> 
                <th width=30%>{{oplMsg.circ_loan_loanList_authorLbl}}</th> 
                <th>{{oplMsg.circ_loan_loanList_barcodeLbl}}</th> 
                <th>{{oplMsg.circ_loan_titleSearchAjaxFrm_statusLbl}}</th> 
                <th>{{oplMsg.circ_loan_loanList_ddateLbl}}</th> 
            </tr>
            <tbody ng-repeat="r in qsResult.list "> 
                <tr ng-repeat="i in r.itemList | orderBy : ['barcode','status'] ">
                    <td>{{r.title}} </td>
                    <td>{{r.author}}</td>
                    <td>
                        <span ng-if="i.status=='IN'" ><a href="#" ng-click="qs_selectLoanBc(i.barcode);">{{i.barcode}}</a></span>
                        <span ng-if="i.status!='IN'" style="color:red;">{{i.barcode}}</span>
                    </td>
                    <td><span ng-style="{color:i.status=='IN'?'green':'red'}">{{i.status}}</span></td>
                    <td>{{i.itemStatus.l_duedate}}</td>
                </tr>
            </tbody>
        </table>
    </div>
<!--Teacher Course Dialog -->
    <div id='tbTeacherCourseDlg' style='margin-top:20px;display:none;' title="Teacher/Course Selection">
        <p style="text-align:center;color:red;font-weight:bold;">No teacher and/or course selected for this textbook!!!</p>
        <button ng-click="teacherCourseSelect();">Select Teacher/Course </button>
        <button ng-click="teacherCourseIgnore();">Ignore Teacher/Course selection</button>
    </div>
    <div id="fineDlg" style='margin-top:20px;display:none;' title="Fine Charge">
        <table ng-show="returnFineList.length>0">
            <tr> 
                <th>{{oplMsg.circ_loan_loanList_barcodeLbl}}</th>
                <th>{{oplMsg.circ_loan_loanList_titleLbl}}</th>
                <th>{{oplMsg.itemTypeTxt}}</th>
                <th>{{oplMsg.circ_loan_unpaidFineList_typeLbl}}</th>
                <th>{{oplMsg.circ_loan_unpaidFineList_chargeLbl}}</th>
                <th>{{oplMsg.maxTxt}}($)</th>
                <th>{{oplMsg.forgivenTxt}}</td>
                <th>{{oplMsg.fineTxt}}</td>
            </tr>
            <tr ng-repeat="fine in returnFineList" >
                <td>{{fine.itemInfo.barcode}}</td>
                <td>{{fine.itemInfo.title}}</td>
                <td>{{fine.itemInfo.itemType}}</td>
                <td>{{fine.fineType}}</td>
                <td style="text-align:right;">
                    <input type=text ng-model="fine.fineRateTbl.fee" ng-change="reCalCharge(fine)" size=5></td>
                <td>
                    <span ng-show="fine.fineType=='overdue'" ng-model="fine.fineRateTbl.maxOverdue">{{fine.fineRateTbl.maxOverdue}}</span></td>
                <td style="text-align:right;">
                    <input type=checkbox ng-model="fine.fineRateTbl.forgiven"  ng-change="doWaive(fine)">
                    <input type=text ng-model="fine.fineRateTbl.waived" size=5 ng-change="reCalCharge(fine)" ng-disabled="!fine.fineRateTbl.forgiven">
                </td>
                <td style="text-align:right;">{{fine.fineRateTbl.charge | number:2}}</td>
            </tr>
            <tr>
                <td colspan=7 style="text-align:right;">
                    Total
                </td>
                <td style="text-align:right;">
                    <span style="font-weight:bold;text-align:right;">{{totalCharge | number:2}}</span>
                </td>
            </tr>
        </table>
    </div>

    <div id="userCircPrintDlg" style='margin-top:20px;display:none;' title="Circulation Info" class="bootstrap-iso">
      <div id="content1">
        <div style="float:right"> {{today}}</div>
        <div style="text-align:center;font-weight:bold;"> {{pref.libname}}</div>
        <div style="float:left">
            <p>
					<span><b>{{patron.info.firstname}}  {{patron.info.lastname}}</b></span> <br>
					<span style="margin-right:15px"> {{oplMsg.homeroomLbl}}: <b>{{patron.info.homeroom}}</b></span> 
               <span style="margin-right:15px"> {{oplMsg.gradeLbl}}:<b>{{patron.info.grade}}</b></span>
               <span style=""> {{oplMsg.teacherLbl}}:<b>{{patron.info.teacher}}</b></span>
            </p>
        </div>
        <div style="clear:both; font-weight:bold;margin:5px;" ng-show="patron.loanList.length>0"> {{oplMsg.loanItemsTxt}}</div>
            <table class='table table-condensed' ng-show="patron.loanList.length>0">
                <tr class='header'>
                    <th width="25%">{{oplMsg.titleLbl}}</th>
                    <th width="15%">{{oplMsg.authorLbl}}</th>
                    <th width="15%">{{oplMsg.isbnLbl}}</th>
                    <th width="10%">{{oplMsg.barcodeTxt}}</th>
                    <th width="5%" >{{oplMsg.priceTxt}}</th>
                    <th width="15%">{{oplMsg.loanDateTxt}}</th>
                    <th width="15%">{{oplMsg.dueDateTxt}}</th>
                </tr>
                <tr ng-repeat="l in patron.loanList | orderBy : 'dateLoan'">
                    <td >{{l.title}}</td>
                    <td >{{l.author}}</td>
                    <td >{{l.isbn}}</td>
                    <td >{{l.barcode}}</td>
                    <td >{{l.price}}</td>
                    <td >{{l.dateLoan | oplDate}}</td>
                    <td ng-class="{red: l.overdue==1}" width="150px;">{{l.dateDue | oplDate}}</td>
                </tr>
            </table>
          <div style="clear:both; font-weight:bold;margin:10px;" ng-if="patron.transList.length>0">{{oplMsg.unpaidFineListTxt}}</div>
            <table class='tb_loan'ng-if="patron.transList.length>0">
              <tr>
                <th>{{oplMsg.circ_loan_unpaidFineList_titleLbl}}</th>
                <th>{{oplMsg.circ_loan_unpaidFineList_barcodeLbl}}</th>
                <th>{{oplMsg.circ_loan_unpaidFineList_typeLbl}}</th>
                <th>{{oplMsg.circ_loan_unpaidFineList_dateLbl}}</th>
                <th>{{oplMsg.circ_loan_unpaidFineList_chargeLbl}}</th>
                <th>{{oplMsg.circ_loan_unpaidFineList_paidLbl||"Paid"}}</th>
                <th>{{oplMsg.circ_loan_unpaidFineList_waivedLbl||"Waived"}}</th>
                <th>{{oplMsg.circ_loan_unpaidFineList_totalChargeLbl||"Total Charge"}}</th>
              </tr>
              <tr ng-repeat="f in patron.transList">
                <td> {{f.title}} </td>      
                <td> {{f.barcode}} </td>      
                <td style="text-transform:uppercase;color:red"> {{f.fineType}} </td>      
                <td> {{f.date}} </td>      
                <td class="amountRight"> {{f.fineAmount}} </td>      
                <td class="amountRight"> {{f.paidAmount}} </td>      
                <td class="amountRight"> {{f.forgivenAmount}} </td>      
                <td class="amountRight"> {{f.dueAmount}} </td>      
              </tr>
            </table>
          </div>    
        </div>
    </div>

<!-- Fine Confirm Dialog -->		
    <div id="fineConfirmationDlg" style='margin-top:20px;display:none;text-align:center;' title="Fine Confirmation" >
        <h4 style="color:red"> {{oplMsg.confirmTxt ||"No charge for this transaction. Please confirm!"}}</h4>
        {{confirmFine}}
    </div>

    
<div>

<tmpl_include footer.inc>
