@extends('layouts.admin')

@section('page-header')
Student List
@endsection


@section('content')
<style>
.table > thead > tr > th {
	vertical-align: middle;
}
.grade_up, .grade_down{
	cursor:pointer;
}
.grade_notallowed{
	cursor:not-allowed;
}



/* 2017.10.30. Student List from lauren*/

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
    /* Force table to not be like tables anymore */
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
        float: left;
        /* ie9 fix */
        width: 100%;
        clear: both;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    tr {
        border: 1px solid #ccc;
    }
    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        word-break: break-all;
        white-space: normal;
    
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
	}
	
	/* 10번째 학교 이름이 자동 행 분리가 안되어 강제 적용 */
.table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td:nth-child(10) {
      white-space: normal;
}
    /*고정값을 주게 되면 제목과 내용이 제대로 안나오는 문제 발생*/
    td:before {
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        float: left;
        width: 45%;
        padding: 0 0 0 1%;
        /*  margin-left:-100%;*/
    }
   
      
    /* 제목 줄바꿈 */
    td:nth-child(9):before {
        white-space: normal;
        width:40%;
        padding-right:40px;
    }
   
    td:nth-child(15):before {
        white-space: normal;
        width:40%;
        padding-right:40px;
    }
   /*
   Label the data 각 테이블마다 tr에 작성 된 제목을 지정해준다 
   */
   table.student_list_table td:nth-of-type(1):before {
       content: "No";
   }
   table.student_list_table td:nth-of-type(2):before {
       content: "Acc ID";
   }
   table.student_list_table td:nth-of-type(3):before {
       content: "Agency";
   }
   table.student_list_table td:nth-of-type(4):before {
       content: "State";
   }
   table.student_list_table td:nth-of-type(5):before {
       content: "Student name";
   }
   table.student_list_table td:nth-of-type(6):before {
       content: "Student ID";
   }
   table.student_list_table td:nth-of-type(7):before {
       content: "Gender";
   }
   table.student_list_table td:nth-of-type(8):before {
       content: "Grade";
   }
   table.student_list_table td:nth-of-type(9):before {
       content: "Program starting year";
   }
   table.student_list_table td:nth-of-type(10):before {
       content: "School";
   }
   table.student_list_table td:nth-of-type(11):before {
       content: "H/F";
   }
   table.student_list_table td:nth-of-type(12):before {
       content: "L/C";
   }
   table.student_list_table td:nth-of-type(13):before {
       content: "P/C";
   }
   table.student_list_table td:nth-of-type(14):before {
       content: "Flight Status";
   }
   table.student_list_table td:nth-of-type(15):before {
       content: "Document Status";
   }
   table.student_list_table td:nth-of-type(16):before {
       content: "Status";
   }
   table.student_list_table td:nth-of-type(17):before {
       content: "Comment";
   }
}


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

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


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

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

/* 2017.10.30. Student List page */


