322 lines
16 KiB
PHP
322 lines
16 KiB
PHP
@extends('layouts.dashboard')
|
|
|
|
@section('content')
|
|
<div class="container mx-auto px-4 py-6">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-800">Daftar Pesanan Saya</h1>
|
|
<a href="{{ route('barang.index') }}" class="bg-[#2C7A7B] hover:bg-[#1C6B6B] text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center">
|
|
<i class="fas fa-plus mr-2"></i>
|
|
Buat Pesanan Baru
|
|
</a>
|
|
</div>
|
|
|
|
@if(session('success'))
|
|
<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6 rounded-lg" id="success-alert">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-check-circle mr-2"></i>
|
|
{{ session('success') }}
|
|
</div>
|
|
<button onclick="document.getElementById('success-alert').remove()" class="text-green-700">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded-lg" id="error-alert">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-exclamation-circle mr-2"></i>
|
|
{{ session('error') }}
|
|
</div>
|
|
<button onclick="document.getElementById('error-alert').remove()" class="text-red-700">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
|
<div class="grid grid-cols-1 gap-4 sm:gap-6 md:gap-8 p-4 sm:p-6">
|
|
@php
|
|
$hasActiveOrders = false;
|
|
@endphp
|
|
|
|
@forelse($pesanan as $item)
|
|
@php
|
|
$isExpired = $item->status === 'pending' &&
|
|
$item->created_at->diffInHours(now()) >= 24;
|
|
@endphp
|
|
|
|
@if(!$isExpired)
|
|
@php
|
|
$hasActiveOrders = true;
|
|
@endphp
|
|
<div class="bg-white border border-gray-100 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200">
|
|
<a href="{{ route('pesanan.show', $item) }}" class="block p-4 sm:p-6">
|
|
<div class="flex flex-col sm:flex-row justify-between">
|
|
<!-- Informasi Produk -->
|
|
<div class="flex items-start space-x-4">
|
|
<div class="w-20 h-20 rounded-lg overflow-hidden flex-shrink-0">
|
|
@if($item->barang->gambar)
|
|
<img src="{{ Storage::url($item->barang->gambar) }}"
|
|
alt="{{ $item->barang->nama }}"
|
|
class="w-full h-full object-cover">
|
|
@else
|
|
<div class="w-full h-full bg-gray-200 flex items-center justify-center">
|
|
<i class="fas fa-box text-gray-400 text-2xl"></i>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-lg font-semibold text-gray-800">{{ $item->barang->nama }}</h3>
|
|
<p class="text-sm text-gray-600 mt-1">{{ Str::limit($item->barang->deskripsi, 100) }}</p>
|
|
<div class="mt-2 space-y-1">
|
|
<p class="text-sm text-gray-600">
|
|
<span class="font-medium">Jumlah:</span> {{ $item->jumlah }} unit
|
|
</p>
|
|
<p class="text-sm text-gray-600">
|
|
<span class="font-medium">Total:</span>
|
|
<span class="text-[#2C7A7B] font-semibold">
|
|
Rp {{ number_format($item->total_harga, 0, ',', '.') }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status dan Aksi -->
|
|
<div class="mt-4 sm:mt-0 flex flex-col items-end justify-between">
|
|
<div class="flex items-center space-x-2">
|
|
<span class="px-3 py-1 text-sm rounded-full
|
|
{{ $item->status === 'pending' ? 'bg-yellow-100 text-yellow-800' :
|
|
($item->status === 'diproses' ? 'bg-blue-100 text-blue-800' :
|
|
($item->status === 'dikirim' ? 'bg-purple-100 text-purple-800' :
|
|
($item->status === 'selesai' ? 'bg-green-100 text-green-800' :
|
|
'bg-red-100 text-red-800'))) }}">
|
|
<i class="fas fa-circle text-xs mr-1"></i>
|
|
{{ ucfirst($item->status) }}
|
|
</span>
|
|
<span class="text-sm text-gray-500">
|
|
{{ $item->created_at->format('d M Y H:i') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Tombol Aksi -->
|
|
<div class="px-4 sm:px-6 pb-4 sm:pb-6">
|
|
<div class="flex space-x-2">
|
|
@if($item->status === 'pending')
|
|
@if($item->transaksi && $item->transaksi->status === 'menunggu_pembayaran')
|
|
<button onclick="payWithSnap({{ $item->id }})"
|
|
class="inline-flex items-center px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition-colors duration-200">
|
|
<i class="fas fa-money-bill-wave mr-1"></i>
|
|
Lanjutkan Pembayaran
|
|
</button>
|
|
@elseif(!$item->transaksi)
|
|
<button onclick="payWithSnap({{ $item->id }})"
|
|
class="inline-flex items-center px-3 py-1 bg-green-500 text-white text-sm rounded hover:bg-green-600 transition-colors duration-200">
|
|
<i class="fas fa-money-bill-wave mr-1"></i>
|
|
Bayar
|
|
</button>
|
|
@endif
|
|
<form action="{{ route('pesanan.destroy', $item->id) }}" method="POST" class="inline" id="deleteForm{{ $item->id }}">
|
|
@csrf
|
|
@method('DELETE')
|
|
<input type="hidden" name="user_id" value="{{ auth()->id() }}">
|
|
<button type="button" onclick="confirmDelete({{ $item->id }})" class="inline-flex items-center px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition-colors duration-200">
|
|
<i class="fas fa-trash-alt mr-1"></i>
|
|
Batalkan
|
|
</button>
|
|
</form>
|
|
@elseif($item->status === 'diproses')
|
|
<span class="inline-flex items-center px-3 py-1 bg-blue-500 text-white text-sm rounded">
|
|
<i class="fas fa-check-circle mr-1"></i>
|
|
Pembayaran Berhasil
|
|
</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@empty
|
|
<div class="text-center py-12">
|
|
<div class="w-24 h-24 mx-auto mb-4 text-gray-300">
|
|
<i class="fas fa-shopping-cart text-6xl"></i>
|
|
</div>
|
|
<h3 class="text-lg font-medium text-gray-800 mb-2">Belum Ada Pesanan</h3>
|
|
<p class="text-gray-500 mb-6">Anda belum memiliki pesanan apapun</p>
|
|
<a href="{{ route('barang.index') }}"
|
|
class="inline-flex items-center px-4 py-2 bg-[#2C7A7B] text-white rounded-lg hover:bg-[#1C6B6B] transition-colors duration-200">
|
|
<i class="fas fa-plus mr-2"></i>
|
|
Buat Pesanan Sekarang
|
|
</a>
|
|
</div>
|
|
@endforelse
|
|
|
|
@if(!$hasActiveOrders && count($pesanan) > 0)
|
|
<div class="text-center py-12">
|
|
<div class="w-24 h-24 mx-auto mb-4 text-gray-300">
|
|
<i class="fas fa-clock text-6xl"></i>
|
|
</div>
|
|
<h3 class="text-lg font-medium text-gray-800 mb-2">Tidak Ada Pesanan Aktif</h3>
|
|
<p class="text-gray-500 mb-6">Semua pesanan Anda telah kadaluarsa atau selesai</p>
|
|
<a href="{{ route('barang.index') }}"
|
|
class="inline-flex items-center px-4 py-2 bg-[#2C7A7B] text-white rounded-lg hover:bg-[#1C6B6B] transition-colors duration-200">
|
|
<i class="fas fa-plus mr-2"></i>
|
|
Buat Pesanan Baru
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@if($pesanan->hasPages())
|
|
<div class="px-4 py-4 border-t border-gray-100">
|
|
{{ $pesanan->links() }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Snap Container -->
|
|
<div id="snap-container"></div>
|
|
|
|
@push('scripts')
|
|
<script type="text/javascript" src="https://app.midtrans.com/snap/snap.js" data-client-key="{{ config('midtrans.client_key') }}"></script>
|
|
<script>
|
|
function payWithSnap(pesananId) {
|
|
// Tampilkan loading state
|
|
const button = event.target;
|
|
const originalText = button.innerHTML;
|
|
button.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Memproses...';
|
|
button.disabled = true;
|
|
|
|
// Tentukan endpoint berdasarkan teks tombol
|
|
const isContinuePayment = button.textContent.trim() === 'Lanjutkan Pembayaran';
|
|
const endpoint = isContinuePayment
|
|
? `/transaksi/get-snap-token/${pesananId}`
|
|
: `/transaksi/create/${pesananId}`;
|
|
|
|
// Panggil endpoint untuk mendapatkan snap token
|
|
fetch(endpoint, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
|
|
}
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.json().then(err => {
|
|
throw new Error(err.error || 'Terjadi kesalahan saat memproses pembayaran');
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('Snap Token Response:', data); // Debug log
|
|
if (data.snap_token) {
|
|
window.snap.pay(data.snap_token, {
|
|
onSuccess: function(result) {
|
|
// Update status transaksi
|
|
fetch('/transaksi/update-status', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
|
|
},
|
|
body: JSON.stringify({
|
|
order_id: result.order_id,
|
|
payment_type: result.payment_type,
|
|
transaction_status: result.transaction_status
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Tampilkan pesan sukses
|
|
alert('Pembayaran berhasil! Pesanan Anda akan segera diproses.');
|
|
window.location.href = '{{ route("pesanan.index") }}';
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Terjadi kesalahan saat mengupdate status transaksi');
|
|
window.location.href = '{{ route("pesanan.index") }}';
|
|
});
|
|
},
|
|
onPending: function(result) {
|
|
// Tampilkan pesan pending
|
|
alert('Pembayaran Anda sedang diproses. Silakan selesaikan pembayaran Anda.');
|
|
window.location.href = '{{ route("pesanan.index") }}';
|
|
},
|
|
onError: function(result) {
|
|
// Tampilkan pesan error
|
|
alert('Terjadi kesalahan saat memproses pembayaran. Silakan coba lagi.');
|
|
window.location.href = '{{ route("pesanan.index") }}';
|
|
},
|
|
onClose: function() {
|
|
// Reset button state dan tampilkan pesan
|
|
button.innerHTML = originalText;
|
|
button.disabled = false;
|
|
alert('Anda menutup halaman pembayaran. Anda dapat melanjutkan pembayaran nanti dengan mengklik tombol "Lanjutkan Pembayaran".');
|
|
window.location.href = '{{ route("pesanan.index") }}';
|
|
}
|
|
});
|
|
} else {
|
|
console.error('No snap token in response:', data); // Debug log
|
|
alert('Terjadi kesalahan saat memproses pembayaran');
|
|
button.innerHTML = originalText;
|
|
button.disabled = false;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert(error.message || 'Terjadi kesalahan saat memproses pembayaran');
|
|
button.innerHTML = originalText;
|
|
button.disabled = false;
|
|
});
|
|
}
|
|
|
|
function confirmDelete(id) {
|
|
if (confirm('Apakah Anda yakin ingin membatalkan pesanan ini?')) {
|
|
const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
|
|
fetch(`/pesanan/${id}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': token,
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
window.location.reload();
|
|
} else {
|
|
alert(data.message || 'Terjadi kesalahan saat membatalkan pesanan');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Terjadi kesalahan saat membatalkan pesanan');
|
|
});
|
|
}
|
|
}
|
|
|
|
// Auto-hide alerts after 3 seconds
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const alerts = document.querySelectorAll('#success-alert, #error-alert');
|
|
alerts.forEach(alert => {
|
|
setTimeout(() => {
|
|
alert.remove();
|
|
}, 3000);
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection |