@extends('layout.master')
@section('content')
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3>Transporter 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>Transporter Details
<small>
@if ($transporter->status == 'active')
<span class="badge badge-success text-white">Active</span>
@elseif ($transporter->status == 'inactive')
<span class="badge badge-secondary text-white">Inactive</span>
@elseif ($transporter->status == 'suspended')
<span class="badge badge-warning text-white">Suspended</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_wrapper">
<div class="profile_img">
<svg class="progress-ring" width="160" height="160">
<circle class="progress-ring__circle" stroke="#4CAF50" stroke-width="8"
fill="transparent" r="72" cx="80" cy="80" />
</svg>
<img class="avatar-view img_circle"
src="{{ $transporter->image ? asset('storage/' . $transporter->image) : asset('images/user_logo.png') }}"
alt="Transporter Avatar">
</div>
<div class="progress-badge">
{{ $progress }}% Verified
</div>
</div>
<h3>
{{ $transporter->first_name ?? '' }} {{ $transporter->last_name ?? '' }}
@if ($transporter->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-envelope user-profile-icon"></i>
<strong>Email:</strong>
{{ $transporter->email }}
</li>
<li>
<i class="fa fa-phone user-profile-icon"></i>
<strong>Phone:</strong>
{{ $transporter->phone }}
</li>
<li>
<i class="fa fa-building user-profile-icon"></i>
<strong>Company Name:</strong>
{{ $transporter->company_name }}
</li>
<li>
<i class="fa fa-map-marker user-profile-icon"></i>
<strong>Address:</strong>
{{ $transporter->address }}
</li>
<li>
<i class="fa fa-user-tag user-profile-icon"></i>
<strong>Type:</strong>
{!! $transporter->transporter_type_badge !!}
</li>
</ul>
<div class="justify-content-between">
<a href="{{ route('admin.transporter.edit', $transporter->id) }}"
class="btn btn-primary btn-sm"><i class="fa fa-edit m-right-xs"></i> Edit
Profile
</a>
@if ($transporter->documents->count() > 0)
<button type="button"
class="{{ $transporter->is_verified ? 'btn btn-danger' : 'btn btn-success' }} btn-sm verify-transporter"
data-id="{{ $transporter->id }}"
data-verified="{{ $transporter->is_verified ? 1 : 0 }}">
{{ $transporter->is_verified ? 'Unverify Transporter' : 'Verify Transporter' }}
</button>
@endif
</div>
<br />
</div>
<div class="col-md-9 col-sm-9 ">
{{-- <div class="profile_title">
<div class="col-md-6">
<h2>User Activity Report</h2>
</div>
<div class="col-md-6">
<div id="reportrange" class="pull-right"
style="margin-top: 5px; background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #E6E9ED">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span>December 30, 2014 - January 28, 2015</span> <b class="caret"></b>
</div>
</div>
</div> --}}
<!-- start of user-activity-graph -->
{{-- <div id="graph_bar" style="width:100%; height:280px;"></div> --}}
<!-- end of user-activity-graph -->
<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 transporter documents -->
<table class="data table table-striped no-margin">
<thead>
<tr>
<th>#</th>
<th>Document Name</th>
<th>Document Number</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@forelse($transporter->documents as $index => $document)
<tr>
<td>{{ $index + 1 }}</td>
<td>{{ \App\Models\Document::documentTypes($document->doc_type) }}
</td>
<td>{{ $document->doc_number ?? '-' }}</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="5" class="text-center text-muted">No
documents
uploaded</td>
</tr>
@endforelse
</tbody>
</table>
<!-- end transporter 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/transporter/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/transporter/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-transporter', function() {
const $btn = $(this);
const transporterId = $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 transporter?`,
icon: 'question',
showCancelButton: true,
confirmButtonText: `Yes, ${actionText} it!`
}).then((result) => {
if (!result.isConfirmed) return;
$.ajax({
url: '/admin/transporter/' + transporterId + '/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')
.then(() => {
location.reload();
});
// Toggle status
$btn.data('verified', isVerified ? 0 : 1);
$btn.text(isVerified ? 'Verify Transporter' : 'Unverify Transporter');
$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>
{{-- <script>
const circle = document.querySelector('.progress-ring__circle');
const radius = circle.r.baseVal.value;
const circumference = radius * 2 * Math.PI;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
const progress = {{ $progress }}; // from controller
const offset = circumference - (progress / 100) * circumference;
circle.style.strokeDashoffset = offset;
</script> --}}
@endpush