460 lines
23 KiB
PHP
460 lines
23 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@push('scripts')
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Fungsi untuk export PDF
|
|
async function handleExportPDF() {
|
|
try {
|
|
// Ambil elemen template
|
|
const element = document.getElementById('resi-template');
|
|
if (!element) {
|
|
console.error('Template resi tidak ditemukan');
|
|
return;
|
|
}
|
|
|
|
// Tampilkan elemen dan tunggu sebentar agar render sempurna
|
|
element.style.display = 'block';
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
|
|
// Konversi ke canvas
|
|
const canvas = await html2canvas(element, {
|
|
scale: 2,
|
|
useCORS: true,
|
|
logging: true
|
|
});
|
|
|
|
// Konversi ke PDF
|
|
const { jsPDF } = window.jspdf;
|
|
const pdf = new jsPDF('p', 'mm', 'a4');
|
|
|
|
const imgWidth = 210; // A4 width in mm
|
|
const imgHeight = (canvas.height * imgWidth) / canvas.width;
|
|
|
|
const imgData = canvas.toDataURL('image/png');
|
|
pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
|
|
|
|
// Simpan PDF
|
|
pdf.save('resi-{{ $pesanan->id }}.pdf');
|
|
|
|
// Sembunyikan template
|
|
element.style.display = 'none';
|
|
} catch (error) {
|
|
console.error('Error generating PDF:', error);
|
|
alert('Terjadi kesalahan saat membuat PDF. Silakan coba lagi.');
|
|
}
|
|
}
|
|
|
|
// Tambahkan event listener ke tombol
|
|
const exportButton = document.querySelector('[data-export-pdf]');
|
|
if (exportButton) {
|
|
exportButton.addEventListener('click', handleExportPDF);
|
|
}
|
|
|
|
// Auto-hide alerts
|
|
const alerts = document.querySelectorAll('#success-alert');
|
|
alerts.forEach(alert => {
|
|
setTimeout(() => {
|
|
alert.remove();
|
|
}, 3000);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
#resi-template {
|
|
background: white;
|
|
padding: 20px;
|
|
margin: 0;
|
|
width: 210mm; /* A4 width */
|
|
min-height: 297mm; /* A4 height */
|
|
position: fixed;
|
|
left: -9999px;
|
|
top: 0;
|
|
}
|
|
|
|
@media print {
|
|
#resi-template {
|
|
position: static;
|
|
left: auto;
|
|
top: auto;
|
|
}
|
|
}
|
|
|
|
#resi-template * {
|
|
color: black !important;
|
|
}
|
|
|
|
#resi-template .border {
|
|
border-color: #000 !important;
|
|
}
|
|
|
|
#resi-template .text-gray-600,
|
|
#resi-template .text-gray-500 {
|
|
color: #666 !important;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="max-w-6xl mx-auto">
|
|
<!-- @if(session('success'))
|
|
<div class="relative px-4 py-3 mb-4 text-green-700 bg-green-100 border border-green-400 rounded" id="success-alert">
|
|
<span class="block sm:inline">{{ session('success') }}</span>
|
|
<button type="button" class="absolute top-0 right-0 px-4 py-3" onclick="this.parentElement.style.display='none'">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
@endif -->
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
|
<div class="p-6">
|
|
<!-- Header Section -->
|
|
<div class="flex justify-between items-center mb-6 pb-4 border-b">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-800">Detail Pesanan #{{ $pesanan->id }}</h1>
|
|
<p class="text-sm text-gray-500 mt-1">Tanggal: {{ $pesanan->created_at->format('d M Y H:i') }}</p>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<span class="px-4 py-2 rounded-full text-sm font-medium
|
|
@if($pesanan->status === 'pending') bg-yellow-100 text-yellow-800
|
|
@elseif($pesanan->status === 'diproses') bg-blue-100 text-blue-800
|
|
@elseif($pesanan->status === 'dikirim') bg-purple-100 text-purple-800
|
|
@elseif($pesanan->status === 'selesai') bg-green-100 text-green-800
|
|
@else bg-red-100 text-red-800
|
|
@endif">
|
|
{{ ucfirst($pesanan->status) }}
|
|
</span>
|
|
@if($pesanan->status === 'diproses' || $pesanan->status === 'dikirim')
|
|
<form action="{{ route('admin.pesanan.cetak-resi', $pesanan->id) }}" method="GET" target="_blank">
|
|
<button type="submit" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
|
|
<i class="fas fa-file-pdf mr-2"></i>
|
|
Cetak Alamat
|
|
</button>
|
|
</form>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Left Column -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<!-- Informasi Barang -->
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center">
|
|
<i class="fas fa-box mr-2 text-indigo-600"></i>
|
|
Informasi Barang
|
|
</h2>
|
|
@if($pesanan->items->count() > 0)
|
|
@foreach($pesanan->items as $item)
|
|
<div class="flex items-start space-x-4 mb-4 p-3 bg-white rounded-lg shadow-sm">
|
|
<div class="flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden border border-gray-200">
|
|
@if($item->barang->gambar)
|
|
<img src="{{ Storage::url($item->barang->gambar) }}" alt="{{ $item->barang->nama_barang }}" class="w-full h-full object-cover">
|
|
@else
|
|
<div class="w-full h-full bg-gray-200 flex items-center justify-center">
|
|
<span class="text-gray-400 text-sm">No Image</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="flex-grow">
|
|
<h3 class="font-medium text-gray-900">{{ $item->barang->nama_barang }}</h3>
|
|
<div class="grid grid-cols-2 gap-2 mt-2 text-sm">
|
|
<div>
|
|
<p class="text-gray-500">Jumlah</p>
|
|
<p class="font-medium">{{ $item->jumlah }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500">Harga</p>
|
|
<p class="font-medium">Rp {{ number_format($item->harga, 0, ',', '.') }}</p>
|
|
</div>
|
|
<div class="col-span-2">
|
|
<p class="text-gray-500">Subtotal</p>
|
|
<p class="font-medium text-indigo-600">Rp {{ number_format($item->total_harga, 0, ',', '.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@else
|
|
<div class="flex items-start space-x-4 p-3 bg-white rounded-lg shadow-sm">
|
|
<div class="flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden border border-gray-200">
|
|
@if($pesanan->barang->gambar)
|
|
<img src="{{ Storage::url($pesanan->barang->gambar) }}" alt="{{ $pesanan->barang->nama_barang }}" class="w-full h-full object-cover">
|
|
@else
|
|
<div class="w-full h-full bg-gray-200 flex items-center justify-center">
|
|
<span class="text-gray-400 text-sm">No Image</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="flex-grow">
|
|
<h3 class="font-medium text-gray-900">{{ $pesanan->barang->nama_barang }}</h3>
|
|
<div class="grid grid-cols-2 gap-2 mt-2 text-sm">
|
|
<div>
|
|
<p class="text-gray-500">Jumlah</p>
|
|
<p class="font-medium">{{ $pesanan->jumlah }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500">Harga</p>
|
|
<p class="font-medium">Rp {{ number_format($pesanan->barang->harga, 0, ',', '.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Informasi Pengiriman -->
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center">
|
|
<i class="fas fa-truck mr-2 text-indigo-600"></i>
|
|
Informasi Pengiriman
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="bg-white p-3 rounded-lg shadow-sm">
|
|
<p class="text-sm text-gray-500">Nama Penerima</p>
|
|
<p class="font-medium">{{ $pesanan->user->nama }}</p>
|
|
</div>
|
|
<div class="bg-white p-3 rounded-lg shadow-sm">
|
|
<p class="text-sm text-gray-500">Alamat</p>
|
|
<p class="font-medium">{{ $pesanan->shipping_info ?? $pesanan->user->alamat }}</p>
|
|
</div>
|
|
<div class="bg-white p-3 rounded-lg shadow-sm">
|
|
<p class="text-sm text-gray-500">Kurir</p>
|
|
<p class="font-medium">{{ strtoupper($pesanan->shipping_courier) }} {{ $pesanan->shipping_service }}</p>
|
|
</div>
|
|
<div class="bg-white p-3 rounded-lg shadow-sm">
|
|
<p class="text-sm text-gray-500">Ongkos Kirim</p>
|
|
<p class="font-medium text-indigo-600">Rp {{ number_format($pesanan->shipping_cost, 0, ',', '.') }}</p>
|
|
</div>
|
|
<div class="bg-white p-3 rounded-lg shadow-sm">
|
|
<p class="text-sm text-gray-500">Estimasi Pengiriman</p>
|
|
<p class="font-medium">{{ $pesanan->shipping_etd }} hari</p>
|
|
</div>
|
|
@if($pesanan->catatan)
|
|
<div class="md:col-span-2 bg-white p-3 rounded-lg shadow-sm">
|
|
<p class="text-sm text-gray-500">Catatan Pengiriman</p>
|
|
<p class="font-medium">{{ $pesanan->catatan }}</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="space-y-6">
|
|
<!-- Informasi Pesanan -->
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center">
|
|
<i class="fas fa-shopping-cart mr-2 text-indigo-600"></i>
|
|
Informasi Pesanan
|
|
</h2>
|
|
<div class="space-y-3">
|
|
<div class="bg-white p-3 rounded-lg shadow-sm">
|
|
<p class="text-sm text-gray-500">Total Harga</p>
|
|
<p class="font-medium text-indigo-600">Rp {{ number_format($pesanan->total_harga, 0, ',', '.') }}</p>
|
|
</div>
|
|
@if($pesanan->catatan)
|
|
<div class="bg-white p-3 rounded-lg shadow-sm">
|
|
<p class="text-sm text-gray-500">Catatan</p>
|
|
<p class="font-medium">{{ $pesanan->catatan }}</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Informasi Pelanggan -->
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center">
|
|
<i class="fas fa-user mr-2 text-indigo-600"></i>
|
|
Informasi Pelanggan
|
|
</h2>
|
|
<div class="space-y-3">
|
|
<div class="bg-white p-3 rounded-lg shadow-sm">
|
|
<p class="text-sm text-gray-500">Nama</p>
|
|
<p class="font-medium">{{ $pesanan->user->nama ?? $pesanan->user->name }}</p>
|
|
</div>
|
|
<div class="bg-white p-3 rounded-lg shadow-sm">
|
|
<p class="text-sm text-gray-500">Email</p>
|
|
<p class="font-medium">{{ $pesanan->user->email }}</p>
|
|
</div>
|
|
<div class="bg-white p-3 rounded-lg shadow-sm">
|
|
<p class="text-sm text-gray-500">No. Telepon</p>
|
|
<p class="font-medium">{{ $pesanan->user->no_telp ?? '-' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Informasi Pembayaran -->
|
|
@if($pesanan->transaksi)
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center">
|
|
<i class="fas fa-money-bill-wave mr-2 text-indigo-600"></i>
|
|
Informasi Pembayaran
|
|
</h2>
|
|
<div class="space-y-3">
|
|
<div class="bg-white p-3 rounded-lg shadow-sm">
|
|
<p class="text-sm text-gray-500">Status Pembayaran</p>
|
|
<p class="font-medium">{{ ucfirst(str_replace('_', ' ', $pesanan->transaksi->status)) }}</p>
|
|
</div>
|
|
<div class="bg-white p-3 rounded-lg shadow-sm">
|
|
<p class="text-sm text-gray-500">Total Pembayaran</p>
|
|
<p class="font-medium text-indigo-600">Rp {{ number_format($pesanan->transaksi->total_pembayaran, 0, ',', '.') }}</p>
|
|
</div>
|
|
@if($pesanan->transaksi->bukti_pembayaran)
|
|
<div class="bg-white p-3 rounded-lg shadow-sm">
|
|
<p class="text-sm text-gray-500 mb-2">Bukti Pembayaran</p>
|
|
<img src="{{ Storage::url($pesanan->transaksi->bukti_pembayaran) }}" alt="Bukti Pembayaran" class="max-w-full rounded-lg">
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Update Status -->
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center">
|
|
<i class="fas fa-cog mr-2 text-indigo-600"></i>
|
|
Update Status
|
|
</h2>
|
|
<form action="{{ route('admin.pesanan.status', $pesanan) }}" method="POST">
|
|
@csrf
|
|
<div class="mb-4">
|
|
<select name="status" id="status" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
|
|
<option value="pending" {{ $pesanan->status == 'pending' ? 'selected' : '' }}>Menunggu</option>
|
|
<option value="diproses" {{ $pesanan->status == 'diproses' ? 'selected' : '' }}>Dibayar</option>
|
|
<option value="dikirim" {{ $pesanan->status == 'dikirim' ? 'selected' : '' }}>Dikirim</option>
|
|
<option value="selesai" {{ $pesanan->status == 'selesai' ? 'selected' : '' }}>Selesai</option>
|
|
<option value="dibatalkan" {{ $pesanan->status == 'dibatalkan' ? 'selected' : '' }}>Dibatalkan</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg transition-colors">
|
|
<i class="fas fa-save mr-2"></i>Update Status
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Tombol Kembali -->
|
|
<div class="flex justify-center">
|
|
<a href="{{ route('admin.pesanan.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
|
|
<i class="fas fa-arrow-left mr-2"></i>
|
|
Kembali
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Template Resi (Hidden) -->
|
|
<div id="resi-template" class="hidden">
|
|
<div class="p-8 max-w-2xl mx-auto bg-white">
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-2xl font-bold">Resi Pengiriman</h1>
|
|
<p class="text-gray-600">#{{ $pesanan->id }}</p>
|
|
<p class="text-sm text-gray-500">Tanggal: {{ $pesanan->created_at->format('d M Y H:i') }}</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-8 mb-8">
|
|
<div class="border p-4 rounded-lg">
|
|
<h2 class="font-semibold mb-2 text-lg">Pengirim</h2>
|
|
<p class="font-medium">DIJEEELEKTRONIK</p>
|
|
</div>
|
|
<div class="border p-4 rounded-lg">
|
|
<h2 class="font-semibold mb-2 text-lg">Penerima</h2>
|
|
<p class="font-medium">{{ $pesanan->user->nama }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-8 border p-4 rounded-lg">
|
|
<h2 class="font-semibold mb-4 text-lg">Detail Pengiriman</h2>
|
|
<table class="w-full">
|
|
<tr>
|
|
<td class="py-2 font-medium">Kurir</td>
|
|
<td class="py-2">: {{ strtoupper($pesanan->shipping_courier) }} {{ $pesanan->shipping_service }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2 font-medium">Estimasi</td>
|
|
<td class="py-2">: {{ $pesanan->shipping_etd }} hari</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2 font-medium">Ongkos Kirim</td>
|
|
<td class="py-2">: Rp {{ number_format($pesanan->shipping_cost, 0, ',', '.') }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mb-8 border p-4 rounded-lg">
|
|
<h2 class="font-semibold mb-4 text-lg">Detail Barang</h2>
|
|
<table class="w-full border-collapse">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="text-left py-2 font-medium">Barang</th>
|
|
<th class="text-center py-2 font-medium">Jumlah</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@if($pesanan->items->count() > 0)
|
|
@foreach($pesanan->items as $item)
|
|
<tr class="border-b">
|
|
<td class="py-2">{{ $item->barang->nama_barang }}</td>
|
|
<td class="text-center py-2">{{ $item->jumlah }}</td>
|
|
</tr>
|
|
@endforeach
|
|
@else
|
|
<tr class="border-b">
|
|
<td class="py-2">{{ $pesanan->barang->nama_barang }}</td>
|
|
<td class="text-center py-2">{{ $pesanan->jumlah }}</td>
|
|
</tr>
|
|
@endif
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="text-center text-sm text-gray-600 border-t pt-4">
|
|
<p>Dicetak pada: {{ now()->format('d M Y H:i') }}</p>
|
|
<p class="mt-2">Terima kasih telah berbelanja di DIJEEELEKTRONIK</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
#resi-template {
|
|
background: white;
|
|
padding: 20px;
|
|
margin: 0;
|
|
width: 210mm; /* A4 width */
|
|
min-height: 297mm; /* A4 height */
|
|
position: fixed;
|
|
left: -9999px;
|
|
top: 0;
|
|
}
|
|
|
|
@media print {
|
|
#resi-template {
|
|
position: static;
|
|
left: auto;
|
|
top: auto;
|
|
}
|
|
}
|
|
|
|
#resi-template * {
|
|
color: black !important;
|
|
}
|
|
|
|
#resi-template .border {
|
|
border-color: #000 !important;
|
|
}
|
|
|
|
#resi-template .text-gray-600,
|
|
#resi-template .text-gray-500 {
|
|
color: #666 !important;
|
|
}
|
|
</style>
|
|
@endsection
|