229 lines
14 KiB
PHP
229 lines
14 KiB
PHP
@extends('frontend.layouts.master')
|
|
@section('content')
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<!-- Main Content Card -->
|
|
<div class="bg-white rounded-lg shadow border border-gray-200">
|
|
<!-- customer Info Section -->
|
|
<div class="bg-primary text-white p-6 rounded-t-lg">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
|
|
<img src="{{ asset(customer()?->avatar) ?? asset('images/avatar.png') }}" alt="Avatar"
|
|
class="w-10 h-10 rounded-full">
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold">{{ customer()?->firstname . ' ' . customer()?->lastname }}</h3>
|
|
<p class="text-white text-sm">{{ customer()?->email }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-sm text-primary">Số dư hiện tại</div>
|
|
<div class="text-2xl font-bold">{{ number_format(customer()?->credit ?? 0, 0, ',', '.') }} đ</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-12 gap-6 p-6" x-data="{
|
|
amount: '{{ old('total_amount') ?? '' }}',
|
|
error: '',
|
|
selectedPayment: null,
|
|
showCustomAmount: false
|
|
}">
|
|
<!-- Left Column - Main Content (8/12) -->
|
|
<div class="col-span-12 lg:col-span-8">
|
|
|
|
<!-- Quick Amount Selection -->
|
|
<div class="mb-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">
|
|
<i class="fas fa-bolt text-yellow-500 mr-2"></i>
|
|
Chọn mệnh giá nhanh
|
|
</h3>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
|
|
@foreach ([200000, 300000, 400000, 500000, 1000000, 2000000] as $price)
|
|
<button @click="amount = {{ $price }}; error = ''; showCustomAmount = false"
|
|
:class="amount == {{ $price }} ? 'bg-primary text-white border-primary' :
|
|
'bg-gray-50 text-gray-700'"
|
|
class="px-3 py-2 border rounded-lg border-gray-300 hover:border-primary font-medium transition-colors">
|
|
<div class="text-sm font-bold">{{ number_format($price / 1000, 0, ',', '.') }}K</div>
|
|
<div class="text-xs">{{ number_format($price, 0, ',', '.') }} đ</div>
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
|
|
<!-- Custom Amount Button -->
|
|
<div class="mt-4">
|
|
<button @click="showCustomAmount = !showCustomAmount; amount = ''"
|
|
:class="showCustomAmount ? 'bg-gray-600 text-white' :
|
|
'bg-gray-100 text-gray-700 hover:bg-gray-200'"
|
|
class="px-4 py-2 rounded-lg font-medium transition-colors">
|
|
<i class="fas fa-edit mr-2"></i>
|
|
Nhập số tiền tùy chọn
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Amount Input -->
|
|
<div x-show="showCustomAmount" x-transition class="mb-6">
|
|
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
<i class="fas fa-coins text-yellow-500 mr-2"></i>
|
|
Nhập số tiền tùy chọn
|
|
</label>
|
|
<div class="relative">
|
|
<input type="number" name="total_amount" x-model="amount"
|
|
@input="error = amount < 200000 ? 'Số tiền tối thiểu là 200,000 đ' : ''"
|
|
placeholder="200.000" min="200000"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"
|
|
required>
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3">
|
|
<span class="text-gray-500 text-sm">VNĐ</span>
|
|
</div>
|
|
</div>
|
|
<template x-if="error">
|
|
<p class="text-red-500 text-sm mt-2">
|
|
<i class="fas fa-exclamation-circle mr-1"></i>
|
|
<span x-text="error"></span>
|
|
</p>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Warning Notice -->
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
|
|
<div class="flex items-start">
|
|
<i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-3"></i>
|
|
<div>
|
|
<h4 class="text-sm font-medium text-yellow-800">Lưu ý quan trọng</h4>
|
|
<p class="text-sm text-yellow-700 mt-1">
|
|
Số tiền tối thiểu cho mỗi lần nạp là <strong>200.000đ</strong>.
|
|
Giao dịch sẽ được xử lý trong vòng 5-10 phút.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Methods -->
|
|
<div class="mb-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">
|
|
<i class="fas fa-credit-card text-primary mr-2"></i>
|
|
Chọn phương thức thanh toán
|
|
</h3>
|
|
<!-- Digital Payment Methods -->
|
|
<div class="space-y-4">
|
|
<!-- VNPay -->
|
|
<div class="border border-gray-300 rounded-lg p-4">
|
|
<form x-ref="vnpayForm" action="{{ route('recharge.paymentProcess.vnPay') }}"
|
|
method="POST">
|
|
@csrf
|
|
<input type="hidden" name="total_amount" x-bind:value="amount">
|
|
<button type="submit" :disabled="!amount || amount < 200000"
|
|
class="w-full flex items-center justify-between p-4 bg-gray-700 text-white rounded-lg hover:bg-gray-800 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<div class="flex items-center space-x-3">
|
|
<img src="{{ asset('/images/vnpay.svg') }}" class="w-8 h-8" alt="VNPay">
|
|
<div class="text-left">
|
|
<div class="font-semibold">Thanh toán qua VNPay</div>
|
|
<div class="text-sm opacity-90">An toàn, nhanh chóng</div>
|
|
</div>
|
|
</div>
|
|
<i class="fas fa-arrow-right text-lg"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Momo -->
|
|
<div class="border border-gray-300 rounded-lg p-4">
|
|
<button :disabled="!amount || amount < 200000"
|
|
class="w-full flex items-center justify-between p-4 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<div class="flex items-center space-x-3">
|
|
<img src="{{ asset('/images/momo.svg') }}" class="w-8 h-8" alt="Momo">
|
|
<div class="text-left">
|
|
<div class="font-semibold">Thanh toán qua Momo</div>
|
|
<div class="text-sm opacity-90">Tiện lợi, phổ biến</div>
|
|
</div>
|
|
</div>
|
|
<i class="fas fa-arrow-right text-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Notice -->
|
|
<div class="bg-green-50 rounded-lg p-4 border border-green-200">
|
|
<div class="flex items-start space-x-3">
|
|
<i class="fas fa-shield-alt text-green-500 mt-1"></i>
|
|
<div>
|
|
<h4 class="text-sm font-medium text-green-800">Bảo mật thông tin</h4>
|
|
<p class="text-sm text-green-700 mt-1">
|
|
Thông tin thanh toán của bạn được mã hóa và bảo vệ an toàn.
|
|
Chúng tôi không lưu trữ thông tin thẻ tín dụng.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column - Summary Section (4/12) -->
|
|
<div class="col-span-12 lg:col-span-4">
|
|
<div class="sticky top-6">
|
|
<!-- Amount Summary Card -->
|
|
<div class="bg-gray-50 border border-gray-200 rounded-lg p-6 mb-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">
|
|
<i class="fas fa-calculator text-primary mr-2"></i>
|
|
Tóm tắt giao dịch
|
|
</h3>
|
|
|
|
<!-- Current Balance -->
|
|
<div class="mb-4 p-3 bg-white rounded-lg border border-gray-200">
|
|
<div class="text-sm text-gray-600">Số dư hiện tại</div>
|
|
<div class="text-xl font-bold text-gray-900">
|
|
{{ number_format(customer()?->credit ?? 0, 0, ',', '.') }} đ</div>
|
|
</div>
|
|
|
|
<!-- Amount to Add -->
|
|
<div x-show="amount && !error" x-transition
|
|
class="mb-4 p-3 bg-white rounded-lg border border-primary">
|
|
<div class="text-sm text-gray-600">Số tiền nạp</div>
|
|
<div class="text-xl font-bold text-primary"
|
|
x-text="amount ? new Intl.NumberFormat('vi-VN').format(amount) + ' đ' : '0 đ'"></div>
|
|
</div>
|
|
|
|
<!-- New Balance -->
|
|
<div x-show="amount && !error" x-transition
|
|
class="mb-4 p-3 bg-primaryrounded-lg border border-primary">
|
|
<div class="text-sm text-gray-600">Số dư sau nạp</div>
|
|
<div class="text-xl font-bold text-primary"
|
|
x-text="amount ? new Intl.NumberFormat('vi-VN').format({{ customer()?->credit ?? 0 }} + parseInt(amount)) + ' đ' : '{{ number_format(customer()?->credit ?? 0, 0, ',', '.') }} đ'">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Warning -->
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
|
|
<div class="flex items-start">
|
|
<i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-2"></i>
|
|
<div class="text-xs text-yellow-700">
|
|
Số tiền tối thiểu: <strong>200.000đ</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Support Card -->
|
|
<div class="bg-primaryborder border-primary rounded-lg p-6">
|
|
<div class="text-center">
|
|
<i class="fas fa-headset text-primary text-2xl mb-3"></i>
|
|
<h4 class="font-semibold text-gray-900 mb-2">Cần hỗ trợ?</h4>
|
|
<p class="text-sm text-gray-600 mb-4">Đội ngũ hỗ trợ 24/7 sẵn sàng giúp đỡ bạn</p>
|
|
<a href="{{ route('ticket') }}"
|
|
class="inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary transition-colors text-sm font-medium">
|
|
<i class="fas fa-comments mr-2"></i>
|
|
Liên hệ hỗ trợ
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|