464 lines
22 KiB
PHP
464 lines
22 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Riwayat Sewa - INUFA')
|
|
|
|
@section('header', 'Riwayat Sewa')
|
|
|
|
@section('content')
|
|
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
@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">No</th>
|
|
<th class="py-3 px-4 text-left">Tanggal</th>
|
|
<th class="py-3 px-4 text-left">Paket</th>
|
|
<th class="py-3 px-4 text-left">Total Harga</th>
|
|
<th class="py-3 px-4 text-left">Nominal Pembayaran</th>
|
|
<th class="py-3 px-4 text-left">Sisa Pembayaran</th>
|
|
<th class="py-3 px-4 text-left">Status</th>
|
|
<th class="py-3 px-4 text-left">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($sewas as $index => $sewa)
|
|
<tr class="border-b hover:bg-gray-50">
|
|
<td class="py-3 px-4">{{ $index + 1 }}</td>
|
|
<td class="py-3 px-4">{{ $sewa->created_at->format('d/m/Y') }}</td>
|
|
<td class="py-3 px-4">{{ $sewa->paket->nama_paket }}</td>
|
|
<td class="py-3 px-4">Rp {{ number_format($sewa->total_harga, 0, ',', '.') }}</td>
|
|
<td class="py-3 px-4">
|
|
@if($sewa->nominal_pembayaran)
|
|
Rp {{ number_format($sewa->nominal_pembayaran, 0, ',', '.') }}
|
|
@else
|
|
<span class="text-gray-500">-</span>
|
|
@endif
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
@php
|
|
$sisaPembayaran = $sewa->total_harga - ($sewa->nominal_pembayaran ?? 0);
|
|
@endphp
|
|
@if($sisaPembayaran > 0)
|
|
<span class="text-red-600 font-medium">
|
|
Rp {{ number_format($sisaPembayaran, 0, ',', '.') }}
|
|
</span>
|
|
@else
|
|
<span class="text-green-600 font-medium">Lunas</span>
|
|
@endif
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="px-2 py-1 rounded-full text-xs font-semibold
|
|
@if($sewa->status == 'pending') bg-yellow-100 text-yellow-800
|
|
@elseif($sewa->status == 'confirmed') bg-blue-100 text-blue-800
|
|
@elseif($sewa->status == 'selesai') bg-green-100 text-green-800
|
|
@elseif($sewa->status == 'dibatalkan') bg-red-100 text-red-800
|
|
@elseif($sewa->status == 'ditolak') bg-red-100 text-red-800
|
|
@endif">
|
|
{{ ucfirst($sewa->status) }}
|
|
</span>
|
|
@if($sewa->status == 'ditolak' && $sewa->detail_status)
|
|
<div class="mt-1">
|
|
<button type="button"
|
|
onclick="showAlasanPenolakan('{{ $sewa->detail_status }}')"
|
|
class="text-xs text-blue-600 underline">
|
|
Lihat Alasan Penolakan
|
|
</button>
|
|
</div>
|
|
@endif
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<div class="space-y-2">
|
|
<!-- Tombol Detail dengan Modal -->
|
|
<button type="button"
|
|
onclick="showDetail('{{ $sewa->id }}')"
|
|
class="w-full bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700">
|
|
Detail
|
|
</button>
|
|
|
|
@if(!in_array($sewa->status, ['selesai', 'dibatalkan', 'ongoing']))
|
|
<button type="button"
|
|
onclick="showCancelForm('{{ $sewa->id }}', '{{ $sewa->paket->nama_paket }}', '{{ $sewa->status }}')"
|
|
class="w-full bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600">
|
|
Batalkan Pesanan
|
|
</button>
|
|
@endif
|
|
|
|
@if(in_array($sewa->status, ['dibatalkan', 'selesai']))
|
|
<form action="{{ route('riwayat.hapus', $sewa->id) }}" method="POST">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit"
|
|
onclick="return confirm('Apakah Anda yakin ingin menghapus riwayat pesanan ini?')"
|
|
class="w-full bg-gray-500 text-white px-3 py-1 rounded hover:bg-gray-600">
|
|
Hapus Riwayat
|
|
</button>
|
|
</form>
|
|
@endif
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Modal Detail -->
|
|
<div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
|
|
<div class="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<h3 class="text-xl font-bold text-gray-800">Detail Pesanan</h3>
|
|
<button onclick="closeDetail()" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="modalContent" class="space-y-4">
|
|
<!-- Konten modal akan diisi melalui JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Alasan Penolakan -->
|
|
<div id="alasanPenolakanModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
|
|
<div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<h3 class="text-lg font-bold text-gray-800">Alasan Penolakan</h3>
|
|
<button onclick="closeAlasanPenolakan()" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="bg-red-50 border-l-4 border-red-500 p-4 rounded">
|
|
<p id="alasanPenolakanText" class="text-red-700"></p>
|
|
</div>
|
|
<div class="mt-4 flex justify-end">
|
|
<button onclick="closeAlasanPenolakan()"
|
|
class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400">
|
|
Tutup
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Form Pembatalan -->
|
|
<div id="cancelFormModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
|
|
<div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<h3 class="text-lg font-bold text-gray-800">Form Pembatalan Pesanan</h3>
|
|
<button onclick="closeCancelForm()" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<h4 class="font-semibold text-gray-700 mb-2">Detail Pesanan</h4>
|
|
<div class="bg-gray-50 p-3 rounded text-sm">
|
|
<p><strong>ID Pesanan:</strong> <span id="cancelOrderId"></span></p>
|
|
<p><strong>Paket:</strong> <span id="cancelOrderPackage"></span></p>
|
|
<p><strong>Status:</strong> <span id="cancelOrderStatus"></span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="cancelOrderForm" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="mb-4">
|
|
<label for="alasan_pembatalan" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Alasan Pembatalan <span class="text-red-500">*</span>
|
|
</label>
|
|
<select id="alasan_pembatalan" name="alasan_pembatalan"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
|
|
required>
|
|
<option value="">-- Pilih Alasan --</option>
|
|
<option value="Perubahan rencana">Perubahan rencana</option>
|
|
<option value="Kendala keuangan">Kendala keuangan</option>
|
|
<option value="Tidak sesuai ekspektasi">Tidak sesuai ekspektasi</option>
|
|
<option value="Masalah teknis">Masalah teknis</option>
|
|
<option value="Lainnya">Lainnya</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-4" id="alasanLainnyaDiv" style="display:none;">
|
|
<label for="alasan_lainnya" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Jelaskan alasan lainnya
|
|
</label>
|
|
<textarea id="alasan_lainnya" name="alasan_lainnya" rows="3"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
|
|
placeholder="Silakan jelaskan alasan pembatalan Anda..."></textarea>
|
|
</div>
|
|
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h3 class="text-sm font-medium text-yellow-800">Peringatan</h3>
|
|
<div class="mt-2 text-sm text-yellow-700">
|
|
<p>Dengan membatalkan pesanan ini, Anda tidak akan dapat mengembalikannya. Alasan pembatalan akan dikirim ke admin untuk evaluasi.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button" onclick="closeCancelForm()"
|
|
class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
|
|
Batal
|
|
</button>
|
|
<button type="submit"
|
|
class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
|
|
Batalkan Pesanan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@else
|
|
<div class="text-center py-8">
|
|
<p class="text-gray-500">Belum ada riwayat pemesanan</p>
|
|
@auth
|
|
@if(auth()->user()->tipe_pengguna === 'customer')
|
|
<a href="{{ route('customer.sewa') }}" class="mt-4 inline-block bg-blue-800 text-white py-2 px-4 rounded hover:bg-blue-900 transition duration-200">
|
|
Pesan Sekarang
|
|
</a>
|
|
@else
|
|
<a href="{{ route('paket.index') }}" class="mt-4 inline-block bg-blue-800 text-white py-2 px-4 rounded hover:bg-blue-900 transition duration-200">
|
|
Lihat Paket
|
|
</a>
|
|
@endif
|
|
@else
|
|
<a href="{{ route('login') }}" class="mt-4 inline-block bg-blue-800 text-white py-2 px-4 rounded hover:bg-blue-900 transition duration-200">
|
|
Login untuk Memesan
|
|
</a>
|
|
@endauth
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
async function showDetail(sewaId) {
|
|
try {
|
|
const response = await fetch(`/riwayat/${sewaId}`, {
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
const modalContent = document.getElementById('modalContent');
|
|
modalContent.innerHTML = `
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Status Pembayaran -->
|
|
<div class="space-y-2">
|
|
<h4 class="font-semibold">Status Pembayaran</h4>
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<p class="text-sm">Tanggal Pembayaran: ${data.tanggal_pembayaran || '-'}</p>
|
|
<p class="text-sm">Status: ${data.status_pembayaran}</p>
|
|
${data.detail_status ? `<p class="text-sm text-red-600">Alasan Penolakan: ${data.detail_status}</p>` : ''}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Informasi Pengiriman -->
|
|
<div class="space-y-2">
|
|
<h4 class="font-semibold">Informasi Pengiriman</h4>
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<p class="text-sm">Lokasi: ${data.lokasi || '-'}</p>
|
|
<p class="text-sm">Kota: ${data.kota?.nama_kota || '-'}</p>
|
|
<p class="text-sm">Ongkir: ${data.ongkir ? `Rp ${parseInt(data.ongkir).toLocaleString('id-ID')}` : '-'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Nomor Rekening -->
|
|
${data.nomor_rekening ? `
|
|
<div class="space-y-2 md:col-span-2">
|
|
<h4 class="font-semibold">Nomor Rekening Pembayaran</h4>
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<p class="text-sm">${data.nomor_rekening}</p>
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
<!-- Bukti Pembayaran -->
|
|
${data.bukti_pembayaran ? `
|
|
<div class="space-y-2">
|
|
<h4 class="font-semibold">Bukti Pembayaran</h4>
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<a href="/storage/${data.bukti_pembayaran}" target="_blank"
|
|
class="text-blue-600 hover:text-blue-800">Lihat Bukti Pembayaran</a>
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
<!-- Jaminan -->
|
|
${data.foto_jaminan ? `
|
|
<div class="space-y-2">
|
|
<h4 class="font-semibold">Jaminan</h4>
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<p class="text-sm">Jenis: ${data.jenis_jaminan || '-'}</p>
|
|
<a href="/storage/${data.foto_jaminan}" target="_blank"
|
|
class="text-blue-600 hover:text-blue-800">Lihat Jaminan</a>
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('detailModal').classList.remove('hidden');
|
|
document.getElementById('detailModal').classList.add('flex');
|
|
document.body.style.overflow = 'hidden';
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert('Terjadi kesalahan saat memuat detail. Silakan coba lagi.');
|
|
}
|
|
}
|
|
|
|
function closeDetail() {
|
|
document.getElementById('detailModal').classList.add('hidden');
|
|
document.getElementById('detailModal').classList.remove('flex');
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
|
|
// Menutup modal saat mengklik area di luar modal
|
|
document.getElementById('detailModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeDetail();
|
|
}
|
|
});
|
|
|
|
function showAlasanPenolakan(alasan) {
|
|
const alasanPenolakanText = document.getElementById('alasanPenolakanText');
|
|
alasanPenolakanText.textContent = alasan;
|
|
document.getElementById('alasanPenolakanModal').classList.remove('hidden');
|
|
document.getElementById('alasanPenolakanModal').classList.add('flex');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeAlasanPenolakan() {
|
|
document.getElementById('alasanPenolakanModal').classList.add('hidden');
|
|
document.getElementById('alasanPenolakanModal').classList.remove('flex');
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
|
|
function showCancelForm(sewaId, paketNama, status) {
|
|
document.getElementById('cancelOrderId').textContent = sewaId;
|
|
document.getElementById('cancelOrderPackage').textContent = paketNama;
|
|
document.getElementById('cancelOrderStatus').textContent = status;
|
|
document.getElementById('cancelFormModal').classList.remove('hidden');
|
|
document.getElementById('cancelFormModal').classList.add('flex');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeCancelForm() {
|
|
document.getElementById('cancelFormModal').classList.add('hidden');
|
|
document.getElementById('cancelFormModal').classList.remove('flex');
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
|
|
// Handle alasan pembatalan dropdown
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const alasanSelect = document.getElementById('alasan_pembatalan');
|
|
const alasanLainnyaDiv = document.getElementById('alasanLainnyaDiv');
|
|
const alasanLainnyaTextarea = document.getElementById('alasan_lainnya');
|
|
|
|
if (alasanSelect) {
|
|
alasanSelect.addEventListener('change', function() {
|
|
if (this.value === 'Lainnya') {
|
|
alasanLainnyaDiv.style.display = 'block';
|
|
alasanLainnyaTextarea.required = true;
|
|
} else {
|
|
alasanLainnyaDiv.style.display = 'none';
|
|
alasanLainnyaTextarea.required = false;
|
|
alasanLainnyaTextarea.value = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Handle form submission
|
|
const cancelForm = document.getElementById('cancelOrderForm');
|
|
if (cancelForm) {
|
|
cancelForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const alasanPembatalan = document.getElementById('alasan_pembatalan').value;
|
|
const alasanLainnya = document.getElementById('alasan_lainnya').value;
|
|
const sewaId = document.getElementById('cancelOrderId').textContent;
|
|
|
|
if (!alasanPembatalan) {
|
|
alert('Silakan pilih alasan pembatalan!');
|
|
return;
|
|
}
|
|
|
|
if (alasanPembatalan === 'Lainnya' && !alasanLainnya.trim()) {
|
|
alert('Silakan isi alasan lainnya!');
|
|
return;
|
|
}
|
|
|
|
// Gabungkan alasan
|
|
const finalAlasan = alasanPembatalan === 'Lainnya' ? alasanLainnya : alasanPembatalan;
|
|
|
|
// Konfirmasi pembatalan
|
|
if (!confirm('Apakah Anda yakin ingin membatalkan pesanan ini? Alasan pembatalan akan dikirim ke admin.')) {
|
|
return;
|
|
}
|
|
|
|
// Kirim data ke server
|
|
const formData = new FormData();
|
|
formData.append('_token', '{{ csrf_token() }}');
|
|
formData.append('_method', 'PUT');
|
|
formData.append('alasan_pembatalan', finalAlasan);
|
|
|
|
fetch(`/riwayat/${sewaId}/batal`, {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert('Pesanan berhasil dibatalkan! Alasan pembatalan telah dikirim ke admin.');
|
|
window.location.reload();
|
|
} else {
|
|
alert('Terjadi kesalahan: ' + (data.message || 'Gagal membatalkan pesanan'));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Terjadi kesalahan saat membatalkan pesanan. Silakan coba lagi.');
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
// Menutup modal saat mengklik area di luar modal
|
|
document.getElementById('cancelFormModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeCancelForm();
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection |