@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">
		<thead>
		  <tr>
			<th width="70" class="text-center">No</th>
			<th width="250" class="text-center">Title</th>
			<th width="150" class="text-center">Student</th>
			<th width="150" class="text-center">L/C</th>
			<th width="180" class="text-center">Update Date</th>
		  </tr>
		</thead>
		<tbody>
		@for($i=0,$cnt=count($reports);$i<$cnt;$i++)
		  <tr>
			<td class="text-center">{{$cnt-$i}}</td>
			<td><a class="text-primary" href="/admin/host/{{ $host->user_id }}/report/{{ $reports[$i]->id }}">{{ $reports[$i]->title }}</a></td>
			<td>{{ $reports[$i]->student ? $reports[$i]->student->user->firstname : '' }} {{ $reports[$i]->student ? $reports[$i]->student->user->lastname : '' }}</td>
			<td>{{ $reports[$i]->local ? $reports[$i]->local->user->firstname : '' }} {{ $reports[$i]->local ? $reports[$i]->local->user->lastname : '' }}</td>
			<td class="text-center">
			Jul/05/2025			</td>
		  </tr>
		@endfor
		@if(count($reports) <= 0)
		  <tr>
		    <td colspan="5" class="text-center">No result.</td>
		  </tr>
		@endif
		</tbody>
	  </table>
	</div>
  </div>
  <!--<div class="text-right mt10"><button class="btn btn-primary btn_host_report"><i class="fa fa-stack-exchange"></i> Report 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_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_host_report').on('click', function() {
			var user_id = {{ $host->user_id }};
			createHostReport(user_id);
		});

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

			markup = '<div class="panel">'
			+ '<div class="panel-heading">'
			+ '<span class="panel-title">Report</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="grade" class="field-label col-md-4">Local Coordinator</label>'
			+ '<div class="col-md-8">'
			+ '<p class="form-control-static"></p>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4">Student</label>'
			+ '<div class="col-md-8">'
			+ '<select id="report_student_id" class="form-control">'
			+ '<option value="">select student</option>'
			@for($i=0,$cnt=count($host->students); $i<$cnt; $i++)
			+ '<option value="{{ $host->students[$i]->user_id }}">{{ $host->students[$i]->inputFirstName }} {{ $host->students[$i]->inputLastName }}</option>'
			@endfor
			+ '</select>'
			+ '</div>'
			+ '</div>'

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

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

			+ '</div>'

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

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

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

				var input_obj = {
					student: $('#report_student_id').val(),
					title: $('#report_title').val()
				}
				$.ajax({
					method: "post",
					url: "/api/host/"+user_id+"/report",
					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