185 lines
8.7 KiB
PHP
185 lines
8.7 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Manajemen Riwayat - INUFA')
|
|
|
|
@section('header', 'Manajemen Riwayat Pemesanan')
|
|
|
|
@section('content')
|
|
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
<div class="mb-6">
|
|
<h2 class="text-xl font-bold mb-2">Daftar Semua Pemesanan</h2>
|
|
<p class="text-gray-600">Menampilkan semua pesanan dari seluruh pengguna.</p>
|
|
</div>
|
|
|
|
<!-- Filter dan Pencarian -->
|
|
<div class="mb-6 flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
|
|
<div class="w-full md:w-1/3">
|
|
<label for="status-filter" class="block text-sm font-medium text-gray-700 mb-1">Filter Status</label>
|
|
<select id="status-filter" class="w-full border-gray-300 rounded-md shadow-sm p-2 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
|
|
<option value="">Semua Status</option>
|
|
<option value="pending">Pending</option>
|
|
<option value="confirmed">Confirmed</option>
|
|
<option value="ongoing">Ongoing</option>
|
|
<option value="completed">Completed</option>
|
|
<option value="cancelled">Cancelled</option>
|
|
</select>
|
|
</div>
|
|
<div class="w-full md:w-2/3">
|
|
<label for="search" class="block text-sm font-medium text-gray-700 mb-1">Cari Pemesanan</label>
|
|
<input type="text" id="search" placeholder="Cari berdasarkan ID, nama pengguna, atau lokasi..." class="w-full border-gray-300 rounded-md shadow-sm p-2 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabel Riwayat -->
|
|
@if(count($sewas) > 0)
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full bg-white">
|
|
<thead>
|
|
<tr class="bg-gray-100">
|
|
<th class="py-3 px-4 text-left">ID</th>
|
|
<th class="py-3 px-4 text-left">Pengguna</th>
|
|
<th class="py-3 px-4 text-left">Paket</th>
|
|
<th class="py-3 px-4 text-left">Tanggal Mulai</th>
|
|
<th class="py-3 px-4 text-left">Tanggal Selesai</th>
|
|
<th class="py-3 px-4 text-left">Total Harga</th>
|
|
<th class="py-3 px-4 text-left">Status</th>
|
|
<th class="py-3 px-4 text-left">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="orders-table-body">
|
|
@foreach($sewas as $sewa)
|
|
<tr class="border-b hover:bg-gray-50 order-row" data-status="{{ $sewa->status }}">
|
|
<td class="py-3 px-4 font-medium">#{{ $sewa->id }}</td>
|
|
<td class="py-3 px-4">{{ $sewa->user->name }}</td>
|
|
<td class="py-3 px-4">{{ $sewa->paket->nama }}</td>
|
|
<td class="py-3 px-4">{{ date('d/m/Y', strtotime($sewa->tanggal_mulai)) }}</td>
|
|
<td class="py-3 px-4">{{ date('d/m/Y', strtotime($sewa->tanggal_selesai)) }}</td>
|
|
<td class="py-3 px-4">Rp {{ number_format($sewa->total_harga, 0, ',', '.') }}</td>
|
|
<td class="py-3 px-4">
|
|
<span class="px-2 py-1 rounded-full text-xs font-semibold
|
|
{{ $sewa->status == 'pending' ? 'bg-yellow-100 text-yellow-800' :
|
|
($sewa->status == 'confirmed' ? 'bg-blue-100 text-blue-800' :
|
|
($sewa->status == 'ongoing' ? 'bg-purple-100 text-purple-800' :
|
|
($sewa->status == 'completed' ? 'bg-green-100 text-green-800' :
|
|
'bg-red-100 text-red-800'))) }}">
|
|
{{ ucfirst($sewa->status) }}
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<div class="flex space-x-2">
|
|
<a href="#" onclick="openStatusModal({{ $sewa->id }}, '{{ $sewa->status }}')" class="bg-blue-500 text-white py-1 px-2 rounded hover:bg-blue-600 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
|
</svg>
|
|
</a>
|
|
<a href="{{ route('riwayat.show', $sewa->id) }}" class="bg-green-500 text-white py-1 px-2 rounded hover:bg-green-600 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
|
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@else
|
|
<div class="text-center py-8">
|
|
<p class="text-gray-500">Belum ada data pemesanan.</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Modal Update Status -->
|
|
<div id="status-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center">
|
|
<div class="bg-white rounded-lg p-6 max-w-md w-full">
|
|
<h3 class="text-xl font-bold mb-4">Update Status Pemesanan</h3>
|
|
<form id="status-form" action="" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
<div class="mb-4">
|
|
<label for="status" class="block text-gray-700 font-medium mb-2">Status Baru</label>
|
|
<select id="status" name="status" class="w-full border-gray-300 rounded-md shadow-sm p-2 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
|
|
<option value="pending">Pending</option>
|
|
<option value="confirmed">Confirmed</option>
|
|
<option value="ongoing">Ongoing</option>
|
|
<option value="completed">Completed</option>
|
|
<option value="cancelled">Cancelled</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex justify-end space-x-2">
|
|
<button type="button" onclick="closeStatusModal()" class="bg-gray-300 text-gray-800 py-2 px-4 rounded hover:bg-gray-400 transition-colors">
|
|
Batal
|
|
</button>
|
|
<button type="submit" class="bg-blue-800 text-white py-2 px-4 rounded hover:bg-blue-900 transition-colors">
|
|
Simpan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
// Filter berdasarkan status
|
|
document.getElementById('status-filter').addEventListener('change', function() {
|
|
const status = this.value;
|
|
const rows = document.querySelectorAll('.order-row');
|
|
|
|
rows.forEach(row => {
|
|
if (status === '' || row.dataset.status === status) {
|
|
row.style.display = '';
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Pencarian
|
|
document.getElementById('search').addEventListener('keyup', function() {
|
|
const searchTerm = this.value.toLowerCase();
|
|
const rows = document.querySelectorAll('.order-row');
|
|
|
|
rows.forEach(row => {
|
|
const rowText = row.textContent.toLowerCase();
|
|
if (rowText.includes(searchTerm)) {
|
|
row.style.display = '';
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Modal status
|
|
function openStatusModal(id, currentStatus) {
|
|
const modal = document.getElementById('status-modal');
|
|
const form = document.getElementById('status-form');
|
|
const statusSelect = document.getElementById('status');
|
|
|
|
// Set action URL
|
|
form.action = `/admin/riwayat/${id}/status`;
|
|
|
|
// Set current status
|
|
statusSelect.value = currentStatus;
|
|
|
|
// Show modal
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
function closeStatusModal() {
|
|
const modal = document.getElementById('status-modal');
|
|
modal.classList.add('hidden');
|
|
}
|
|
|
|
// Close modal jika klik di luar modal
|
|
window.onclick = function(event) {
|
|
const modal = document.getElementById('status-modal');
|
|
if (event.target === modal) {
|
|
closeStatusModal();
|
|
}
|
|
};
|
|
</script>
|
|
@endsection
|