{{-- mainLayouts extends --}}
@extends('layouts.contentLayoutMaster')

{{-- Page title --}}
@section('title', 'Banner List')

@section('content')
<section class="users-list-wrapper section">
    <div class="users-list-table">
      <div class="card">
		<div class="row pl-1 pr-1">
			<h5 class="col s6"><b>Banner</b></h5>
		</div>
        <div class="card-content pt-0">
          <!-- datatable start -->
          <div class="responsive-table">
            <div class="center">
                {{$banners->links()}}
            </div>
            <table id="users-list-datatable" class="table responsive-table striped">
              <thead class="grey lighten-2">
                <tr>
                  <th></th>
                  <th>#</th>
				  <th>Banner Image</th>
				  <th>Created</th>
				  <th>Created By</th>
				  <th>Banner status</th>
                  {{-- <th>Description</th> --}}
                  <th></th>
                </tr>
              </thead>
              <tbody>
                  @forelse ($banners as $key => $banner)
                  	<tr>
						<td></td>
						<td>{{$key + $banners->firstItem()}}</td>
						<td><img src="{{url($banner->image)}}" alt="" width="100"></td>
						<td>{{ $banner->created_time }}</td>
						<td>Admin</td>
						<td>
							<form action="{{route('admin.banner.status.active', $banner->id)}}" method="post" id="banner-status-form-{{ $banner->id }}">
								@csrf
								@method('PUT')
								<p>Is Active</p>
								<p>
									<label>
										<input class="validate" value="1"  name="status" type="radio" onchange="changeStatus({{ $banner->id }})"
											@if ($banner->is_active == true)
												checked
											@endif
										/>
										<span>Yes</span>
									</label>
									<label>
										<input class="validate" value="0" name="status" type="radio" onchange="changeStatus({{ $banner->id }})"
											@if ($banner->is_active == false)
												checked
											@endif
										/>
										<span>No</span>
									</label>
								</p>
								{{-- @if ($banner->is_active == true)
									<input type="hidden" name="inactive" value="1">
									<button type="submit" class="chip red custom"><span class="white-text">Inactive</span></button>
								@else
									<input type="hidden" name="active" value="0">
									<button type="submit" class="chip green lighten-5 custom"><span class="green-text">Active</span></button>
								@endif --}}
							</form>
						</td>
						{{-- <td>{{$banner->description}}</td> --}}
						{{-- <td><a href="{{route('admin.banners.show',$banner->id)}}"><i class="material-icons">remove_red_eye</i></a></td> --}}
						<td>
							<div class="right">
								<form action="{{ route('admin.banners.destroy', $banner->id) }}" method="POST" onsubmit="return confirm('Are You Sure?');" style="display: inline-block;">
									@method('DELETE')
									@csrf
									<button class="btn waves-effect waves-light red darken-2 border-radius-button" type="submit" name="action" style="padding: 0px 16px;"><i class="material-icons left">delete_forever</i>Delete</button>
								</form>
							</div>
						</td>
                  	</tr>

                  @empty
                      	<tr>
						  	<td colspan="4">No Banners Found!</td>
					  	</tr>
                  @endforelse
              </tbody>
            </table>
            <div class="center">
                {{$banners->links()}}
            </div>
        </div>
          <!-- datatable ends -->
        </div>
      </div>
    </div>
  </section>
@endsection

@section('page-script')
	<script>
		function changeStatus(id) {
			var formID = 'banner-status-form-' + id;
			const radio = document.getElementById(formID);
			radio.submit();
		}
	</script>
@endsection