@extends('backend.layouts.app')
@section('content')
<div class="col-xl-12">
	<div class="breadcrumb-holder">
		<h1 class="main-title float-left">Member Directory Report</h1>
		<ol class="breadcrumb float-right">
			<li class="breadcrumb-item">Home </li>
			<li class="breadcrumb-item">Golf Operation </li>
			<li class="breadcrumb-item">Member Management </li>
			<li class="breadcrumb-item">Report </li>
			<li class="breadcrumb-item active">Member Diretory Report</li>
		</ol>
		<div class="clearfix"></div>
	</div>
</div>
<div class="container-fluid">
	<div class="col-md-12">			
		<div class="card">
			<div class="card-header">
				<h3 class="card-title pull-left">Member List</h3>
				<a href="{{route('golf-operation.members.report.member-directory-pdf', request()->all())}}" target="_blank" class="btn btn-sm btn-primary pull-right"><i class="fa fa-print"></i></a>
			</div>
			<div class="card-body">
				<form method="get">
					<div class="row">
						<div class="col-sm-2">
							<div class="form-group">
								<label class="control-label">Per Page</label>
								<select class="form-control change-per-page" name="per_page">
									<option value="50" @if(request()->per_page == 50) selected @endif>50</option>
									<option value="100" @if(request()->per_page == 100) selected @endif>100</option>
									<option value="200" @if(request()->per_page == 200) selected @endif>200</option>
									<option value="300" @if(request()->per_page == 300) selected @endif>300</option>
									<option value="400" @if(request()->per_page == 400) selected @endif>400</option>
									<option value="500" @if(request()->per_page == 500) selected @endif>500</option>
								</select>
							</div>
						</div>
						<div class="col-sm-2">
							<div class="form-group">
								<label class="tontrol-label">Name</label>
								<input type="text" name="name" value="{{request()->name}}" class="form-control" />
							</div>
						</div>
						<div class="col-sm-2">
							<div class="form-group">
								<label class="tontrol-label">Memb. No.</label>
								<input type="text" value="{{request()->application_id}}" name="application_id" class="form-control" />
							</div>
						</div>
						<div class="col-sm-2">
							<div class="form-group">
								<label class="tontrol-label">Category</label>
								<select name="member_category_id" class="form-control select2">
									<option value="">Select Category</option>
									@foreach($categories as $category)
										<option value="{{$category->id}}" @if(request()->member_category_id == $category->id) selected @endif>{{$category->name}}</option>
									@endforeach
								</select>
							</div>
						</div>
						<div class="col-sm-2">
							<div class="form-group">
								<label class="tontrol-label">Monthly Sub Type</label>
								<select class="form-control form-control-sm" name="monthly_sub_type">
									<option value="">Select Monthly Sub Type</option>
									<option value="Full Member" @if(request()->monthly_sub_type == 'Full Member') selected @endif>Full Member</option>
									<option value="Single" @if(request()->monthly_sub_type == 'Single') selected @endif>Single</option>
									<option value="Family" @if(request()->monthly_sub_type == 'Family') selected @endif>Family</option>
								</select>
							</div>
						</div>
						<div class="col-sm-2" style="padding-top: 25px;">
							<button type="submit" class="btn btn-primary">Search</button>
						</div>						
					</div>
				</form>
				<div class="table-responsive">
					<table class="table table-bordered table-sm">
						<thead>
							<tr>
								<th style="width: 100px;" class="text-center">Serial</th>
								<th class="text-center">Photo</th>
								<th class="text-center" style="width: 150px;">Name</th>
								<th class="text-center">Membership No</th>
								<th class="text-center">Category</th>
								<th class="text-center">Date of Birth</th>
								<th class="text-center">Mon Sub Type</th>
								<th class="text-center">Blood Group</th>							
								<th class="text-center">Mobile</th>							
								<th class="text-center">Email</th>							
								<th class="text-center">Handicap</th>														
								<th class="text-center" style="width: 180px;">Address</th>																					
							</tr>
						</thead>
						<tbody>
							@foreach($members as $member)
							<tr>
								<td class="text-center">{{(($members->currentPage()-1)* $members->perPage())+$loop->index+1}}</td>
								<td>
									@if(file_exists($member->member_photo))
								  	<img src="{{ asset($member->member_photo) }}" alt="{{ $member->full_name }}" style="height: 50px; width: auto;">
								  	@else
								    <img src="http://placehold.it/50x50" alt="{{ $member->full_name }}" style="height: 50px; width: 50px;">
								    @endif
								</td>
								<td class="text-center">{{$member->full_name}}</td>
								<td class="text-center">{{$member->membership_no}}</td>
								<td class="text-center">{{$member->category?$member->category->name:''}}</td>
								<td class="text-center">{{$member->dob}}</td>
								<td class="text-center">{{$member->monthly_sub_type}}</td>
								<td class="text-center">{{$member->blood_group}}</td>
								<td class="text-center">{{$member->mobile_number}}</td>
								<td class="text-center">{{$member->email}}</td>
								<td class="text-center">{{$member->handicap}}</td>								
								<td class="text-center">{{$member->present_address}}</td>								
							</tr>
							@endforeach
						</tbody>
						<tfoot>
							<tr>
								<th colspan="100%">
									{{$members->appends(request()->except(['page']))->links()}}
								</th>
							</tr>
						</tfoot>
					</table>
				</div>												
			</div>
			<div class="card-footer text-right">
									
			</div>
		</div>		
	</div>
</div>
@endsection
@section('page_script')
<script type="text/javascript">
	$(function(){								
		$('.single-date-picker').daterangepicker({
			singleDatePicker: true,
			showDropdowns: true,
			locale: {
		      format: 'YYYY-MM-DD'
		    }
		});

		$('.change-per-page').on('change', function(e){			
			$(this).closest('form').submit();
		});						
	});
</script>

<style type="text/css">
	table th, table td {
		font-size: 10px;
	}
</style>
@endsection