@extends('layouts.mypage')

@section('page-header')

<h1 class="page-header">My Report</h1>
@endsection


@section('content')

<style>

/* All Report List Style */
tr:nth-child(even){background-color: #f8f8f8;}
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
    


    /* agency table */
	table.all_report_list_table thead th.agency:nth-of-type(3),
	table.all_report_list_table thead td.agency:nth-of-type(3),
	table.all_report_list_table tbody td.agency:nth-of-type(3) {
		display:none;
	}
	table.all_report_list_table thead th.agency:nth-of-type(4),
	table.all_report_list_table thead td.agency:nth-of-type(4),
	table.all_report_list_table tbody td.agency:nth-of-type(4) {
		display:none;
	}
	

	/* Local coodinator table */
    table.all_report_list_table thead th.LC:nth-of-type(3),
    table.all_report_list_table thead td.LC:nth-of-type(3),
	table.all_report_list_table tbody td.LC:nth-of-type(3) {
		display:none;
	}
	table.all_report_list_table thead th.LC:nth-of-type(4),
	table.all_report_list_table thead td.LC:nth-of-type(4),
	table.all_report_list_table tbody td.LC:nth-of-type(4) {
		display:none;
	} 
	table.all_report_list_table thead th.LC:nth-of-type(5),
	table.all_report_list_table thead td.LC:nth-of-type(5),
	table.all_report_list_table tbody td.LC:nth-of-type(5) {
		display:none;
	} 
	table.all_report_list_table thead th.LC:nth-of-type(6),
	table.all_report_list_table thead td.LC:nth-of-type(6),
	table.all_report_list_table tbody td.LC:nth-of-type(6) {
		display:none;
	}  


	/* student table */
    table.all_report_list_table thead th.student:nth-of-type(3),
    table.all_report_list_table thead td.student:nth-of-type(3),
	table.all_report_list_table tbody td.student:nth-of-type(3) {
		display:none;
	}
	table.all_report_list_table thead th.student:nth-of-type(4),
	table.all_report_list_table thead td.student:nth-of-type(4),
	table.all_report_list_table tbody td.student:nth-of-type(4) {
		display:none;
	}
	

	/* hostfamily table */
    table.all_report_list_table thead th.hostfamily:nth-of-type(3),
    table.all_report_list_table thead td.hostfamily:nth-of-type(3),
	table.all_report_list_table tbody td.hostfamily:nth-of-type(3) {
		display:none;
	}    
	table.all_report_list_table thead th.hostfamily:nth-of-type(4),
	table.all_report_list_table thead td.hostfamily:nth-of-type(4),
	table.all_report_list_table tbody td.hostfamily:nth-of-type(4) {
		display:none;
	}

	/* translator table */
    table.all_report_list_table thead th.translator:nth-of-type(3),
    table.all_report_list_table thead td.translator:nth-of-type(3),
	table.all_report_list_table tbody td.translator:nth-of-type(3) {
		display:none;
	}
    table.all_report_list_table thead th.translator:nth-of-type(4),
    table.all_report_list_table thead td.translator:nth-of-type(4),
	table.all_report_list_table tbody td.translator:nth-of-type(4) {
		display:none;
	}
    table.all_report_list_table thead th.translator:nth-of-type(5),
    table.all_report_list_table thead td.translator:nth-of-type(5),
	table.all_report_list_table tbody td.translator:nth-of-type(5) {
		display:none;
	}
    table.all_report_list_table thead th.translator:nth-of-type(6),
    table.all_report_list_table thead td.translator:nth-of-type(6),
	table.all_report_list_table tbody td.translator:nth-of-type(6) {
		display:none;
	}

	/* SA table */
    table.all_report_list_table thead th.SA:nth-of-type(3),
    table.all_report_list_table thead td.SA:nth-of-type(3),
	table.all_report_list_table tbody td.SA:nth-of-type(3) {
		display:none;
	}
    table.all_report_list_table thead th.SA:nth-of-type(4),
    table.all_report_list_table thead td.SA:nth-of-type(4),
	table.all_report_list_table tbody td.SA:nth-of-type(4) {
		display:none;
	}
    table.all_report_list_table thead th.SA:nth-of-type(5),
    table.all_report_list_table thead td.SA:nth-of-type(5),
	table.all_report_list_table tbody td.SA:nth-of-type(5) {
		display:none;
	}
    table.all_report_list_table thead th.SA:nth-of-type(6),
    table.all_report_list_table thead td.SA:nth-of-type(6),
	table.all_report_list_table tbody td.SA:nth-of-type(6) {
		display:none;
	}
    table.all_report_list_table thead th.SA:nth-of-type(7),
    table.all_report_list_table thead td.SA:nth-of-type(7),
	table.all_report_list_table tbody td.SA:nth-of-type(7) {
		display:none;
	}
    table.all_report_list_table thead th.SA:nth-of-type(8),
    table.all_report_list_table thead td.SA:nth-of-type(8),
	table.all_report_list_table tbody td.SA:nth-of-type(8) {
		display:none;
	}
    
}


/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    body {
        padding: 0;
        margin: 0;
        width: 100%;
    }

	
    /* agency table */
	table.all_report_list_table thead th.agency:nth-of-type(3),
	table.all_report_list_table thead td.agency:nth-of-type(3),
	table.all_report_list_table tbody td.agency:nth-of-type(3) {
		display:none;
	}
	table.all_report_list_table thead th.agency:nth-of-type(4),
	table.all_report_list_table thead td.agency:nth-of-type(4),
	table.all_report_list_table tbody td.agency:nth-of-type(4) {
		display:none;
	}
	

	/* Local coodinator table */
    table.all_report_list_table thead th.LC:nth-of-type(3),
    table.all_report_list_table thead td.LC:nth-of-type(3),
	table.all_report_list_table tbody td.LC:nth-of-type(3) {
		display:none;
	}
	table.all_report_list_table thead th.LC:nth-of-type(4),
	table.all_report_list_table thead td.LC:nth-of-type(4),
	table.all_report_list_table tbody td.LC:nth-of-type(4) {
		display:none;
	} 
	table.all_report_list_table thead th.LC:nth-of-type(5),
	table.all_report_list_table thead td.LC:nth-of-type(5),
	table.all_report_list_table tbody td.LC:nth-of-type(5) {
		display:none;
	} 
	table.all_report_list_table thead th.LC:nth-of-type(6),
	table.all_report_list_table thead td.LC:nth-of-type(6),
	table.all_report_list_table tbody td.LC:nth-of-type(6) {
		display:none;
	}  


	/* student table */
    table.all_report_list_table thead th.student:nth-of-type(3),
    table.all_report_list_table thead td.student:nth-of-type(3),
	table.all_report_list_table tbody td.student:nth-of-type(3) {
		display:none;
	}
	table.all_report_list_table thead th.student:nth-of-type(4),
	table.all_report_list_table thead td.student:nth-of-type(4),
	table.all_report_list_table tbody td.student:nth-of-type(4) {
		display:none;
	}
	

	/* hostfamily table */
    table.all_report_list_table thead th.hostfamily:nth-of-type(3),
    table.all_report_list_table thead td.hostfamily:nth-of-type(3),
	table.all_report_list_table tbody td.hostfamily:nth-of-type(3) {
		display:none;
	}    
	table.all_report_list_table thead th.hostfamily:nth-of-type(4),
	table.all_report_list_table thead td.hostfamily:nth-of-type(4),
	table.all_report_list_table tbody td.hostfamily:nth-of-type(4) {
		display:none;
	}

	/* translator table */
    table.all_report_list_table thead th.translator:nth-of-type(3),
    table.all_report_list_table thead td.translator:nth-of-type(3),
	table.all_report_list_table tbody td.translator:nth-of-type(3) {
		display:none;
	}
    table.all_report_list_table thead th.translator:nth-of-type(4),
    table.all_report_list_table thead td.translator:nth-of-type(4),
	table.all_report_list_table tbody td.translator:nth-of-type(4) {
		display:none;
	}
    table.all_report_list_table thead th.translator:nth-of-type(5),
    table.all_report_list_table thead td.translator:nth-of-type(5),
	table.all_report_list_table tbody td.translator:nth-of-type(5) {
		display:none;
	}
    table.all_report_list_table thead th.translator:nth-of-type(6),
    table.all_report_list_table thead td.translator:nth-of-type(6),
	table.all_report_list_table tbody td.translator:nth-of-type(6) {
		display:none;
	}

	/* SA table */
    table.all_report_list_table thead th.SA:nth-of-type(3),
    table.all_report_list_table thead td.SA:nth-of-type(3),
	table.all_report_list_table tbody td.SA:nth-of-type(3) {
		display:none;
	}
    table.all_report_list_table thead th.SA:nth-of-type(4),
    table.all_report_list_table thead td.SA:nth-of-type(4),
	table.all_report_list_table tbody td.SA:nth-of-type(4) {
		display:none;
	}
    table.all_report_list_table thead th.SA:nth-of-type(5),
    table.all_report_list_table thead td.SA:nth-of-type(5),
	table.all_report_list_table tbody td.SA:nth-of-type(5) {
		display:none;
	}
    table.all_report_list_table thead th.SA:nth-of-type(6),
    table.all_report_list_table thead td.SA:nth-of-type(6),
	table.all_report_list_table tbody td.SA:nth-of-type(6) {
		display:none;
	}
    table.all_report_list_table thead th.SA:nth-of-type(7),
    table.all_report_list_table thead td.SA:nth-of-type(7),
	table.all_report_list_table tbody td.SA:nth-of-type(7) {
		display:none;
	}
    table.all_report_list_table thead th.SA:nth-of-type(8),
    table.all_report_list_table thead td.SA:nth-of-type(8),
	table.all_report_list_table tbody td.SA:nth-of-type(8) {
		display:none;
	}
}


