@extends('layouts.admin')

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


@section('content')
<style>
.table > thead > tr > th {
	vertical-align: middle;
}

/* 2017.10.30. Agency 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%;*/
    }
   
      

   /*
   Label the data 각 테이블마다 tr에 작성 된 제목을 지정해준다 
   */
   table.agency_list_table td:nth-of-type(1):before {
       content: "No";
   }
   table.agency_list_table td:nth-of-type(2):before {
       content: "Account ID";
   }
   table.agency_list_table td:nth-of-type(3):before {
       content: "Name";
   }
   table.agency_list_table td:nth-of-type(4):before {
       content: "Country";
   }
   table.agency_list_table td:nth-of-type(5):before {
       content: "Gender";
   }
   table.agency_list_table td:nth-of-type(6):before {
       content: "Phone";
   }
   table.agency_list_table td:nth-of-type(7):before {
       content: "Count student";
   }
   table.agency_list_table td:nth-of-type(8):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. Agency 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_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_search">
		<option value="name" {{ Request::Input('sl_search') == 'name' ? 'selected' : '' }}>Name</option>
		<option value="phone" {{ Request::Input('sl_search') == 'phone' ? 'selected' : '' }}>Phone</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/agency/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" {{ $agencies->perPage() == 25 ? 'selected' : '' }}>List 25</option>
		<option value="50" {{ $agencies->perPage() == 50 ? 'selected' : '' }}>List 50</option>
		<option value="100" {{ $agencies->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($agencies->total()) }}</b> Records.</p>
	</div>
</div>

<div class="panel mt5">
  <div class="panel-body pn">
    <div class="bs-component">
		
      <table class="table table-bordered table-hover agency_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">Account ID</th>
            <th class="text-center">Name</th>
            <th class="text-center">Country</th>
            <th class="text-center">Gender</th>
            <th class="text-center">Phone</th>
            <th class="text-center">Count student</th>
            <th class="text-center">Comment</th>
          </tr>
        </thead>
        <tbody>
		@for ($i=0,$cnt=count($agencies);$i<$cnt;$i++)
		<br />
<b>Warning</b>:  Creating default object from empty value in <b>/home/anbeduca/public_html/anb-homestay/resources/views/admin/agency_list.blade.php</b> on line <b>181</b><br />
		<tr data-id="{{ $agency->user_id }}">
			<td class="text-center">{{ $agencies->total() - ($agencies->perPage() * ($agencies->currentPage()-1)) - $i }}</td>
			<td>
				<a href="/admin/agency/{{ $agency->user_id }}">{{ $agency->user->email }}</a>
				<a href="javascript:" style="text-decoration:none;" class="btn_account_info"><span class="label label-sm label-default">edit</span></a>
				@if($agency->user->is_block == 'Y')
				<span class="label label-sm label-danger">block</span>
				@endif
			</td>
			<td>{{ $agency->user->lastname }}, {{ $agency->user->firstname }}</td>
			<td class="text-center">{{ $agency->user->addr_street }} {{ $agency->user->addr_city }} {{ $agency->user->addr_state }}</td>
			<td class="text-center">{{ $agency->user->sex }}</td>
			<td class="text-center">{{ $agency->user->phone }}</td>
			<td class="text-center">
				<a href="/admin/agency/{{ $agency->user_id }}" @if($agency->students->count() > 0) data-toggle="tooltip" data-placement="top" title="{{ $agency->student_text }}"@endif >{{ $agency->students->count() }}</a>
			</td>
			<td class="text-center">
				<button class="btn btn-primary btn_user_comment" style="position:relative;" data-toggle="tooltip" data-placement="bottom" title="comments">
					<i class="fa fa-comment"></i>
					<span class="label label-rounded label-dark user-comment-label" data-user-id="{{ $agency->user_id }}" style="position: absolute;right: -14px;top: -10px;padding: 0px 7px;border-radius: 100px;">{{ $agency->user->comments->count() > 0 ? $agency->user->comments->count() : '' }}</span>
				</button>
			</td>
		</tr>
		@endfor
	     @if (count($agencies) <= 0)
	       <tr>
		     <td colspan="10" class="text-center">No search result.</td>
		   </tr>
	     @endif
        </tbody>
      </table>
    </div>
  </div>
</div>

