254 lines
21 KiB
PHP
254 lines
21 KiB
PHP
@extends('frontend.layouts.master')
|
|
|
|
@section('content')
|
|
<div class="bg-gray-50 rounded-lg py-12">
|
|
<div class="container mx-auto px-4 max-w-4xl">
|
|
<!-- Card chính -->
|
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden mb-8">
|
|
<!-- Header -->
|
|
<div class="bg-primary p-6">
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="text-white text-2xl font-bold">Thanh toán đơn hàng</h1>
|
|
<span class="bg-white text-primary px-4 py-2 rounded-full text-sm font-medium">
|
|
Mã đơn: #{{ $orders->order_num }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Thông tin đơn hàng -->
|
|
<div class="p-6 border-b border-gray-200">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h2 class="text-gray-700 text-lg font-semibold mb-4">Thông tin đơn hàng</h2>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-600">Ngày đặt:</span>
|
|
<span class="font-medium">{{ date('d/m/Y H:i', $orders->date) }}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-600">Trạng thái:</span>
|
|
<span class="font-medium">
|
|
@if ($orders->status == 0)
|
|
<span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs">Chờ xử
|
|
lý</span>
|
|
@elseif($orders->status == 1)
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Đã kích
|
|
hoạt</span>
|
|
@elseif($orders->status == 2)
|
|
<span class="bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs">Đã hủy</span>
|
|
@elseif($orders->status == 3)
|
|
<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs">Đang xử
|
|
lý</span>
|
|
@else
|
|
<span class="bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs">Khác</span>
|
|
@endif
|
|
</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-600">Tên miền (Domain):</span>
|
|
<span class="font-medium">{{ $orders->orderItems[0]->server_name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-gray-700 text-lg font-semibold mb-4">Thông tin khách hàng</h2>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-600">Họ tên:</span>
|
|
<span class="font-medium">{{ $orders->customer->firstname . ' ' . $orders->customer->lastname }}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-600">Số điện thoại:</span>
|
|
<span class="font-medium">{{ $orders->customer->phone }}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-600">Email:</span>
|
|
<span class="font-medium">{{ $orders->customer->email }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chi tiết sản phẩm -->
|
|
<div class="p-6">
|
|
<h2 class="text-gray-700 text-lg font-semibold mb-4">Chi tiết sản phẩm</h2>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="bg-gray-50">
|
|
<th class="px-4 py-3 text-sm font-medium text-gray-500 uppercase tracking-wider">
|
|
Mô tả
|
|
</th>
|
|
<th class="px-4 py-3 text-sm font-medium text-gray-500 uppercase tracking-wider text-right">
|
|
Số lượng
|
|
</th>
|
|
<th class="px-4 py-3 text-sm font-medium text-gray-500 uppercase tracking-wider text-right">
|
|
Giá
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
@foreach ($orders->orderItems as $item)
|
|
<tr class="bg-white">
|
|
<td class="px-4 py-3">
|
|
<div class="font-medium text-gray-800">Sản phẩm
|
|
{{ $item->product->name ?? 'Không xác định' }}
|
|
</div>
|
|
<div class="text-sm text-gray-500">
|
|
Loại:
|
|
@if ($item->product_type == 1)
|
|
Shared Hosting
|
|
@elseif($item->product_type == 2)
|
|
VPS
|
|
@elseif($item->product_type == 3)
|
|
Dedicated Server
|
|
@else
|
|
Khác
|
|
@endif
|
|
</div>
|
|
<div class="text-sm text-gray-500 flex flex-row items-center">
|
|
Hệ điều hành:
|
|
<div class="ml-2 flex items-center gap-2">
|
|
<div class="avatar">
|
|
<div class="size-6 rounded-md">
|
|
<img src="{{ $item->os->osGroup->thumbnail }}"
|
|
alt="{{ $item->os->osGroup->name }}" />
|
|
</div>
|
|
</div>{{ $item->os->osGroup->name }}
|
|
{{ $item->os->version }}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-right">
|
|
{{ $item->quantity }}
|
|
</td>
|
|
<td class="px-4 py-3 text-right">
|
|
<p>
|
|
{{ format_price($item->price) }}
|
|
/{{ $item->months }}tháng
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Addon items -->
|
|
@foreach ($item->addons as $addon)
|
|
<tr class="bg-gray-50">
|
|
<td class="px-4 py-2 pl-8">
|
|
<div class="text-sm text-gray-600">
|
|
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded">
|
|
Addon
|
|
</span>
|
|
<span class="ml-2">{{ $addon->addonItems->name }} đơn giá:
|
|
({{ format_price($addon->addonItems->price) }})
|
|
/ {{ $addon->addonItems->step . $addon->addonItems->prefix }}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-2 text-right text-sm text-gray-600">
|
|
{{ $addon->qty }} / {{ $addon->addonItems->prefix }}
|
|
({{ $item->months }} tháng)
|
|
</td>
|
|
<td class="px-4 py-2 text-right text-sm text-gray-600">
|
|
{{ number_format($addon->price * $item->months) }} VNĐ
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
@endforeach
|
|
</tbody>
|
|
<tfoot>
|
|
@php
|
|
$addonTotal = 0;
|
|
foreach ($orders->orderItems as $item) {
|
|
foreach ($item->addons as $addon) {
|
|
$addonTotal += $addon->price * $item->months;
|
|
}
|
|
}
|
|
$productTotal = $orders->amount - $addonTotal;
|
|
@endphp
|
|
<tr class="border-t-2 border-gray-200">
|
|
<td class="px-4 py-3 text-gray-500 font-medium">Giá trị sản phẩm</td>
|
|
<td></td>
|
|
<td class="px-4 py-3 text-right text-gray-500 font-medium">
|
|
{{ number_format($productTotal) }} VNĐ
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-3 text-gray-500 font-medium">Tổng addon</td>
|
|
<td></td>
|
|
<td class="px-4 py-3 text-right text-gray-500 font-medium">
|
|
{{ number_format($addonTotal) }} VNĐ
|
|
</td>
|
|
</tr>
|
|
@if ($orders->discount_value)
|
|
<tr>
|
|
<td class="px-4 py-3 text-gray-500 font-medium">Giảm giá</td>
|
|
<td></td>
|
|
<td class="px-4 py-3 text-right text-gray-500 font-medium">
|
|
-{{ number_format($orders->discount_value) }} VNĐ
|
|
</td>
|
|
</tr>
|
|
@endif
|
|
<tr>
|
|
<td class="px-4 py-3 text-lg font-bold text-gray-800">Tổng cộng</td>
|
|
<td></td>
|
|
<td class="px-4 py-3 text-right text-lg font-bold text-gray-800">
|
|
{{ number_format($orders->amount) }} VNĐ
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
@if ($orders->status == 1)
|
|
<div class="flex flex-row justify-end pt-3 border-t border-gray-200">
|
|
<flux:modal.trigger name="confirm-order" class="flex-end">
|
|
<flux:button type="button" variant="primary" color="orange" icon="credit-card">Xác nhận
|
|
thanh toán</flux:button>
|
|
</flux:modal.trigger>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ghi chú -->
|
|
@if ($orders->note)
|
|
<div class="bg-white rounded-lg shadow-lg p-6 mt-8">
|
|
<h2 class="text-gray-700 text-lg font-semibold mb-2">Ghi chú đơn hàng</h2>
|
|
<p class="text-gray-600">{{ $orders->note }}</p>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Hỗ trợ -->
|
|
<div class="bg-blue-50 rounded-lg p-6 mt-8 border border-blue-100">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
|
|
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-lg font-medium text-blue-800">Bạn cần hỗ trợ?</h3>
|
|
<p class="text-blue-600 mt-1">Nếu bạn gặp bất kỳ vấn đề nào khi thanh toán, vui lòng liên hệ với
|
|
chúng tôi thông qua. </br> Hotline <span class="font-medium">{{ setting('setting.tel') }}</span>
|
|
hoặc
|
|
thông qua Email <span class="font-medium">{{ setting('setting.support') }}</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@include('frontend.order.modal.destroy', [
|
|
'order_id' => $orders->id,
|
|
'order_num' => $orders->order_num,
|
|
])
|
|
|
|
@include('frontend.order.modal.confirm', [
|
|
'order_id' => $orders->id,
|
|
'order_num' => $orders->order_num,
|
|
])
|
|
@endsection
|