@extends('layouts.admin')

@section('page-header')
	@include('admin.host_header_info')
@endsection


@section('content')

@include('admin.host_info')


<div class="panel mt5 p10">
  <div class="panel-body pn">
	<div class="bs-component">
	<div class="text-right"><div class="col-md-11" style="font-size:15px; color:gray;">On / Off</div><div class="switch switch-info round switch-inline"><input id="modify_is_block" type="checkbox" value="Y" {{ isset($blacklists[0])&&$blacklists[0]['check_Blacklist']=='Y'? 'checked':'' }}><label for="modify_is_block" style="height:30px;"></label></div></div>
	
	  <table class="table table-striped table-bordered table-hover">
		<thead>
		  <tr>
			<th class="text-center" style="width:15%;">Created_at</th>
			<th class="text-center" style="width:20%;">Designator</th>
			<th class="text-center">Comment</th>
			<th width="80" class="text-center">Modify</th>
		  </tr>
		</thead>
		<tbody>
		  @for($i=0,$cnt=count($blacklists);$i<$cnt;$i++)
		  		  <tr>
		    <td>{{ $blacklist->created_at  }}</td>
		    <td>{{ $blacklist->writer_user->lastname }}, {{  $blacklist->writer_user->firstname}} </td>
		    <td>{{ $blacklist->comment }}</td>
			<td class="text-center">
				<button history_id="{{ $blacklist->id }}" class="btn btn-default btn_history_modify">Modify</button>
			</td>
		  </tr>
		  @endfor
		  @if(count($blacklists) <= 0)
		  <tr>
		    <td colspan="8" class="text-center">No result.</td>
		  </tr>
		  @endif
		</tbody>
	  </table>
	</div>
  </div>
  <div class="text-right mt10"><button id="btn_host_blacklist_history_create" class="btn btn-primary"><i class="fa fa-stack-exchange"></i> Create Blacklist History</button></div>
</div>

<!-- Admin Form Popup -->
<div id="modal" class="popup-basic admin-form mfp-with-anim mfp-hide"></div>
@endsection


