<?php
$title='余额充值';
include __DIR__ . '/head.php';
?>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    <div class="lg:col-span-2">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="px-4 py-3 bg-gray-50 border-b border-gray-100">
                <h3 class="font-medium text-gray-800 flex items-center">
                    <i class="fas fa-wallet text-indigo-500 mr-1.5"></i>
                    充值中心
                </h3>
            </div>
            <div class="p-4 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">当前余额</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-coins text-yellow-500"></i>
                        </div>
                        <input type="text" value="<?php echo $userrow['rmb']?>" disabled class="w-full pl-10 pr-10 py-2.5 bg-gray-50 border border-gray-200 rounded-lg text-gray-700 font-medium">
                        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                            <span class="text-gray-500">元</span>
                        </div>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">充值金额</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-money-bill-wave text-green-500"></i>
                        </div>
                        <input type="number" value="10" name="money" placeholder="输入金额" class="w-full pl-10 pr-10 py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                            <span class="text-gray-500">元</span>
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-2 mt-3">
                        <button type="button" class="quick-money px-3 py-1.5 border border-gray-200 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-colors">10元</button>
                        <button type="button" class="quick-money px-3 py-1.5 border border-gray-200 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-colors">20元</button>
                        <button type="button" class="quick-money px-3 py-1.5 border border-gray-200 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-colors">50元</button>
                        <button type="button" class="quick-money px-3 py-1.5 border border-gray-200 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-colors">100元</button>
                        <button type="button" class="quick-money px-3 py-1.5 border border-gray-200 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-colors">200元</button>
                        <button type="button" class="quick-money px-3 py-1.5 border border-gray-200 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-colors">500元</button>
                    </div>
                </div>

                <div class="pt-2 space-y-2">
                    <button type="button" onclick="showPaymentOptions()" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2.5 rounded-lg transition-colors flex items-center justify-center gap-2">
                        <i class="fas fa-credit-card"></i><span>在线支付</span>
                    </button>
                    <button type="button" onclick="kami()" class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-2.5 rounded-lg transition-colors flex items-center justify-center gap-2">
                        <i class="fas fa-key"></i><span>卡密兑换</span>
                    </button>
                </div>

                <div class="text-center pt-2">
                    <a href="javascript:history.back(-1)" class="text-sm text-gray-500 hover:text-gray-700 transition-colors">
                        <i class="fas fa-arrow-left mr-1"></i>返回上一层
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="lg:col-span-1">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="px-4 py-3 bg-gray-50 border-b border-gray-100">
                <h3 class="font-medium text-gray-800 flex items-center">
                    <i class="fas fa-info-circle text-indigo-500 mr-1.5"></i>
                    充值说明
                </h3>
            </div>
            <div class="p-4">
                <ul class="space-y-2 text-sm text-gray-600">
                    <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-0.5 mr-2"></i><span>充值金额将立即到账</span></li>
                    <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-0.5 mr-2"></i><span>支持多种支付方式</span></li>
                    <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-0.5 mr-2"></i><span>充值过程中请勿关闭浏览器</span></li>
                    <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-0.5 mr-2"></i><span>如有问题请联系客服</span></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<?php include 'foot.php'; ?>

<div id="appModal" class="fixed inset-0 z-50 hidden">
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" onclick="closeModal()"></div>
    <div class="fixed inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md max-h-[85vh] flex flex-col">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100 bg-gray-50/50 rounded-t-2xl">
                <h3 id="modalTitle" class="text-lg font-semibold text-gray-800"></h3>
                <button onclick="closeModal()" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200 text-gray-400 hover:text-gray-600 transition-colors"><i class="fas fa-times"></i></button>
            </div>
            <div id="modalBody" class="px-5 py-4 overflow-y-auto"></div>
            <div id="modalFooter" class="px-5 py-3 border-t border-gray-100 hidden"></div>
        </div>
    </div>
</div>

