@extends('layouts.admin')

@section('page-header')
{{ $student->user->lastname }}, {{ $student->user->firstname }}
@endsection


@section('content')

@include('admin.student_info')


<div class="panel mt5 p10">
  <div class="panel-body pn">
	<div class="bs-component">
	  <table class="table table-striped table-bordered table-hover">
		<thead>
		  <tr>
			<th class="text-center">HF<br>(Mother/Father)</th>
			<th class="text-center">School</th>
			<th class="text-center">Move in</th>
			<th class="text-center">Move out</th>
			<th class="text-center">Comment</th>
			<th class="text-center">Created_at</th>
			<th class="text-center">Created_by</th>
			<th width="80" class="text-center">Modify</th>
		  </tr>
		</thead>
		<tbody>
		  @for($i=0,$cnt=count($histories);$i<$cnt;$i++)
		  		  <tr>
		    <td>{{ $history->host_name }}</td>
		    <td>{{ $history->school }}</td>
		    <td>{{ $history->move_in }}</td>
		    <td>{{ $history->move_out }}</td>
		    <td>{{ $history->comment }}</td>
		    <td>
		    
		    Jul/05/2025		    </td>
		    <td>{{ $history->writer->lastname }}, {{ $history->writer->firstname }}</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 class="text-right mt10"><button id="btn_host_history_create" class="btn btn-primary"><i class="fa fa-stack-exchange"></i> History 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>
	var locals = {};
	var students = {};
	var schools = {};

	jQuery(document).ready(function() {

		$('[data-toggle="tabajax"]').click(function(e) {
			e.preventDefault();
			var loadurl = $(this).attr('href')
			var targ = $(this).attr('data-target')
			$.get(loadurl, function(data) {
				$(targ).html(data)
			});
			$(this).tab('show')
		});

		@include('admin_common_script')

		$('#btn_status_change').on('click', function() {
			$('#status_form').toggle();
		});

		function capitalizeFirstLetter(string) {
			return string.charAt(0).toUpperCase() + string.slice(1);
		}

		$('.btn_status_item').on('click', function() {
			var student_id = $(this).parent().parent().parent().parent().attr('data-id');
			var status = $(this).attr('data-value');

			$('#status_form').hide();
			$('#btn_status_change').html(capitalizeFirstLetter(status)+' <i class="fa fa-sort-desc" style="font-size:18px;margin-left:4px;"></i>');

			$.ajax({
				method: "put",
				url: "/api/student/"+student_id+"/status",
				data: {'status': status}
			})
			.done(function( msg ) {
			})
			.fail(function( a ) {
				alert(a.responseJSON.msg);
			});
		});

		$('.btn_student_notice').on('click', function() {
			var user_id = {{ $student->user_id }};
			getStudentNotice(user_id);
		});
		
		$('.btn_account_info').on('click', function() {
			var user_id = {{ $student->user_id }};
			getAccountInfo(user_id);
		});

		$('.btn_user_comment').on('click', function() {
			var user_id = {{ $student->user_id }};
			getUserComments(user_id);
		});

		$('.btn_student_relation').on('click', function() {
			var user_id = {{ $student->user_id }};
			getStudentRelation(user_id);
		});

		$('.btn_student_file').on('click', function() {
			alert('Ready!');
		});

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

		$('.btn_document_status_change').on('click', function() {
			var this_obj = $(this);
			var user_id = $(this).attr('data-id');
			changeStudentDocumentStatus(this_obj, user_id);
		});
		
		$('.btn_history_modify').on('click', function() {
			var history_id = $(this).attr('history_id');
			var user_id = ;
			modifyStudentHistory(user_id, history_id);
			console.log("history_id : "+history_id+" user_id : "+user_id);
		});
		
		function modifyStudentHistory(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/student/'+user_id+'/history/'+history_id, function(data) {

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

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

				+ '<div class="section row mb10">'
				+ '<label for="student_account" class="field-label col-md-5">Student account</label>'
				+ '<div class="col-md-7">'
				+ '<p class="form-control-static"></p>'
				+ '</div>'
				+ '</div>'

				+ '<div class="section row mb10">'
				+ '<label for="host_name" class="field-label col-md-5">HF (Mother/Father)</label>'
				+ '<div class="col-md-7">'
				+ '<p class="form-control-static">${host_name}</p>'
				+ '</div>'
				+ '</div>'

				+ '<div class="section row mb10">'
				+ '<label for="school" class="field-label col-md-5">School</label>'
				+ '<div class="col-md-7">'
				+ '<p class="form-control-static">${school}</p>'
				+ '</div>'
				+ '</div>'

				+ '<div class="section row mb10">'
				+ '<label for="move_in" class="field-label col-md-5">Move in</label>'
				+ '<div class="col-md-7">'
				+ '<p class="form-control-static">${move_in}</p>'
				+ '</div>'
				+ '</div>'

				+ '<div class="section row mb10">'
				+ '<label for="lastname" class="field-label col-md-5">Move out</label>'
				+ '<div class="col-md-7">'
				+ '<label for="history_move_out" class="field">'
				+ '<input type="text" id="history_move_out" class="gui-input" value="${move_out}">'
				+ '</label>'
				+ '</div>'
				+ '</div>'

				+ '<div class="section row mb10">'
				+ '<label for="lastname" class="field-label col-md-5">Comment<br>(* max character length : 500)</label>'
				+ '<div class="col-md-7">'
				+ '<label for="history_comment" class="control-label"></label>'
				+ '<textarea class="form-control" id="history_comment" rows="3" maxlength="500" style="width:100%">${comment}</textarea>'
				+ '</div>'
				+ '</div>'
				
				+ '<div class="text-center smart-widget"></div>'
				+ '<div class="text-center smart-widget"><button id="btn_student_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 ));

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


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

					var input_obj = {
						
						move_out: $('#history_move_out').val(),
						comment: $('#history_comment').val(),
					}
					$.ajax({
						method: "put",
						url: "/api/student/"+user_id+"/history/"+history_id,
						data: input_obj
					})
					.done(function( msg ) {
						location.reload();
					})
					.fail(function( a ) {
						alert(a.responseJSON.msg);
					});
				});
				
				$(':reset').on('click', function() {
					console.log("click reset button");
					$('#history_move_out').text('');
					$('#history_comment').text('');
				});
				
				
			});


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