@extends('admin/default')

@section('css')
 
 <style type="text/css">
	.my-alert-success h5 {
	    font-size: 16px;
	}
	.alert-danger h5 {
	    font-size: 16px;
	}
	.my-alert-success {
	   color: #28a745;
	   background-color: #d4edda;
    	border-color: #c3e6cb;
	}
 </style>
@endsection

@section('button')
   <a type="button" href="{{ route('admin.services.create') }}" class="btn btn-sm btn-outline-primary ml-3 pr-3 pl-3 add-new">Add New</a>
@endsection

@section('content')
   <!-- Main content -->
   <section class="content">
	  <div class="container-fluid">
	   <!-- Alert Message -->
	   @if (session('success'))
	   <div id="msg_div" class="alert my-alert-success alert-dismissible pt-1 pb-1">
	   	<button type="button" class="close pt-0 pb-0" data-dismiss="alert" aria-hidden="true">×</button>
	   	<h5 class="m-0"><span class="font-weight-bold mr-4"><i class="icon fas fa-check"></i> Success!</span>{{ session('success') }}</h5>
	   </div>
	   @endif
	   @if (session('failed'))
	   <div id="msg_div" class="alert alert-danger alert-dismissible pt-1 pb-1">
	   	<button type="button" class="close pt-0 pb-0" data-dismiss="alert" aria-hidden="true">×</button>
	   	<h5 class="m-0"><span class="font-weight-bold mr-4"><i class="icon fas fa-check"></i> Failed!</span>{{ session('failed') }}</h5>
	   </div>
	   @endif
	   <!-- End -->
		 <!-- Small boxes (Stat box) -->
		 <div class="row">
			<div class="col-12 col-sm-12 col-md-12 col-lg-12">
			   <div class="card card-primary card-outline card-outline-tabs">
				  <div class="card-body">
					<table class="table table-hover text-nowrap my-datatable">
						<thead>
							<tr>
								<th>ID</th>
								<th>Image</th>
								<th>Category</th>
								<th>Title</th>
								<th>Created At</th>
								<th>Action</th>
							</tr>
						</thead>
						<tbody id="progeamme_panel">
							@php
								$counter = 1;
							@endphp
							@if(!empty($services))
								@foreach ($services as $service)
										<tr>
											<td>{{ $counter }}</td>
											<td>
												<a href="{{ ($service->image) ? asset($service->image) : '' }}" data-toggle="lightbox">
													<img src="{{ ($service->image) ? asset($service->image) : '' }}" width="100" height="50" alt="{{ $service->title }}">
												</a>
											</td>
											<td>{{ $service->category->title }}</td>
											<td>{{ $service->title }}</td>
											<td>{{ $service->created_at }}</td>
											<td>
												<a class="btn btn-xs btn-info ajax-view" href="{{ route('admin.services.show', $service) }}" role="button" title="View"><i class="fas fa-eye"></i></a>
												<a class="btn btn-xs btn-success" href="{{ route('admin.services.edit', $service) }}" role="button" title="Edit"><i class="fas fa-pencil-alt"></i></a>
												<a class="btn btn-xs btn-danger ajax-delete" href="{{ route('admin.services.destroy', $service) }}" role="button" title="Danger" data-programme_id="{{$service->id}}" ><i class="fas fa-trash"></i></a>
											</td>
										</tr>
									@php
										$counter++;
									@endphp
								@endforeach
							@endif
						</tbody>
					</table>
				  </div>
				  <!-- /.card -->
			   </div>
			</div>            
		 </div>
		 <!-- /.row -->
	  </div>
	  <!-- /.container-fluid -->
   </section>
   <!-- /.content -->
@endsection

@section('js')
<script type="text/javascript">
   
</script>
<script>
   $(function () {
	  $('.my-datatable').DataTable({
		 "paging": true,
		 "lengthChange": true,
		 "searching": true,
		 "ordering": true,
		 "info": true,
		 "autoWidth": false,
		 "responsive": true,
	  });
   });

	var slider = (function () {

		var url = "{{url('/')}}"+"/admin/sliders/";

		var swalTitle = 'Really destroy this ?';
		var confirmButtonText = 'Yes';
		var cancelButtonText = 'No';
		var errorAjax = "Something went wrong";
		var title = "Add New";
		
		var onReady = function () {
			$('#progeamme_panel').on('click', 'td a.ajax-edit', function (event) {
				event.preventDefault();
				var that  = $(this);
				var url   = that.attr('href');
				var title = "Slider Edit";
				sbm.loadMultiPartForm(url, $(this), errorAjax, title);
			})
			.on('click', 'td a.ajax-view', function (event) {
				event.preventDefault();
				var that  = $(this);
				// console.log(that); return false;

				var url   = that.attr('href');
				var title = "Service View";
				sbm.loadView(title, event, $(this), url)
			})
			.on('click', 'td a.ajax-delete', function (event) {
				event.preventDefault();
				var url   = $(this).attr('href');
				// console.log(url); return false;
				sbm.destroy(event, $(this), url, swalTitle, confirmButtonText, cancelButtonText, errorAjax)
			});

			// add new Slider
			$(document).on('click', '.add-slider', function () {
				var my_url = url + 'create';
				sbm.loadMultiPartForm(my_url, $(this), errorAjax, title);
			});
		}

		return {
			onReady: onReady
		}

	})()

$(document).ready(slider.onReady)

</script>
@endsection