<script>
function openModal(title, content, footerCallback) {
    document.getElementById('modalTitle').textContent = title;
    document.getElementById('modalBody').innerHTML = content;
    const modalFooter = document.getElementById('modalFooter');
    if (footerCallback) {
        modalFooter.innerHTML = footerCallback();
        modalFooter.classList.remove('hidden');
    } else {
        modalFooter.classList.add('hidden');
    }
    document.getElementById('appModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeModal() {
    document.getElementById('appModal').classList.add('hidden');
    document.body.style.overflow = '';
}

function showPaymentOptions() {
    var money = $("input[name='money']").val();
    if(!money || money == 0){ showToast('请输入充值金额'); return; }

    showLoading();
    $.ajax({
        type: 'GET',
        url: 'ajax.php?act=get_available_payments',
        dataType: 'json',
        success: function(data) {
            hideLoading();
            if(data.code == 1 && data.data.length > 0){
                var payments = data.data;
                var html = '<div class="space-y-3">';
                html += '<div class="bg-indigo-50 rounded-lg p-3 text-center">';
                html += '<p class="text-xs text-gray-600">充值金额</p>';
                html += '<p class="text-xl font-bold text-indigo-700">¥'+money+'</p>';
                html += '</div>';
                html += '<div class="pt-2 border-t border-gray-100"><p class="text-xs text-gray-500 mb-2 text-center">选择支付方式</p>';
                html += '<div class="grid grid-cols-2 gap-2">';
                for(var i=0; i<payments.length; i++){
                    var item = payments[i];
                    var icon = 'alipay.png', color = 'text-blue-600', label = item.name || '支付宝';
                    if(item.pay_type == 'wxpay'){ icon = 'wxpay.png'; color = 'text-green-600'; label = item.name || '微信支付'; }
                    if(item.pay_type == 'qqpay'){ icon = 'qqpay.png'; color = 'text-sky-600'; label = item.name || 'QQ钱包'; }
                    html += '<button onclick="dopay('+item.interface_id+', '+money+')" class="flex items-center justify-center gap-2 bg-gray-50 hover:bg-gray-100 '+color+' font-medium py-2.5 px-4 rounded-lg transition-colors">';
                    html += '<img src="../assets/img/'+icon+'" style="width:24px;"><span>'+label+'</span></button>';
                }
                html += '</div></div></div>';
                openModal('在线支付', html, function() {
                    return '<button onclick="closeModal()" class="w-full py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-medium transition-colors">取消</button>';
                });
            }else{
                showToast('暂无可用支付方式');
            }
        },
        error: function(){ hideLoading(); showToast('服务器错误'); }
    });
}

function dopay(interfaceId, money){
    showLoading();
    $.get("ajax.php?act=recharge&interface_id="+interfaceId+"&money="+money, function(data) {
        if(data.code == 0){
            window.location.href='../other/submit.php?type='+data.type+'&orderid='+data.trade_no;
        }else{
            hideLoading();
            showToast(data.msg);
        }
    }, 'json').fail(function(){ hideLoading(); showToast('服务器错误'); });
}

function kami(){
    openModal('卡密兑换', '<p class="text-center text-sm text-gray-600 mb-3">输入卡密后点击确定</p><input type="text" id="kamiInput" class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="请输入卡密">', function(){
        return '<div class="flex gap-2"><button onclick="closeModal()" class="flex-1 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-medium transition-colors">取消</button><button onclick="submitKami()" class="flex-1 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-colors">确定</button></div>';
    });
}

function submitKami(){
    var text = document.getElementById('kamiInput').value;
    if(!text){ showToast('请输入卡密'); return; }
    closeModal();
    showLoading();
    $.ajax({
        type: 'POST',
        url: 'ajax.php?act=recharge_km',
        data: {km:text},
        dataType: 'json',
        success: function(data) {
            hideLoading();
            if(data.code == 1){
                showToast(data.msg);
                setTimeout(function(){ location.reload(); }, 1500);
            }else{ showToast(data.msg); }
        },
        error: function(){ hideLoading(); showToast('服务器错误'); }
    });
}

$('.quick-money').click(function() {
    $('input[name="money"]').val($(this).text().replace('元', ''));
    $('.quick-money').removeClass('bg-indigo-100 border-indigo-500 text-indigo-700');
    $(this).addClass('bg-indigo-100 border-indigo-500 text-indigo-700');
});
</script>
