216 lines
14 KiB
PHP
216 lines
14 KiB
PHP
@extends('frontend.layouts.master')
|
|
|
|
@section('content')
|
|
@if (!empty($group))
|
|
<!-- Products Grid -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-8" x-data>
|
|
@forelse ($products as $index => $item)
|
|
<form action="{{ route('cart.add') }}" method="post">
|
|
@csrf
|
|
<input name="product_id" value="{{ $item->id }}" type="hidden" />
|
|
<input name="type_id" value="{{ $item->type_id }}" type="hidden" />
|
|
<input name="product_price" value="{{ $item->price_sale ?: $item->price }}" type="hidden" />
|
|
|
|
<div class="group relative bg-white rounded-md hover:shadow-2xl transition-all duration-500 transform overflow-hidden border border-gray-100"
|
|
x-init="$el.style.opacity = 0;
|
|
setTimeout(() => { $el.style.opacity = 1 }, {{ (int) $index * 150 }})" style="opacity: 0">
|
|
|
|
<!-- Header with gradient -->
|
|
<div class="p-2 border-b border-dashed border-gray-200">
|
|
<h3 class="text-xl text-primary font-bold mb-2 text-center">
|
|
{{ $item->name }}
|
|
</h3>
|
|
</div>
|
|
|
|
@php
|
|
$basePrice = floatval($item->price_sale ?: $item->price);
|
|
@endphp
|
|
|
|
<div class="p-6" data-product-id="{{ $item->id }}" data-base-price="{{ $basePrice }}">
|
|
|
|
|
|
<!-- Price Display -->
|
|
<div class="text-center">
|
|
<div
|
|
class="inline-flex items-center justify-center gap-2 bg-orange-50 rounded-md w-full mb-3 p-2">
|
|
<span class="text-sm font-bold text-primary">
|
|
≈ {{ format_price($item->price_sale ?: $item->price) }}
|
|
</span>
|
|
<span class="text-primary font-medium">/ tháng</span>
|
|
</div>
|
|
</div>
|
|
<!-- Duration Selector -->
|
|
|
|
<div class="mb-6">
|
|
<!-- Custom Dropdown -->
|
|
<div class="custom-dropdown" id="durationDropdown{{ $item->id }}">
|
|
<div class="dropdown-selected">
|
|
<span class="selected-text">{{ format_price($basePrice * 6) }} / 6 tháng</span>
|
|
<i class="dropdown-arrow">▼</i>
|
|
</div>
|
|
<div class="dropdown-options">
|
|
<div class="dropdown-option selected" data-value="6" data-months="6"
|
|
data-price="{{ $basePrice * 6 }}">
|
|
<div class="flex justify-between items-center">
|
|
<span>{{ format_price($basePrice * 6) }} / 6 tháng</span>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown-option" data-value="12" data-months="12"
|
|
data-price="{{ $basePrice * 12 }}">
|
|
<div class="flex justify-between items-center">
|
|
<span>{{ format_price($basePrice * 12) }} / 1 năm</span>
|
|
<span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded">Tiết
|
|
kiệm 10%</span>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown-option" data-value="24" data-months="24"
|
|
data-price="{{ $basePrice * 24 }}">
|
|
<div class="flex justify-between items-center">
|
|
<span>{{ format_price($basePrice * 24) }} / 2 năm</span>
|
|
<span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded">Tiết
|
|
kiệm 10%</span>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown-option" data-value="36" data-months="36"
|
|
data-price="{{ $basePrice * 36 }}">
|
|
<div class="flex justify-between items-center">
|
|
<span>{{ format_price($basePrice * 36) }} / 3 năm</span>
|
|
<span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded">Tiết
|
|
kiệm 10%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="hidden" name="months" class="hiddenMonths" value="6">
|
|
{{-- <input type="hidden" name="total_price" class="hiddenTotalPrice"
|
|
value="{{ $basePrice }}"> --}}
|
|
</div>
|
|
<!-- Specifications -->
|
|
<div class="space-y-4 mb-6">
|
|
<ul class="space-y-1">
|
|
<!-- CPU -->
|
|
<li class="flex items-center justify-center gap-3">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
|
|
<i class="fas fa-microchip text-orange-600"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<span class="text-sm text-gray-600">CPU:</span>
|
|
<span class="font-bold text-gray-800 ml-2 vm-cpu"
|
|
data-template-id="{{ $item->template_id }}">{{ $item->cpu }}
|
|
vCore</span>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- RAM -->
|
|
<li class="flex items-center justify-center gap-3">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
|
|
<i class="fas fa-memory text-orange-600"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<span class="text-sm text-gray-600">RAM:</span>
|
|
<span class="font-bold text-gray-800 ml-2 vm-ram"
|
|
data-template-id="{{ $item->template_id }}">{{ $item->ram }} GB</span>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- SSD -->
|
|
<li class="flex items-center justify-center gap-3">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
|
|
<i class="fas fa-hdd text-orange-600"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<span class="text-sm text-gray-600">SSD:</span>
|
|
<span class="font-bold text-gray-800 ml-2 vm-disk"
|
|
data-template-id="{{ $item->template_id }}">{{ $item->disk }} GB</span>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- GPU -->
|
|
<li class="flex items-center justify-center gap-3">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
|
|
<i class="fas fa-tv text-orange-600"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<span class="text-sm text-gray-600">GPU:</span>
|
|
<span class="font-bold text-gray-800 ml-2">{{ $item->gpu }} GB</span>
|
|
</div>
|
|
</li>
|
|
<!-- Bandwidth -->
|
|
<li class="flex items-center justify-center gap-3">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
|
|
<i class="fas fa-tachometer-alt text-orange-600"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<span class="text-sm text-gray-600">Băng thông:</span>
|
|
<span class="font-bold text-gray-800 ml-2">{{ $item->bandwidth }} MB</span>
|
|
</div>
|
|
</li>
|
|
<!-- OS -->
|
|
<li class="flex items-center justify-center gap-3">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
|
|
<i class="fab fa-linux text-orange-600 os-icon"
|
|
data-template-id="{{ $item->template_id }}"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<span class="text-sm text-gray-600">Hệ điều hành:</span>
|
|
<span class="font-bold text-gray-800 ml-2 guest-os"
|
|
data-template-id="{{ $item->template_id }}">
|
|
@if ($item->type_id == 4 && $item->operatingSystems->isNotEmpty())
|
|
{{ $item->operatingSystems->pluck('osGroup.name')->filter()->unique()->implode(', ') }}
|
|
@else
|
|
{{ $item->os ?? 'Linux' }}
|
|
@endif
|
|
</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Action Button -->
|
|
<flux:button variant="primary" color="orange" type="submit" class="w-full"
|
|
icon="shopping-bag">
|
|
Đăng ký ngay</flux:button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
@empty
|
|
<div class="col-span-full">
|
|
<div class="text-center py-16">
|
|
<div class="w-24 h-24 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<i class="fas fa-box-open text-4xl text-orange-500"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-2">Không có sản phẩm</h3>
|
|
<p class="text-gray-600">Danh mục này hiện chưa có sản phẩm nào.</p>
|
|
</div>
|
|
</div>
|
|
{{ $products->links() }}
|
|
@endforelse
|
|
</div>
|
|
@else
|
|
<div class="min-h-screen flex items-center justify-center">
|
|
<div class="text-center">
|
|
<div class="w-32 h-32 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<i class="fas fa-exclamation-triangle text-5xl text-orange-500"></i>
|
|
</div>
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Không tìm thấy</h2>
|
|
<p class="text-gray-600 text-lg">Danh mục này không tồn tại hoặc đã bị xóa.</p>
|
|
<a href="{{ route('home') }}"
|
|
class="inline-block mt-6 bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-xl transition-colors">
|
|
Về trang chủ
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endsection
|
|
|
|
@push('viewStyles')
|
|
<link href="{{ asset('lib/tom-select/tom-select.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('css/service/dropdown.css') }}" rel="stylesheet">
|
|
@endpush
|
|
|
|
@push('viewScripts')
|
|
<script src="{{ asset('lib/tom-select/tom-select.complete.min.js') }}" defer></script>
|
|
<script src="{{ asset('js/service/vminfo.min.js') }}" defer></script>
|
|
@endpush
|