240 lines
11 KiB
PHP
240 lines
11 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Station Management</h3>
|
|
<div class="card-tools">
|
|
<a href="{{ route('stations.create') }}" class="btn btn-primary">
|
|
<i class="fas fa-plus"></i> Add New Station
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
@include('components.alerts')
|
|
|
|
<div class="mb-3">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="searchInput" placeholder="Search stations...">
|
|
<div class="input-group-append">
|
|
<button class="btn btn-outline-secondary" type="button">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<select class="form-control" id="regionFilter">
|
|
<option value="">All Regions</option>
|
|
@foreach($regions as $region)
|
|
<option value="{{ $region }}">{{ $region }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<select class="form-control" id="statusFilter">
|
|
<option value="">All Status</option>
|
|
<option value="1">Active</option>
|
|
<option value="0">Inactive</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped" id="stationsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Address</th>
|
|
<th>Region</th>
|
|
<th>Contact</th>
|
|
<th>Status</th>
|
|
<th>Last Updated</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($stations as $station)
|
|
<tr>
|
|
<td>{{ $station['id'] }}</td>
|
|
<td>{{ $station['name'] }}</td>
|
|
<td>
|
|
<address class="mb-0">
|
|
{{ $station['address'] }}
|
|
<br>
|
|
<small class="text-muted">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
<a href="https://maps.google.com/?q={{ urlencode($station['address']) }}"
|
|
target="_blank"
|
|
class="text-info">
|
|
View on Map
|
|
</a>
|
|
</small>
|
|
</address>
|
|
</td>
|
|
<td>{{ $station['region'] }}</td>
|
|
<td>
|
|
<i class="fas fa-phone"></i> {{ $station['contact_number'] }}
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-{{ $station['is_active'] ? 'success' : 'danger' }}">
|
|
{{ $station['is_active'] ? 'Active' : 'Inactive' }}
|
|
</span>
|
|
</td>
|
|
<td>{{ \Carbon\Carbon::parse($station['updated_at'])->format('Y-m-d H:i') }}</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<a href="{{ route('stations.edit', $station['id']) }}"
|
|
class="btn btn-sm btn-info"
|
|
data-toggle="tooltip"
|
|
title="Edit Station">
|
|
<i class="fas fa-edit"></i>
|
|
</a>
|
|
<a href="{{ route('fuel-prices.index', ['station_id' => $station['id']]) }}"
|
|
class="btn btn-sm btn-warning"
|
|
data-toggle="tooltip"
|
|
title="Manage Fuel Prices">
|
|
<i class="fas fa-gas-pump"></i>
|
|
</a>
|
|
<form action="{{ route('stations.destroy', $station['id']) }}"
|
|
method="POST"
|
|
class="d-inline delete-form">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit"
|
|
class="btn btn-sm btn-danger"
|
|
data-toggle="tooltip"
|
|
title="Delete Station">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="8" class="text-center">No stations found</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
{{ $stations->links() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
|
|
<style>
|
|
.station-address {
|
|
max-width: 250px;
|
|
white-space: normal;
|
|
}
|
|
.btn-group {
|
|
gap: 5px;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize DataTable
|
|
const table = $('#stationsTable').DataTable({
|
|
"responsive": true,
|
|
"processing": true,
|
|
"serverSide": true,
|
|
"ajax": "{{ route('stations.data') }}",
|
|
"order": [[0, "desc"]],
|
|
"columns": [
|
|
{ "data": "id" },
|
|
{ "data": "name" },
|
|
{
|
|
"data": "address",
|
|
"render": function(data, type, row) {
|
|
if (type === 'display') {
|
|
return `<address class="mb-0 station-address">
|
|
${data}<br>
|
|
<small class="text-muted">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
<a href="https://maps.google.com/?q=${encodeURIComponent(data)}"
|
|
target="_blank"
|
|
class="text-info">
|
|
View on Map
|
|
</a>
|
|
</small>
|
|
</address>`;
|
|
}
|
|
return data;
|
|
}
|
|
},
|
|
{ "data": "region" },
|
|
{
|
|
"data": "contact_number",
|
|
"render": function(data) {
|
|
return `<i class="fas fa-phone"></i> ${data}`;
|
|
}
|
|
},
|
|
{
|
|
"data": "is_active",
|
|
"render": function(data) {
|
|
const badge = data ? 'success' : 'danger';
|
|
const text = data ? 'Active' : 'Inactive';
|
|
return `<span class="badge badge-${badge}">${text}</span>`;
|
|
}
|
|
},
|
|
{
|
|
"data": "updated_at",
|
|
"render": function(data) {
|
|
return moment(data).format('YYYY-MM-DD HH:mm');
|
|
}
|
|
},
|
|
{
|
|
"data": "actions",
|
|
"orderable": false,
|
|
"searchable": false
|
|
}
|
|
]
|
|
});
|
|
|
|
// Apply filters
|
|
$('#regionFilter, #statusFilter').change(function() {
|
|
table.ajax.reload();
|
|
});
|
|
|
|
// Search functionality
|
|
$('#searchInput').keyup(function() {
|
|
table.search($(this).val()).draw();
|
|
});
|
|
|
|
// Delete confirmation
|
|
$(document).on('submit', '.delete-form', function(e) {
|
|
e.preventDefault();
|
|
const stationName = $(this).closest('tr').find('td:eq(1)').text();
|
|
|
|
if (confirm(`Are you sure you want to delete the station "${stationName}"? This action cannot be undone.`)) {
|
|
this.submit();
|
|
}
|
|
});
|
|
|
|
// Initialize tooltips
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
});
|
|
</script>
|
|
@endpush
|