<nav class="text-center">
	{{ $agencies->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')

    $('.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_agency_relation').on('click', function() {
		var user_id = $(this).parent().parent().attr('data-id');
		getAgencyRelation(user_id);
	});

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

		$.get('/api/agency/'+user_id, function(agency) {

			var markup = '<div class="mfp-figure">'+
            '<div class="mfp-close"></div>'+
            '<div class="mfp-img"></div>'+
            '</div>';
			$("#modal").html(markup);

			$.get('/api/agency/'+user_id+'/students', function(students) {

				var data = {
					students: students
				}

				markup = '<div class="panel">'
				+ '<div class="panel-heading">'
				+ '<span class="panel-title">Student List</span>'
				+ '<p class="panel-title">'+agency.user.email+'</p>'
				+ '<p style="margin:0;">('+agency.user.firstname+' '+agency.user.lastname+')</p>'
				+ '</div>'

				+ '<div class="form-inline panel-body p25" style="overflow-y:scroll;max-height:300px;">'

				+ '<div class="student_list section row mb10">'
				+ '<table class="table table-bordered">'
				+ '<tr style="background:#F5F5F5;">'
				+ '<th>No</th>'
				+ '<th>Name</th>'
				+ '<th>Country</th>'
				+ '<th>Gender</th>'
				+ '<th>Birth</th>'
				+ '<th>Status</th>'
				+ '</tr>'

				+ '{{for(j=0,j_cnt=students.length;j<j_cnt;j++)}}'
				+ '<tr>'
				+ '<td>${students[j].user.id}</td>'
				+ '<td>${students[j].user.firstname} ${students[j].user.lastname}</td>'
				+ '<td></td>'
				+ '<td>${students[j].user.sex}</td>'
				+ '<td>${students[j].user.birth}</td>'
				+ '<td></td>'
				+ '</tr>'
				+ '{{/for}}'

				+ '</table>'
				+ '</div>'

				+ '</div>'


				+ '<div class="panel-footer">'

				+ '<div class="section row mb10" style="height:200px;">'
				+ '<label for="grade" class="field-label col-md-4 text-right">Add student</label>'
				+ '<div class="col-md-8" style="position:relative;">'
				+ '<label for="search_student" class="field prepend-icon">'
				+ '<input type="text" id="search_student" class="gui-input" value="">'
				+ '<label for="search_student" class="field-icon">'
				+ '<i class="fa fa-user"></i>'
				+ '</label>'
				+ '</label>'
				+ '<ul id="search_student_list" style="position:absolute;width:100%;z-index:99;background:#fff;height:160px;border:solid 1px;overflow-y:scroll;padding: 0;list-style: none;display:none;">'
				+ '</ul>'
				+ '<input type="text" style="display:none;" id="tagmanager" class="form-control tm-input" placeholder="Create a new tag..">'
				+ '<div class="tag-container tags"></div>'
				+ '</div>'
				+ '</div>'

				+ '</div>'


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

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

				$("#search_student").off('keyup');
				$("#search_student").on('keyup', function() {
					if($(this).val() == '') {
						$("#search_student_list").html('');
						return;
					}
					$.get('/api/student?sl_search=email&sl_keyword='+$(this).val(), function(data) {
						var student_markup = '<li>'
						+ '<a href="#" user_id="${id}" class="btn_student_add gui-input">${email}</a>'
						+ '</li>';

						$.template( "template", student_markup );
						$("#search_student_list").html($.tmpl( "template", data.data ));
						$("#search_student_list").show();

						$(".btn_student_add").off('click');
						$(".btn_student_add").on('click', function() {
							$.post('/api/agency/'+agency.user.id+'/student', {'student_id':$(this).attr('user_id')}, function() {
								swal({   
									title: '등록하였습니다.'
								});

								$.get('/api/agency/'+user_id+'/students', function(students) {
									
									var data = {
										students: students
									}
									
									markup = '<table class="table table-bordered">'
									+ '<tr style="background:#F5F5F5;">'
									+ '<th>No</th>'
									+ '<th>Name</th>'
									+ '<th>Country</th>'
									+ '<th>Gender</th>'
									+ '<th>Birth</th>'
									+ '<th>Status</th>'
									+ '</tr>'

									+ '{{for(j=0,j_cnt=students.length;j<j_cnt;j++)}}'
									+ '<tr>'
									+ '<td>${students[j].user.id}</td>'
									+ '<td>${students[j].user.firstname} ${students[j].user.lastname}</td>'
									+ '<td></td>'
									+ '<td>${students[j].user.sex}</td>'
									+ '<td>${students[j].user.birth}</td>'
									+ '<td></td>'
									+ '</tr>'
									+ '{{/for}}'

									+ '</table>';

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

								});
							})
							.fail(function(a, b, c) {
								swal({   
									title: jQuery.parseJSON(a.responseText).msg
								});
							});
						});
					});
				});

				$("#search_student").off('focusout');
				$("#search_student").on('focusout', function() {
					setTimeout(function() {
						$("#search_student_list").hide();
					}, 300);
				});

				$("#search_student").off('focus');
				$("#search_student").on('focus', function() {
					if($(this).val() != '') {
						$("#search_student_list").show();
					}
				});
			});
		});

      $.magnificPopup.open({
        items: {src: '#modal'},
        callbacks: {beforeOpen: function(e) {this.st.mainClass = 'mfp-zoomIn';}},
		midClick: true
      });
	}

  });
  </script>
@endsection