/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body {
        width: 100%;
    }

    /* agency table */
	table.all_report_list_table thead th.agency:nth-of-type(3),
	table.all_report_list_table thead td.agency:nth-of-type(3),
	table.all_report_list_table tbody td.agency:nth-of-type(3) {
		display:none;
	}
	table.all_report_list_table thead th.agency:nth-of-type(4),
	table.all_report_list_table thead td.agency:nth-of-type(4),
	table.all_report_list_table tbody td.agency:nth-of-type(4) {
		display:none;
	}
	

	/* Local coodinator table */
    table.all_report_list_table thead th.LC:nth-of-type(3),
    table.all_report_list_table thead td.LC:nth-of-type(3),
	table.all_report_list_table tbody td.LC:nth-of-type(3) {
		display:none;
	}
	table.all_report_list_table thead th.LC:nth-of-type(4),
	table.all_report_list_table thead td.LC:nth-of-type(4),
	table.all_report_list_table tbody td.LC:nth-of-type(4) {
		display:none;
	} 
	table.all_report_list_table thead th.LC:nth-of-type(5),
	table.all_report_list_table thead td.LC:nth-of-type(5),
	table.all_report_list_table tbody td.LC:nth-of-type(5) {
		display:none;
	} 
	table.all_report_list_table thead th.LC:nth-of-type(6),
	table.all_report_list_table thead td.LC:nth-of-type(6),
	table.all_report_list_table tbody td.LC:nth-of-type(6) {
		display:none;
	}  


	/* student table */
    table.all_report_list_table thead th.student:nth-of-type(3),
    table.all_report_list_table thead td.student:nth-of-type(3),
	table.all_report_list_table tbody td.student:nth-of-type(3) {
		display:none;
	}
	table.all_report_list_table thead th.student:nth-of-type(4),
	table.all_report_list_table thead td.student:nth-of-type(4),
	table.all_report_list_table tbody td.student:nth-of-type(4) {
		display:none;
	}
	

	/* hostfamily table */
    table.all_report_list_table thead th.hostfamily:nth-of-type(3),
    table.all_report_list_table thead td.hostfamily:nth-of-type(3),
	table.all_report_list_table tbody td.hostfamily:nth-of-type(3) {
		display:none;
	}    
	table.all_report_list_table thead th.hostfamily:nth-of-type(4),
	table.all_report_list_table thead td.hostfamily:nth-of-type(4),
	table.all_report_list_table tbody td.hostfamily:nth-of-type(4) {
		display:none;
	}

	/* translator table */
    table.all_report_list_table thead th.translator:nth-of-type(3),
    table.all_report_list_table thead td.translator:nth-of-type(3),
	table.all_report_list_table tbody td.translator:nth-of-type(3) {
		display:none;
	}
    table.all_report_list_table thead th.translator:nth-of-type(4),
    table.all_report_list_table thead td.translator:nth-of-type(4),
	table.all_report_list_table tbody td.translator:nth-of-type(4) {
		display:none;
	}
    table.all_report_list_table thead th.translator:nth-of-type(5),
    table.all_report_list_table thead td.translator:nth-of-type(5),
	table.all_report_list_table tbody td.translator:nth-of-type(5) {
		display:none;
	}
    table.all_report_list_table thead th.translator:nth-of-type(6),
    table.all_report_list_table thead td.translator:nth-of-type(6),
	table.all_report_list_table tbody td.translator:nth-of-type(6) {
		display:none;
	}

	/* SA table */
    table.all_report_list_table thead th.SA:nth-of-type(3),
    table.all_report_list_table thead td.SA:nth-of-type(3),
	table.all_report_list_table tbody td.SA:nth-of-type(3) {
		display:none;
	}
    table.all_report_list_table thead th.SA:nth-of-type(4),
    table.all_report_list_table thead td.SA:nth-of-type(4),
	table.all_report_list_table tbody td.SA:nth-of-type(4) {
		display:none;
	}
    table.all_report_list_table thead th.SA:nth-of-type(5),
    table.all_report_list_table thead td.SA:nth-of-type(5),
	table.all_report_list_table tbody td.SA:nth-of-type(5) {
		display:none;
	}
    table.all_report_list_table thead th.SA:nth-of-type(6),
    table.all_report_list_table thead td.SA:nth-of-type(6),
	table.all_report_list_table tbody td.SA:nth-of-type(6) {
		display:none;
	}
    table.all_report_list_table thead th.SA:nth-of-type(7),
    table.all_report_list_table thead td.SA:nth-of-type(7),
	table.all_report_list_table tbody td.SA:nth-of-type(7) {
		display:none;
	}
    table.all_report_list_table thead th.SA:nth-of-type(8),
    table.all_report_list_table thead td.SA:nth-of-type(8),
	table.all_report_list_table tbody td.SA:nth-of-type(8) {
		display:none;
	}

}

