File: //var/www/html/orbidirectory.com/resources/views/admin/cargo_vehicle/create.blade.php
@extends('adminlte::page')
@section('title', 'Dashboard')
@section('content_header')
<h1>Vehicles</h1>
{{-- <small>Manage Vehicles</small> --}}
@stop
@section('content')
<div class="card card-dark">
<div class="card-header">
<h3 class="card-title"> Add Vehicle </h3>
</div>
<form method="POST" id="add_vehicle" role="form" action="{{ route('store.cargo.vehicle')}}" enctype="multipart/form-data"
class="jqueryValidation">
@csrf
<div class="card-body editCard_body">
<div class="form-group row">
<div class="col-md-6">
<label for="group">Transporter</label>
<select class="form-control select2" name="transporter_id" required>
<option value="">--Select--</option>
@foreach ($transporters as $key)
<option value="{{ $key->id }}"
{{ old('transporter_id') == $key->id ? 'selected' : '' }}>{{ $key->get_user->name }}
{{ $key->get_user->last_name }}
</option>
@endforeach
</select>
</div>
<div class="col-md-6">
<label for="cargo_vehicle_image">Image</label>
<input class="form-control" id="cargo_vehicle_image" name="cargo_vehicle_image" type="file" placeholder="Upload Image" required />
<!-- Image Preview Area -->
<div id="imagePreviewContainer" style="margin-top:10px; position:relative; display:none;">
<img id="imagePreview" src="" alt="Image Preview" style="max-width: 20%; height: auto; border:1px solid #ddd; padding:5px;" />
<span id="removeImage" style="position:absolute; top:5px; right:5px; background:#fff; border-radius:50%; padding:2px 6px; cursor:pointer; color:red; font-weight:bold;">×</span>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label for="make_id">Brand</label>
<select class="form-control select2" name="cargo_brand_id" id="cargo_brand_id" required>
<option value="">--Select Brand--</option>
@foreach ($cargo_brands as $brand)
<option value="{{ $brand->id }}" {{ old('brand') == $brand->id ? 'selected' : '' }}>
{{ $brand->name }}</option>
@endforeach
</select>
</div>
<div class="col-md-6">
<label for="model_id">Model</label>
<select class="form-control select2" name="cargo_model_id" id="cargo_model_id" required>
<option value="">--Select Model--</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label for="group">Vehicle Type</label>
<select class="form-control select2" name="cargo_type_id" required>
<option value="">--Select--</option>
@foreach ($cargo_types as $type)
<option value="{{ $type->id }}"
{{ old('cargo_type_id') == $type->id ? 'selected' : '' }}>{{ $type->name }}</option>
@endforeach
</select>
</div>
<div class="col-md-6">
<label for="fuel_type">Fuel Type</label>
<select name="fuel_type" id="fuel_type" class="form-control" required>
<option value="">--Select--</option>
@foreach (App\Models\CargoVehicle::fuel_type as $key => $label)
<option value="{{ $key }}" {{ old('fuel_type') == $key ? 'selected' : '' }}>
{{ $label }}</option>
@endforeach
</select>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label for="fuel_type">Body Type</label>
<select name="body_type" id="body_type" class="form-control" required>
<option value="">--Select--</option>
@foreach (App\Models\CargoVehicle::body_type as $key => $label)
<option value="{{ $key }}" {{ old('body_type') == $key ? 'selected' : '' }}>
{{ $label }}</option>
@endforeach
</select>
</div>
<div class="col-md-6">
<label for="loading_ramp_available">Loading Ramp Available</label>
<select name="loading_ramp_available" id="loading_ramp_available" class="form-control" required>
<option value="">--Select--</option>
@foreach (App\Models\CargoVehicle::loading_ramp_available as $key => $label)
<option value="{{ $key }}" {{ old('loading_ramp_available') == $key ? 'selected' : '' }}>
{{ $label }}
</option>
@endforeach
</select>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label for="weight_capacity">Weight Capacity</label>
<input type="number" class="form-control" id="weight_capacity" name="weight_capacity"
value="{{ old('license_plate') }}" placeholder="Enter License Plate" required />
</div>
<div class="col-md-6">
<label for="weight_unit">Weight Unit</label>
<select name="weight_unit" id="weight_unit" class="form-control" required>
<option value="">--Select--</option>
@foreach (App\Models\CargoVehicle::weight_unit as $key => $label)
<option value="{{ $key }}" {{ old('weight_unit') == $key ? 'selected' : '' }}>
{{ $label }}
</option>
@endforeach
</select>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label for="permit_type">Permit Type</label>
<select name="permit_type" id="permit_type" class="form-control" required>
<option value="">--Select--</option>
@foreach (App\Models\CargoVehicle::permit_type as $key => $label)
<option value="{{ $key }}" {{ old('permit_type') == $key ? 'selected' : '' }}>
{{ $label }}
</option>
@endforeach
</select>
</div>
<div class="col-md-6">
<label for="length_in">length</label>
<input type="number" class="form-control" id="length_in" name="length_in" step="0.01"
value="{{ old('length_in') }}" placeholder="Enter length" required />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label for="length_in">width</label>
<input type="number" class="form-control" id="width_in" name="width_in" step="0.01"
value="{{ old('width_in') }}" placeholder="Enter width" required />
</div>
<div class="col-md-6">
<label for="length_in">depth</label>
<input type="number" class="form-control" id="depth_in" name="depth_in" step="0.01"
value="{{ old('depth_in') }}" placeholder="Enter depth" required />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label for="bed_dimension_unit">Bed Dimension Unit</label>
<select name="bed_dimension_unit" id="bed_dimension_unit" class="form-control" required>
<option value="">--Select--</option>
@foreach (App\Models\CargoVehicle::bed_dimension_unit as $key => $label)
<option value="{{ $key }}" {{ old('bed_dimension_unit') == $key ? 'selected' : '' }}>
{{ $label }}
</option>
@endforeach
</select>
</div>
<div class="col-md-6">
<label for="status">Status</label>
<select name="status" id="status" class="form-control">
@foreach (App\Models\Vehicles::status as $key => $status)
<option value="{{ $key }}"{{ old('status') == $key ? 'selected' : '' }}>
{{ $status }}</option>
@endforeach
</select>
</div>
</div>
<div class="form-group row">
<div class="col-md-6" id="inactive_reason_group" style="display: none;">
<label for="inactive_reason">Reason</label>
<x-adminlte-textarea class="form-control" id="inactive_reason" name="inactive_reason"
placeholder="Enter Inactive or Banned Reason">
{{ old('inactive_reason') }}
</x-adminlte-textarea>
</div>
</div>
<div class="card-footer d-flex justify-content-end">
<a href="{{ route('vehicle.index') }}" class="btn btn-danger mx-1">Cancel</a>
<button type="submit" class="btn btn-dark mx-1">Submit</button>
</div>
</div>
</form>
</div>
@stop
@section('js')
<script>
$(document).ready(function () {
$('#cargo_brand_id').on('change', function () {
var brandId = $(this).val();
$('#cargo_model_id').empty().append('<option value="">--Select Model--</option>');
if (brandId) {
$.ajax({
url: '{{ route("get.models.by.brand") }}',
type: 'GET',
data: { brand_id: brandId }, // 🔁 pass as query param
dataType: 'json',
success: function (data) {
if (data.length > 0) {
$.each(data, function (key, model) {
$('#cargo_model_id').append('<option value="' + model.id + '">' + model.name + '</option>');
});
}
}
});
}
});
});
// image preview code
document.getElementById('cargo_vehicle_image').addEventListener('change', function(event) {
const previewContainer = document.getElementById('imagePreviewContainer');
const preview = document.getElementById('imagePreview');
const removeBtn = document.getElementById('removeImage');
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
previewContainer.style.display = 'block';
};
reader.readAsDataURL(file);
}
});
document.getElementById('removeImage').addEventListener('click', function() {
const previewContainer = document.getElementById('imagePreviewContainer');
const preview = document.getElementById('imagePreview');
const input = document.getElementById('cargo_vehicle_image');
// Clear image preview and file input
preview.src = '';
input.value = '';
previewContainer.style.display = 'none';
});
// For banned and inactive reason
function toggleInactiveReason() {
const value = $('#status').val();
if (value === "0" || value === "2") {
$('#inactive_reason_group').show();
} else {
$('#inactive_reason_group').hide();
$('#inactive_reason').val('');
}
}
$('#status').on('change', toggleInactiveReason);
toggleInactiveReason();
</script>
@endsection