@extends('back.layouts.main')
@section('title' , 'Other countries')
@section('content')


<div class="card">
	<div class="card-header">
		<div class="btn-group float-md-right">
			<a href="{{url('backend/other_countries/create')}}" class='btn btn-info'><i
					class='fa fa-plus mr-1'></i>Create</a>
			<a data-toggle="modal" data-target="#sort" class='btn btn-primary active'>Sort</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>Name</th>
					<th>Name en</th>
					<th>Image</th>
					<th style="width: 65px">Actions</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='name' value='{{request('name')}}' class='form-control'></th>
						<th><input type='text' name='name_en' value='{{request('name_en')}}' class='form-control'></th>
						<th></th>
						<th style="width: 65px">
							<input type='submit' class='btn btn-primary filter' name='search' value='filter' />
						</th>
					</tr>
				</form>
				@if($data->isNotEmpty())
				@foreach($data as $row)
				<tr>
					<td>{{$row->id}}</td>
					<td>{{$row->name}}</td>
					<td>{{$row->name_en}}</td>
					<td>
						@if($row->image!='')
						<img src={{url('flags/'.$row->image)}} style='width:50px'>
						@endif
					</td>
					<td>
						<a href="{{url('backend/other_countries/'.$row->id.'/edit')}}" title='Edit'>
							<i class="fa fa-lg fa-edit"></i>
						</a>
						<form method="POST" class='d-inline' action="{{ route("other_countries.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='./other_countries/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_field() }} 
						<li class="ui-state-default"><span
								class="ui-icon ui-icon-arrowthick-2-n-s"></span>
							{{$row->name}} <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">Sort</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 active">Other countries</li>
@stop

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