@inject('Setting','anlutro\LaravelSettings\SettingStore')
<div class="portlet box purple">
	<div class="modal-content" style="width: 110%">
		<div class="modal-header bg-red-sunglo">
			<button type="button" class="close" data-dismiss="modal"></button>
			@if($Setting->get('npm_version') ==  '0')
			<h4 class="modal-title font-white"><i class="fa fa-calendar-check-o"></i> 選取住戶</h4>
			@else
			<h4 class="modal-title font-white"><i class="fa fa-calendar-check-o"></i> 選取員工</h4>
			@endif
		</div>
		<div class="modal-body">
			<div class="col-md-6 frame" id="frame_member" style="width:25%">
				<div class="panel panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title">@lang('messages.step')1 @lang('messages.doorplate')<span class="label label-warning"></span></h3>
					</div>
					<div class="panel-body">
						<div class="scroller" data-always-visible="1" data-rail-visible="1" data-rail-color="blue" data-handle-color="red">
							<div id="mail_memberBox">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6 frame" id="frame_quick" style="width:20%">
				<div class="panel panel-primary">
		        	<div class="panel-heading">
		            	<h3 class="panel-title">@lang('messages.step')2 @lang('messages.floor')<span class="label label-warning"></span></h3>
					</div>
					<div class="panel-body">
						<div class="scroller" data-always-visible="1" data-rail-visible="1" data-rail-color="blue" data-handle-color="red">
							<div id="mail_memberQuickBox">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6 frame" id="frame_household" style="width:25%">
				<div class="panel panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title">@lang('messages.step')3 @lang('messages.room')<span class="label label-warning"></span></h3>
					</div>
					<div class="panel-body">
						<div class="scroller" data-always-visible="1" data-rail-visible="1" data-rail-color="blue" data-handle-color="red">
							<div id="mail_memberHouseholdBox">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6 frame" id="frame_user" style="width:30%">
				<div class="panel panel-primary">
					<div class="panel-heading">
						@if($Setting->get('npm_version') ==  '0')
						<h3 class="panel-title">住戶成員<span class="label label-warning"></span></h3>
						@else
						<h3 class="panel-title">選擇員工<span class="label label-warning"></span></h3>
						@endif
					</div>
					<div class="panel-body">
						<div class="scroller" data-always-visible="1" data-rail-visible="1" data-rail-color="blue" data-handle-color="red">
							<div id="mail_memberUser">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="modal-footer">
			
		</div>
	</div>
</div>

<script src="{{ asset('assets/global/plugins/lodash.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/jquery.tmpl.min.js') }}" type="text/javascript"></script>

<script src="{{ asset('assets/global/scripts/app.js') }}" type="text/javascript"></script>

<script type="text/x-jquery-tmpl" id="mail_memberTmpl">
	<button class="btn grey-steel btn-block btn-lg btn_step1" series="${no}">${no}</button>
</script>
<script type="text/x-jquery-tmpl" id="mail_memberTmpl2">
	<button class="btn grey-steel btn-block btn-lg btn_step_household" series="${no}" series2="${no2}">${no}</button>
</script>
<script type="text/x-jquery-tmpl" id="mail_memberTmpl3">
	<button class="btn grey-steel btn-block btn-lg btn_step_family" series="${no}" series2="${no2}" series3="${no3}">${no3}</button>
</script>
<script type="text/x-jquery-tmpl" id="mail_memberTmpl4">
	<button class="btn grey-steel btn-block btn-lg btn_step_username" uid="${id}" uname="${name}" username="${username}" >${username}/${name}</button>
</script>

<script type="text/javascript">
	


var getMember = function(){
	$("#mail_memberBox").empty();
	$("#mail_memberHouseholdBox").empty();
	$("#mail_memberQuickBox").empty();
	$("#mail_memberUser").empty();
	$.ajax({
		type : 'GET',
		url : '{{action('Manage\MailController@getData')}}',
		dataType: 'json',
		data : {	
			mode : 'getDoorplate'
		},
		success : function(result){
			 _.each(result, function(item) {
	        	var tmplData = {'no' : item.doorplate};
	        	$("#mail_memberTmpl").tmpl(tmplData).appendTo("#mail_memberBox");
	        });
		},
		error : function(result){

		}
	});
}


$(document).on('click','.btn_step1',function(){
	var doorplate=$(this).attr('series');
	$.ajax({
		type : 'GET',
		url : '{{action('Manage\MailController@getData')}}',
		dataType: 'json',
		data : {
			mode : 'getFloor',
			doorplate : doorplate
		},
		success : function(result){
			$("#mail_memberQuickBox").empty();	
			 _.each(result, function(item) {
	        	var tmplData = {'no' : item.floor,'no2' : item.doorplate};
	        	$("#mail_memberTmpl2").tmpl(tmplData).appendTo("#mail_memberQuickBox");
	        });
		},
		error : function(result){

		}
	});
});

