@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