File: //var/www/html/dashboard.orbiwheels.com/resources/views/transporter/rides/view.blade.php
@extends('layout.transporter_master')
@section('content')
<div class="right_col" role="main">
<div class="">
{{-- <div class="page-title">
<div class="title_left">
<h3>Staff <small>List</small></h3>
</div>
</div> --}}
<div class="clearfix"></div>
@include('alerts')
<div class="row" style="display: block;">
<div class="col-md-12 col-sm-12">
<div class="x_panel">
<div class="x_title d-flex justify-content-between align-items-center">
<div class="gap-2 d-flex">
<h2>Ride Details</h2>
@switch($ride->status)
@case(0)
<span class="badge badge-warning text-white px-3 py-2 ml-4"
style="font-size: medium">Pending</span>
@break
@case(1)
<span class="badge badge-dark text-white px-3 py-2 ml-4"
style="font-size: medium">Assigned</span>
@break
@case(2)
<span class="badge badge-info text-white px-3 py-2 ml-4"
style="font-size: medium">Ongoing</span>
@break
@case(3)
<span class="badge badge-success text-white px-3 py-2 ml-4"
style="font-size: medium">Completed</span>
@break
@case(4)
<span class="badge badge-danger text-white px-3 py-2 ml-4"
style="font-size: medium">Cancelled</span>
@break
@default
<span class="badge badge-secondary text-white px-3 py-2 ml-4"
style="font-size: medium">Unknown</span>
@endswitch
</div>
</div>
<div class="x_content">
<div class="row">
<div class="col-md-9 col-sm-9">
<ul class="stats-overview">
<li>
<span class="name"><i class="fa fa-calendar"></i> Date </span>
<span
class="value text-success">{{ \Carbon\Carbon::parse($ride->ride_date)->format('d-m-Y') }}</span>
</li>
<li>
<span class="name"><i class="fa fa-road"></i> Distance </span>
<span class="value text-success">{{ $ride->distance_km }}
<small>Km</small></span>
</li>
<li>
<span class="name"><i class="fa fa-money"></i> Transporter Earnings </span>
<span class="value text-success">{{ $ride->fare }} <small>INR</small></span>
</li>
</ul>
<br />
<div id="map" style="height: 350px; width: 100%;"></div>
</div>
<div class="col-md-3 col-sm-3">
<section class="panel">
<div class="x_title">
<h2>Info</h2>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<h6 class="green"><i class="fa fa-car"></i>
Ride Info
</h6>
<div class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Date</p>
<p>{{ \Carbon\Carbon::parse($ride->ride_date)->format('M d, Y') }}</p>
</div>
<div class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Pickup Time</p>
<p>{{ \Carbon\Carbon::parse($ride->pickup_time)->format('h:i A') }}</p>
</div>
@if ($ride->return_time)
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Return Time</p>
<p>{{ \Carbon\Carbon::parse($ride->return_time)->format('h:i A') }}</p>
</div>
@endif
<div class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Pickup Location</p>
<p>{{ $ride->locations['pickup_location'] ?? 'N/A' }}</p>
</div>
<div class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Drop Location</p>
<p>{{ $ride->locations['drop_location'] ?? 'N/A' }}</p>
</div>
</div>
@if ($canSeeCustomer)
<hr>
<div class="panel-body">
<div class="d-flex justify-content-between align-items-center">
<h6 class="green mb-0">
<i class="fa fa-user me-1"></i> Customer
</h6>
{{-- Profile image on right side --}}
<img src="{{ asset('images/user.png') }}" alt="Customer Profile"
class="rounded-circle" width="40" height="40">
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Name</p>
<p>{{ $ride->booking->customer->first_name ?? '' }}
{{ $ride->booking->customer->last_name ?? '' }}</p>
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Email</p>
<p>{{ $ride->booking->customer->email ?? 'N/A' }}</p>
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Phone</p>
<p>{{ $ride->booking->customer->phone ?? 'N/A' }}</p>
</div>
</div>
@endif
<hr>
@if ($ride->status == \App\Models\BookingRide::ONGOING)
<button class="btn btn-warning btn-sm mt-3" data-toggle="modal"
data-target="#reasonModal">
<i class="fa fa-question-circle"></i> Ask Admin for Reassignment
</button>
@else
<button class="btn btn-primary btn-sm mt-3"
onclick="openAssignModal('{{ encrypt($ride->id) }}')" data-toggle="modal"
data-target="#assignModal">
<i class="fa fa-user-tag"></i>
{{ $ride->driver_id && $ride->vehicle_id ? 'Re-Assign Driver & Vehicle' : 'Assign Driver & Vehicle' }}
</button>
@endif
<br>
@if ($ride->vehicle)
<div class="panel-body">
<div class="d-flex justify-content-between align-items-center">
<h6 class="green mb-0">
<i class="fa fa-user me-1"></i> Vehicle
</h6>
{{-- Profile image on right side --}}
<img src="{{ $ride->vehicle->vehicle_image ? asset('storage/' . $ride->vehicle->vehicle_image) : asset('images/texi.jpg') }}"
alt="Customer Profile" class="rounded-circle" width="40"
height="40">
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Registration No</p>
<p>{{ $ride->vehicle->registration_number ?? 'Not Assigned' }}</p>
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Make</p>
<p>{{ $ride->vehicle->make ?? '' }}</p>
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Model</p>
<p>{{ $ride->vehicle->model ?? '' }}</p>
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Year</p>
<p>{{ $ride->vehicle->year ?? '' }}</p>
</div>
{{-- <div class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Capacity</p>
<p>{{ $ride->vehicle->capacity_kg ?? '' }}</p>
</div> --}}
</div>
@endif
@if ($ride->driver)
<hr>
<div class="panel-body">
<div class="d-flex justify-content-between align-items-center">
<h6 class="green mb-0">
<i class="fa fa-user me-1"></i> Driver
</h6>
{{-- Profile image on right side --}}
<img src="{{ $ride->driver->image ? asset('storage/' . $ride->driver->image) : asset('images/user.png') }}"
alt="Driver Profile" class="rounded-circle" width="40"
height="40">
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Name</p>
<p>{{ $ride->driver->name ?? 'Not Assigned' }}</p>
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Phone</p>
<p>{{ $ride->driver->phone ?? '' }}</p>
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Email</p>
<p>{{ $ride->driver->email ?? '' }}</p>
</div>
{{-- <div class="project_detail d-flex justify-content-between align-items-center">
<p class="title">License No</p>
<p>{{ $ride->driver->license_number ?? '' }}</p>
</div> --}}
{{-- <div class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Experience</p>
<p>{{ $ride->driver->experience_years ? $ride->driver->experience_years . ' years' : 'N/A' }}
</p>
</div> --}}
</div>
@endif
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="reasonModal" tabindex="-1" role="dialog" aria-labelledby="reasonModalLabel">
<div class="modal-dialog" role="document">
<form action="{{ route('rides.requestChange', encrypt($ride->id)) }}" method="POST">
@csrf
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Request Driver/Vehicle Change</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="reason">Reason for Change</label>
<textarea name="reason" class="form-control" required placeholder="Enter reason here"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Submit Request</button>
</div>
</div>
</form>
</div>
</div>
<!-- Assign Modal -->
@include('components.transporter.assign-modal')
@endsection
@push('script')
{{-- <script>
var pickup = [{{ $ride->locations['pickup_lat'] }}, {{ $ride->locations['pickup_lng'] }}];
var drop = [{{ $ride->locations['drop_lat'] }}, {{ $ride->locations['drop_lng'] }}];
var map = L.map('map').setView(pickup, 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker(pickup).addTo(map).bindPopup("Pickup: {{ $ride->locations['pickup_location'] }}").openPopup();
L.marker(drop).addTo(map).bindPopup("Drop: {{ $ride->locations['drop_location'] }}");
var routeLine = L.polyline([pickup, drop], {
color: 'blue',
weight: 5
}).addTo(map);
map.fitBounds(routeLine.getBounds());
</script> --}}
<!-- Firebase App (core) -->
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<!-- Firebase Realtime Database -->
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>
<script>
// 1. Firebase config
const firebaseConfig = {
apiKey: "AIzaSyBEO57QntNzQcZD66NwJAeZ_PgE-c5RasA",
authDomain: "orbiprebooking.firebaseapp.com",
projectId: "orbiprebooking",
storageBucket: "orbiprebooking.firebasestorage.app",
messagingSenderId: "83629328330",
appId: "1:83629328330:web:e67c38db99ff2d385db133",
measurementId: "G-KK3NCTJDCC"
};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
const db = firebase.database();
// 2. Pickup & Drop
var pickup = [{{ $ride->locations['pickup_lat'] }}, {{ $ride->locations['pickup_lng'] }}];
var drop = [{{ $ride->locations['drop_lat'] }}, {{ $ride->locations['drop_lng'] }}];
var map = L.map('map').setView(pickup, 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker(pickup).addTo(map).bindPopup("Pickup: {{ $ride->locations['pickup_location'] }}");
L.marker(drop).addTo(map).bindPopup("Drop: {{ $ride->locations['drop_location'] }}");
var routeLine = L.polyline([pickup, drop], {
color: 'blue',
weight: 5
}).addTo(map);
map.fitBounds(routeLine.getBounds());
// 3. Live driver marker
var driverMarker = null;
var rideId = "{{ $ride->id }}"; // unique ride id
db.ref("/locations/drivers/" + rideId).on("value", (snapshot) => {
if (snapshot.exists()) {
const {
latitude,
longitude
} = snapshot.val();
if (driverMarker) {
driverMarker.setLatLng([latitude, longitude]); // move marker
} else {
driverMarker = L.marker([latitude, longitude], {
icon: L.icon({
iconUrl: "/images/car-icon.png", // optional custom car icon
iconSize: [40, 40]
})
}).addTo(map).bindPopup("Driver is here");
}
}
});
</script>
<script>
const driverSearchUrl = "{{ route('driver.search') }}";
const vehicleSearchUrl = "{{ route('vehicle.search') }}";
const assignUrl = "{{ route('rides.assign', ':id') }}";
const csrfToken = "{{ csrf_token() }}";
</script>
<script src="{{ asset('src/js/transporter/assign-modal.js') }}"></script>
@endpush