@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">
	  <table class="table table-striped table-bordered table-hover" style="width:100%">
		<thead>
		  <tr>
			<th class="text-center">Name</th>
			<th class="text-center">AnB representative</th>
			<th class="text-center">Requested date</th>
			<th class="text-center">CBC completed date</th>
            <th class="text-center">Expiration Date</th>
            <th class="text-center">CBC status</th>
			<th width="90" class="text-center">Alert Receiver</th>
			<th width="90" class="text-center">Alert Date</th>
			<th width="120" class="text-center">Memo</th>
			<th width="80" class="text-center">Modify</th>
		  </tr>
		</thead>
		<tbody>
		  @for($i=0,$cnt=count($histories);$i<$cnt;$i++)
		  		  <tr>
		    <td>{{ $history->name }}</td>
		    <td>{{ $history->anb_representative_user->firstname }} {{ $history->anb_representative_user->lastname }}</td>
		    <td>{{ $history->requested_date }}</td>
		    <td>{{ $history->cbc_completed_date }}</td>
            <td>{{ $history->expiration_date }}</td>
            <td class="text-center">@if($history->cbc_status=='green')<font color="#41a945" size="15">&#9679;@elseif($history->cbc_status=='yellow')<font color="#ecbc17" size="15">&#9679;@elseif($history->cbc_status=='red')<font color="#ec2669" size="15">&#9679; @else <font>@endif </font></td>
			<td>@if(isset($history->alert_receiver_user)){{ $history->alert_receiver_user->firstname }} {{ $history->alert_receiver_user->lastname }} @endif</td>
			<td>{{ $history->alert_date }}</td>
			<td><div style="word-wrap: break-word; overflow-wrap: break-word; height:50px; overflow-y:auto;">{{ $history->memo }}</div></td>
		    <!--<td class="text-center">
			Jul/05/2025			</td>-->
			<td class="text-center">
				<button history_id="{{ $history->id }}" class="btn btn-default btn_cbchistory_modify">Modify</button>
			</td>
		  </tr>
		  @endfor
		  @if(count($histories) <= 0)
		  <tr>
		    <td colspan="10" class="text-center">No result.</td>
		  </tr>
		  @endif
		</tbody>
	  </table>
	</div>
  </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/cbchistory/'+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_cbchistory_modify').on('click', function() {
			var history_id = $(this).attr('history_id');
			var user_id = ;
			modifyHostHistory(user_id, history_id);
		});

		function modifyHostHistory(user_id, history_id) {
			var markup = '<div class="mfp-figure">'+
				'<div class="mfp-close"></div>'+
				'<div class="mfp-img"></div>'+
				'</div>';
			$("#modal").html(markup);
			var alert_receiver='';
			$.get('/api/host/cbchistory/'+history_id, function(data) {
				if(data[0].alert_receiver_user!=null)
					alert_receiver=data[0].alert_receiver_user.email;//.email
				else
					alert_receiver='';
				console.log(alert_receiver);
				markup = '<div class="panel">'
				+ '<div class="panel-heading">'
				+ '<span class="panel-title">CBC 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">Name</label>'
				+ '<div class="col-md-8">'
				+ '<p class="form-control-static"></p>'
				+ '</div>'
				+ '</div>'

				+ '<div class="section row mb10">'
				+ '<label for="lastname" class="field-label col-md-4" style="line-height:130%;">Requested date</label>'
				+ '<div class="col-md-8">'
				+ '<label for="requested_date" class="field">'
				+ '${requested_date}'
				+ '</label>'
				+ '</div>'
				+ '</div>'

				+ '<div class="section row mb10">'
				+ '<label for="lastname" class="field-label col-md-4">Completed date</label>'
				+ '<div class="col-md-8">'
				+ '<label for="cbc_completed_date" class="field">'
				+ '<input type="text" id="cbc_completed_date" class="gui-input" value="${cbc_completed_date}">'
				+ '</label>'
				+ '</div>'
				+ '</div>'

				+ '<div class="section row mb10">'
				+ '<label for="lastname" class="field-label col-md-4">CBC status</label>'
				+ '<div class="col-md-8">'
				+ '<div class="btn-group">'
				+ '<input type="hidden" id="cbc_status" value="${cbc_status}">'
				
				+ '{{if cbc_status == "green" }}'
				+ '<button type="button" data-value="green" class="btn btn-success btn_host_history_status_select">Green</button>'
				+ '<button type="button" data-value="yellow" class="btn btn-default btn_host_history_status_select">Yellow</button>'
				+ '<button type="button" data-value="red" class="btn btn-default btn_host_history_status_select">red</button>'
				+ '{{/if}}'
				
				+ '{{if cbc_status == "yellow" }}'
				+ '<button type="button" data-value="green" class="btn btn-default btn_host_history_status_select">Green</button>'
				+ '<button type="button" data-value="yellow" class="btn btn-warning btn_host_history_status_select">Yellow</button>'
				+ '<button type="button" data-value="red" class="btn btn-default btn_host_history_status_select">red</button>'
				+ '{{/if}}'
				
				+ '{{if cbc_status == "red" }}'
				+ '<button type="button" data-value="green" class="btn btn-default btn_host_history_status_select">Green</button>'
				+ '<button type="button" data-value="yellow" class="btn btn-default btn_host_history_status_select">Yellow</button>'
				+ '<button type="button" data-value="red" class="btn btn-danger btn_host_history_status_select">red</button>'
				+ '{{/if}}'

				+ '{{if cbc_status == null }}'
				+ '<button type="button" data-value="green" class="btn btn-default btn_host_history_status_select">Green</button>'
				+ '<button type="button" data-value="yellow" class="btn btn-default btn_host_history_status_select">Yellow</button>'
				+ '<button type="button" data-value="red" class="btn btn-default btn_host_history_status_select">red</button>'
				+ '{{/if}}'

				+ '{{if cbc_status == "" }}'
				+ '<button type="button" data-value="green" class="btn btn-default btn_host_history_status_select">Green</button>'
				+ '<button type="button" data-value="yellow" class="btn btn-default btn_host_history_status_select">Yellow</button>'
				+ '<button type="button" data-value="red" class="btn btn-default btn_host_history_status_select">red</button>'
				+ '{{/if}}'

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

				+ '<div class="section row mb10" id="lc_relation_student_section">'
				+ '<label for="grade" class="field-label col-md-4">Alert receiver</label>'
				+ '<div class="col-md-8" style="position:relative;">'
				+ '<label for="search_student" class="field prepend-icon">'
				+ '<input type="text" id="search_student" class="gui-input" value="">'
				+ '<label for="search_student" class="field-icon">'
				+ '<i class="fa fa-user"></i>'
				+ '</label>'
				+ '</label>'
				+ '<ul id="search_student_list" style="position:absolute;width:100%;z-index:99;background:#fff;height:160px;border:solid 1px;overflow-y:scroll;padding: 0;list-style: none;display:none;">'
				+ '</ul>'
				+ '<input type="text" style="display:none;" id="tagmanager" class="form-control tm-input" placeholder="Create a new tag..">'
				+ '<div class="tag-container tags"></div>'
				+ '</div>'
				+ '</div>'

				+ '<div class="section row mb10">'
				+ '<label for="lastname" class="field-label col-md-4">memo</label>'
				+ '<div class="col-md-8">'
				+ '<label for="memo" class="field">'
				+ '<textarea class="form-control inputRequired" id="memo" rows="3" maxlength="200" style="width:100%">${memo}</textarea>'
				+ '</label>'
				+ '</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">Reset</button></div>'

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

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



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

				$('#cbc_completed_date').datetimepicker({
					pickTime: false,
					format: 'MM/DD/YYYY',
					useCurrent: 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');
					$("#cbc_status").val(obj.attr('data-value'));
				

					//console.log($("#cbc_status").val());

					if(obj.attr('data-value')=='green'){
						$(".btn_host_history_status_select").removeClass('btn-success').addClass('btn-default');
						$(".btn_host_history_status_select").removeClass('btn-warning').addClass('btn-default');
						$(".btn_host_history_status_select").removeClass('btn-danger').addClass('btn-default');
						obj.removeClass('btn-default').addClass('btn-success');

					}else if(obj.attr('data-value')=='yellow'){
						$(".btn_host_history_status_select").removeClass('btn-success').addClass('btn-default');
						$(".btn_host_history_status_select").removeClass('btn-warning').addClass('btn-default');
						$(".btn_host_history_status_select").removeClass('btn-danger').addClass('btn-default');
						obj.removeClass('btn-default').addClass('btn-warning');

					}else if(obj.attr('data-value')=='red'){
						$(".btn_host_history_status_select").removeClass('btn-success').addClass('btn-default');
						$(".btn_host_history_status_select").removeClass('btn-warning').addClass('btn-default');
						$(".btn_host_history_status_select").removeClass('btn-danger').addClass('btn-default');
						obj.removeClass('btn-default').addClass('btn-danger');

					}

					$("#cbc_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/cbchistory/"+history_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() {

					
					var input_obj = {
						cbc_completed_date: $('#cbc_completed_date').val(),
						cbc_status: $('#cbc_status').val(),
						memo: $('#memo').val(),
						alert_receiver: $('.tm-tag-info').children('span').text()
					}
					console.log('ajax로 보냄'+$('#cbc_status').val());
					console.log('값확인 : '+$('.tm-tag-info').children('span').text());
					console.info(input_obj);
					
					$.ajax({
						method: "put",
						url: "/api/host/cbchistory/"+history_id,
						data: input_obj
					})
					.done(function( msg ) {
						location.reload();
					})
					.fail(function( a ) {
						alert(a.responseJSON.msg);
					});
					
				});


				$("#search_student").off('keyup');
				$("#search_student").on('keyup', function() {
					console.log('hihi'+$(this).val());
					if($(this).val() == '') {
						$("#search_student_list").html('');
						return;
					}
					$.get('/api/user?sl_search=email&sl_keyword='+$(this).val(), function(data) {
						var student_markup = '<li>'
						+ '<a href="#" class="btn_student_add gui-input">${email}</a>'
						+ '</li>';
	
						$.template( "template", student_markup );
						$("#search_student_list").html($.tmpl( "template", data.data ));
						$("#search_student_list").show();
	
						$(".btn_student_add").off('click');
						$(".btn_student_add").on('click', function() {
							//btn_student_add 일경우 기존 LC 와 연결관계가 있는지 파악
						console.log('들어옴'+$('.tm-tag-info').length);
						if($('.tm-tag-info').length>0)
						{
							alert('Alert receiver has chosen already. You have to remove first.');
						}
						else{
							$(".tm-input").tagsManager('pushTag', $(this).text());
						}
						
						
							
						});
					});
				});


				var prefilled = [];
				for(var i=0;i<1;i++) {//data.local.students.length
					prefilled.push(alert_receiver);//data.local.students[i].user.email
				}
				$(".tm-input").tagsManager({
			  		tagsContainer: '.tags',
			  		prefilled: prefilled,
			  		tagClass: 'tm-tag-info',
				});

				$("#search_student").off('focusout');
				$("#search_student").on('focusout', function() {
					setTimeout(function() {
						$("#search_student_list").hide();
					}, 300);
				});

				$("#search_student").off('focus');
				$("#search_student").on('focus', function() {
					if($(this).val() != '') {
						$("#search_student_list").show();
					}
				});














			});


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


	});
</script>
@endsection