@extends('layouts.admin')

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


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


/* 2017.11.10. role 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.role_list_table td:nth-of-type(1):before {
       content: "No";
   }
   table.role_list_table td:nth-of-type(2):before {
       content: "Classification";
   }
   table.role_list_table td:nth-of-type(3):before {
       content: "Account ID";
   }
   table.role_list_table td:nth-of-type(4):before {
       content: "First name";
   }
   table.role_list_table td:nth-of-type(5):before {
       content: "Last name";
   }
   table.role_list_table td:nth-of-type(6):before {
       content: "Gender";
   }
   table.role_list_table td:nth-of-type(7):before {
       content: "Register Date";
   }
   table.role_list_table td:nth-of-type(8):before {
       content: "Recent Login Date";
   }
   table.role_list_table td:nth-of-type(9):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;
    }
}


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

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

/* 2017.11.10. role 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="7" {{ Request::Input('sl_grade') == '7' ? 'selected' : '' }}>AnB Member</option>
		<option value="8" {{ Request::Input('sl_grade') == '8' ? 'selected' : '' }}>Program Manager</option>
		<option value="9" {{ Request::Input('sl_grade') == '9' ? 'selected' : '' }}>Translator</option>
		<option value="10" {{ Request::Input('sl_grade') == '10' ? 'selected' : '' }}>SA</option>
		@if($auth->grade_id >= 20)
		<option value="20" {{ Request::Input('sl_grade') == '8' ? 'selected' : '' }}>Admin</option>
		@endif
		</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>
		<a href="/{{ Request::path() }}" class="btn btn-info"><i class="fa fa-undo"> Reset</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" {{ $accounts->perPage() == 25 ? 'selected' : '' }}>List 25</option>
		<option value="50" {{ $accounts->perPage() == 50 ? 'selected' : '' }}>List 50</option>
		<option value="100" {{ $accounts->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($accounts->total()) }}</b> Records.</p>
	</div>
</div>

<div class="panel mt5">
  <div class="panel-body pn">
    <div class="bs-component">
      <table class="table table-striped table-bordered table-hover role_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">Classification</th>
            <th class="text-center">Account ID</th>
            <th class="text-center">First name</th>
            <th class="text-center">Last name</th>
            <th class="text-center">Gender</th>
            <th class="text-center">Register<br />Date</th>
            <th class="text-center">Recent<br />Login Date</th>
            <th class="text-center">Comment</th>
          </tr>
        </thead>
        <tbody>
		@for ($i=0,$cnt=count($accounts);$i<$cnt;$i++)
				<tr data-id="{{ $account->id }}">
			<td class="text-center">{{ $accounts->total() - ($accounts->perPage() * ($accounts->currentPage()-1)) - $i }}</td>
			<td>
				@if($account->grade_id == '2')
				<span class="label label-sm label-primary">{{ $account->grade->grade_name }}</span>
				@elseif($account->grade_id == '3')
				<span class="label label-sm label-system">{{ $account->grade->grade_name }}</span>
				@elseif($account->grade_id == '4')
				<span class="label label-sm label-alert">{{ $account->grade->grade_name }}</span>
				@elseif($account->grade_id == '5')
				<span class="label label-sm label-success">{{ $account->grade->grade_name }}</span>
				@elseif($account->grade_id == '6')
				<span class="label label-sm label-warning">{{ $account->grade->grade_name }}</span>
				@elseif($account->grade_id == '7')
				<span class="label label-sm btn-sbs">{{ $account->grade->grade_name }}</span>
				@elseif($account->grade_id == '8')
				<span class="label label-sm btn-hv">{{ $account->grade->grade_name }}</span>
				@elseif($account->grade_id == '9')
				<span class="label label-sm label-danger">{{ $account->grade->grade_name }}</span>
				@elseif($account->grade_id == '10')
				<span class="label label-sm label-alert">{{ $account->grade->grade_name }}</span>
				@elseif($account->grade_id == '20')
				<span class="label label-sm label-dark">{{ $account->grade->grade_name }}</span>
				@elseif($account->grade_id == '21')
				<span class="label label-sm label-dark">{{ $account->grade->grade_name }}</span>
				@endif
			</td>
			<td>
				@if($account->grade_id == 2) 
				<a href="/admin/student/{{$account->id}}">{{ $account->email }}</a>
				@elseif($account->grade_id == 4)
				<a href="/admin/agency/{{$account->id}}">{{ $account->email }}</a>
				@elseif($account->grade_id == 5)
				<a href="/admin/host/{{$account->id}}">{{ $account->email }}</a>
				@elseif($account->grade_id == 6)
				<a href="/admin/local/{{$account->id}}">{{ $account->email }}</a>
				@else
				{{ $account->email }}
				@endif
				<a href="javascript:" style="text-decoration:none;" class="btn_account_info"><span class="label label-sm label-default">edit</span></a>
				@if($account->is_block == 'Y')
				<span class="label label-sm label-danger">block</span>
				@endif
			</td>
			<td>{{ $account->firstname }}</td>
			<td>{{ $account->lastname }}</td>
			<td class="text-center">{{ $account->sex }}</td>
			<td class="text-center">
			Jul/05/2025			</td>
			<td class="text-center">
			Jul/05/2025			</td>
			<td class="text-center" style="padding:4px;">
				<button class="btn btn-primary btn_user_comment" data-effect="mfp-zoomIn" style="position:relative;" data-toggle="tooltip" data-placement="left" title="comments">
				<i class="fa fa-comment"></i>
				<span class="label label-rounded label-dark user-comment-label" data-user-id="{{ $account->id }}" style="position: absolute;right: -14px;top: -10px;padding: 0px 7px;border-radius: 100px;">{{ $account->comments->count() > 0 ? $account->comments->count() : '' }}</span>
				</button>
			</td>
		</tr>
		@endfor
	     @if (count($accounts) <= 0)
	       <tr>
		     <td colspan="9" class="text-center">No search result.</td>
		   </tr>
	     @endif
        </tbody>
      </table>
    </div>
  </div>
</div>
<div class="text-left smart-widget">
	<a href="/admin/role/write" class="btn btn-primary">Add</a>
</div>

<nav class="text-center">
	{{ $accounts->appends(Request::only('sl_grade', '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');
		getAccountInfoRole(user_id);
    });

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

  });
  </script>
@endsection