File: //var/www/html/dashboard.orbiwheels.com/resources/views/admin/driver/create.blade.php
@extends('layout.master')
@section('content')
<div class="right_col" role="main">
<div class="">
<div class="row" style="display: block;">
<div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">
<h2>Driver <small>Create</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li>
<a href="{{ route('admin.driver.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.driver.store') }}"
method="POST" enctype="multipart/form-data">
@csrf
<span class="section">General Details</span>
<div class="row">
<div class="col-md-3 col-sm-6 form-group">
<label for="transporter_id">Select 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 }}"
{{ old('transporter_id') == $transporter->id ? 'selected' : '' }}>
{{ $transporter->company_name }}
</option>
@endforeach
</select>
@error('transporter_id')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
<div class="col-md-3 col-sm-6 form-group ">
<label for="heard">name *:</label>
<input type="text" class="form-control " id="inputSuccess4"
value="{{ old('name') }}" placeholder="Name" name="name">
@error('name')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
<div class="col-md-3 col-sm-6 form-group ">
<label for="heard">Email *:</label>
<input type="text" class="form-control " id="inputSuccess4"
value="{{ old('email') }}" placeholder="Email" name="email">
@error('email')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
<div class="col-md-3 col-sm-6 form-group ">
<label for="heard">Phone *:</label>
<input type="tel" class="form-control" id="inputSuccess5" placeholder="Phone"
name="phone" value="{{ old('phone') }}">
@error('phone')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
<div class="col-md-3 col-sm-6 form-group">
<label>Alternate Number:</label>
<input type="tel" class="form-control" name="alternate_number"
value="{{ old('alternate_number') }}">
@error('alternate_number')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
<div class="col-md-3 col-sm-6 form-group">
<label>Age *:</label>
<input type="text" class="form-control" name="age"
value="{{ old('age') }}">
@error('age')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
<div class="col-md-3 col-sm-6 form-group">
<label>Gender *:</label>
<select name="gender" class="form-control">
<option value="">Select Gender</option>
<option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male
</option>
<option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female
</option>
<option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Other
</option>
</select>
@error('gender')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
<div class="col-md-3 col-sm-6 form-group">
<label>Profile Image *:</label>
<input type="file" class="form-control" name="profile_image">
@error('profile_image')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
<div class="col-md-3 col-sm-6 form-group ">
<label for="heard">Status *:</label>
<select name="status" class="form-control" id="statusInput">
<option value="active">Active</option>
<option value="inactive">Inactive</option>
</select>
@error('status')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
<div class="col-md-3 col-sm-6 form-group">
<label>Experience:</label>
<input type="text" class="form-control" name="experience"
value="{{ old('experience') }}">
@error('experience')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
<div class="col-md-3 col-sm-6 form-group">
<label>About:</label>
<textarea class="form-control" name="about">{{ old('about') }}</textarea>
@error('about')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
</div>
<hr>
<span class="section">Driver Documents</span>
{{-- Dynamic Documents --}}
<div class="col-md-12">
<div id="documents-wrapper">
<!-- initial row (index 0) -->
<div class="row document-row mb-2" data-index="0">
<div class="col-md-3 form-group">
<label>Document Type *</label>
<select name="documents[0][type]" class="form-control doc-type">
<option value="">Select Document Type</option>
<option value="dl">Driving License</option>
<option value="aadhar">Aadhar Card</option>
<option value="pan">PAN Card</option>
<option value="passport">Passport</option>
</select>
@error('documents.*.type')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
<div class="col-md-3 form-group">
<label>Document Number *</label>
<input type="text" name="documents[0][number]" class="form-control"
placeholder="Document Number">
@error('documents.*.number')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
<div class="col-md-3 form-group">
<label>Document Photo *</label>
<input type="file" name="documents[0][file]" class="form-control">
@error('documents.*.file')
<label class="text-danger">{{ $message }}</label>
@enderror
</div>
</div>
</div>
<button type="button" id="add-document" class="btn btn-primary btn-sm mt-2">+ Add
More</button>
</div>
<div class="form-group row">
<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>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('script')
<script>
let docIndex = 1;
let allDocTypes = {
'dl': 'Driving License',
'aadhar': 'Aadhar Card',
'pan': 'PAN Card',
'passport': 'Passport'
};
function getAvailableDocTypes() {
let selectedTypes = [];
$('select.doc-type').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;
}
}
return available;
}
function generateDocRow(idx) {
let availableDocTypes = getAvailableDocTypes();
if (Object.keys(availableDocTypes).length === 0) {
Swal.fire('Info', 'All document types already selected!', 'info');
return '';
}
let optionsHtml = '<option value="">Select Document Type</option>';
for (const [key, value] of Object.entries(availableDocTypes)) {
optionsHtml += `<option value="${key}">${value}</option>`;
}
return `
<div class="row document-row mb-2" data-index="${idx}">
<div class="col-md-3 form-group">
<label>Document Type *</label>
<select name="documents[${idx}][type]" class="form-control doc-type">
${optionsHtml}
</select>
</div>
<div class="col-md-3 form-group">
<label>Document Number *</label>
<input type="text" name="documents[${idx}][number]" class="form-control" placeholder="Document Number">
</div>
<div class="col-md-3 form-group">
<label>Document Photo *</label>
<input type="file" name="documents[${idx}][file]" class="form-control">
</div>
<div class="col-md-1 form-group d-flex align-items-center mt-4">
<button type="button" class="btn btn-danger btn-sm remove-doc">X</button>
</div>
</div>`;
}
$('#add-document').click(function() {
let html = generateDocRow(docIndex);
if (html) {
$('#documents-wrapper').append(html);
docIndex++;
}
});
$(document).on('click', '.remove-doc', function() {
$(this).closest('.document-row').remove();
});
$(document).on('change', '.doc-type', function() {
let row = $(this).closest('.document-row');
let type = $(this).val();
let rowIndex = row.attr('data-index');
row.find('.expiry-date').remove();
if (type === 'dl') {
let expiryHtml = `
<div class="col-md-2 form-group expiry-date">
<label>Expiry Date *</label>
<input type="date" name="documents[${rowIndex}][expiry_date]" class="form-control">
</div>`;
row.find('.col-md-3.form-group').eq(2).after(expiryHtml);
}
});
</script>
@endpush