@extends('layouts.mypage')

@section('page-header')
homevisit
@endsection


@section('content')

@include('mypage.partial.host_info')
    @include('mypage.partial.host_tab', array('host_tab_active'=>'homevisit'))


<div class="panel mt5 p10">
  <div class="panel-body pn">
	<div class="bs-component">
	<div class="table-responsive">	
	  <table class="table table-striped table-bordered table-hover">
		<thead>
		  <tr>
			<th class="text-center">Document type</th>
			<th class="text-center">Homevisit Date</th>
			<th class="text-center">LC Name</th>
			<th class="text-center">Next Homevisit</th>
			<th 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><a href="./homevisit/{{ $history->id }}" target="_blank">@if(isset($history->document_type)) @if($history->document_type==1)Interview &amp; Pre-Arrival OT @elseif($history->document_type==2)Homevisit Checklist @endif @endif</a></td>
		    <td>{{ $history->home_visit_date }}</td>
		    <td>@if(isset($history->anb_lcname_user)){{ $history->anb_lcname_user->firstname }} {{ $history->anb_lcname_user->lastname }} @endif</td>
		    <td>{{ $history->next_home_visit }}</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">
				<button history_id="{{ $history->id }}" class="btn btn-default btn_history_modify">Modify</button>
			</td>
		  </tr>
		  @endfor
		  @if(count($histories) <= 0)
		  <tr>
		    <td colspan="8" class="text-center">No result.</td>
		  </tr>
		  @endif
		</tbody>
	  </table>
	</div>
	</div>
  </div>
  <div class="text-right mt10"><button id="btn_host_history_create" class="btn btn-primary"><i class="fa fa-stack-exchange"></i> Homevisit Create</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_history_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);

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

				markup = '<div class="panel">'
				+ '<div class="panel-heading">'
				+ '<span class="panel-title">Homevisit 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="lastname" class="field-label col-md-4" style="line-height:130%;">Home visit date</label>'
				+ '<div class="col-md-8">'
				+ '<label for="homevisit_date" class="field">'
				+ '<input type="text" id="homevisit_date" class="gui-input" value="${home_visit_date}">'
				+ '</label>'
				+ '</div>'
				+ '</div>'
	
				+ '<div class="section row mb10">'
				+ '<label for="lastname" class="field-label col-md-4">Alert date</label>'
				+ '<div class="col-md-8">'
				+ '<label for="homevisit_alert_date" class="field">'
				+ '<input type="text" id="homevisit_alert_date" class="gui-input" value="${alert_date}" readonly>'
				+ '</label>'
				+ '</div>'
				+ '</div>'

				

                + '<div class="section row mb10">'
				+ '<label for="lastname" class="field-label col-md-4" style="line-height:130%;">LC Name</label>'
				+ '<div class="col-md-8">'
				+ '<label for="lc_name" class="field">'
				+ '<input type="text"  class="gui-input" value="'+' '+'" readonly>'
                + '<input type="hidden" id="lc_name" class="gui-input" value="'+''+'">'
                + '</label>'
				+ '</div>'
				+ '</div>' 

