Files
portal-api/resources/views/frontend/home/index.blade.php
T
2025-07-24 16:18:27 +07:00

174 lines
8.6 KiB
PHP

@extends('frontend.layouts.master')
@section('content')
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
<!-- Leftbox -->
<div class="col-span-12 2xl:col-span-9">
@include('frontend.home.card.service')
</div>
<!-- RightBox -->
<div class="col-span-12 2xl:col-span-3">
<!-- Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-3 animate__animated animate__fadeInUp">
<!-- Card Header -->
<div class="border-b border-slate-300 dark:border-gray-600 border-dashed p-4">
<div class="flex items-center gap-3 font-bold">
<i data-lucide="user" class="w-4 h-4"></i>
<h4>Thông tin cá nhân</h4>
</div>
</div>
<!-- Card Body -->
<div class="p-4">
<ul class="space-y-3 text-sm">
<li class="flex flex-wrap items-center">
<span class="font-medium mr-2">Họ và tên:</span>
{{ customer()?->firstname . ' ' . customer()?->lastname }}
</li>
<li class="flex flex-wrap items-center">
<span class="font-medium mr-2">Email:</span> {{ customer()?->email }}
@if (customer()?->email_hash)
<span class="text-green-500 text-xs ml-2 flex items-center">
<i class="fas fa-check-circle mr-1"></i> Đã xác thực
</span>
@else
<span class="text-red-500 text-xs ml-2 flex items-center">
<i class="fas fa-x mr-1"></i> Chưa xác thực
</span>
@endif
</li>
<li class="flex flex-wrap items-center">
<span class="font-medium mr-2">Điện thoại:</span>
<span class="phone">
{{ customer()?->phone }}
</span>
<span id="user-info-verify-phone">
</span>
</li>
<li class="flex flex-wrap items-center">
<span class="font-medium mr-2">Đặc quyền:</span> Cơ bản
</li>
<livewire:user-settings />
</ul>
</div>
</div>
<!-- Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-3 animate__animated animate__fadeInUp">
<!-- Card Header -->
<div class="border-b border-slate-300 dark:border-gray-600 border-dashed p-4">
<div class="flex items-center gap-3 font-bold">
<i data-lucide="wallet-cards" class="w-4 h-4"></i>
<h4>Thống kế Credits và Points</h4>
</div>
</div>
<!-- Card Body -->
<div class="p-4">
<div class="grid grid-cols-3 gap-4">
<div class="flex flex-col items-center justify-center">
<img src="{{ asset('images/credit-balance-icon.png') }}" alt="Credit" width="50%"
height="50%" />
<small>Số dư</small>
<span class="text-green-500">{{ format_price(customer()?->credit) }}</span>
</div>
<div class="flex flex-col items-center justify-center">
<img src="{{ asset('images/total-amount-spent.png') }}" alt="Credit" width="50%"
height="50%" />
<small>Đã chi</small>
<span
class="text-red-500">{{ format_price((int) customer()?->total - (int) customer()?->credit) }}</span>
</div>
<div class="flex flex-col items-center justify-center">
<img src="{{ asset('images/total-amount-deposited.png') }}" alt="Credit" width="50%"
height="50%" />
<small>Đã nạp</small>
<span class="text-blue-500">{{ format_price((int) customer()?->total) }}</span>
</div>
<div class="flex flex-col items-center justify-center">
<img src="{{ asset('images/account-points.png') }}" alt="Credit" width="50%"
height="50%" />
<small>Points</small>
<span class="text-gray-500">{{ format_point(0) }}</span>
</div>
<div class="flex flex-col items-center justify-center">
<img src="{{ asset('images/total-points.png') }}" alt="Credit" width="50%"
height="50%" />
<small>Tổng tích điểm</small>
<span class="text-gray-500">{{ format_point(0) }}</span>
</div>
<div class="flex flex-col items-center justify-center">
<img src="{{ asset('images/membership-level.png') }}" alt="Credit" width="60%"
height="60%" />
<small>Hạng</small>
<span class="text-green-500">Cơ bản</span>
</div>
</div>
<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
<div class="mx-auto flex items-center justify-center gap-3 flex-row mt-3">
<a href="{{ route('recharge.index') }}" wire:navigate>
<flux:button icon="credit-card">Nạp tiền</flux:button>
</a>
<a href="{{ route('recharge.history') }}" wire:navigate>
<flux:button icon="inbox-stack">Tất cả giao dịch</flux:button>
</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-3 animate__animated animate__fadeInUp">
<!-- Card Header -->
<div class="border-b border-slate-300 dark:border-gray-600 border-dashed p-4">
<div class="flex items-center gap-3 font-bold">
<i data-lucide="bookmark" class="w-4 h-4"></i>
<h4>Hướng dẫn</h4>
</div>
</div>
<!-- Card Body -->
<div class="p-4 max-h-[250px] overflow-y-auto">
<ul>
@foreach ($posts as $item)
<li class="border-b border-dashed border-gray-200 last:border-0 group-hover mb-3">
<a href="{{ $item->slug }}"
class="hover:text-[var(--color-primary)] transition-all ease-in-out duration-300">
{{ $item->name }}
</a>
</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
@endsection
@push('viewScripts')
<script>
function updateStatus(field, checked) {
fetch('{{ route('user.updateNotification') }}', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
body: JSON.stringify({
[field]: checked ? 1 : 0
})
})
.then(response => response.json())
.then(data => {
// Xử lý kết quả trả về
if (data.success) {
console.log('Cập nhật thành công!');
} else {
console.log('Lỗi khi cập nhật');
}
})
.catch(error => {
console.error('Có lỗi xảy ra:', error);
});
}
</script>
@endpush