@extends('layout.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>Booking {{ $booking->ride_type_name }} Ride</h2>
@switch($booking->booking_status)
@case('pending')
<span class="badge badge-warning text-white px-3 py-2 display-4 ml-4"
style="font-size: medium">Pending</span>
@break
@case('assigned')
:
<span class="badge badge-dark text-white px-3 py-2 display-4 ml-4"
style="font-size: medium">Assigned</span>
@break
@case('ongoing')
:
<span class="badge badge-info text-white px-3 py-2 display-4 ml-4"
style="font-size: medium">Ongoing</span>
@break
@case('completed')
:
<span class="badge badge-success text-white px-3 py-2 display-4 ml-4"
style="font-size: medium">Completed</span>
@break
@case('in_progress')
:
<span class="badge badge-primary text-white px-3 py-2 display-4 ml-4"
style="font-size: medium">In Progress</span>
@break
@case('cancelled')
:
<span class="badge badge-danger text-white px-3 py-2 display-4 ml-4"
style="font-size: medium">Cancelled</span>
@break
@default
<span class="badge badge-secondary text-white px-3 py-2 display-4 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-car"></i> Total Rides </span>
<span class="value text-success">
{{ $booking->rides->count() }}
</span>
</li>
<li>
<span class="name"><i class="fa fa-road"></i> Total Distance </span>
<span class="value text-success">
{{ $booking->rides->sum('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">
{{ $booking->rides->sum('fare') }} <small>INR</small>
</span>
</li>
</ul>
<ul class="stats-overview">
<li>
<span class="name"><i class="fa fa-percent"></i> GST Charges </span>
<span class="value text-success">
{{ $booking->rides->sum('gst_on_commission') }} <small>INR</small>
</span>
</li>
<li>
<span class="name"><i class="fa fa-briefcase"></i> Platform Fee </span>
<span class="value text-success">
{{ $booking->rides->sum('ride_commission') }} <small>INR</small>
</span>
</li>
<li>
<span class="name"><i class="fa fa-money"></i> Total Customer Amount </span>
<span class="value text-success">
{{ $booking->rides->sum('total_customer_amount') }} <small>INR</small>
</span>
</li>
</ul>
<br />
{{-- <div id="world-map-gdp" style="height:350px;"></div> --}}
{{-- <div id="map" style="height: 350px; width: 100%;"></div> --}}
<div class="row ">
<div class="col-md-12 col-sm-12 ">
<section class="panel">
@foreach ($booking->trips as $trip)
<div class="col-md-6 col-sm-6 profile_details">
<div class="well profile_view d-block">
<h4 class="brief">
<div class="card-header d-flex justify-content-between">
<b>{{ $trip->vehicleType?->name }} - <span
class="badge
@switch($trip->status)
@case(\App\Models\Trip::PENDING) badge-warning @break
@case(\App\Models\Trip::REQUESTED) badge-secondary @break
@case(\App\Models\Trip::ACCEPTED) badge-primary @break
@case(\App\Models\Trip::CONFIRMED) badge-info @break
@case(\App\Models\Trip::COMPLETED) badge-success @break
@case(\App\Models\Trip::CANCELLED) badge-danger @break
@case(\App\Models\Trip::REJECTED) badge-dark @break
@default badge-light
@endswitch
">
{{ $trip->status_name }}
</span></b>
<b>₹
{{ number_format($trip->pricing_details['fare'] ?? 0, 2) }}</b>
</div>
</h4>
<div class="px-3 py-3">
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Pickup</p>
<p>{{ $trip->locations['pickup_location'] ?? '-' }}
</p>
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Drop</p>
<p>{{ $trip->locations['drop_location'] ?? '-' }}
</p>
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Date</p>
<p>
{{ implode(', ', array_map(fn($date) => \Carbon\Carbon::parse($date)->format('d M'), $trip->dates ?? [])) }}
</p>
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Pickup Time</p>
<p>{{ isset($trip->times['pickup_time']) ? \Carbon\Carbon::parse($trip->times['pickup_time'])->format('h:i A') : '-' }}
</p>
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Distance :</p>
<p>{{ $trip->distance_km }} km</p>
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Transporter :</p>
<p class="">
@if ($trip->transporter)
<a href="{{ route('admin.transporter.view', $trip->transporter->id) }}"
class="text-decoration-none text-primary">
{{ $trip->transporter->company_name }}
</a>
@else
<button type="button"
class="btn btn-sm btn-success assign-transporter mb-0 pb-0 pt-0"
data-trip-id="{{ $trip->id }}"
data-booking-id="{{ $booking->id }}">
<i class="fa fa-truck"></i> Assign
Transporter
</button>
@endif
</p>
</div>
</div>
</div>
</div>
@endforeach
</section>
</div>
</div>
</div>
<!-- start project-detail sidebar -->
<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-taxi"></i>
Ride Info
</h6>
<div class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Ride Type</p>
<p>
{{ App\Models\Booking::rideTypes()[$booking->ride_type] ?? '' }}
</p>
</div>
<div class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Booking Type</p>
<p>
@if ($booking->booking_type == 1)
<span class="badge bg-primary text-white">
<i class="fa fa-long-arrow-right"></i> One Way
</span>
@else
<span class="badge bg-success text-white">
<i class="fa fa-exchange"></i> Two Way
</span>
@endif
</p>
</div>
</div>
@if ($booking && $booking->customer)
<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>{{ $booking->customer->first_name ?? '' }}
{{ $booking->customer->last_name ?? '' }}</p>
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Email</p>
<p>{{ $booking->customer->email ?? '' }}</p>
</div>
<div
class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Phone</p>
<p>{{ $booking->customer->phone ?? '' }}</p>
</div>
</div>
@endif
</section>
</div>
<div class="col-md-12 col-sm-12 ">
<section class="panel">
<div class="x_title">
<h2>Rides</h2>
<div class="clearfix"></div>
</div>
<div class="panel-body">
{!! $dataTable->table() !!}
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Assign Transporter Modal -->
<div class="modal fade" id="assignTransporterModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<form id="assignTransporterForm">
@csrf
<input type="hidden" id="assignTripId" name="trip_id">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Assign Transporter</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
</div>
<div class="modal-body">
<input type="text" id="transporterSearch" class="form-control mb-3"
placeholder="Search transporter...">
<input type="hidden" id="transporter_id" name="transporter_id" required>
<div class="row" id="transporterList">
<!-- Transporter cards will load here -->
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Assign</button>
</div>
</div>
</form>
</div>
</div>
@endsection
@push('script')
{!! $dataTable->scripts() !!}
<script>
function renderTransporters(list) {
let html = '';
if (list.length > 0) {
list.forEach(function(t) {
html += `
<div class="col-md-6 col-sm-6 profile_details pb-2">
<div class="well profile_view transporter-card selectable shadow-sm"
data-id="${t.id}">
<div class="col-sm-12">
<h4 class="brief"><i>${t.company_name ?? ''}</i></h4>
<div class="left col-md-7 col-sm-7">
<ul class="list-unstyled">
<li><i class="fa fa-user"></i> Name: ${(t.first_name ?? '')} ${(t.last_name ?? '')}</li>
<li><i class="fa fa-envelope"></i> Email: ${t.email ?? ''}</li>
<li><i class="fa fa-phone"></i> Phone: ${t.phone ?? ''}</li>
</ul>
</div>
<div class="right col-md-5 col-sm-5 text-center">
<img src="${t.image ? '/storage/' + t.image : '/images/user.png'}"
class="img-circle img-fluid" alt="">
</div>
</div>
</div>
</div>
`;
});
} else {
html = `<div class="col-12 text-center text-muted">No transporters found</div>`;
}
$('#transporterList').html(html);
}
$(document).on('click', '.transporter-card', function() {
$('.transporter-card').removeClass('selected border-success');
$(this).addClass('selected border-success');
$('#transporter_id').val($(this).data('id'));
});
$(document).on('click', '.assign-transporter', function() {
const tripId = $(this).data('trip-id');
$('#assignTripId').val(tripId);
$('#assignTransporterModal').modal('show');
$.get("{{ route('admin.booking.transporters.search') }}", function(res) {
renderTransporters(res);
});
});
$('#transporterSearch').on('keyup', function() {
let query = $(this).val();
$.get("{{ route('admin.booking.transporters.search') }}", {
q: query
}, function(res) {
renderTransporters(res);
});
});
$('#assignTransporterForm').on('submit', function(e) {
e.preventDefault();
const tripId = $('#assignTripId').val();
const formData = $(this).serialize();
$.post('/admin/booking/trip/' + tripId + '/assign-transporter', formData, function(res) {
if (res.status) {
$('#assignTransporterModal').modal('hide');
toastr.success('Transporter assigned successfully!');
location.reload();
} else {
toastr.error('Something went wrong!');
}
}).fail(() => toastr.error('Server error. Please try again.'));
});
</script>
@endpush