</style>
<div class="form-inline">
<form name="search_list" class="form-horizontal">
<div class="row">
	<div class="col-sm-9">
		<fieldset style="border:solid 1px #c0c0c0;margin: 0 2px 16px 2px;padding: 0.35em 0.625em 0.75em;">
			<legend style="margin-bottom:5px;border:none;width:auto;">Semester Applying</legend>
			<select class="form-control" name="sl_semester">
				<option value="">spring, fall</option>
				<option value="spring" {{ Request::Input('sl_semester') == 'spring' ? 'selected' : '' }}>spring</option>
				<option value="fall" {{ Request::Input('sl_semester') == 'fall' ? 'selected' : '' }}>fall</option>
			</select>
			<select class="form-control" name="sl_semester_year">
				<option value="">all</option>
				@for($i=2010;$i<date('Y')+5;$i++)
				<option { Request::Input('sl_semester_year') == $i ? 'selected' : '' }}>{{$i}}</option>
				@endfor
			</select>
		</fieldset>

		<select class="form-control" name="sl_country">
		<option value="">Country of Origin</option>
		<option value="usa">USA</option>
		<option value="china">China</option>
		<option value="korea">Korea</option>
		</select>

		<select class="form-control" name="sl_document_status">
		<option value="">Document Status</option>
		<option value="process" {{ Request::Input('sl_document_status') == 'process' ? 'selected' : '' }}>Process</option>
		<option value="completed" {{ Request::Input('sl_document_status') == 'completed' ? 'selected' : '' }}>Completed</option>
		<option value="cancelled" {{ Request::Input('sl_document_status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
		<option value="edited" {{ Request::Input('sl_document_status') == 'edited' ? 'selected' : '' }}>Edited</option>
		</select>

		<select class="form-control" name="sl_status">
		<option value="">Status</option>
		<option value="new" {{ Request::Input('sl_status') == 'new' ? 'selected' : '' }}>New</option>
		<option value="reentry" {{ Request::Input('sl_status') == 'reentry' ? 'selected' : '' }}>Re-entry</option>
		<option value="application" {{ Request::Input('sl_status') == 'application' ? 'selected' : '' }}>Application</option>
		<option value="invoice" {{ Request::Input('sl_status') == 'invoice' ? 'selected' : '' }}>Invoice</option>
		<option value="pc" {{ Request::Input('sl_status') == 'pc' ? 'selected' : '' }}>P/C</option>
		<option value="flight" {{ Request::Input('sl_status') == 'flight' ? 'selected' : '' }}>Flight</option>
		<option value="changehf" {{ Request::Input('sl_status') == 'changehf' ? 'selected' : '' }}>Change H/F</option>
		<option value="finished" {{ Request::Input('sl_status') == 'finished' ? 'selected' : '' }}>Finished</option>
		<option value="springsemester" {{ Request::Input('sl_status') == 'springsemester' ? 'selected' : '' }}>Spring semester</option>
		<option value="fallsemester" {{ Request::Input('sl_status') == 'fallsemester' ? 'selected' : '' }}>Fall semester</option>
		<option value="warning" {{ Request::Input('sl_status') == 'warning' ? 'selected' : '' }}>Warning</option>
		</select>

		<select class="form-control" name="sl_search">
		<option value="name" {{ Request::Input('sl_search') == 'name' ? 'selected' : '' }}>Name(First or Last)</option>
		<option value="email" {{ Request::Input('sl_search') == 'email' ? 'selected' : '' }}>Account ID</option>
		<option value="lc_name" {{ Request::Input('sl_search') == 'lc_name' ? 'selected' : '' }}>L/C Name</option>
		<option value="hf_name" {{ Request::Input('sl_search') == 'hf_name' ? 'selected' : '' }}>H/F Name</option>
		<option value="agency_name" {{ Request::Input('sl_search') == 'agency_name' ? 'selected' : '' }}>Agency Name</option>
		<option value="state" {{ Request::Input('sl_search') == 'state' ? 'selected' : '' }}>State</option>
		<option value="school_name" {{ Request::Input('sl_search') == 'school_name' ? 'selected' : '' }}>School</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>
		<a href="/{{ Request::path() }}" class="btn btn-info"><i class="fa fa-undo"> Reset</i></a>
		<a href="/admin/student/excel" class="btn btn-success"><i class="fa fa-file-text-o"> Excel Download</i></a>
	</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" {{ $students->perPage() == 25 ? 'selected' : '' }}>List 25</option>
		<option value="50" {{ $students->perPage() == 50 ? 'selected' : '' }}>List 50</option>
		<option value="100" {{ $students->perPage() == 100 ? 'selected' : '' }}>List 100</option>
		</select>
	</div>
</div>
</form>
</div>

<div class="row mt20">
	<div class="col-xs-6">
		<p style="margin-bottom:0px;height:41px;line-height: 41px;">* Total <b>{{ number_format($students->total()) }}</b> Records.</p>
	</div>
</div>

<div class="panel mt5">
  <div class="panel-body pn">
    <div class="table-responsive">
		
      <table class="table table-striped table-bordered table-hover student_list_table" style="width:2000px;word-wrap:break-word;word-break:break-all;">
        <thead>
          <tr>
            <th width="80" class="text-center">No</th>
            <th class="text-center">Acc ID</th>
            <th class="text-center">Agency</th>
            <th class="text-center">State</th>
            <th class="text-center">Student<br>name</th>
            <th class="text-center">Student ID</th>
            <th class="text-center">Gender</th>
			<th class="text-center">Grade</th>
            <th class="text-center">Program<br>starting<br>year</th>
            <th class="text-center">School</th>
            <th class="text-center">H/F</th>
            <th class="text-center">L/C</th>
            <th class="text-center">P/C</th>
			<th class="text-center">Flight<br>Status</th>
			<th class="text-center">Document<br>Status</th>
			<th class="text-center">Status</th>
            <th class="text-center">Comment</th>
          </tr>
        </thead>
        <tbody>
		@for($i=0,$cnt=count($students);$i<$cnt;$i++)
				<tr data-id="{{ $student->user_id }}">
			<td class="text-center">{{ $students->total() - ($students->perPage() * ($students->currentPage()-1)) - $i }}</td>
			<td>
				<a href="/admin/student/{{ $student->user_id }}">{{ $student->user->email }}</a>
				@if($student->user->is_block == 'Y')
				<span class="label label-sm label-danger">block</span>
				@endif
			</td>
			<td>{{ $student->agency ? $student->agency->user->lastname : '' }}, {{ $student->agency ? $student->agency->user->firstname : '' }}</td>
			<td>{{ $student->inputState }}</td>
			<td class="text-center">{{ $student->user->lastname }}, {{ $student->user->firstname }}</td>
			<td class="text-center">{{ $student->user->student_id }}</td>
			<td class="text-center">{{ $student->user->sex }}</td>
						<td class="text-center">@if($grade==12)<div class="grade_notallowed">@else<div class="grade_up">@endif▲</div><div class="grade">{{$grade}}</div>@if($grade==1)<div class="grade_notallowed">@else<div class="grade_down">@endif▼</div></td>
			<td class="text-center">{{ $student->inputSemester }}</td>
			<td class="text-center">{{ $student->school ? $student->school->school_name : '' }}</td>
			<td class="text-center">{{ $student->host ? $student->host->user->lastname : '' }}, {{ $student->host ? $student->host->user->firstname : '' }}</td>
			<td class="text-center">{{ $student->local ? $student->local->user->lastname : '' }}, {{ $student->local ? $student->local->user->firstname : '' }}</td>
			
			
		
		
			
			
			
			
			<td class="text-center pc">
				@if($student->status_pc > 0)
				<span class="fa fa-check"></span>
				@endif
			</td>
			<td class="text-center flight">
				@if($student->status_flight > 0)
				<span class="fa fa-check"></span>
				@endif
			</td>
			<td class="text-center" style="padding:4px;">
				<button data-value="{{ $student->document_status }}" data-id="{{ $student->user_id }}" class="btn btn-success btn_document_status_change" data-toggle="tooltip" data-placement="bottom" title="student document status">{{ ucfirst($student->document_status) }}</button>
			</td>
			<td class="text-center" style="padding:4px;">
				@if($student->status_new)
					<button data-value="new" data-id="{{ $student->user_id }}" class="btn btn-warning btn_status_change" data-toggle="tooltip" data-placement="bottom" title="student status" style="display:block;">New</button>
				@endif
				@if($student->status_reentry)
					<button data-value="re-entry" data-id="{{ $student->user_id }}" class="btn btn-warning btn_status_change" data-toggle="tooltip" data-placement="bottom" title="student status" style="display:block;">Re-entry</button>
				@endif
				@if($student->status_application)
					<button data-value="application" data-id="{{ $student->user_id }}" class="btn btn-warning btn_status_change" data-toggle="tooltip" data-placement="bottom" title="student status" style="display:block;">Application</button>
				@endif
				@if($student->status_invoice)
					<button data-value="invoice" data-id="{{ $student->user_id }}" class="btn btn-warning btn_status_change" data-toggle="tooltip" data-placement="bottom" title="student status" style="display:block;">Invoice</button>
				@endif
				@if($student->status_pc)
					<button data-value="p/c" data-id="{{ $student->user_id }}" class="btn btn-warning btn_status_change" data-toggle="tooltip" data-placement="bottom" title="student status" style="display:block;">P/C</button>
				@endif
				@if($student->status_flight)
					<button data-value="flight" data-id="{{ $student->user_id }}" class="btn btn-warning btn_status_change" data-toggle="tooltip" data-placement="bottom" title="student status" style="display:block;">Flight</button>
				@endif
				@if($student->status_changehf)
					<button data-value="change h/f" data-id="{{ $student->user_id }}" class="btn btn-warning btn_status_change" data-toggle="tooltip" data-placement="bottom" title="student status" style="display:block;">Change H/F</button>
				@endif
				@if($student->status_finished)
					<button data-value="finished" data-id="{{ $student->user_id }}" class="btn btn-warning btn_status_change" data-toggle="tooltip" data-placement="bottom" title="student status" style="display:block;">Finished</button>
				@endif
				@if($student->status_springsemester)
					<button data-value="spring semester" data-id="{{ $student->user_id }}" class="btn btn-warning btn_status_change" data-toggle="tooltip" data-placement="bottom" title="student status" style="display:block;">Spring semester</button>
				@endif
				@if($student->status_fallsemester)
					<button data-value="fall semester" data-id="{{ $student->user_id }}" class="btn btn-warning btn_status_change" data-toggle="tooltip" data-placement="bottom" title="student status" style="display:block;">Fall semester</button>
				@endif
				@if($student->status_warning)
					<button data-value="warning" data-id="{{ $student->user_id }}" class="btn btn-warning btn_status_change" data-toggle="tooltip" data-placement="bottom" title="student status" style="display:block;">Warning</button>
				@endif
			</td>
			<td class="text-center" style="padding:4px;">
				<button class="btn btn-primary btn_user_comment" style="position:relative;" data-toggle="tooltip" data-placement="bottom" title="comments">
				<i class="fa fa-comment"  style="font-size:15px"></i>
				<span class="label label-rounded label-dark user-comment-label" data-user-id="{{ $student->user_id }}" style="position: absolute;right: -14px;top: -10px;padding: 0px 7px;border-radius: 100px;">{{ $student->user->comments->count() > 0 ? $student->user->comments->count() : '' }}</span>
				</button>
			</td>
		</tr>
		@endfor

	     @if (count($students) <= 0)
	       <tr>
		     <td colspan="17" class="text-center">No search result.</td>
		   </tr>
	     @endif
        </tbody>
      </table>
    </div>
  </div>
</div>

<nav class="text-center">
	{{ $students->appends(Request::only('sl_search', 'sl_keyword', 'page_size'))->links() }}
</nav>


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



@section('script')>

  <script type="text/javascript">
  jQuery(document).ready(function() {

    "use strict";

	@include('admin_common_script')
	//$('.table-responsive').css({'overflow-x' : '', 'overflow-y' : ''});
	//start table scroll below
	$('.table-responsive').css('overflow-x','visible');
	$('.table-responsive').css('overflow-y','visible');
	$('.table-bordered > tbody > tr > td').css('background-color','#ffffff');
	$('.table-striped > tbody > tr:nth-child(odd) > td').css('background-color','#f9f9f9');
	$('.table > thead:first-child > tr:first-child > th').css('background-color','#ffffff');
	//end table scroll below
	
	$('.btn_account_info').on('click', function() {
		var user_id = $(this).parent().parent().attr('data-id');
		getAccountInfo(user_id);
    });

	$('.btn_user_comment').on('click', function() {
		var user_id = $(this).parent().parent().attr('data-id');
		getUserComments(user_id);
	});

	$('.btn_student_relation').on('click', function() {
		var user_id = $(this).parent().parent().attr('data-id');
		getStudentRelation(user_id);
	});

	$('.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);
	});

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

		$.get('/api/host', function(hosts) {
		$.get('/api/local', function(locals) {
			$.get('/api/student/'+user_id, function(data) {
				console.log(data);

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

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

				+ '<div class="section row mb10">'
				+ '<label for="grade" class="field-label col-md-4">Student account</label>'
				+ '<div class="col-md-8">'
				+ '<p class="form-control-static">'+data.user.email+'</p>'
				+ '</div>'
				+ '</div>'

				+ '<div class="section row mb10">'
				+ '<label for="grade" class="field-label col-md-4">Host family</label>'
				+ '<div class="col-md-8">'
				+ '<select id="relation_hf_id" class="form-control" style="width:100%;">'
				+ '<option value="">Select H/F</option>';

				for(var j=0,cnt_j=hosts.length;j<cnt_j;j++) {
					if(data.host_family_id == hosts[j].user_id) {
						markup += '<option value="'+hosts[j].user_id+'" selected>'+hosts[j].lc_name+' | '+hosts[j].lc_state_code+'</option>';
					}
					else {
						markup += '<option value="'+hosts[j].user_id+'">'+hosts[j].lc_name+' | '+hosts[j].lc_state_code+'</option>';
					}
				}

				markup += '</select>'
				+ '</div>'
				+ '</div>'

				+ '<div class="section row mb10">'
				+ '<label for="grade" class="field-label col-md-4">Local coordinator</label>'
				+ '<div class="col-md-8">'
				+ '<select id="relation_lc_id" class="form-control" style="width:100%;">'
				+ '<option value="">Select L/C</option>';

				for(var j=0,cnt_j=locals.length;j<cnt_j;j++) {
					if(data.local_coordinator_id == locals[j].user_id) {
						markup += '<option value="'+locals[j].user_id+'" selected>'+locals[j].lc_name+' | '+locals[j].lc_state_code+'</option>';
					}
					else {
						markup += '<option value="'+locals[j].user_id+'">'+locals[j].lc_name+' | '+locals[j].lc_state_code+'</option>';
					}
				}

				markup += '</select>'
				+ '</div>'
				+ '</div>'

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

				+ '</div>'

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

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

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

					var input_obj = {
						host_family_id: $('#relation_hf_id').val(),
						local_coordinator_id: $('#relation_lc_id').val(),
					}
					$.ajax({
						method: "post",
						url: "/api/student/"+user_id+"/relation",
						data: input_obj
					})
					.done(function( msg ) {
						alert('Success Modify.');
					})
					.fail(function( a ) {
						alert(a.responseJSON.msg);
					});
				});
			});
			

			$(this).removeClass('active-animation');
			$(this).addClass('active-animation item-checked');

			// Inline Admin-Form example 
			$.magnificPopup.open({
				removalDelay: 500, //delay removal by X to allow out-animation,
				items: {
					src: '#modal-relation'
				},
				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.
			});
		});
		});
	}



	$('.grade_up, .grade_down').on('click', function() {
		var user_id = $(this).parent().parent().attr('data-id');
		var grade=$(this).siblings('.grade').html();
		console.log("user_id"+user_id);
		var grade_value="";
		if(grade==0){
			alert("You must complete Student Online Application.");
			return;
		}

		if($(this).hasClass('grade_up')){
			grade_value="grade_up";
		}
		else if($(this).hasClass('grade_down')){
			grade_value="grade_down";
		}
		
		var input_obj = {
					grade: grade_value,
		}

		$.ajax({
					method: "post",
					url: "/api/student/"+user_id+"/graderepeat",
					data: input_obj
				})
				.done(function( msg ) {
					alert('complete modify');
					location.reload();
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
		
    });

  });
  </script>
@endsection