Viewing file:  status.blade.php (3.9 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('layouts.admin')
@php
$profile=\App\Models\Utility::get_file('uploads/avatar/');
@endphp
@section('page-title')
{{__('Driver Status')}}
@endsection
@push('script-page')
<script>
document.addEventListener('DOMContentLoaded', function () {
let switchInput = document.querySelector('.switch input');
let statusText = document.querySelector('.status-text');
switchInput.addEventListener('change', function () {
let status = this.checked ? 'active' : 'inactive';
let showstatus = '';
if(status == 'active'){
showstatus = "On Duty";
}else{
showstatus = "Off Duty";
}
statusText.textContent = showstatus;
let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
$.ajax({
type: 'POST',
url: '{{ route('update.driver.status') }}',
data: {
_token: csrfToken,
driver_status: status,
},
success: function(response) {
},
});
});
});
</script>
@endpush
@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{route('dashboard')}}">{{__('Dashboard')}}</a></li>
<li class="breadcrumb-item">{{__('Driver Status')}}</li>
@endsection
@section('content')
<style>
.switch {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 25px;
}
.slider:before {
position: absolute;
content: "";
height: 42px;
width: 42px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(42px);
-ms-transform: translateX(42px);
transform: translateX(47px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.status {
display: flex;
justify-content: center;
align-items: center;
}
.status-text {
margin-left: 10px;
font-size: 30px;
}
</style>
<div class="row justify-content-center align-items-center">
<div class="col-xl-4 col-md-6">
<div class="card card-stats" style="border-radius: 0; height: 50vh;">
<div class="card-header">
<h4>{{__('Change Status')}}</h4>
</div>
<div class="card-body mt-5 p-4">
<div class="row">
<div class="col">
<div class="status">
<label class="switch">
<input type="checkbox" name="driver_status" {{ isset($userDetail->driver_status) && $userDetail->driver_status == 'active' ? 'checked' : '' }}>
<span class="slider round"></span>
</label>
<span class="status-text">
@if(isset($userDetail->driver_status) && $userDetail->driver_status == 'active')
On Duty
@else
Off Duty
@endif
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
|