@extends('layouts.admin')

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


@section('content')

<style>

/* 2017.10.30. Report list page */

@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;
        display: block;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
    }

    /*고정값을 주게 되면 제목과 내용이 제대로 안나오는 문제 발생*/
    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%;*/
    }
   
.table-responsive > .table-bordered > thead > tr > th:first-child, .table-responsive > .table-bordered > tbody > tr > th:first-child, .table-responsive > .table-bordered > tfoot > tr > th:first-child, .table-responsive > .table-bordered > thead > tr > td:first-child, .table-responsive > .table-bordered > tbody > tr > td:first-child, .table-responsive > .table-bordered > tfoot > tr > td:first-child {
      background-color: #eee;
}

.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(2) {
      white-space: normal;
}

   /*
   Label the data 각 테이블마다 tr에 작성 된 제목을 지정해준다 
   */
   table.Report_list_table td:nth-of-type(1):before {
       content: "No";
   }
   table.Report_list_table td:nth-of-type(2):before {
       content: "Title";
   }
   table.Report_list_table td:nth-of-type(3):before {
       content: "Student";
   }
   table.Report_list_table td:nth-of-type(4):before {
       content: "H/F";
   }
   table.Report_list_table td:nth-of-type(5):before {
       content: "L/C";
   }
   table.Report_list_table td:nth-of-type(6):before {
       content: "Grade Card";
   }
   table.Report_list_table td:nth-of-type(7):before {
       content: "Submitted Date";
   }
   table.Report_list_table td:nth-of-type(8):before {
       content: "Translate";
   }
   table.Report_list_table td:nth-of-type(9):before {
       content: "Review by SA";
   }
   table.Report_list_table td:nth-of-type(10):before {
       content: "Delete";
   }
}


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

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


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

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

/* 2017.10.30. report Coordination list page */

</style>
<div class="form-inline">
<form name="search_list" class="form-horizontal">
<div class="row">
	<div class="col-sm-9">
		<select class="form-control" name="sl_grade">
		<option value="">Classification</option>
		<option value="6" {{ Request::Input('sl_grade') == '6' ? 'selected' : '' }}>Local coordinator</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="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>
	</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 mt5"> <!-- 17.10.30 lauren <div class="panel mt5 p10">  -->
  <div class="panel-body pn">

    <div class="table-responsive">
      <table class="table table-bordered table-hover Report_list_table" style="word-wrap:break-word;word-break:break-all;">
        <thead>
          <tr>
			<th width="80" class="text-center">No</th>
			<th class="text-center">Title</th>
			<th class="text-center">Student</th>
			<th class="text-center">H/F</th>
			<th class="text-center">L/C</th>
			<th class="text-center">Grade Card</th>
			<th class="text-center">Submitted Date</th>
			<th class="text-center">Translate</th>
			<th class="text-center">Review by SA</th>
			<th class="text-center">Delete</th>
          </tr>
        </thead>
        <tbody>
		@for($i=0,$cnt=count($reports); $i<$cnt; $i++)
				  <tr>
			<td class="text-center">{{ $reports->total() - ($reports->perPage() * ($reports->currentPage()-1)) - $i }}</td>
			<td><a href="/admin/report/{{ $report->id }}">{{ $report->title }}</a> <a href="javascript:" data-id="{{ $report->id }}" style="text-decoration:none;" class="btn_report_title_edit"  ><span class="label label-sm label-default">edit</span></a></td>
			<td><span style="color:grey;">{{ $report->student ? $report->student->user->firstname : '' }} {{ $report->student ? $report->student->user->lastname : '' }}</span> <br/>{{ $report->student ? $report->student->user->email : '' }}</td>
			<td><span style="color:grey;">{{ $report->host ? $report->host->user->firstname : '' }} {{ $report->host ? $report->host->user->lastname : '' }}</span><br/>{{ $report->host ? $report->host->user->email : '' }}</td>
			<td><span style="color:grey;">{{ $report->local ? $report->local->user->firstname : '' }} {{ $report->local ? $report->local->user->lastname : '' }}</span><br/>{{ $report->local ? $report->local->user->email : '' }}</td>
						<td class="text-center">{!!($grade_card_flag==1)?'<img src="/assets/img/userimg/grades.png"/>':''!!}</td>
			<td class="text-center">
			Jul/05/2025			
			</td>
			<td class="text-center"><span style="color:grey;"@if($report->translator) data-toggle="tooltip" data-placement="top" title="{{ $report->translator->email}}" @endif>{{ $report->translator ? $report->translator->firstname.' '.$report->translator->lastname : 'not selected' }}  <a href="javascript:" data-id="{{ $report->id }}" data-id2="{{ $report->translator ? $report->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($report->status_translator=='saved') inputting @elseif($report->status_translator=='submitted') complete @endif </td>
			<td class="text-center"><span style="color:grey;"@if($report->sa) data-toggle="tooltip" data-placement="top" title="{{ $report->sa->user->email}}" @endif>{{ $report->sa ? $report->sa->user->firstname : '' }} {{ $report->sa ? $report->sa->user->lastname : '' }}</span><br/>@if($report->status_review=='submitted')v @endif</td>
			<td class="text-center" style="padding:4px;"><button class="btn btn-danger btn_delete" data-id="{{ $report->id }}">Delete</a></td>
		  </tr>
		 @endfor
		@if(count($reports) <= 0)
		  <tr>
		    <td colspan="10" class="text-center">No result.</td>
		  </tr>
		@endif
        </tbody>
      </table>
	</div>
  </div>

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

  <!--<div class="text-left mt10"><button class="btn btn-primary btn_report"><i class="fa fa-stack-exchange"></i> Report Create</button></div>-->
</div>
<div id="modal" class="popup-basic admin-form mfp-with-anim mfp-hide"></div>
@endsection

@section('script')
<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();
		}


		$('.btn_delete').on('click', function() {
			var report_id = $(this).attr('data-id');

			swal({   
				title: "Delete Report?",
				text: '',
				type: "info",
				html: true,
				allowOutsideClick: true,
				showCancelButton: true,
				cancelButtonText: "No",
				confirmButtonText: "Yes",
				closeOnConfirm: true
			},
			function(isConfirm){
				if(!isConfirm) return;

				$.ajax({
					method: "delete",
					url: "/api/report/"+report_id
				})
				.done(function( msg ) {
					alert('delete success!');
					location.reload();
				})
				.fail(function( a ) {
				});
			});
			
		});
		
		
		
		$('.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);
		});
		
		
		$('.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 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);
				});
				
				
			});

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

	});
</script>
@endsection