@extends('layout.master')
@section('content')
<div class="right_col" role="main">
<div class="">
<div class="clearfix"></div>
<div class="row" style="display: block;">
<div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">
<h2>Booking <small>Edit</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li>
<a href="{{ route('admin.booking.index') }}" class="closeBtn">
<i class="fa fa-arrow-left"></i> Back
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<form action="{{ route('admin.booking.update', $booking->id) }}" method="POST">
@csrf
@method('PUT')
<span class="section">General Details</span>
<div class="row">
{{-- Customer --}}
<div class="col-md-4 form-group">
<label>Customer *</label>
<select name="customer_id" class="form-control">
<option value="">Select</option>
@foreach ($customers as $customer)
<option value="{{ $customer->id }}"
{{ $booking->customer_id == $customer->id ? 'selected' : '' }}>
{{ $customer->first_name }} - {{ $customer->email }}
</option>
@endforeach
</select>
</div>
{{-- Transporter --}}
<div class="col-md-4 form-group">
<label>Transporter *</label>
<select name="transporter_id" class="form-control">
<option value="">Select</option>
@foreach ($transporters as $transporter)
<option value="{{ $transporter->id }}"
{{ $booking->transporter_id == $transporter->id ? 'selected' : '' }}>
{{ $transporter->company_name }}
</option>
@endforeach
</select>
</div>
{{-- Ride Type --}}
<div class="col-md-4 form-group">
<label>Ride Type *</label>
<select name="ride_type" class="form-control">
@foreach (\App\Models\Booking::rideTypes() as $id => $name)
<option value="{{ $id }}"
{{ $booking->ride_type == $id ? 'selected' : '' }}>
{{ $name }}
</option>
@endforeach
</select>
</div>
{{-- Booking Type --}}
<div class="col-md-4 form-group">
<label>Booking Type *</label>
<select name="booking_type" id="bookingType" class="form-control">
<option value="">Select</option>
<option value="1" {{ $booking->booking_type == 1 ? 'selected' : '' }}>One
Way</option>
<option value="2" {{ $booking->booking_type == 2 ? 'selected' : '' }}>Two
Way</option>
</select>
</div>
</div>
<span class="section">Trips</span>
<div id="tripContainer">
@foreach ($booking->trips as $index => $ride)
<div class="tripItem border p-3 mb-4 bg-light rounded">
<h5 class="mb-3">Trip <span class="tripIndex">{{ $index + 1 }}</span></h5>
<div class="row">
{{-- Vehicle --}}
<div class="col-md-4 form-group">
<label>Vehicle Type *</label>
<select name="trips[{{ $index }}][vehicle_type]"
class="form-control">
@foreach ($vehicleTypes as $vehicle)
<option value="{{ $vehicle->id }}"
{{ $ride->vehicle_type == $vehicle->id ? 'selected' : '' }}>
{{ $vehicle->name }}
</option>
@endforeach
</select>
</div>
{{-- Pickup --}}
<div class="col-md-4 form-group">
<label>Pickup Location *</label>
<input type="text"
name="trips[{{ $index }}][pickup_location]"
class="form-control"
value="{{ $ride->locations['pickup_location'] ?? '' }}">
</div>
{{-- Drop --}}
<div class="col-md-4 form-group">
<label>Drop Location *</label>
<input type="text" name="trips[{{ $index }}][drop_location]"
class="form-control"
value="{{ $ride->locations['drop_location'] ?? '' }}">
</div>
{{-- Coordinates --}}
<div class="col-md-4 form-group">
<label>Pickup Lat *</label>
<input type="number" step="any"
name="trips[{{ $index }}][pickup_lat]" class="form-control"
value="{{ $ride->locations['pickup_lat'] ?? '' }}">
</div>
<div class="col-md-4 form-group">
<label>Pickup Lng *</label>
<input type="number" step="any"
name="trips[{{ $index }}][pickup_lng]" class="form-control"
value="{{ $ride->locations['pickup_lng'] ?? '' }}">
</div>
<div class="col-md-4 form-group">
<label>Drop Lat *</label>
<input type="number" step="any"
name="trips[{{ $index }}][drop_lat]" class="form-control"
value="{{ $ride->locations['drop_lat'] ?? '' }}">
</div>
<div class="col-md-4 form-group">
<label>Drop Lng *</label>
<input type="number" step="any"
name="trips[{{ $index }}][drop_lng]" class="form-control"
value="{{ $ride->locations['drop_lng'] ?? '' }}">
</div>
{{-- Pickup Time --}}
<div class="col-md-4 form-group">
<label>Pickup Time *</label>
<input type="time" name="trips[{{ $index }}][pickup_time]"
class="form-control"
value="{{ $ride->times['pickup_time'] ?? '' }}">
</div>
{{-- Return Time --}}
<div class="col-md-4 form-group returnTimeBox"
style="{{ $booking->booking_type == 2 ? '' : 'display:none;' }}">
<label>Return Time</label>
<input type="time" name="trips[{{ $index }}][return_time]"
class="form-control"
value="{{ $ride->times['return_time'] ?? '' }}">
</div>
{{-- Dates --}}
<div class="col-md-12 form-group">
<label>Dates *</label>
<input type="text" class="form-control trip-dates"
name="trips[{{ $index }}][dates]"
value="{{ implode(', ', $ride->dates ?? []) }}">
</div>
</div>
<button type="button" class="btn btn-danger removeTrip mt-2">
<i class="fa fa-trash"></i> Remove
</button>
</div>
@endforeach
</div>
<div class="text-right mb-3">
<button type="button" id="addTrip" class="btn btn-primary">
<i class="fa fa-plus"></i> Add More
</button>
</div>
<div class="form-group row">
<div class="col-md-12 text-right">
<button type="submit" class="btn btn-success">Update Booking</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
{{-- JS --}}
<script>
document.addEventListener("DOMContentLoaded", function() {
initMultiDatePicker(".trip-dates");
});
// Booking Type
document.getElementById("bookingType").addEventListener("change", function() {
const isTwoWay = this.value == "2";
document.querySelectorAll(".returnTimeBox").forEach(box => {
box.style.display = isTwoWay ? "block" : "none";
});
});
function initMultiDatePicker(el) {
$(el).multiDatesPicker("destroy");
$(el).multiDatesPicker({
dateFormat: "yy-mm-dd",
separator: ", "
});
}
// ✅ Corrected count
let tripIndex = {{ count($booking->trips) }};
// Add Trip
document.getElementById("addTrip").addEventListener("click", function() {
const container = document.getElementById("tripContainer");
const firstTrip = container.firstElementChild;
const newTrip = firstTrip.cloneNode(true);
newTrip.querySelectorAll("input, select").forEach(el => {
let name = el.getAttribute("name");
el.setAttribute("name", name.replace(/\[\d+\]/, `[${tripIndex}]`));
el.value = "";
});
newTrip.querySelector(".tripIndex").innerText = tripIndex + 1;
const removeBtn = newTrip.querySelector(".removeTrip");
if (removeBtn) {
removeBtn.style.display = "inline-block";
}
// ✅ Reset datepicker
let dateInput = newTrip.querySelector(".trip-dates");
dateInput.value = "";
dateInput.removeAttribute("id");
dateInput.removeAttribute("aria-haspopup");
dateInput.removeAttribute("aria-expanded");
$(dateInput).removeClass("hasDatepicker");
container.appendChild(newTrip);
initMultiDatePicker(dateInput);
tripIndex++;
});
// Remove Trip
document.addEventListener("click", function(e) {
if (e.target.closest(".removeTrip")) {
e.target.closest(".tripItem").remove();
}
});
</script>
@endsection