@extends('layout')

@section('content')
<div class="" ng-controller="ClubController" ng-init="getList();">

	<div class="page-header row">
		<div class="col-md-6">
			<h3>Clubs</h3>
		</div>
		<div class="col-md-6 text-right">
			<button class="btn btn-primary" ng-click="addClub()"><i class="icons icon-plus"></i> Add New</button>
		</div>
	</div>
		
	<div class="portlet">

		<div class="portlet-body no--pad ng-cloak">
			<div table-paginate></div>

			<div class="filters" ng-if="filter.show">
				<form name="filterForm" ng-submit="" novalidate>
					<div class="row" style="font-size: 14px">
						
						<div class="col-md-2">
                            <div class="form-group">
                                <label>Club Name</label>
                                <input type="text" class="form-control" ng-model="filter.club_name">
                            </div>
                        </div>


                        <div class="col-md-2 form-group">     
							<button ng-click="searchList()" class="btn btn-primary" style="margin-top: 25px;">Apply</button>
							<button ng-click="clearFilter()" class="btn btn-danger" ng-disabled="clearing" style="margin-top: 25px;">Clear <span ng-show="clearing" class="spinner-border spinner-border-sm" ></span></button>
                        </div>

					</div>
				</form>
			</div>

			<div ng-if="loading" class="text-center mt-5 mb-5">
		      <div class="spinner-grow" role="status">
		        <span class="sr-only">Loading...</span>
		      </div>
		    </div>

		    <div ng-if="dataset.length == 0 && !loading">
				@include('common.no_found',["message" => "No details found"])
			</div>
			
			<div class="table-cont" ng-if="dataset.length > 0">
				<table class="table">
					<thead>
						<tr class="">
							<th>SN</th>
							<th>Club</th>
							<th>City</th>
							<th>Team Type</th>
							<th class="text-right">#</th>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="club in dataset track by $index">
							<td>@{{ (filter.page_no - 1)*filter.max_per_page + $index + 1 }}</td>
							<td>
								<img ng-src="@{{club.logo_url}}" style="max-width:50px; height: auto" ng-if="club.logo" /> 
								<b>@{{club.club_name}}</b>
							</td>
							<td>@{{club.city_name}}</td>
							<td>@{{club.team_type_name}}</td>
							<td class="text-right">
								<button class="btn-light btn btn-sm" ng-click="editClub(club)">Edit</button>
								<button class="btn btn-primary btn-sm" ng-click="addUser(club)">Users</button>
								<button class="btn btn-primary btn-sm" ng-click="getTournaments(club.id)">Tournaments</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>

		</div>
	</div>
	
	@include("clubs.modal")

</div>
@endsection