$(document).on('click','.btn_step_household',function(){
	var floor = $(this).attr('series');
	var doorplate = $(this).attr('series2');
	$.ajax({
		type : 'GET',
		url : '{{action('Manage\MailController@getData')}}',
		dataType: 'json',
		data : {
			mode : 'getHousehold',
			floor : floor,
			doorplate : doorplate,
		},
		success : function(result){
			$("#mail_memberHouseholdBox").empty();	
			 _.each(result, function(item) {
	        	var tmplData = {'no' : item.floor,'no2' : item.doorplate,'no3' : item.household};
	        	$("#mail_memberTmpl3").tmpl(tmplData).appendTo("#mail_memberHouseholdBox");
	        });
		},
		error : function(result){

		}
	});
});
$(document).on('click','.btn_step_family',function(){
	var floor = $(this).attr('series');
	var doorplate = $(this).attr('series2');
	var household = $(this).attr('series3');
	$.ajax({
		type : 'GET',
		url : '{{action('Manage\MailController@getData')}}',
		dataType: 'json',
		data : {
			mode : 'getFamily2',
			floor : floor,
			doorplate : doorplate,
			household : household,
		},
		success : function(result){
			$("#mail_memberUser").empty();	
			 _.each(result, function(item) {
	        	item.no=floor;
				item.no2=doorplate;
				item.no3=household;
	        	if(item.atts != undefined){
					_.each(item.atts , function(item2) {
						$('#mail_memberTmpl4').tmpl(item2).appendTo('#mail_memberUser');
					});
				}else{
					
				}
	        });
		},
		error : function(result){

		}
	});
});
$(document).on('click','.btn_step_username',function(){
	var title = '未取信件';
	var username = $(this).attr('username');
	// alert(username);
	App.blockUI({
        target: '#notice_content',
        boxed: true,
        overlayColor: 'none',
        message: '@lang('messages.reading_data')',
        textOnly: true
    });

	$.ajax({
		url:'{{ route("console::getNoticeMailListByUserID") }}',
		type:'GET',
		data:{
			username : username
		},
		success: function(sendback){

			$('#btn_getMailWithUser').unbind();
			$(document).off('click','.btn_step1');
			$(document).off('click','.btn_step_household');
			$(document).off('click','.btn_step_family');
			$(document).off('click','.btn_step_user');


			$('#modal_function_getMailWithUser_view').modal('hide');
			$('#notice_title').html(title);
			$('#notice_content').html(sendback);
			$('#btn_getMail').show();//顯示取件按鈕
			App.unblockUI('#notice_content');
			callMailDataTable();
		},
		error: function(sendback){
			toastr['warning']('無此使用者');
			App.unblockUI('#notice_content');
			$('#notice_modal').modal('hide');
		}
	});
});


//========================================================================
	//    Windows Resize & Change scroll element height
	//========================================================================
	$(function(){
	    var windowH = $(window).height();
	    var wrapperH = $('.page-content').height();
	    var frameDiscount = 225;

	    $('.frame .slimScrollDiv').css('height', (windowH-frameDiscount)+'px');
	    $('.frame .scroller').css('height', (windowH-frameDiscount)+'px');

	    $('#modal_member_lv2 .slimScrollDiv').css('height', (windowH-200)+'px');
	    $('#modal_member_lv2 .scroller').css('height', (windowH-200)+'px');

	    $('#mailBoxContainer .slimScrollDiv').css('height', (windowH-frameDiscount-50)+'px');
	    $('#mailBoxContainer .scroller').css('height', (windowH-frameDiscount-50)+'px');

	    $(window).resize(function(){
	        var windowH = $(window).height();
	        var wrapperH = $('.page-content').height();
	        var differenceH = windowH - wrapperH;
	        var newH = wrapperH + differenceH;
	        $('.frame .slimScrollDiv').css('height', (windowH-frameDiscount)+'px');
	    	$('.frame .scroller').css('height', (windowH-frameDiscount)+'px');

	    	$('#modal_member_lv2 .slimScrollDiv').css('height', (windowH-200)+'px');
	    	$('#modal_member_lv2 .scroller').css('height', (windowH-200)+'px');

	    	$('#mailBoxContainer .slimScrollDiv').css('height', (windowH-frameDiscount-50)+'px');
	    	$('#mailBoxContainer .scroller').css('height', (windowH-frameDiscount-50)+'px');
	        console.log('new height:'+newH);
	        $('.page-content').css('min-height',(newH-120)+'px');

	    });
	});

</script>>