@extends('layouts.admin')

@section('page-header')
Local Coordination List
@endsection


@section('content')
<style>
.table > thead > tr > th {
	vertical-align: middle;
}
.popup-basic{
	max-width: 550px
}
.btn-alert{
	background-color : #ff8f00;
}

.btn-alert:hover,
.btn-alert:focus,
.btn-alert:active,
.btn-alert.active,
.open > .dropdown-toggle.btn-alert {
  color: #ffffff;
  background-color: #d4855c;
  border-color: rgba(0, 0, 0, 0.05);
}

/* 2017.10.30. Local Coordination 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.Local_Coordination_list_table td:nth-of-type(1):before {
       content: "No";
   }
   table.Local_Coordination_list_table td:nth-of-type(2):before {
       content: "Name";
   }
   table.Local_Coordination_list_table td:nth-of-type(3):before {
       content: "Account ID";
   }
   table.Local_Coordination_list_table td:nth-of-type(4):before {
       content: "Gender";
   }
   table.Local_Coordination_list_table td:nth-of-type(5):before {
       content: "Phone";
   }
   table.Local_Coordination_list_table td:nth-of-type(6):before {
       content: "Location";
   }
   table.Local_Coordination_list_table td:nth-of-type(7):before {
       content: "Count H/F";
   }
   table.Local_Coordination_list_table td:nth-of-type(8):before {
       content: "Count Student";
   }
   table.Local_Coordination_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;
        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. Local 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_search">
		<option value="email" {{ Request::Input('sl_search') == 'email' ? 'selected' : '' }}>Email</option>
		<option value="name" {{ Request::Input('sl_search') == 'name' ? 'selected' : '' }}>Name(First or Last)</option>
		<option value="state" {{ Request::Input('sl_search') == 'state' ? 'selected' : '' }}>State</option>
		<option value="city" {{ Request::Input('sl_search') == 'city' ? 'selected' : '' }}>City</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/local/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" {{ $locals->perPage() == 25 ? 'selected' : '' }}>List 25</option>
		<option value="50" {{ $locals->perPage() == 50 ? 'selected' : '' }}>List 50</option>
		<option value="100" {{ $locals->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($locals->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 Local_Coordination_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">Name</th>
            <th class="text-center">Account ID</th>
            <th class="text-center">Gender</th>
            <th class="text-center">Phone</th>
            <th class="text-center">Location</th>
            <th class="text-center">Count<br />H/F</th>
            <th class="text-center">Count<br />Student</th>
            <th class="text-center" width="146">Comment</th>
          </tr>
        </thead>
        <tbody>
		@for ($i=0,$cnt=count($locals);$i<$cnt;$i++)
		
		<tr data-id="{{ $local->user_id }}">
			<td class="text-center">{{ $locals->total() - ($locals->perPage() * ($locals->currentPage()-1)) - $i }}</td>
			<td><a href="/admin/local/{{ $local->user_id }}">{{ $local->user->lastname }}, {{ $local->user->firstname }}</a></td>
			<td>
				{{ $local->user->email }}
				@if($local->user->is_block == 'Y')
				<span class="label label-sm label-danger">block</span>
				@endif
			</td>
			<td class="text-center">{{ $local->user->sex }}</td>
			<td class="text-center">{{ $local->inputPhone }}</td>
			<td>{{ $local->inputAddrCity }}</td>
			<td class="text-center"><a href="/admin/local/{{ $local->user_id }}/host">{{ $local->hosts->count() }}</a></td>
			<td class="text-center"><a href="/admin/local/{{ $local->user_id }}/student">{{ $local->students->count() }}</a></td>
			<td class="text-center">
				<button class="btn btn-alert btn_local_relation" data-toggle="tooltip" data-placement="bottom" title="relation"><i class="icon-zoom2 icon-users2"></i></button>
				<button class="btn btn-primary btn_user_comment" data-toggle="tooltip" data-placement="bottom" title="comments" style="position:relative;">
				<i class="fa fa-comment"  style="font-size:15px"></i>
				<span class="label label-rounded label-dark user-comment-label" data-user-id="{{ $local->user_id }}" style="position: absolute;right: -14px;top: -10px;padding: 0px 7px;border-radius: 100px;">{{ $local->user->comments->count() > 0 ? $local->user->comments->count() : '' }}</span>
				</button>
			</td>
		</tr>
		@endfor
	     @if (count($locals) <= 0)
	       <tr>
		     <td colspan="10" class="text-center">No search result.</td>
		   </tr>
	     @endif
        </tbody>
      </table>
    </div>
  </div>
</div>

<nav class="text-center">
	{{ $locals->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_local_relation').on('click', function() {
		var user_id = $(this).parent().parent().attr('data-id');
		getLocalRelation(user_id);
	});

  });
  </script>
@endsection