@extends('layouts.app', ['activePage' => 'mailchimp', 'titlePage' => __('Mailchimp Lists')])

@section('content')
  <div class="content">
	<div class="container-fluid">

	  <div class="row">
 		<div class="col-xs-12 col-sm-12 col-md-12">
		  <div class="card">
			<div class="card-header card-header-primary">
				<h1 class="m-0">Lists</h1>  
			</div>
			 <div class="table-responsive p-2">
			@if($lists === false)
				<div class="alert alert-danger">
				 	Something went wrong fetching the lists.
				 </div>		
			@else
			 	<table class="table table-striped data-table">
					<thead class="bg-primary text-white">
						<th>Name</th>
						<th>ID</th>
						<th>Web ID</th>
						<th>Date Created</th>
						<th>Member Count</th>
					</thead>
						<tbody>
							@foreach($lists as $list)
								<tr>
									<td>{{$list->name}}</td>
									<td>
										<span class="badge badge-info click-to-copy p-2" data-target="input_id_{{$list->id}}">
											{{$list->id}} <i class="fa fa-copy"></i>
										</span>
										<input type="text" style="position:absolute;top:-99999%"; value="{{$list->id}}" name="input_id_{{$list->id}}" id="input_id_{{$list->id}}">
									</td>
									<td>
										<span class="badge badge-info click-to-copy p-2" data-target="input_webid_{{$list->id}}">
											{{$list->web_id}} <i class="fa fa-copy"></i>
										</span>
										<input type="text" style="position:absolute;top:-99999%"; value="{{$list->web_id}}" name="input_webid_{{$list->id}}" id="input_webid_{{$list->id}}">
									</td>
									<td>
										@php
											$date =  \Carbon\Carbon::createFromFormat('U', strtotime($list->date_created));
											echo $date->format('d/m/Y');
										@endphp
									</td>
									<td>
										<span class="badge badge-info p-2">
											{{$list->stats->member_count}}
										</span>
										<a class="btn btn-primary" href="{{route('mailchimp.listMembers',['listId'=>$list->id])}}">View Members</a>
									</td>
								</tr>
							@endforeach
						</tbody>
					<tfoot class="bg-primary text-white">
						<th>Name</th>
						<th>ID</th>
						<th>Web ID</th>
						<th>Date Created</th>
						<th>Member Count</th>
					</tfoot>		
				</table> 
			@endif
			 </div> 
			  
		  </div>
		</div>
	  </div>
	  
	  </div>
  </div>
@endsection

@push('js')
<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.dataTable').DataTable();
} );
</script>
@endpush