@extends('layout.master')
@section('content')
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left w-100">
<h3>Vehicle Profile</h3>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">
<h2>Vehicle Details
<small>
@if ($vehicle->status == 'active')
<span class="badge badge-success text-white">Active</span>
@elseif ($vehicle->status == 'inactive')
<span class="badge badge-secondary text-white">Inactive</span>
@elseif ($vehicle->status == 'under_maintenance')
<span class="badge badge-warning text-white">Under Maintenance</span>
@endif
</small>
</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="row">
<div class="col-md-3 col-sm-3 profile_left">
<div class="profile_img">
<div id="crop-avatar">
<!-- Current avatar -->
<img class="img-responsive avatar-view"
src="{{ $vehicle->vehicle_image ? asset('storage/' . $vehicle->vehicle_image) : asset('images/texi.jpg') }}"
alt="Vehicle Avatar" title="Vehicle Image"
style="width:150px; height:150px; object-fit:cover;">
</div>
</div>
<h3>{{ $vehicle->registration_number }}
@if ($vehicle->is_verified)
<img src="{{ asset('images/Tick.png') }}" alt="Verified"
style="width:25px; height:20px;">
@endif
</h3>
<ul class="list-unstyled user_data">
<li>
<i class="fa fa-car user-profile-icon"></i> <strong>Model:</strong>
{{ $vehicle->model }}
</li>
<li>
<i class="fa fa-industry user-profile-icon"></i> <strong>Make:</strong>
{{ $vehicle->make }}
</li>
<li>
<i class="fa fa-hashtag user-profile-icon"></i> <strong>Registration
No:</strong> {{ $vehicle->registration_number }}
</li>
@if ($vehicle->year)
<li class="m-top-xs">
<i class="fa fa-calendar user-profile-icon"></i>
<strong>Year:</strong> {{ $vehicle->year }}
</li>
@endif
@if ($vehicle->capacity_kg)
<li class="m-top-xs">
<i class="fa fa-weight-hanging user-profile-icon"></i>
<strong>Capacity:</strong> {{ $vehicle->capacity_kg }} kg
</li>
@endif
@if ($vehicle->transporter)
<li class="m-top-xs">
<i class="fa fa-user user-profile-icon"></i>
<strong>Transporter:</strong><a
href="{{ route('admin.transporter.edit', $vehicle->transporter->id) }}">{{ $vehicle->transporter->company_name }}</a>
</li>
@endif
</ul>
<div class="justify-content-between">
<a href="{{ route('admin.vehicle.edit', $vehicle->id) }}"
class="btn btn-success btn-sm"><i class="fa fa-edit m-right-xs"></i> Edit
Details
</a>
@if ($vehicle->documents->count() > 0)
<button type="button"
class="{{ $vehicle->is_verified ? 'btn btn-danger' : 'btn btn-success' }} btn-sm verify-vehicle"
data-id="{{ $vehicle->id }}"
data-verified="{{ $vehicle->is_verified ? 1 : 0 }}">
{{ $vehicle->is_verified ? 'Unverify Vehicle' : 'Verify Vehicle' }}
</button>
@endif
</div>
<br />
</div>
<div class="col-md-9 col-sm-9 ">
<div class="" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
<li role="presentation" class="active"><a href="#tab_content2" role="tab"
id="profile-tab" data-toggle="tab" aria-expanded="false">Document
Details</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane active table-responsive" id="tab_content2"
aria-labelledby="profile-tab">
<!-- start vehicle documents -->
<table class="data table table-striped no-margin">
<thead>
<tr>
<th>#</th>
<th>Document Name</th>
<th>Document Number</th>
<th>Expiry Date</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@forelse($vehicle->documents as $index => $document)
<tr>
<td>{{ $index + 1 }}</td>
<td class="vertical-align-mid">
{{ \App\Models\Document::documentTypes($document->doc_type) }}
</td>
<td class="vertical-align-mid">
{{ $document->doc_number ?? '-' }}</td>
<td class="vertical-align-mid">
{{ $document->expiry_date ? \Carbon\Carbon::parse($document->expiry_date)->format('d M Y') : '-' }}
</td>
<td class="vertical-align-mid">
@if ($document->is_verified ?? false)
<span class="badge badge-success">Verified</span>
@else
<span class="badge badge-warning">Pending</span>
@endif
</td>
<td class="vertical-align-mid">
@if ($document->file_url)
<a href="{{ asset('storage/' . $document->file_url) }}"
class="btn btn-primary btn-sm" target="_blank"
title="View file"><i class="fa fa-eye"></i></a>
@endif
@if (!$document->is_verified)
<button type="button"
class="btn btn-success btn-sm verify-doc"
data-id="{{ $document->id }}"
title="Verify Document">
<i class="fa fa-check"></i>
</button>
@endif
<button type="button"
class="btn btn-danger btn-sm delete-doc"
data-id="{{ $document->id }}"
title="Delete Document">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
@empty
<tr>
<td colspan="6" class="text-center text-muted">No
documents
uploaded</td>
</tr>
@endforelse
</tbody>
</table>
<!-- end vehicle documents -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('script')
<script>
$(document).on('click', '.verify-doc', function() {
let docId = $(this).data('id');
let button = $(this);
Swal.fire({
title: 'Are you sure?',
text: "Mark this document as verified?",
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Yes, verify it!'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: '/admin/vehicle/document/' + docId + '/verify',
method: 'POST',
data: {
_token: '{{ csrf_token() }}'
},
success: function(res) {
Swal.fire('Verified!', res.message, 'success').then(() => {
location.reload();
});
},
error: function(err) {
Swal.fire('Error', 'Something went wrong', 'error');
}
});
}
});
});
$(document).on('click', '.delete-doc', function() {
let docId = $(this).data('id');
let card = $('#doc-card-' + docId);
Swal.fire({
title: 'Are you sure?',
text: "This document will be permanently deleted!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#6c757d',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'Cancel'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: '/admin/vehicle/document/delete/' + docId,
type: 'DELETE',
data: {
_token: '{{ csrf_token() }}'
},
success: function(response) {
if (response.success) {
card.remove();
Swal.fire(
'Deleted!',
response.message,
'success'
).then(() => {
location.reload();
});
} else {
Swal.fire('Error!', 'Something went wrong.', 'error');
}
},
error: function() {
Swal.fire('Error!', 'Unable to delete document.', 'error');
}
});
}
});
});
$(document).on('click', '.verify-vehicle', function() {
const $btn = $(this);
const vehicleId = $btn.data('id');
const isVerified = $btn.data('verified') == 1;
const actionText = isVerified ? 'unverify' : 'verify';
Swal.fire({
title: 'Are you sure?',
text: `Do you want to ${actionText} this vehicle?`,
icon: 'question',
showCancelButton: true,
confirmButtonText: `Yes, ${actionText} it!`
}).then((result) => {
if (!result.isConfirmed) return;
$.ajax({
url: '/admin/vehicle/' + vehicleId + '/verify',
method: 'POST',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
data: {
status: isVerified ? 0 : 1
},
success: function(res) {
Swal.fire('Success!', res.message || 'Status updated', 'success');
$btn.data('verified', isVerified ? 0 : 1);
$btn.text(isVerified ? 'Verify Vehicle' : 'Unverify Vehicle');
$btn.toggleClass('btn-success btn-danger');
},
error: function(xhr) {
let msg = 'Something went wrong';
if (xhr.responseJSON && xhr.responseJSON.message) msg = xhr.responseJSON
.message;
Swal.fire('Error', msg, 'error');
}
});
});
});
</script>
@endpush