@extends('layouts.mypage')

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


@section('content')
    @include('mypage.partial.host_info')
    @include('mypage.partial.host_tab', array('host_tab_active'=>'history'))


<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">Student name<br>(first/last)</th>
			<th class="text-center">English name</th>
			<th class="text-center">School</th>
			<th class="text-center">Move in</th>
			<th class="text-center">Move out</th>
			<th width="90" class="text-center">Status</th>
			<th width="120" class="text-center">Update Date</th>
			<th width="80" class="text-center">Modify</th>
		  </tr>
		</thead>
		<tbody>
		  @for($i=0,$cnt=count($histories);$i<$cnt;$i++)
		  		  <tr>
		    <td>{{ $history->student_name }}</td>
		    <td>{{ $history->student_eng_name }}</td>
		    <td>{{ $history->school }}</td>
		    <td>{{ $history->move_in }}</td>
		    <td>{{ $history->move_out }}</td>
		    <td class="text-center">
				@if($history->status == 'active')
				<button history_id="{{ $history->id }}" data-value="active" class="btn btn-system btn_history_status_change">Active</button>
				@elseif($history->status == 'inactive')
				<button history_id="{{ $history->id }}" data-value="inactive" class="btn btn-success btn_history_status_change">inActive</button>
				@endif
			</td>
		    <td class="text-center">
			Jul/05/2025			</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>
	jQuery(document).ready(function() {

		
		$('.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 = ;
			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/'+user_id+'/history/'+history_id, function(data) {

				markup = '<div class="panel">'
				+ '<div class="panel-heading">'
				+ '<span class="panel-title">Host 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%;">Student name(first/last)</label>'
				+ '<div class="col-md-8">'
				+ '<label for="history_student_name" class="field">'
				+ '<input type="text" id="history_student_name" class="gui-input" value="${student_name}">'
				+ '</label>'
				+ '</div>'
				+ '</div>'

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

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

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

				+ '<div class="section row mb10">'
				+ '<label for="lastname" class="field-label col-md-4">Move out</label>'
				+ '<div class="col-md-8">'
				+ '<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-4">Status</label>'
				+ '<div class="col-md-8">'
				+ '<div class="btn-group">'
				+ '<input type="hidden" id="history_status" value="${status}">'
				+ '{{if status == "active" }}'
				+ '<button type="button" data-value="active" class="btn btn-dark btn_host_history_status_select">Active</button>'
				+ '<button type="button" data-value="inactive" class="btn btn-default btn_host_history_status_select">inActive</button>'
				+ '{{/if}}'
				+ '{{if status == "inactive" }}'
				+ '<button type="button" data-value="active" class="btn btn-default btn_host_history_status_select">Active</button>'
				+ '<button type="button" data-value="inactive" class="btn btn-dark btn_host_history_status_select">inActive</button>'
				+ '{{/if}}'
				+ '</div>'
				+ '</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 ));

				$('#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_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+"/history/"+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 = {
						student_name: $('#history_student_name').val(),
						student_eng_name: $('#history_student_eng_name').val(),
						school: $('#history_school').val(),
						move_in: $('#history_move_in').val(),
						move_out: $('#history_move_out').val(),
						status: $('#history_status').val(),
					}
					$.ajax({
						method: "put",
						url: "/api/host/"+user_id+"/history/"+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">Host 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%;">Student name(first/last)</label>'
			+ '<div class="col-md-8">'
			+ '<label for="history_student_name" class="field">'
			+ '<input type="text" id="history_student_name" class="gui-input" value="">'
			+ '</label>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="lastname" class="field-label col-md-4">English name</label>'
			+ '<div class="col-md-8">'
			+ '<label for="history_student_eng_name" class="field">'
			+ '<input type="text" id="history_student_eng_name" class="gui-input" value="">'
			+ '</label>'
			+ '</div>'
			+ '</div>'

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

			+ '<div class="section row mb10">'
			+ '<label for="lastname" class="field-label col-md-4">Move in</label>'
			+ '<div class="col-md-8">'
			+ '<label for="history_move_in" class="field">'
			+ '<input type="text" id="history_move_in" class="gui-input" value="">'
			+ '</label>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="lastname" class="field-label col-md-4">Move out</label>'
			+ '<div class="col-md-8">'
			+ '<label for="history_move_out" class="field">'
			+ '<input type="text" id="history_move_out" class="gui-input" value="">'
			+ '</label>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="lastname" class="field-label col-md-4">Status</label>'
			+ '<div class="col-md-8">'
			+ '<div class="btn-group">'
			+ '<input type="hidden" id="history_status" value="active">'
			+ '<button type="button" data-value="active" class="btn btn-dark btn_host_history_status_select">Active</button>'
			+ '<button type="button" data-value="inactive" class="btn btn-default btn_host_history_status_select">inActive</button>'
			+ '</div>'
			+ '</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);

			$('#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_history_write").off('click');
			$("#btn_host_history_write").on('click', function() {


				var input_obj = {
					student_name: $('#history_student_name').val(),
					student_eng_name: $('#history_student_eng_name').val(),
					school: $('#history_school').val(),
					move_in: $('#history_move_in').val(),
					move_out: $('#history_move_out').val(),
					status: $('#history_status').val(),
				}
				$.ajax({
					method: "post",
					url: "/api/host/"+user_id+"/history",
					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
			});
		}
	});
</script>
@endsection