290 lines
12 KiB
PHP
290 lines
12 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('page_title', 'Add Station')
|
|
|
|
@section('content')
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">{{ isset($station) ? 'Edit Station' : 'Add New Station' }}</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
@include('components.alerts')
|
|
|
|
<form id="stationForm"
|
|
action="{{ isset($station) ? route('stations.update', $station['id']) : route('stations.store') }}"
|
|
method="POST"
|
|
enctype="multipart/form-data"
|
|
class="needs-validation"
|
|
novalidate>
|
|
@csrf
|
|
@if(isset($station))
|
|
@method('PUT')
|
|
@endif
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="name">Station Name <span class="text-danger">*</span></label>
|
|
<input type="text"
|
|
class="form-control"
|
|
id="name"
|
|
name="name"
|
|
value="{{ old('name', $station['name'] ?? '') }}"
|
|
required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="code">Station Code <span class="text-danger">*</span></label>
|
|
<input type="text"
|
|
class="form-control"
|
|
id="code"
|
|
name="code"
|
|
value="{{ old('code', $station['code'] ?? '') }}"
|
|
required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="address">Address <span class="text-danger">*</span></label>
|
|
<textarea class="form-control"
|
|
id="address"
|
|
name="address"
|
|
rows="3"
|
|
required>{{ old('address', $station['address'] ?? '') }}</textarea>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="region">Region <span class="text-danger">*</span></label>
|
|
<select class="form-control"
|
|
id="region"
|
|
name="region"
|
|
required>
|
|
<option value="">Select Region</option>
|
|
@foreach($regions ?? [] as $region)
|
|
<option value="{{ $region['id'] }}"
|
|
{{ old('region', $station['region_id'] ?? '') == $region['id'] ? 'selected' : '' }}>
|
|
{{ $region['name'] }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="latitude">Latitude <span class="text-danger">*</span></label>
|
|
<input type="number"
|
|
class="form-control"
|
|
id="latitude"
|
|
name="latitude"
|
|
step="any"
|
|
value="{{ old('latitude', $station['latitude'] ?? '') }}"
|
|
required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="longitude">Longitude <span class="text-danger">*</span></label>
|
|
<input type="number"
|
|
class="form-control"
|
|
id="longitude"
|
|
name="longitude"
|
|
step="any"
|
|
value="{{ old('longitude', $station['longitude'] ?? '') }}"
|
|
required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="status">Status <span class="text-danger">*</span></label>
|
|
<select class="form-control"
|
|
id="status"
|
|
name="status"
|
|
required>
|
|
<option value="active" {{ old('status', $station['status'] ?? '') == 'active' ? 'selected' : '' }}>Active</option>
|
|
<option value="inactive" {{ old('status', $station['status'] ?? '') == 'inactive' ? 'selected' : '' }}>Inactive</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="image">Station Image</label>
|
|
<input type="file"
|
|
class="form-control-file"
|
|
id="image"
|
|
name="image"
|
|
accept="image/*">
|
|
@if(isset($station) && $station['image'])
|
|
<div class="mt-2">
|
|
<img src="{{ $station['image'] }}"
|
|
alt="Station Image"
|
|
class="img-thumbnail"
|
|
style="max-height: 100px;">
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<button type="submit" class="btn btn-primary">
|
|
{{ isset($station) ? 'Update Station' : 'Add Station' }}
|
|
</button>
|
|
<a href="{{ route('stations.index') }}" class="btn btn-secondary">Cancel</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Form validation
|
|
$('#stationForm').validate({
|
|
rules: {
|
|
name: {
|
|
required: true,
|
|
minlength: 3
|
|
},
|
|
code: {
|
|
required: true,
|
|
minlength: 2
|
|
},
|
|
address: {
|
|
required: true,
|
|
minlength: 10
|
|
},
|
|
region: {
|
|
required: true
|
|
},
|
|
latitude: {
|
|
required: true,
|
|
number: true
|
|
},
|
|
longitude: {
|
|
required: true,
|
|
number: true
|
|
},
|
|
status: {
|
|
required: true
|
|
}
|
|
},
|
|
messages: {
|
|
name: {
|
|
required: "Please enter station name",
|
|
minlength: "Station name must be at least 3 characters"
|
|
},
|
|
code: {
|
|
required: "Please enter station code",
|
|
minlength: "Station code must be at least 2 characters"
|
|
},
|
|
address: {
|
|
required: "Please enter station address",
|
|
minlength: "Address must be at least 10 characters"
|
|
},
|
|
region: {
|
|
required: "Please select a region"
|
|
},
|
|
latitude: {
|
|
required: "Please enter latitude",
|
|
number: "Please enter a valid number"
|
|
},
|
|
longitude: {
|
|
required: "Please enter longitude",
|
|
number: "Please enter a valid number"
|
|
},
|
|
status: {
|
|
required: "Please select status"
|
|
}
|
|
},
|
|
errorElement: 'span',
|
|
errorPlacement: function(error, element) {
|
|
error.addClass('invalid-feedback');
|
|
element.closest('.form-group').append(error);
|
|
},
|
|
highlight: function(element, errorClass, validClass) {
|
|
$(element).addClass('is-invalid');
|
|
},
|
|
unhighlight: function(element, errorClass, validClass) {
|
|
$(element).removeClass('is-invalid');
|
|
},
|
|
submitHandler: function(form) {
|
|
// Show loading indicator
|
|
const submitBtn = $(form).find('button[type="submit"]');
|
|
const originalText = submitBtn.text();
|
|
submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...');
|
|
|
|
// Submit form
|
|
$.ajax({
|
|
url: form.action,
|
|
type: form.method,
|
|
data: new FormData(form),
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(response) {
|
|
// Show success message
|
|
toastr.success(response.message);
|
|
|
|
// Redirect to stations list
|
|
setTimeout(function() {
|
|
window.location.href = '{{ route("stations.index") }}';
|
|
}, 1500);
|
|
},
|
|
error: function(xhr) {
|
|
// Show error message
|
|
const errors = xhr.responseJSON.errors;
|
|
Object.keys(errors).forEach(function(key) {
|
|
toastr.error(errors[key][0]);
|
|
});
|
|
|
|
// Reset button
|
|
submitBtn.prop('disabled', false).text(originalText);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Image preview
|
|
$('#image').change(function() {
|
|
const file = this.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
const img = $('<img>')
|
|
.attr('src', e.target.result)
|
|
.addClass('img-thumbnail')
|
|
.css('max-height', '100px');
|
|
|
|
const imgContainer = $('#image').siblings('div');
|
|
if (imgContainer.length) {
|
|
imgContainer.html(img);
|
|
} else {
|
|
$('#image').after($('<div class="mt-2">').append(img));
|
|
}
|
|
}
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|