/* All Report List Style 2017.11.17.from lauren */

</style>
<div class="panel" id="spy3">

<div class="form-inline">
<form name="search_list" class="form-horizontal">
<div class="row">

	<div class="col-sm-9">
	@if($auth->grade_id==6||$auth->grade_id==9||$auth->grade_id==10)
		<select class="form-control" name="sl_grade">
		<option value="">Classification</option>
		<option value="5" {{ Request::Input('sl_grade') == '5' ? 'selected' : '' }}>Host family</option>
		<option value="2" {{ Request::Input('sl_grade') == '2' ? 'selected' : '' }}>Student</option>
		<option value="6" {{ Request::Input('sl_grade') == '6' ? 'selected' : '' }}>Local Coordinator</option>
		<option value="school" {{ Request::Input('sl_grade') == 'school' ? 'selected' : '' }}>School</option>
		<option value="state" {{ Request::Input('sl_grade') == 'state' ? 'selected' : '' }}>State</option>
		
		</select>
		<select class="form-control" name="sl_search">
		<option value="email" {{ Request::Input('sl_search') == 'email' ? 'selected' : '' }}>Account ID</option>
		<option value="name" {{ Request::Input('sl_search') == 'name' ? 'selected' : '' }}>Name(First or Last)</option>
		</select>
		<input type="text" name="sl_keyword" class="form-control" value="{{ Request::Input('sl_keyword') }}">
		<button class="btn btn-primary"><i class="fa fa-search"></i></button>
	@endif
	@if($auth->grade_id==4)
		<select class="form-control" name="sl_grade">
		<option value="">Classification</option>
		<option value="2" {{ Request::Input('sl_grade') == '2' ? 'selected' : '' }}>Student</option>
		<option value="school" {{ Request::Input('sl_grade') == 'school' ? 'selected' : '' }}>School</option>
		
		</select>
		<select class="form-control" name="sl_search">
		<option value="email" {{ Request::Input('sl_search') == 'email' ? 'selected' : '' }}>Account ID</option>
		<option value="name" {{ Request::Input('sl_search') == 'name' ? 'selected' : '' }}>Name(First or Last)</option>
		</select>
		<input type="text" name="sl_keyword" class="form-control" value="{{ Request::Input('sl_keyword') }}">
		<button class="btn btn-primary"><i class="fa fa-search"></i></button>
	@endif	
 
	
	</div>

	<div class="col-sm-3 text-right">
		<select aria-controls="editable" class="form-control" name="page_size" onchange="document.search_list.submit();">
		<option value="25" {{ $reports->perPage() == 25 ? 'selected' : '' }}>List 25</option>
		<option value="50" {{ $reports->perPage() == 50 ? 'selected' : '' }}>List 50</option>
		<option value="100" {{ $reports->perPage() == 100 ? 'selected' : '' }}>List 100</option>
		</select>
	</div>
