@extends('back.layouts.main')
@section('title' , 'الصور')
@section('content')
@php
	$params = 'section='.request('section').'&place='.request('place').'&table_id='.request('table_id') ;
@endphp

<div class="card">
	<div class="card-header">
		<div class="btn-group float-md-right">
			<a href="{{url('backend/slider/create?'.$params)}}" class='btn btn-info'><i class='fa fa-plus mr-1'></i>انشاء</a>
			<a data-toggle="modal" data-target="#sort" class='btn btn-primary active'>ترتيب</a>
		</div>
	</div>
	<div class="card-content overflow-auto collapse show">
		<div class="card-body card-dashboard">

			<table class="table table-responsive-sm table-striped table-bordered data-table">
				<tr>
					<th style="min-width: 65px">#</th>
					<th>العنوان</th>
					<th>الصورة</th>
					<th style="width: 65px"></th>
				</tr>
				<form method='get' class='search'>
					<tr>
						<th><input type='text' name='id' value='{{request('id')}}' class='form-control'></th>
						<th><input type='text' name='title' value='{{request('title')}}' class='form-control'></th>
						<th></th>
						<th style="width: 65px">
							<input type='submit' class='btn btn-primary filter' name='search' value='1' value='filter' />
						</th>
					</tr>
				</form>
				@if($data->isNotEmpty())
				@foreach($data as $row)
				<tr>
					<td>{{$row->id}}</td>
					<td>{{$row->title}}</td>
					<td>
						@if($row->image!='')
						<img src={{image($row->image)}} style='width:100px'>
						@endif
					</td>
					<td>
						<a href="{{url('backend/slider/'.$row->id.'/edit?'.$params)}}" title='Edit'>
							<i class="fa fa-lg fa-edit"></i>
						</a>
						<form method="POST" class='d-inline' action="{{ route("slider.destroy", $row->id) }}"
							onsubmit="return confirm('Do you really want delete this?');">
							@method('DELETE')
							@csrf
							<button class='delete'>
								<i class="fas fa-lg fa-times"></i>
							</button>
						</form>
					</td>
				</tr>
				@endforeach
				@else
				<tr>
					<td class='text-center' colspan='100'>No Data Available</td>
				</tr>
				@endif
			</table>

			<!-- /.box-body -->
			<div class="box-footer clearfix">
				{{ $data->appends(request()->except('page'))->links() }}
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="sort" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<form method="post" action='./slider/sort'>
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
				</div>
				<div class="modal-body">
					<ul class="sortable">
						@foreach($data as $row)
						@csrf
						<li class="ui-state-default">
							<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
							{{$row->id}}: {{$row->title}}
							<input type='hidden' name='id[]' value='{{$row->id}}'>
						</li>
						@endforeach
					</ul>
					<style>
						.sortable {
							padding: 0;
						}

						.sortable li {
							list-style: none;
							cursor: pointer;
						}
					</style>
				</div>
				<div class="modal-footer">
					<button type="submit" name='sort' class="btn btn-primary">ترتيب</button>
				</div>
			</form>
		</div>
	</div>
</div>

@stop

@push('footer')
<script src="{{url('admin/app-assets/js/core/libraries/jquery_ui/jquery-ui.min.js')}}"></script>
<script>
	$( function() {
            $( ".sortable" ).sortable();
        } );
</script>
<script>
	$('.data-table input , .data-table select ').change(function(){
			$('.filter').trigger('click');
		});
</script>
@endpush

@section('breadcrumbs')
	<li class="breadcrumb-item" ><a href="{{url('backend/banners/choose')}}">اختر القسم</a></li>
	<li class="breadcrumb-item" ><a href="{{url('backend/banners/choose-section?type='.request('type') )}}">اختر الصفحة</a></li>
	<li class="breadcrumb-item active">الصور</li>
@stop

@push('header')
<link rel="stylesheet" href="{{url('admin/app-assets/vendors/css/ui/jquery-ui.min.css')}}">
@endpush