File: /var/www/html/dashboard.orbiwheels.com/resources/views/admin/vehicle/create.blade.php
@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>Vehicle <small>Create</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="{{ route('admin.vehicle.index') }}" class="closeBtn"><i class="fa fa-arrow-left"></i> Back</a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<form class="form-label-left input_mask" action="{{ route('admin.vehicle.store') }}"
method="POST" enctype="multipart/form-data">
@csrf
{{-- ================= General Details ================= --}}
<span class="section">General Details</span>
<div class="row">
{{-- Transporter --}}
<div class="col-md-3 col-sm-6 form-group">
<label for="transporter_id">Transporter *</label>
<select name="transporter_id" id="transporter_id" class="form-control" required>
<option value="">Select Transporter</option>
@foreach ($transporters as $transporter)
<option value="{{ $transporter->id }}">
{{ $transporter->company_name }}
</option>
@endforeach
</select>
@error('transporter_id')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
{{-- Vehicle Type --}}
<div class="col-md-3 col-sm-6 form-group ">
<label>Vehicle Type *:</label>
<select name="vehicle_type" class="form-control">
<option value="">Select Vehicle Type</option>
@foreach ($vehicleTypes as $type)
<option value="{{ $type->id }}">{{ $type->name }}</option>
@endforeach
</select>
@error('vehicle_type')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
{{-- Make --}}
<div class="col-md-3 col-sm-6 form-group ">
<label>Manufacturer *:</label>
<input type="text" class="form-control" name="make"
value="{{ old('make') }}" placeholder="Make">
@error('make')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
{{-- Model --}}
<div class="col-md-3 col-sm-6 form-group ">
<label>Model *:</label>
<input type="text" class="form-control" name="model"
value="{{ old('model') }}" placeholder="Model">
@error('model')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
{{-- Manufacturing Year --}}
<div class="col-md-3 col-sm-6 form-group ">
<label>Manufacturing year *:</label>
<input type="tel" class="form-control" name="manufacturing_year"
value="{{ old('manufacturing_year') }}" placeholder="Manufacturing Year">
@error('manufacturing_year')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
{{-- Vehicle Images --}}
<div class="col-md-3 col-sm-6 form-group">
<label for="vehicle_images">Vehicle Images:</label>
<input type="file" class="form-control" name="vehicle_images"
id="vehicle_images" accept="image/*">
@error('vehicle_images')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
{{-- Status --}}
<div class="col-md-3 col-sm-6 form-group ">
<label>Status *:</label>
<select name="status" class="form-control">
<option value="active">Active</option>
<option value="inactive">Inactive</option>
</select>
@error('status')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
</div>
{{-- ================= Vehicle Documents ================= --}}
<span class="section">Vehicle Documents</span>
<div class="row document-row">
<div class="col-md-3 col-sm-6 form-group">
<label>Document Type *:</label>
<select name="documents[0][type]" class="form-control">
<option value="">Select Type</option>
<option value="rc">Registration Certificate</option>
<option value="insurance">Insurance</option>
<option value="pollution">Pollution</option>
<option value="permit">Permit</option>
<option value="other">Other</option>
</select>
@error('documents.0.type')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
<div class="col-md-3 col-sm-6 form-group">
<label>Document Number:</label>
<input type="text" class="form-control" name="documents[0][number]"
placeholder="Document Number">
@error('documents.0.number')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
<div class="col-md-3 col-sm-6 form-group">
<label>Document File:</label>
<input type="file" class="form-control" name="documents[0][file]">
@error('documents.0.file')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
<div class="col-md-2 col-sm-6 form-group">
<label>Expiry Date:</label>
<input type="date" class="form-control" name="documents[0][expiry_date]">
@error('documents.0.expiry_date')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
</div>
<div id="documentsContainer"></div>
{{-- Add More Button --}}
<div class="row mt-2">
<div class="col-md-12">
<button type="button" id="addDocument" class="btn btn-info">+ Add
Document</button>
</div>
</div>
{{-- Submit --}}
<div class="form-group row mt-3">
<div class="col-md-9 col-sm-9 offset-md-10">
<button class="btn btn-primary" type="reset">Reset</button>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div> {{-- x_content --}}
</div>
</div>
</div>
</div>
</div>
@endsection
@push('script')
<script>
let docIndex = 1;
let allDocTypes = {
'rc': 'Registration Certificate',
'insurance': 'Insurance',
'pollution': 'Pollution',
'permit': 'Permit',
'other': 'Other'
};
function updateAllDocTypeOptions() {
let selectedTypes = [];
$('select[name^="documents"]').each(function() {
let val = $(this).val();
if (val) selectedTypes.push(val);
});
$('select[name^="documents"]').each(function() {
let currentVal = $(this).val();
let optionsHtml = '<option value="">Select Type</option>';
for (const [key, value] of Object.entries(allDocTypes)) {
if (!selectedTypes.includes(key) || key === currentVal) {
optionsHtml +=
`<option value="${key}" ${key === currentVal ? 'selected' : ''}>${value}</option>`;
}
}
$(this).html(optionsHtml);
});
}
function generateDocRow(idx) {
let selectedTypes = [];
$('select[name^="documents"]').each(function() {
let val = $(this).val();
if (val) selectedTypes.push(val);
});
let available = {};
for (const [key, value] of Object.entries(allDocTypes)) {
if (!selectedTypes.includes(key)) available[key] = value;
}
if (Object.keys(available).length === 0) {
Swal.fire('Info', 'All document types already selected!', 'info');
return '';
}
let optionsHtml = '<option value="">Select Type</option>';
for (const [key, value] of Object.entries(available)) {
optionsHtml += `<option value="${key}">${value}</option>`;
}
return `
<div class="row document-row mt-2" data-index="${idx}">
<div class="col-md-3 col-sm-6 form-group">
<label>Document Type *:</label>
<select name="documents[${idx}][type]" class="form-control">
${optionsHtml}
</select>
</div>
<div class="col-md-3 col-sm-6 form-group">
<label>Document Number:</label>
<input type="text" class="form-control" name="documents[${idx}][number]" placeholder="Document Number">
</div>
<div class="col-md-3 col-sm-6 form-group">
<label>Document File:</label>
<input type="file" class="form-control" name="documents[${idx}][file]">
</div>
<div class="col-md-2 col-sm-6 form-group">
<label>Expiry Date:</label>
<input type="date" class="form-control" name="documents[${idx}][expiry_date]">
</div>
<div class="col-md-1 col-sm-6 form-group d-flex align-items-end">
<button type="button" class="btn btn-danger removeDocument">x</button>
</div>
</div>`;
}
$('#addDocument').click(function() {
let html = generateDocRow(docIndex);
if (html) {
$('#documentsContainer').append(html);
docIndex++;
updateAllDocTypeOptions();
}
});
$(document).on('change', 'select[name^="documents"]', function() {
updateAllDocTypeOptions();
});
$(document).on('click', '.removeDocument', function() {
$(this).closest('.document-row').remove();
updateAllDocTypeOptions();
});
</script>
@endpush