@extends('layouts.admin')

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


@section('content')

@include('admin.local_info')

<div class="panel-heading">
	<ul class="nav panel-tabs panel-tabs-left text-center">
	<li class="w90">
		<a href="/admin/local/{{ $local->user_id }}">Application</a>
	</li>
	<li class="active w90">
		<a href="/admin/local/{{ $local->user_id }}/host">H/F</a>
	</li>
	<li class="w90">
		<a href="/admin/local/{{ $local->user_id }}/student">Student</a>
	</li>
	<li class="w90">
		<a href="/admin/local/{{ $local->user_id }}/report">Monthly Report</a>
	</li>
	</ul>
</div>

<div class="panel mt5 p10">
  <div class="panel-body pn">

    <div class="table-responsive">
      <table class="table table-bordered table-hover" style="word-wrap:break-word;word-break:break-all;">
        <thead>
          <tr>
			<th width="80" class="text-center">No</th>
			<th class="text-center">Email</th>
			<th class="text-center">Mother name</th>
			<th class="text-center">Father name</th>
			<th class="text-center">Address</th>
          </tr>
        </thead>
        <tbody>
		@foreach ($local->hosts as $host)
		  <tr data-id="{{ $host->user_id }}">
			<td class="text-center">{{ $host->user_id }}</td>
			<td style="padding:0;"><a href="/admin/host/{{$host->user_id}}" style="font-size:14px;">{{ $host->user->email }}</a></td>
			<td>{{ $host->inputHostMotherLastName }}, {{ $host->inputHostMotherFirstName }} </td>
			<td>{{ $host->inputHostFatherLastName }}, {{ $host->inputHostFatherFirstName }} </td>
			<td>{{ $host->inputStreetAddress }}</td>
		  </tr>
		 @endforeach
		@if(count($local->hosts) <= 0)
		  <tr>
		    <td colspan="5" 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() {
			changeHostStatus($(this).attr('data-value'));
		});

		$('.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_local_relation').on('click', function() {
			var user_id = $(this).parent().parent().attr('data-id');
			getLocalRelation(user_id);
		});
	});
</script>
@endsection