/*
				+ '<div class="section row mb10" id="lc_relation_student_section">'
				+ '<label for="grade" class="field-label col-md-4">LC Name</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">Document Type</label>'
				+ '<div class="col-md-8">'
				+ '{{if document_type == 1 }}'
				+ '<label for="document_type" class="field">'
				+ '<select id="document_type" class="gui-input form-control" disabled>'
				+ '<option value=""></option>'
				+ '<option value="1" selected>HF interview and Pre-arrival OT</option>'
				+ '<option value="2">HF Home visiting checklist</option>'
				+ '</select>'
				+ '</label>'
				+ '{{/if}}'
				+ '{{if document_type == 2 }}'
				+ '<select id="document_type" class="gui-input form-control" disabled>'
				+ '<option value=""></option>'
				+ '<option value="1">HF interview and Pre-arrival OT</option>'
				+ '<option value="2" selected>HF Home visiting checklist</option>'
				+ '</select>'
				+ '{{/if}}'
				+ '</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 ));

				var lc_name =data[0].anb_lcname_user.email;
				console.log(lc_name);
		
				


			$('#homevisit_date').datetimepicker({
					pickTime: false,
					format: 'MM/DD/YYYY',
					useCurrent: false
			});
			$('#homevisit_date').on('change', function() { 
				var from=$('#homevisit_date').val().split('/');
				var date=new Date(from[2], from [0]-1, from[1]);
				console.log("full year : "+date.getFullYear());
				console.log("full month : "+date.getMonth());
				console.log("full date : "+date.getDate());

				date.setFullYear(date.getFullYear() +1);
				date.setMonth(date.getMonth() -1);
				//var date=date.getMonth()+'/'+date.getDate()+'/'+date.getFullYear();
				//var alert_date=new Date(date);
				//var alert_date=date;
				$('#homevisit_alert_date').val((date.getMonth()+1)+'/'+date.getDate()+'/'+date.getFullYear()); // get the current value of the input field.
			});

				$("#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/homevisit/"+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 = {
						home_visit_date : $('#homevisit_date').val(),
						homevisit_alert_date : $('#homevisit_alert_date').val(),
						lc_name : $('#lc_name').val(),
						document_type : $('#document_type').val(),
						memo : $('#memo').val()
					}
					$.ajax({
						method: "put",
						url: "/api/host/homevisit/"+history_id,
						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_history_create').on('click', function() {
			var user_id = {{ $host->user_id }};
			createHostHistory(user_id);
		});

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

			markup = '<div class="panel">'
			+ '<div class="panel-heading">'
			+ '<span class="panel-title">Homevisit 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="lastname" class="field-label col-md-4" style="line-height:130%;">Home visit date</label>'
			+ '<div class="col-md-8">'
			+ '<label for="homevisit_date" class="field">'
			+ '<input type="text" id="homevisit_date" class="gui-input" value="">'
			+ '</label>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="lastname" class="field-label col-md-4">Alert date</label>'
			+ '<div class="col-md-8">'
			+ '<label for="homevisit_alert_date" class="field">'
			+ '<input type="text" id="homevisit_alert_date" class="gui-input" value="" readonly>'
			+ '</label>'
			+ '</div>'
			+ '</div>'

            + '<div class="section row mb10">'
            + '<label for="lastname" class="field-label col-md-4" style="line-height:130%;">LC Name</label>'
            + '<div class="col-md-8">'
            + '<label for="lc_name" class="field">'
            + '<input type="text"  class="gui-input" value="'+' '+'" readonly>'
            + '<input type="hidden" id="lc_name" class="gui-input" value="'+''+'">'
            + '</label>'
            + '</div>'
            + '</div>'




			+ '<div class="section row mb10">'
			+ '<label for="lastname" class="field-label col-md-4">Document Type</label>'
			+ '<div class="col-md-8">'
			+ '<label for="document_type" class="field">'
			+ '<select id="document_type" class="gui-input form-control">'
			+ '<option value=""></option>'
			+ '<option value="1">HF interview and Pre-arrival OT</option>'
			+ '<option value="2">HF Home visiting checklist</option>'
			+ '</select>'
			+ '</label>'
			+ '</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%"></textarea>'
				+ '</label>'
				+ '</div>'
				+ '</div>'

			+ '<div class="text-center smart-widget"><button id="btn_host_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);

			//alert_receiver: $('.tm-tag-info').children('span').text()
			
			var lc_name = "";
			$("#search_student").off('keyup');
				$("#search_student").on('keyup', function() {
					console.log('hihi'+$(this).val());
					if($(this).val() == '') {
						$("#search_student_list").html('');
						return;
					}
					$.get('/api/local/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('LC already has been chosen. If you change the LC, remove first.');
						}
						else{
							$(".tm-input").tagsManager('pushTag', $(this).text());
						}
						
						
							
						});
					});
				});


				var prefilled = [];
				for(var i=0;i<1;i++) {//data.local.students.length
					prefilled.push(lc_name);//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();
					}
				});


			$('#homevisit_date').datetimepicker({
					pickTime: false,
					format: 'MM/DD/YYYY',
					useCurrent: false
			});
			$('#homevisit_date').on('change', function() { 
				var from=$('#homevisit_date').val().split('/');
				var date=new Date(from[2], from [0]-1, from[1]);
				console.log("full year : "+date.getFullYear());
				console.log("full month : "+date.getMonth());
				console.log("full date : "+date.getDate());

				date.setFullYear(date.getFullYear() +1);
				date.setMonth(date.getMonth() -1);
				//var date=date.getMonth()+'/'+date.getDate()+'/'+date.getFullYear();
				//var alert_date=new Date(date);
				//var alert_date=date;
				$('#homevisit_alert_date').val((date.getMonth()+1)+'/'+date.getDate()+'/'+date.getFullYear()); // get the current value of the input field.
			});

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

				if($('#document_type').val()==''){
					alert('You have to choose Document Type.');
					return;
				}

				var input_obj = {
					home_visit_date : $('#homevisit_date').val(),
					homevisit_alert_date : $('#homevisit_alert_date').val(),
					lc_name : $('#lc_name').val(),
					document_type : $('#document_type').val(),
					memo : $('#memo').val()
				}
				$.ajax({
					method: "post",
					url: "/api/host/"+user_id+"/homevisit",
					data: input_obj
				})
				.done(function( msg ) {

					window.open ("./homevisit/"+msg.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
			});
		}
	});
</script>
@endsection