200 lines
12 KiB
PHP
200 lines
12 KiB
PHP
<div class="box-form rounded-lg shadow-lg p-6 mt-8">
|
|
<!-- Actual search box -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<div class="form-group">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">{{ __('Tìm kiếm theo tên server') }}</label>
|
|
<input wire:model.live.debounce.300ms="search" type="text" placeholder="{{ __('Nhập tên server...') }}"
|
|
class="form-input w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)]">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">{{ __('Trạng thái') }}</label>
|
|
<select wire:model.live="status"
|
|
class="form-select w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)]">
|
|
<option value="full" selected>{{ __('Tất cả trạng thái') }}</option>
|
|
<option value="3">{{ __('Chờ kích hoạt') }}</option>
|
|
<option value="1">{{ __('Đang sử dụng') }}</option>
|
|
<option value="0">{{ __('Không hoạt động') }}</option>
|
|
<option value="4">{{ __('Hết hạn') }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">{{ __('Loại dịch vụ') }}</label>
|
|
<select wire:model.live="type"
|
|
class="form-select w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)]">
|
|
<option value="" selected>{{ __('Tất cả dịch vụ') }}</option>
|
|
<option value="3">{{ __('Hosting') }}</option>
|
|
<option value="4">{{ __('VPS') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
@if (!empty($search))
|
|
<div class="mt-4 p-3 bg-orange-50 border border-orange-200 rounded-md">
|
|
<p class="text-sm text-orange-700">
|
|
<i class="fas fa-search mr-1"></i>
|
|
{{ __('Đang tìm kiếm:') }} "<span class="font-medium">{{ $search }}</span>"
|
|
<button wire:click="$set('search', '')"
|
|
class="ml-2 text-orange-600 hover:text-orange-800 underline text-xs">
|
|
{{ __('Xóa bộ lọc') }}
|
|
</button>
|
|
</p>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="form-group box-research mt-8">
|
|
<table class="table-auto w-full border-collapse">
|
|
<thead>
|
|
<tr class="text-center bg-primary text-white">
|
|
<th class="px-4 py-2 border-b">{{ __('Tên sản phẩm') }}</th>
|
|
<th class="px-4 py-2 border-b">IP</th>
|
|
<th class="px-4 py-2 border-b">{{ __('Giá tiền') }}</th>
|
|
<th class="px-4 py-2 border-b">Specs</th>
|
|
<th class="px-4 py-2 border-b">{{ __('Ngày hết hạn') }}</th>
|
|
<th class="px-4 py-2 border-b">{{ __('Trạng thái') }}</th>
|
|
<th class="px-4 py-2 border-b">{{ __('Gia hạn tự động') }}</th>
|
|
<th class="px-4 py-2 border-b">{{ __('Thao tác') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($services->all() as $invoice)
|
|
@if ($status === 'full' || $invoice->status == $status)
|
|
@php
|
|
$invoiceItem = $invoice->invoiceItem->first();
|
|
$product = $invoiceItem ? $invoiceItem->product : null;
|
|
|
|
// Get service module info for IP
|
|
$moduleService = $invoiceItem ? $invoiceItem->GetRelidProduct() : null;
|
|
$ipAddress = '';
|
|
if ($moduleService) {
|
|
if ($invoiceItem->product_type == 4 && isset($moduleService->ipAddress)) {
|
|
$ipAddress = $moduleService->ipAddress->ip ?? '';
|
|
}
|
|
}
|
|
@endphp
|
|
<tr class="border-b border-gray-200 hover:bg-gray-50">
|
|
<!-- Tên sản phẩm -->
|
|
<td class="text-left py-3 px-4">
|
|
<div class="font-medium text-gray-900">
|
|
<a href="{{ route('service.detail', ['invoice_id' => $invoice->id]) }}">
|
|
{{ $invoiceItem->server_name }}
|
|
</a>
|
|
</div>
|
|
<div class="text-sm text-gray-500">
|
|
{{ $product ? $product->name : 'N/A' }}
|
|
</div>
|
|
</td>
|
|
|
|
<!-- IP Address -->
|
|
<td class="text-center py-3 px-4">
|
|
<span class="font-mono text-sm">
|
|
{{ $ipAddress ?: 'N/A' }}
|
|
</span>
|
|
</td>
|
|
|
|
<!-- Giá tiền -->
|
|
<td class="text-center py-3 px-4">
|
|
<span class="font-medium text-green-600">
|
|
{{ number_format($invoice->total ?? 0, 0, ',', '.') }} đ
|
|
</span>
|
|
</td>
|
|
|
|
<!-- Specs (CPU, RAM, Disk, OS) -->
|
|
<td class="text-left py-3 px-4">
|
|
<div class="text-sm space-y-1">
|
|
@if ($product)
|
|
<div><strong>CPU:</strong> {{ $product->cpu ?? 'N/A' }} Core</div>
|
|
<div><strong>RAM:</strong> {{ $product->ram ? $product->ram . ' MB' : 'N/A' }}
|
|
</div>
|
|
<div><strong>Disk:</strong>
|
|
{{ $product->disk ? $product->disk . ' GB' : 'N/A' }}</div>
|
|
@else
|
|
<div>{{ __('Không có thông tin') }}</div>
|
|
@endif
|
|
<div><strong>OS:</strong>
|
|
{{ $invoiceItem && $invoiceItem->os ? $invoiceItem->os->osGroup->name . ' ' . $invoiceItem->os->version : 'N/A' }}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Ngày hết hạn -->
|
|
<td class="text-center py-3 px-4">
|
|
<div class="space-y-1">
|
|
<!-- Ngày hết hạn -->
|
|
<div>
|
|
<span class="text-xs text-gray-500 block">{{ __('Hết hạn') }}</span>
|
|
@if ($invoice->due_date)
|
|
@php
|
|
$dueDate = \Illuminate\Support\Carbon::parse($invoice->due_date);
|
|
$isExpiringSoon =
|
|
$dueDate->diffInDays(now()) <= 7 && $dueDate->isFuture();
|
|
@endphp
|
|
<span class="{{ $isExpiringSoon ? 'text-orange-600 font-medium' : '' }}">
|
|
{{ $dueDate->format('d/m/Y') }}
|
|
</span>
|
|
@else
|
|
N/A
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Ngày đã thanh toán -->
|
|
<div>
|
|
<span class="text-xs text-gray-500 block">{{ __('Đã thanh toán') }}</span>
|
|
@if ($invoice->date_paid)
|
|
@php
|
|
$paidDate = \Illuminate\Support\Carbon::parse($invoice->date_paid);
|
|
@endphp
|
|
<span class="text-green-600">
|
|
{{ $paidDate->format('d/m/Y') }}
|
|
</span>
|
|
@else
|
|
<span class="text-gray-400">{{ __('Chưa thanh toán') }}</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Trạng thái -->
|
|
<td class="text-center py-3 px-4">
|
|
{!! $invoice->getStatus() !!}
|
|
</td>
|
|
|
|
<!-- Gia hạn tự động -->
|
|
<td class="text-center py-3 px-4">
|
|
<flux:switch wire:model.live="auto_renew" :checked="$invoice->auto_renew" />
|
|
</td>
|
|
|
|
<!-- Thao tác -->
|
|
<td class="text-center py-3 px-4">
|
|
<a href="{{ route('service.detail', ['invoice_id' => $invoice->id]) }}"
|
|
class="bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded text-sm transition-colors duration-200">
|
|
{{ __('Xem chi tiết') }}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
@endif
|
|
@empty
|
|
<tr>
|
|
<td colspan="7" class="text-center py-8 text-gray-500">
|
|
<div class="flex flex-col items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"
|
|
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
class="lucide lucide-inbox w-12 h-12 mb-3 text-gray-400">
|
|
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
|
|
<path
|
|
d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
|
|
</svg>
|
|
<p class="text-lg font-medium text-gray-600">{{ __('emptyValue') }}</p>
|
|
<p class="text-sm text-gray-500 mt-1">{{ __('Chưa có dịch vụ nào được tạo') }}</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="form-group mt-4">
|
|
{{ $services->links() }}
|
|
</div>
|
|
</div>
|