Viewing file:  index.blade.php (8.55 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('admin.layouts.app')
@section('title')
{{ __('slider_list') }}
@endsection
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3 class="card-title" style="line-height: 36px;">{{ __('slider_list') }}</h3>
<a href="{{ route('mobile-slider.create') }}"
class="btn bg-primary float-right d-flex align-items-center justify-content-center"><i
class="fas fa-plus mr-1"></i>{{ __('add_slider') }}</a>
</div>
<div class="card-body table-responsive p-0">
<table class="table table-hover text-nowrap table-bordered">
<thead>
<tr class="text-center">
<th>{{ __('name') }}</th>
<th>{{ __('background') }}</th>
<th width="10%">{{ __('status') }}</th>
<th width="10%">{{ __('action') }}</th>
</tr>
</thead>
<tbody id="sortable">
@forelse ($sliders as $slider)
<tr data-id="{{ $slider->id }}">
<td class="text-center">
{{ $slider->name }}
</td>
<td class="text-center">
<img width="50px" height="50px" src="{{ $slider->background }}"
alt="slider image">
</td>
<td class="text-center">
<div>
<label class="switch ">
<input data-id="{{ $slider->id }}" type="checkbox"
class="success toggle-switch"
{{ $slider->status == 1 ? 'checked' : '' }}>
<span class="slider round"></span>
</label>
</div>
</td>
<td class="text-center">
<div class="handle btn btn-success mt-0 cursor-move">
<x-svg.drag-icon class="text-primary" />
</div>
<a title="{{ __('edit_slider') }}"
href="{{ route('mobile-slider.edit', $slider->id) }}"
class="btn bg-info mr-1">
<i class="fas fa-edit"></i>
</a>
<form action="{{ route('mobile-slider.destroy', $slider->id) }}" method="POST"
class="d-inline">
@method('DELETE')
@csrf
<button data-toggle="tooltip" data-placement="top"
title="{{ __('delete_slider') }}"
onclick="return confirm('{{ __('are_you_sure_want_to_delete_this_item') }}');"
class="btn bg-danger mr-1"><i class="fas fa-trash"></i></button>
</form>
</td>
</tr>
@empty
<tr>
<td colspan="10" class="text-center">
{{-- <x-not-found word="slider" route="mobile-slider.create" /> --}}
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('script')
<script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#example1").DataTable({
"responsive": true,
"autoWidth": false,
});
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
});
});
$(function() {
$("#sortable").sortable({
items: 'tr',
cursor: 'move',
opacity: 0.4,
scroll: false,
dropOnEmpty: false,
update: function() {
sendTaskOrderToServer('#sortable tr');
},
classes: {
"ui-sortable": "highlight"
},
});
$("#sortable").disableSelection();
function sendTaskOrderToServer(selector) {
var order = [];
$(selector).each(function(index, element) {
order.push({
id: $(this).attr('data-id'),
position: index + 1
});
});
$.ajax({
type: "PUT",
dataType: "json",
url: "{{ route('mobile-slider.updateOrder') }}",
data: {
order: order,
_token: '{{ csrf_token() }}'
},
success: function(response) {
toastr.success(response.message, 'Success');
}
});
}
});
$('.toggle-switch').change(function() {
var status = $(this).prop('checked') == true ? 1 : 0;
var id = $(this).data('id');
$.ajax({
type: "GET",
dataType: "json",
url: '{{ route('mobile-slider.status.change') }}',
data: {
'status': status,
'id': id
},
success: function(response) {
toastr.success(response.message, 'Success');
}
});
})
</script>
@endsection
@section('style')
<style>
.switch {
position: relative;
display: inline-block;
width: 35px;
height: 19px;
/* width: 60px;
height: 34px; */
}
/* Hide default HTML checkbox */
.switch input {
display: none;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 15px;
width: 15px;
left: 3px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input.success:checked+.slider {
background-color: #28a745;
}
input:checked+.slider:before {
-webkit-transform: translateX(15px);
-ms-transform: translateX(15px);
transform: translateX(15px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
@endsection
|