</div>
</form>
</div>

  <div class="panel-body pn">
    <div class="bs-component">
      <table class="table table-hover all_report_list_table">
        <thead>
          <tr>
            <th class="text-center agency student hostfamily SA translator LC">No</th>
			<th class="text-center agency student hostfamily SA translator LC">Title</th>
			@if($auth->grade_id==2||$auth->grade_id==5)
				<th class="text-center student hostfamily">Status</th>
			@endif
			@if($auth->grade_id==6 || $auth->grade_id==9)
				@if($auth->grade_id==6)
            		<th class="text-center LC">Student</th>
					<th class="text-center LC">H/F</th>
				@endif
				<th class="text-center translator LC">Status</th>
				@if($auth->grade_id==9)
					<th class="text-center translator">SA</th>
					<th class="text-center translator">SA review</th>
				@endif
			@endif
			@if($auth->grade_id!=10)
			<th class="text-center agency student hostfamily translator LC">Update Date</th>
			@endif
		
            @if($auth->grade_id==4)
            	<th class="text-center agency">Grade card</th>
			@endif
			@if($auth->grade_id==10)
				<th class="text-center SA">Student</th>
				<th class="text-center SA">H/F</th>
				<th class="text-center SA">L/C</th>
				<th class="text-center SA">Submitted</th>
				<th class="text-center SA">Translate</th>
				<th class="text-center SA">Review by SA</th>
			@endif	
          </tr>
        </thead>
        <tbody>
		@for ($i=0,$cnt=count($reports);$i<$cnt;$i++)
		
		

          <tr>
            <td class="text-center agency student hostfamily SA translator LC">{{ $reports->total() - ($reports->perPage() * ($reports->currentPage()-1)) - $i }}</td>
			
			@if($auth->grade_id==6)
				<td class="LC">
					<a class="text-primary" href="/mypage/report/{{ $reports[$i]['id'] }}">{{ $reports[$i]['title'] }}</a> {!!($grade_card_flag==1)?'<img src="/assets/img/userimg/grades.png" style="width:25px;"/>':''!!} <a href="javascript:" data-id="{{ $reports[$i]['id'] }}" style="text-decoration:none;" class="btn_report_title_edit"  ><span class="label label-sm label-default">edit</span></a>
				</td>
					@elseif($auth->grade_id!=10)
						<td class="text-center agency student hostfamily translator LC">
							<a class="text-center" href="/mypage/report/{{ $reports[$i]['id'] }}">{{ $reports[$i]['title'] }}</a>
						</td>
            @endif
			
			@if($auth->grade_id==6)
				<td class="text-center LC">
					@if(($reports[$i]['status_student']=='submitted'))<font color="green">Submitted </font>@elseif(($reports[$i]['status_student']=='saved'))<font color="orange">Saved</font>@else @endif
				</td>
				<td class="text-center LC">
					@if(($reports[$i]['status_host']=='submitted'))<font color="green">Submitted </font>@elseif(($reports[$i]['status_host']=='saved'))<font color="orange">Saved</font>@else @endif
				</td>
        	@endif
			
			@if($auth->grade_id==6)
            	<td class="text-center LC">{{$reports[$i]['status_local']}}</td>
            	@elseif($auth->grade_id==5)
            		<td class="text-center hostfamily LC"> 
						@if(($reports[$i]['status_host']=='submitted'))<font color="green">Submitted </font>@elseif(($reports[$i]['status_host']=='saved'))<font color="orange">Saved</font>@else @endif </td>
            	@elseif($auth->grade_id==2)
           			<td class="text-center student LC"> 
						@if(($reports[$i]['status_student']=='submitted'))<font color="green">Submitted </font>@elseif(($reports[$i]['status_student']=='saved'))<font color="orange">Saved</font>@else @endif </td>
			@endif
			
			@if($auth->grade_id==9)
				<td class="text-center translator"> 
					@if(($reports[$i]['status_translator']=='submitted'))<font color="green">Submitted </font>@elseif(($reports[$i]['status_translator']=='saved'))<font color="orange">inputting</font>@else @endif 
				</td>
				<td class="text-center translator">
					@if($reports[$i]['sa']['user'])<a href="mailto:{{$reports[$i]['sa']? $reports[$i]['sa']['user']['email']:''}}">{{$reports[$i]['sa']['user']['lastname'].', '.$reports[$i]['sa']['user']['firstname']}}</a>@endif
				</td>
				<td class="text-center translator"> 
					@if(($reports[$i]['status_review']=='submitted'))<font color="green">V</font>@elseif(($reports[$i]['status_review']=='saved'))<font color="orange">checking...</font>@else @endif 
				</td>
			@endif

			@if($auth->grade_id!=10)
            	<td class="text-center agency student hostfamily translator LC">{{ $reports[$i]['updated_at'] }}</td>
			@endif

			@if($auth->grade_id==4)
				<td class="text-center agency">
					{!!($grade_card_flag==1)?'<img src="/assets/img/userimg/grades.png" style="width:25px;"/>':''!!}
				</td>
			@endif

			@if($auth->grade_id==10)
				<td class="text-center SA">
					<a class="text-primary" href="/mypage/report/{{ $reports[$i]['id'] }}">{{ $reports[$i]['title'] }}</a> {!!($grade_card_flag==1)?'<img src="/assets/img/userimg/grades.png" style="width:20px;"/>':''!!} <a href="javascript:" data-id="{{ $reports[$i]['id'] }}" style="text-decoration:none;" class="btn_report_title_edit"  ><span class="label label-sm label-default">edit</span></a>
				</td>
				<td class="text-center SA">
					<span style="color:grey;" data-toggle="tooltip" data-placement="top" title="{{ $reports[$i]->student ? $reports[$i]->student->user->email : '' }}" >{{ $reports[$i]->student ? $reports[$i]->student->user->firstname : '' }} {{ $reports[$i]->student ? $reports[$i]->student->user->lastname : '' }}</span>
				</td>
				<td class="text-center SA">
					<span style="color:grey;" data-toggle="tooltip" data-placement="top" title="{{ $reports[$i]->host ? $reports[$i]->host->user->email : '' }}">{{ $reports[$i]->host ? $reports[$i]->host->user->firstname : '' }} {{ $reports[$i]->host ? $reports[$i]->host->user->lastname : '' }}</span>
				</td>
				<td class="text-center SA">
					<span style="color:grey;" data-toggle="tooltip" data-placement="top" title="{{ $reports[$i]->local ? $reports[$i]->local->user->email : '' }}">{{ $reports[$i]->local ? $reports[$i]->local->user->firstname : '' }} {{ $reports[$i]->local ? $reports[$i]->local->user->lastname : '' }}</span>
				</td>
				<td class="text-center SA">
					Jul/05/2025				</td>
				<td class="text-center SA">
					<span style="color:grey;"@if($reports[$i]->translator) data-toggle="tooltip" data-placement="top" title="{{ $reports[$i]->translator->email}}" @endif><a href="mailto:{{$reports[$i]['translator']?$reports[$i]['translator']['email']:''}}">{{ $reports[$i]->translator ? $reports[$i]->translator->firstname.' '.$reports[$i]->translator->lastname : 'not selected' }} </a> <a href="javascript:" data-id="{{ $reports[$i]->id }}" data-id2="{{ $reports[$i]->translator ? $reports[$i]->translator->user_id: '0'}}" style="text-decoration:none;" class="btn_report_translator_edit"  ><span class="label label-sm label-default">edit</span></a></span><br/>@if($reports[$i]->status_translator=='saved')<font color="orange"> inputting </font>@elseif($reports[$i]->status_translator=='submitted')<font color="green">complete</font>@endif 
				</td>
				<td class="text-center SA">
					@if($reports[$i]->status_review=='submitted')v @endif
				</td>
			@endif
			
          </tr>
		@endfor
        </tbody>
      </table>
    </div>
  </div>
  	@if($auth->grade_id==6)
  <div class="text-right mt10 LC">
	  <button class="btn btn-primary btn_local_report"><i class="fa fa-stack-exchange"></i> Report Create</button>
	</div>
	@endif
