@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="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="active 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="bs-component">
	  <table class="table table-hover table-bordered">
		<thead>
		  <tr>
			<th class="text-center">No</th>
			<th class="text-center">Title</th>
			<th class="text-center">Student</th>
			<th class="text-center">Update Date</th>
			<th class="text-center">Delete</th>
		  </tr>
		</thead>
		<tbody>
		@for($i=0,$cnt=count($local->reports); $i<$cnt; $i++)
		  <tr>
			<td class="text-center">{{$cnt-$i}}</td>
			<td><a class="text-primary" href="/admin/local/{{ $local->user_id }}/report/{{ $local->reports[$i]->id }}">{{ $local->reports[$i]->title }}</a> <a href="javascript:" data-id="{{ $local->reports[$i]->id }}" style="text-decoration:none;" class="btn_report_title_edit"  ><span class="label label-sm label-default">edit</span></a></td>
			<td>{{ $local->reports[$i]->student ? $local->reports[$i]->student->user->firstname : '' }} {{ $local->reports[$i]->student ? $local->reports[$i]->student->user->lastname : '' }}</td>
			<td class="text-center">{{ $local->reports[$i]->updated_at }}</td>
			<td class="text-center"><button report_id="{{ $local->reports[$i]->id }}" class="btn btn-danger btn_report_delete">Delete</button></td>
		  </tr>
		@endfor
		@if(count($local->reports) <= 0)
		  <tr>
		    <td colspan="4" class="text-center">No result.</td>
		  </tr>
		@endif
		</tbody>
	  </table>
	</div>
  </div>
  <div class="text-right mt10"><button class="btn btn-primary btn_local_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() {
			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);
		});

		$('.btn_report_delete').on('click', function() {
			
			var report_id = $(this).attr('report_id');

			swal({   
				title: "Delete Report",
				text: '',
				type: "warning",
				html: true,
				allowOutsideClick: true,
				showCancelButton: true,
				cancelButtonText: "No",
				confirmButtonText: "Yes",
				closeOnConfirm: true
			},
			function(isConfirm){
				if(!isConfirm) return;
				$.ajax({
					method: "delete",
					url: "./report/"+report_id,
				})
				.done(function( msg ) {
					location.reload();
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
			});
			
		
			
			
			
		});

		$('.btn_local_report').on('click', function() {
			console.log("create report");
			var user_id = {{ $local->user_id }};
			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;
					$('#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
			});
		}
		
		
		
		
			$('.btn_report_title_edit').on('click', function() {
			var report_id = $(this).attr('data-id');
			var currtitle=$(this).siblings().text();
			console.log(currtitle);

			//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);
				});
				
				
			});

		
		
		
		
		
		
	}
		
		
		
		
	});
</script>
@endsection