@section('script')
<script>
	jQuery(document).ready(function() {

		@include('admin_common_script')

		$('.btn_status_change').on('click', function() {
			var this_obj = $(this);
			var user_id = $(this).parent().parent().attr('data-id');
			changeHostStatus(this_obj, user_id);
		});

		$('.btn_account_info').on('click', function() {
			var user_id = $(this).attr('user_id');
			getAccountInfo(user_id);
		});

		$('.btn_user_comment').on('click', function() {
			var user_id = $(this).parent().parent().attr('data-id');
			getUserComments(user_id);
		});

		$('.btn_host_relation').on('click', function() {
			var user_id = $(this).parent().parent().attr('data-id');
			getHostRelation(user_id);
		});

		$('.btn_history_status_change').on('click', function() {
			var this_obj = $(this);
			var user_id = ;
			var history_id = $(this).attr('history_id');
			changeHostHistoryStatus(this_obj, user_id, history_id);
		});

		function changeHostHistoryStatus(this_obj, user_id, history_id) {

			var markup = '<div class="mfp-figure">'+
				'<div class="mfp-close"></div>'+
				'<div class="mfp-img"></div>'+
				'</div>';
			$("#modal").html(markup);

			$.get('/api/host/'+user_id+'/history/'+history_id, function(data) {


				markup = '<div class="panel">'
				+ '<div class="panel-heading">'
				+ '<p class="panel-title">${student_name}</p>'
				+ '</div>'

				+ '<div class="panel-body p25 text-center">'
				
			+ '<div class="btn-group">'
			+ '{{if status == "active"}}'
			+ '<button data-value="active" class="btn btn-dark btn_hisotry_status_select">Active</button>'
				+ '{{else}}'
			+ '<button data-value="active" class="btn btn-default btn_hisotry_status_select">Active</button>'
			+ '{{/if}}'
			+ '{{if status == "inactive"}}'
			+ '<button data-value="inactive" class="btn btn-dark btn_hisotry_status_select">inActive</button>'
				+ '{{else}}'
			+ '<button data-value="inactive" class="btn btn-default btn_hisotry_status_select">inActive</button>'
			+ '{{/if}}'
			+ '</div>'

				+ '</div>'

				+ '</div>'
				+ '<button title="Close (Esc)" type="button" class="mfp-close">×</button>';

				$.template( "template", markup );
				$("#modal").html($.tmpl( "template", data ));


				$(".btn_hisotry_status_select").off('click');
				$(".btn_hisotry_status_select").on('click', function() {
					var obj = $(this);

					$(".btn_hisotry_status_select").removeClass('btn-dark').addClass('btn-default');
					obj.removeClass('btn-default').addClass('btn-dark');

					$.ajax({
						method: "put",
						url: "/api/host/"+user_id+"/history/"+history_id+"/status",
						data: {'status':obj.attr('data-value')}
					})
					.success(function( msg ) {
						this_obj.removeClass('btn-system').removeClass('btn-success');

						if(obj.attr('data-value') == 'active') {
							this_obj.attr('data-value', 'active').addClass('btn-system').text('Active');
						}
						else if(obj.attr('data-value') == 'inactive') {
							this_obj.attr('data-value', 'inactive').addClass('btn-success').text('inActive');
						}

						$.magnificPopup.close();
					})
					.fail(function( a ) {
						alert(a.responseJSON.msg);
					});
					
				});


			});


			// Inline Admin-Form example 
			$.magnificPopup.open({
			items: {
				src: '#modal'
			},
			callbacks: {
				beforeOpen: function(e) {
					this.st.mainClass = 'mfp-zoomIn';
				}
			},
			midClick: true
			});
		}

		$('.btn_history_modify').on('click', function() {
			var history_id = $(this).attr('history_id');
			var user_id = ;
			
			var index=$(this).closest('td').parent()[0].sectionRowIndex; 
			console.log("index : "+index);
			
			var name= $('table tr:nth-child('+(index+1)+') td:nth-child(2)').text();
			console.log('name'+name);
			modifyHostHistory(user_id, history_id,name);
		});

		function modifyHostHistory(user_id, blacklist_id, name) {
			var markup = '<div class="mfp-figure">'+
				'<div class="mfp-close"></div>'+
				'<div class="mfp-img"></div>'+
				'</div>';
			$("#modal").html(markup);

			$.get('/api/host/'+user_id+'/blacklist/'+blacklist_id, function(data) {

				console.log('data!!'+data.comment);

				markup = '<div class="panel">'
				+ '<div class="panel-heading">'
				+ '<span class="panel-title">Host Blacklist History</span>'
				+ '</div>'

				+ '<form>'
				+ '<div class="form-inline panel-body p25">'

				+ '<div class="section row mb10">'
				+ '<label for="grade" class="field-label col-md-4">H/F account</label>'
				+ '<div class="col-md-8">'
				+ '<p class="form-control-static"></p>'
				+ '</div>'
				+ '</div>'

				+ '<div class="section row mb10">'
				+ '<label for="created_at" class="field-label col-md-4" style="line-height:130%;">Create date</label>'
				+ '<div class="col-md-8">'
				+ '<label for="created_at" class="field">'
				+ '<p class="form-control-static" style="padding-top:0px;"></p>'
				+ '</label>'
				+ '</div>'
				+ '</div>'

				+ '<div class="section row mb10">'
				+ '<label for="writer" class="field-label col-md-4">Designator(last/first)</label>'
				+ '<div class="col-md-8">'
				+ '<label for="writer" class="field">'
				+ '<input type="text" id="writer" class="gui-input" value="'+name+'" disabled="disabled">'
				+ '</label>'
				+ '</div>'
				+ '</div>'

				+ '<div class="section row mb10">'
				+ '<label for="lastname" class="field-label col-md-4">Comments</label>'
				+ '<div class="col-md-8">'
				+ '<label for="comments" class="field">'
				+ '</label>'
				+ '<textarea class="form-control inputRequired" id="comments" rows="3" maxlength="200" style="width:100%">'+data.comment+'</textarea>'
				+ '</div>'
				+ '</div>'

		
				+ '<div class="text-center smart-widget"></div>'
				+ '<div class="text-center smart-widget"><button id="btn_host_history_delete" type="button" class="btn btn-primary">Delete</button> <button id="btn_host_history_update" type="button" class="btn btn-primary" style="margin:0 10px;">Modify</button> <button type="reset" class="btn btn-default" id="reset">Reset</button></div>'

				+ '</div>'
				+ '</form>'

				+ '</div>'
				+ '<button title="Close (Esc)" type="button" class="mfp-close">×</button>';

				$.template( "template", markup );
				$("#modal").html($.tmpl( "template", data ));

				$('#history_move_in').datetimepicker({
					pickTime: false
				});
				$('#history_move_out').datetimepicker({
					pickTime: false
				});

				$("#reset").on('click',function(){
				
					$("textarea#comments").text('');
			
				});
				$(".btn_host_history_status_select").off('click');
				$(".btn_host_history_status_select").on('click', function() {
					var obj = $(this);

					$(".btn_host_history_status_select").removeClass('btn-dark').addClass('btn-default');
					obj.removeClass('btn-default').addClass('btn-dark');
					$("#history_status").val(obj.attr('data-value'));
					
				});

				$("#btn_host_history_delete").off('click');
				$("#btn_host_history_delete").on('click', function() {

					swal({   
						title: "Are you sure?",
						text: '',
						type: "warning",
						html: true,
						allowOutsideClick: true,
						showCancelButton: true,
						confirmButtonColor: "#DD6B55",
						cancelButtonText: "cancel",
						confirmButtonText: "Yes, delete it!",
						closeOnConfirm: true
					},
					function(isConfirm){
						if(!isConfirm) return;
						
						

						$.ajax({
							method: "delete",
							url: "/api/host/"+user_id+"/blacklist/"+blacklist_id
						})
						.done(function( msg ) {
							location.reload();
						})
						.fail(function( a ) {
							alert(a.responseJSON.msg);
						});
						
					});

				});

				$("#btn_host_history_update").off('click');
				$("#btn_host_history_update").on('click', function() {

				
					if($('#comments').val()=='')
					{	alert('You have to fill out comments field.');
						return;
					}

					var input_obj = {
						comments: $('#comments').val(),
						id		: blacklist_id
					}
					$.ajax({
						method: "post",
						url: "/api/host/"+user_id+"/blacklist",
						data: input_obj
					})
					.done(function( msg ) {
						location.reload();
					})
					.fail(function( a ) {
						alert(a.responseJSON.msg);
					});
			
					});
				});


			// Inline Admin-Form example 
			$.magnificPopup.open({
			items: {
				src: '#modal'
			},
			callbacks: {
				beforeOpen: function(e) {
					this.st.mainClass = 'mfp-zoomIn';
				}
			},
			midClick: true
			});
		}

		$('#btn_host_blacklist_history_create').on('click', function() {
			var user_id = {{ $host->user_id }};
			createHostHistory(user_id);
		});

		function createHostHistory(user_id,blacklist_id) {
			var markup = '';

			markup = '<div class="panel">'
			+ '<div class="panel-heading">'
			+ '<span class="panel-title">Host Blacklist History</span>'
			+ '</div>'

			+ '<div class="form-inline panel-body p25">'

			+ '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4">H/F account</label>'
			+ '<div class="col-md-8">'
			+ '<p class="form-control-static"></p>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="created_at" class="field-label col-md-4" style="line-height:130%;">Create date</label>'
			+ '<div class="col-md-8">'
			+ '<label for="created_at" class="field">'
			+ '<p class="form-control-static">10-29-2025</p>'
			+ '</label>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="writer" class="field-label col-md-4">Designator(last/first)</label>'
			+ '<div class="col-md-8">'
			+ '<label for="writer" class="field">'
			+ '<input type="text" id="writer" class="gui-input" value="{{$auth->lastname}},{{$auth->firstname}}" disabled="disabled">'
			+ '</label>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="lastname" class="field-label col-md-4">Comments</label>'
			+ '<div class="col-md-8">'
			+ '<label for="comments" class="field">'
			+ '</label>'
			+ '<textarea class="form-control inputRequired" id="comments" rows="3" maxlength="200" style="width:100%"></textarea>'
			+ '</div>'
			+ '</div>'



			+ '<div class="text-center smart-widget"><button id="btn_host_blacklist_history_write" type="button" class="btn btn-primary">Create</button></div>'

			+ '</div>'

			+ '</div>'
			+ '<button title="Close (Esc)" type="button" class="mfp-close">×</button>';

			$("#modal").html(markup);

			$('#history_move_in').datetimepicker({
				pickTime: false
			});
			$('#history_move_out').datetimepicker({
				pickTime: false
			});

			$(".btn_host_history_status_select").off('click');
			$(".btn_host_history_status_select").on('click', function() {
				var obj = $(this);

				$(".btn_host_history_status_select").removeClass('btn-dark').addClass('btn-default');
				obj.removeClass('btn-default').addClass('btn-dark');
				$("#history_status").val(obj.attr('data-value'));
				
			});

			$("#btn_host_blacklist_history_write").off('click');
			$("#btn_host_blacklist_history_write").on('click', function() {
				if($('#comments').val()=='')
				{	alert('You have to fill out comments field.');
					return;
				}

				var input_obj = {
					comments: $('#comments').val(),
					id		: blacklist_id
				}
				$.ajax({
					method: "post",
					url: "/api/host/"+user_id+"/blacklist",
					data: input_obj
				})
				.done(function( msg ) {
					location.reload();
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
			});

			// Inline Admin-Form example 
			$.magnificPopup.open({
			items: {
				src: '#modal'
			},
			callbacks: {
				beforeOpen: function(e) {
					this.st.mainClass = 'mfp-zoomIn';
				}
			},
			midClick: true
			});
		}
		
		
		$("#modify_is_block").off('click');
			$("#modify_is_block").on('click', function() {
				var is_blacklist = $("#modify_is_block:checked").val() != undefined ? $("#modify_is_block:checked").val() : 'N';
/*
				var input_obj = {
					is_block: is_block,
					grade_id: $('#modify_grade_id').val(),
					phone: $('#modify_phone').val(),
					state: $('#modify_state').val(),
					birth: $('#modify_birth').val(),
					addr_city: $('#modify_addr_city').val(),
					addr_street: $('#modify_addr_street').val(),
					firstname: $('#modify_firstname').val(),
					lastname: $('#modify_lastname').val(),
					student_id: $('#modify_student_id').val(),
					sex: $('#modify_sex').val()
				}
				$.ajax({
					method: "put",
					url: "/api/user/"+user_id,
					data: input_obj
				})
				.done(function( msg ) {
					//alert('complete modify');
					//location.reload();
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
				
*/				
				var user_id = {{ $host->user_id }};
				if(is_blacklist=='Y')
				{
					var input_obj = {
					is_blacklist:is_blacklist
					}
					$.ajax({
						method: "put",
						url: "/api/host/"+user_id+"/blacklist",
						data: input_obj
					})
					.done(function( msg ) {
						console.log('ID : '+msg.id);
						createHostHistory(user_id,msg.id);
						
					})
					.fail(function( a ) {
						alert(a.responseJSON.msg);
					});
			
				}
				else
				{
					var input_obj = {
					is_blacklist:'N'
					}
					$.ajax({
						method: "put",
						url: "/api/host/"+user_id+"/blacklist",
						data: input_obj
					})
					.done(function( msg ) {
					//alert('complete modify');
					//location.reload();
					})
					.fail(function( a ) {
						alert(a.responseJSON.msg);
					});	
				}
			
			});
		
		
		
	});
</script>
@endsection