</div>

<nav class="text-center">
		{{ $reports->links() }}
</nav>

<div id="modal" class="popup-basic admin-form mfp-with-anim mfp-hide"></div>
@endsection

@section('script')

@if($auth->grade_id==6||$auth->grade_id==10)
<script>
jQuery(document).ready(function() {

		$.extend(jQuery.tmpl.tag, {
			"for": {
				_default: {$2: "var i=1;i<=1;i++"},
				open: 'for ($2){',
				close: '};'
			}
		});


	@if($auth->grade_id==6)
	$('select[name=sl_grade]').change(function(){
		console.log("선택된 값"+$('select[name=sl_grade]').val());
		var $selected_val=$('select[name=sl_grade]').val();
		
		if($selected_val=='school'||$selected_val=='state'){
			$('select[name=sl_search]').fadeOut(1000);
		
		}else{
			$('select[name=sl_search]').fadeIn(1000);
		}
	});
	
		if(($('select[name=sl_grade]').val()=='school')||($('select[name=sl_grade]').val()=='state')){
			$('select[name=sl_search]').hide();
		}




$('.btn_local_report').on('click', function() {
			var user_id = {{ $local->user_id }};
			console.log("click");
			createLocalReport(user_id);
		});

		function createLocalReport(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">L/C 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">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($local->students); $i<$cnt; $i++)
			+ '<option value="{{ $local->students[$i]->user_id }}">{{ $local->students[$i]->user->lastname }}, {{ $local->students[$i]->user->firstname }}</option>'
			@endfor
			+ '</select>'
			+ '</div>'
			+ '</div>'
			
			
			+ '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4">Host family</label>'
			+ '<div class="col-md-8">'
			+ '<label for="grade" class="field-label col-md-12" id="local-report-hf"></label>'
			+ '</div>'
			+ '</div>'
			
			
			+ '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4">School</label>'
			+ '<div class="col-md-8">'
			+ '<label for="grade" class="field-label col-md-12" id="local-report-school"></label>'
			+ '</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);
			var report_hf_id=0;

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

				var input_obj = {
					student: $('#report_student_id').val(),
					host: report_hf_id,
					title: $('#report_title').val()
				}
				$.ajax({
					method: "post",
					url: "/api/local/"+user_id+"/report",
					data: input_obj
				})
				.done(function( msg ) {
					location.reload();
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
				
				
			});
			
			
			$('select').on('change', function() {
				var target_obj = $(this);
				var tag_name = target_obj[0].tagName.toLowerCase();
				var param = {};
				var student_id=0;
			/*	if(userId != '') {
					param['user_id'] = userId;
				}
			*/	
				
				if(target_obj.attr('id') === '') return;
				student_id = target_obj.val();
				console.log(student_id);
				
				$.ajax({
					method: "get",
					url: "/api/student/"+student_id,
				})
				.done(function( msg ) {
					//location.reload();
					
					//console.log("success ajax");
					//console.log(msg);
					Date.prototype.monthNames = [
    				"January", "February", "March",
   					 "April", "May", "June",
    				"July", "August", "September",
   					 "October", "November", "December"
					];

					Date.prototype.getMonthName = function() {
    					return this.monthNames[this.getMonth()];
					};
					Date.prototype.getShortMonthName = function () {
    					return this.getMonthName().substr(0, 3);
					};

					var date=new Date();
					report_hf_id=msg.host_id;
					console.log("report_hf_id"+report_hf_id);
					if(report_hf_id==null)
						$('#local-report-hf').text('NONE');
					else
						$('#local-report-hf').text(msg.host.user.lastname+', '+msg.host.user.firstname);	//msg.host_id+' '+msg.user.email+' '
					$('#local-report-school').text(msg.school.school_name);
					$('#report_title').val(date.getFullYear()+' / '+date.getShortMonthName()+' / '+msg.user.lastname+' '+msg.user.firstname+' / '+msg.inputCitizenship);
					
				})
				.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
			});
			
		
			
		}
		
		@endif
			$('.btn_report_title_edit').on('click', function() {
			var report_id = $(this).attr('data-id');
			var currtitle=$(this).siblings().text();
			console.log(currtitle+" "+report_id);

			//alert('hello '+report_id);
			modifyReportTitle(report_id, currtitle);
		});
		
		
		function modifyReportTitle(report_id, currtitle) {
		var markup = '<div class="mfp-figure">'+
            '<div class="mfp-close"></div>'+
            '<div class="mfp-img"></div>'+
            '</div>';
		$("#modal").html(markup);

		

			markup = '<div class="panel">'
			+ '<div class="panel-heading">'
			+ '<p class="panel-title">Modify Title</p>'
			+ '<p style="margin:0;"></p>'


			+ '</div>'

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

			//${user.student_id}

			+ '<div class="section row mb10">'
			+ '<label for="modify_student_id" class="field-label col-md-2 text-center">Title</label>'
			+ '<div class="col-md-10">'
			+ '<label class="field">'
			+ '<input type="text" id="modify_report_title" class="gui-input" value="'+currtitle+'">'
			+ '</label>'
			+ '</div>'
			+ '</div>'
	

			+ '<div class="text-center smart-widget"><button id="btn_report_title_modify" type="button" class="btn btn-primary" style="margin:0 10px;">modify</button></div>'

			+ '</div>'


			+ '</div>'
			+ '<button title="Close (Esc)" type="button" class="mfp-close">×</button>';
			
			$.template( "template", markup );
			
			$("#modal").html($.tmpl( "template" ));


			// 공통 기능
			$('.date-picker').datetimepicker({
				pickTime: false,
				format: 'MM-DD-YYYY'
			});
		

		$.magnificPopup.open({
		items: {
			src: '#modal'
		},
		callbacks: {
			beforeOpen: function(e) {
			this.st.mainClass = 'mfp-zoomIn';
			}
		},
		midClick: true
		});
		
		
		$("#btn_report_title_modify").on('click', function() {
			
			var chardd=$('#modify_report_title').val();
			console.log(chardd);
			
				

				var input_obj = {
				
					report_title: $('#modify_report_title').val(),
					
				}
				$.ajax({
					method: "post",
					url: "/api/report/"+report_id+"/title",
					data: input_obj
				})
				.done(function( msg ) {
					alert('complete modify');
					location.reload();
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
				
				
			});

		
		
		
		
		
		
	}

	@if($auth->grade_id==10)
	$('.btn_report_translator_edit').on('click', function() {
			var report_id = $(this).attr('data-id');
			var translator_id = $(this).attr('data-id2');
			var currtitle=$(this).siblings().text();

			//alert('hello '+report_id);
			//modifyReportTitle(report_id, currtitle);
			modifyTranslator(report_id, translator_id);
		});


		function modifyTranslator(report_id) {
		var markup = '<div class="mfp-figure">'+
			'<div class="mfp-close"></div>'+
			'<div class="mfp-img"></div>'+
			'</div>';

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

		var d1 = $.get('/api/translator');
		var d2 = $.get('/api/mr/'+report_id);

		$.when(d1,d2).done(function (v1,v2) {

			var data = {
				translators: v1[0],
				mr: v2[0],
			};

			console.log(data);

			
			markup = '<div class="panel">'
			+ '<div class="panel-heading">'
			+ '<span class="panel-title">Translator</span>'
			+ '</div>'
			+ '<form>'

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

			+ '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4">Monthly Report</label>'
			+ '<div class="col-md-8">'
			+ '<p class="form-control-static">${mr.title}</p>'
			+ '</div>'
			+ '</div>'
            
            + '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4">Translator</label>'
			+ '<div class="col-md-8">'
			+ '<select id="mr_translator_id" class="select2-single form-control" style="width:100%;">'
			+ '<option value="">Select translator</option>'
			+ '{{for(j=0,j_cnt=translators.length;j<j_cnt;j++)}}'
			+ '{{if mr.translator_id == translators[j].user_id}}'
			+ '<option value="${translators[j].user_id}" selected>${translators[j].user.firstname} ${translators[j].user.lastname}</option>'
			+ '{{else}}'
			+ '<option value="${translators[j].user_id}">${translators[j].user.firstname} ${translators[j].user.lastname}</option>'
			+ '{{/if}}'
			+ '{{/for}}'
			+ '</select>'
			+ '</div>'
			+ '</div>'
		
			+ '<div class="text-center smart-widget"><button id="btn_mr_translator_modify" type="button" class="btn btn-primary">modify</button></div>'

			+ '</div>'

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

			$.template( "template", markup );
			$("#modal").html($.tmpl( "template", data ));

			//$(".select2-single").select2();

			$("#btn_mr_translator_modify").off('click');
			$("#btn_mr_translator_modify").on('click', function() {
				var input_obj = {
					translator_id: $('#mr_translator_id').val(),
				}
				$.ajax({
					method: "post",
					url: "/api/mr/"+report_id+"/translator",
					data: input_obj
				})
				.done(function( msg ) {
					location.reload();
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
			});
			

		});

		$.magnificPopup.open({
			items: {
				src: '#modal'
			},
			callbacks: {
				beforeOpen: function(e) {
					this.st.mainClass = 'mfp-zoomIn';
				}
			},
			midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
		});
	}	

	@endif	
		
});		
		
		
</script>

@elseif($auth->grade_id==4||$auth->grade_id==9)
<script>
jQuery(document).ready(function() {

$('select[name=sl_grade]').change(function(){
		console.log("선택된 값"+$('select[name=sl_grade]').val());
		var $selected_val=$('select[name=sl_grade]').val();
		
		if($selected_val=='school'||$selected_val=='state'){
			$('select[name=sl_search]').fadeOut(1000);
		
		}else{
			$('select[name=sl_search]').fadeIn(1000);
		}
	});
	
		if(($('select[name=sl_grade]').val()=='school')||($('select[name=sl_grade]').val()=='state')){
			$('select[name=sl_search]').hide();
		}


});
</script>
	
@endif
@endsection