@extends('adminlte::page')

@section('title', 'Recharge')

@section('css')
<style>
    /* Mobile responsive */
    @media (max-width: 768px) {
        .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .table { font-size: 12px; }
        .table th, .table td { padding: 5px 8px; white-space: nowrap; }
        .btn-sm, .btn-xs { font-size: 11px; padding: 3px 6px; margin-bottom: 3px; }
        .btn-lg { font-size: 14px; padding: 8px 12px; }
        .box-title small { display: block; font-size: 11px; }
        .input-group { max-width: 100%; }
        /* Member info tables stack */
        .member-info-col { margin-bottom: 10px; }
        /* Cards table - action buttons stack */
        .table td .btn { display: inline-block; margin: 1px; }
        /* Hero cards smaller */
        .hero-card-col { padding: 5px !important; }
        .hero-card-col img { width: 50px !important; height: 50px !important; }
        /* Buy button align */
        .buy-btn-col { display: flex; align-items: center; justify-content: center; padding: 10px !important; }
    }
    @media (max-width: 480px) {
        .table { font-size: 11px; }
        .btn-sm { font-size: 10px; padding: 2px 5px; }
        code { font-size: 10px; }
    }
</style>
@stop

@section('content_header')
@stop

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-search"></i> Search Member</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-4 col-xs-12">
                            <div class="input-group">
                                <input type="text" id="member-id-input" class="form-control" placeholder="Enter Member ID...">
                                <span class="input-group-btn">
                                    <button id="btn-search" class="btn btn-primary" type="button">
                                        <i class="fa fa-search"></i> Search
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div id="search-error" class="text-red" style="display:none; margin-top:10px;"></div>
                </div>
            </div>
        </div>

        {{-- Member Info --}}
        <div class="col-md-12" id="member-info-section" style="display:none;">
            <div class="box box-success">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-user"></i> Member Info</h3>
                    <div class="box-tools pull-right">
                        <a id="btn-member-info" href="#" class="btn btn-sm btn-warning" style="display:none;">
                            <i class="fa fa-info-circle"></i> Info
                        </a>
                        <a id="btn-hero-visual" href="#" class="btn btn-sm btn-success" style="display:none;">
                            <i class="fa fa-shield"></i> Hero
                        </a>
                        <a id="btn-diamond-log" href="#" class="btn btn-sm btn-info" style="display:none;">
                            <i class="fa fa-diamond"></i> Diamond Log
                        </a>
                    </div>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-4">
                            <table class="table table-bordered table-striped">
                                <tr><th style="width:40%">Member ID</th><td id="info-member-id"></td></tr>
                                <tr><th>Name</th><td id="info-member-name"></td></tr>
                                <tr><th>Server</th><td id="info-member-server"></td></tr>
                                <tr><th>Level</th><td id="info-member-level"></td></tr>
                                <tr><th>EXP</th><td id="info-member-exp"></td></tr>
                            </table>
                        </div>
                        <div class="col-md-4">
                            <table class="table table-bordered table-striped">
                                <tr><th style="width:40%"><i class="fa fa-diamond text-blue"></i> Diamond</th><td id="info-member-diamond" class="text-bold text-blue"></td></tr>
                                <tr><th><i class="fa fa-money text-yellow"></i> Gold</th><td id="info-member-gold" class="text-bold text-yellow"></td></tr>
                                <tr><th>Stamina</th><td id="info-member-stamina"></td></tr>
                                <tr><th>Total Diamond Buy</th><td id="info-diamond-total-buy"></td></tr>
                                <tr><th>Total Diamond Use</th><td id="info-diamond-total-use"></td></tr>
                            </table>
                        </div>
                        <div class="col-md-4">
                            <table class="table table-bordered table-striped">
                                <tr><th style="width:40%"><i class="fa fa-star text-orange"></i> VIP Level</th><td id="info-vip-level" class="text-bold text-orange"></td></tr>
                                <tr><th>VIP EXP</th><td id="info-vip-exp"></td></tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Event Banner --}}
            @if($diamondBonusEvent)
                <div class="alert alert-success">
                    <h4><i class="fa fa-star"></i> EVENT: Purchase Diamond Bonus Active!</h4>
                    <p>
                        <strong>{{ $diamondBonusEvent['date_begin'] }}</strong> ~ <strong>{{ $diamondBonusEvent['date_end'] }}</strong>
                        &nbsp;|&nbsp;
                        Bonus:
                        @foreach($diamondBonusEvent['bonus_map'] as $diamond => $mult)
                            <span class="label label-warning">{{ number_format($diamond) }} <i class="fa fa-diamond"></i> x{{ $mult }}</span>
                        @endforeach
                    </p>
                </div>
            @endif

            {{-- Diamond Recharge --}}
            <div class="box box-warning">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-diamond"></i> Diamond Recharge</h3>
                </div>
                <div class="box-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-responsive">
                            <thead>
                                <tr>
                                    <th>Price</th>
                                    <th>Diamond</th>
                                    <th>1st Mult</th>
                                    <th>Event</th>
                                    <th>Total</th>
                                    <th>Bought</th>
                                    <th style="width:120px">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr data-price="0.99">
                                    <td><strong>$0.99</strong></td>
                                    <td>90</td>
                                    <td class="dp-multiply text-orange text-bold">-</td>
                                    <td class="dp-event text-green text-bold">-</td>
                                    <td class="dp-actual text-blue text-bold">-</td>
                                    <td class="dp-count">-</td>
                                    <td><button class="btn btn-success btn-sm btn-buy-diamond" data-diamond="90" data-money="0.99"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                                </tr>
                                <tr data-price="4.99">
                                    <td><strong>$4.99</strong></td>
                                    <td>450</td>
                                    <td class="dp-multiply text-orange text-bold">-</td>
                                    <td class="dp-event text-green text-bold">-</td>
                                    <td class="dp-actual text-blue text-bold">-</td>
                                    <td class="dp-count">-</td>
                                    <td><button class="btn btn-success btn-sm btn-buy-diamond" data-diamond="450" data-money="4.99"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                                </tr>
                                <tr data-price="9.99">
                                    <td><strong>$9.99</strong></td>
                                    <td>900</td>
                                    <td class="dp-multiply text-orange text-bold">-</td>
                                    <td class="dp-event text-green text-bold">-</td>
                                    <td class="dp-actual text-blue text-bold">-</td>
                                    <td class="dp-count">-</td>
                                    <td><button class="btn btn-success btn-sm btn-buy-diamond" data-diamond="900" data-money="9.99"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                                </tr>
                                <tr data-price="19.99">
                                    <td><strong>$19.99</strong></td>
                                    <td>1,800</td>
                                    <td class="dp-multiply text-orange text-bold">-</td>
                                    <td class="dp-event text-green text-bold">-</td>
                                    <td class="dp-actual text-blue text-bold">-</td>
                                    <td class="dp-count">-</td>
                                    <td><button class="btn btn-success btn-sm btn-buy-diamond" data-diamond="1800" data-money="19.99"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                                </tr>
                                <tr data-price="49.99">
                                    <td><strong>$49.99</strong></td>
                                    <td>4,500</td>
                                    <td class="dp-multiply text-orange text-bold">-</td>
                                    <td class="dp-event text-green text-bold">-</td>
                                    <td class="dp-actual text-blue text-bold">-</td>
                                    <td class="dp-count">-</td>
                                    <td><button class="btn btn-success btn-sm btn-buy-diamond" data-diamond="4500" data-money="49.99"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                                </tr>
                                <tr data-price="99.99">
                                    <td><strong>$99.99</strong></td>
                                    <td>9,000</td>
                                    <td class="dp-multiply text-orange text-bold">-</td>
                                    <td class="dp-event text-green text-bold">-</td>
                                    <td class="dp-actual text-blue text-bold">-</td>
                                    <td class="dp-count">-</td>
                                    <td><button class="btn btn-success btn-sm btn-buy-diamond" data-diamond="9000" data-money="99.99"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div id="diamond-result" style="display:none; margin-top:10px;"></div>
                </div>
            </div>

            {{-- Buy Cards --}}
            <div class="box box-danger">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-credit-card"></i> Buy Cards & Tickets</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                            <table class="table table-bordered table-responsive">
                                <thead>
                                    <tr>
                                        <th>Card Type</th>
                                        <th>Price</th>
                                        <th style="display:none"><i class="fa fa-diamond"></i> Diamond</th>
                                        <th>Status</th>
                                        <th style="width:200px">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><i class="fa fa-calendar text-blue"></i> <strong>Weekly</strong></td>
                                        <td><strong>$0.99</strong></td>
                                        <td style="display:none"><span class="text-blue">100</span></td>
                                        <td id="card-status-weekly"></td>
                                        <td>
                                            <button class="btn btn-primary btn-sm btn-buy-card" data-type="weekly" data-money="0.99" data-diamond="100">
                                                <i class="fa fa-shopping-cart"></i> Buy
                                            </button>
                                            <button class="btn btn-default btn-sm btn-buy-promote" data-type="weekly" data-money="0.99" data-diamond="100">
                                                <i class="fa fa-gift"></i> + Promote
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-calendar-check-o text-green"></i> <strong>Monthly</strong></td>
                                        <td><strong>$2.99</strong></td>
                                        <td style="display:none"><span class="text-blue">450</span></td>
                                        <td id="card-status-monthly"></td>
                                        <td>
                                            <button class="btn btn-success btn-sm btn-buy-month" data-type="card" data-money="2.99" data-diamond="450">
                                                <i class="fa fa-shopping-cart"></i> Buy
                                            </button>
                                            <button class="btn btn-default btn-sm btn-buy-promote" data-type="monthly" data-money="2.99" data-diamond="450">
                                                <i class="fa fa-gift"></i> + Promote
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-sun-o text-orange"></i> <strong>Season</strong></td>
                                        <td><strong>$8.99</strong></td>
                                        <td style="display:none"><span class="text-blue">900</span></td>
                                        <td id="card-status-season"></td>
                                        <td>
                                            <button class="btn btn-warning btn-sm btn-buy-card" data-type="season" data-money="8.99" data-diamond="900">
                                                <i class="fa fa-shopping-cart"></i> Buy
                                            </button>
                                            <button class="btn btn-default btn-sm btn-buy-promote" data-type="season" data-money="8.99" data-diamond="900">
                                                <i class="fa fa-gift"></i> + Promote
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-trophy text-purple"></i> <strong>Annual</strong></td>
                                        <td><strong>$29.99</strong></td>
                                        <td style="display:none"><span class="text-blue">3,000</span></td>
                                        <td id="card-status-annual"></td>
                                        <td>
                                            <button class="btn btn-info btn-sm btn-buy-card" data-type="annual" data-money="29.99" data-diamond="3000">
                                                <i class="fa fa-shopping-cart"></i> Buy
                                            </button>
                                            <button class="btn btn-default btn-sm btn-buy-promote" data-type="annual" data-money="29.99" data-diamond="3000">
                                                <i class="fa fa-gift"></i> + Promote
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-ticket text-red"></i> <strong>Summon</strong></td>
                                        <td><strong>$9.99</strong></td>
                                        <td style="display:none"><span class="text-orange">VIP +1,000</span></td>
                                        <td id="card-status-ticket"></td>
                                        <td>
                                            <button class="btn btn-danger btn-sm btn-buy-month" data-type="ticket" data-money="9.99" data-diamond="0">
                                                <i class="fa fa-shopping-cart"></i> Buy
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            </div>
                        </div>
                    </div>
                    <div id="card-result" style="display:none; margin-top:10px;"></div>
                </div>
            </div>

            {{-- Kick Start Packages --}}
            <div class="box" style="border-top-color: #e74c3c;">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-rocket"></i> Kick Start Packages</h3>
                </div>
                <div class="box-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-responsive">
                            <thead>
                                <tr>
                                    <th>Package</th>
                                    <th>Price</th>
                                    <th style="display:none"><i class="fa fa-diamond"></i> Diamond</th>
                                    <th style="display:none"><i class="fa fa-money"></i> Gold</th>
                                    <th>VIP EXP</th>
                                    <th style="display:none">Items</th>
                                    <th>Status</th>
                                    <th style="width:120px">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr data-ks-id="622">
                                    <td><strong>Kick Start 1</strong></td>
                                    <td><strong>$4.99</strong></td>
                                    <td style="display:none" class="text-blue">800</td>
                                    <td style="display:none" class="text-yellow">500,000</td>
                                    <td>+150</td>
                                    <td style="display:none"><small>227x50, 305x20, 295x20, 203x20, 285x10</small></td>
                                    <td class="ks-status"></td>
                                    <td class="ks-action"><button class="btn btn-danger btn-sm btn-kick-start" data-package="622"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                                </tr>
                                <tr data-ks-id="623">
                                    <td><strong>Kick Start 2</strong></td>
                                    <td><strong>$9.99</strong></td>
                                    <td style="display:none" class="text-blue">1,600</td>
                                    <td style="display:none" class="text-yellow">1,000,000</td>
                                    <td>+300</td>
                                    <td style="display:none"><small>227x100, 305x50, 295x40, 203x30, 268x30</small></td>
                                    <td class="ks-status"></td>
                                    <td class="ks-action"><button class="btn btn-danger btn-sm btn-kick-start" data-package="623"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                                </tr>
                                <tr data-ks-id="624">
                                    <td><strong>Kick Start 3</strong></td>
                                    <td><strong>$19.99</strong></td>
                                    <td style="display:none" class="text-blue">3,200</td>
                                    <td style="display:none" class="text-yellow">2,500,000</td>
                                    <td>+600</td>
                                    <td style="display:none"><small>227x200, 305x80, 295x100, 203x40, 275x80</small></td>
                                    <td class="ks-status"></td>
                                    <td class="ks-action"><button class="btn btn-danger btn-sm btn-kick-start" data-package="624"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                                </tr>
                                <tr data-ks-id="625">
                                    <td><strong>Kick Start 4</strong></td>
                                    <td><strong>$49.99</strong></td>
                                    <td style="display:none" class="text-blue">8,000</td>
                                    <td style="display:none" class="text-yellow">7,500,000</td>
                                    <td>+1,500</td>
                                    <td style="display:none"><small>614x150, 305x150, 296x50, 203x50, 248x80</small></td>
                                    <td class="ks-status"></td>
                                    <td class="ks-action"><button class="btn btn-danger btn-sm btn-kick-start" data-package="625"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                                </tr>
                                <tr data-ks-id="626">
                                    <td><strong>Kick Start 5</strong></td>
                                    <td><strong>$99.99</strong></td>
                                    <td style="display:none" class="text-blue">16,000</td>
                                    <td style="display:none" class="text-yellow">15,000,000</td>
                                    <td>+3,000</td>
                                    <td style="display:none"><small>614x250, 305x300, 296x100, 203x100, 259x80</small></td>
                                    <td class="ks-status"></td>
                                    <td class="ks-action"><button class="btn btn-danger btn-sm btn-kick-start" data-package="626"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div id="kickstart-result" style="display:none; margin-top:10px;"></div>
                </div>
            </div>

            {{-- Promotion Stamina --}}
            <div class="box" style="border-top-color: #1abc9c;">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-bolt"></i> Purchase Promotion Stamina <small class="text-muted" id="stamina-level-note"></small></h3>
                </div>
                <div class="box-body">
                    {{-- Low level (<85) --}}
                    <table class="table table-bordered" id="stamina-low" style="display:none;">
                        <thead><tr><th>Package</th><th>Price</th><th style="display:none">Gold</th><th>VIP EXP</th><th style="display:none">Items</th><th style="width:120px">Action</th></tr></thead>
                        <tbody>
                            <tr>
                                <td><strong>Stamina Pack 1</strong></td><td><strong>$5</strong></td>
                                <td style="display:none" class="text-yellow">200,000</td><td>+100</td>
                                <td style="display:none"><small>446x5, 305x200, 228x100, 226x50</small></td>
                                <td><button class="btn btn-success btn-sm btn-buy-promo" data-type="stamina" data-package="1"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                            </tr>
                            <tr>
                                <td><strong>Stamina Pack 2</strong></td><td><strong>$50</strong></td>
                                <td style="display:none" class="text-yellow">4,000,000</td><td>+1,000</td>
                                <td style="display:none"><small>917x400, 227x100, 446x50, 295x50</small></td>
                                <td><button class="btn btn-success btn-sm btn-buy-promo" data-type="stamina" data-package="2"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                            </tr>
                            <tr>
                                <td><strong>Stamina Pack 3</strong></td><td><strong>$100</strong></td>
                                <td style="display:none" class="text-yellow">15,000,000</td><td>+2,000</td>
                                <td style="display:none"><small>918x240, 614x40, 296x30, 446x100</small></td>
                                <td><button class="btn btn-success btn-sm btn-buy-promo" data-type="stamina" data-package="3"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                            </tr>
                        </tbody>
                    </table>
                    {{-- High level (>=85) --}}
                    <table class="table table-bordered" id="stamina-high" style="display:none;">
                        <thead><tr><th>Package</th><th>Price</th><th style="display:none">Gold</th><th>VIP EXP</th><th style="display:none">Items</th><th style="width:120px">Action</th></tr></thead>
                        <tbody>
                            <tr>
                                <td><strong>Stamina Pack 1</strong></td><td><strong>$5</strong></td>
                                <td style="display:none" class="text-yellow">200,000</td><td>+100</td>
                                <td style="display:none"><small>446x5, 305x200, 913x50, 226x50</small></td>
                                <td><button class="btn btn-success btn-sm btn-buy-promo" data-type="stamina" data-package="7"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                            </tr>
                            <tr>
                                <td><strong>Stamina Pack 2</strong></td><td><strong>$50</strong></td>
                                <td style="display:none" class="text-yellow">4,000,000</td><td>+1,000</td>
                                <td style="display:none"><small>917x400, 227x100, 446x50, 914x100</small></td>
                                <td><button class="btn btn-success btn-sm btn-buy-promo" data-type="stamina" data-package="8"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                            </tr>
                            <tr>
                                <td><strong>Stamina Pack 3</strong></td><td><strong>$100</strong></td>
                                <td style="display:none" class="text-yellow">15,000,000</td><td>+2,000</td>
                                <td style="display:none"><small>918x240, 614x40, 915x50, 446x100</small></td>
                                <td><button class="btn btn-success btn-sm btn-buy-promo" data-type="stamina" data-package="9"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                            </tr>
                        </tbody>
                    </table>
                    <div id="stamina-result" style="display:none; margin-top:10px;"></div>
                </div>
            </div>

            {{-- Promotion Gold --}}
            <div class="box" style="border-top-color: #f1c40f;">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-money"></i> Purchase Promotion Gold</h3>
                </div>
                <div class="box-body">
                    <table class="table table-bordered table-responsive">
                        <thead><tr><th>Package</th><th>Price</th><th style="display:none">Gold</th><th>VIP EXP</th><th style="display:none">Items</th><th style="width:120px">Action</th></tr></thead>
                        <tbody>
                            <tr>
                                <td><strong>Gold Pack 1</strong></td><td><strong>$5</strong></td>
                                <td style="display:none" class="text-yellow">10,000,000</td><td>+100</td>
                                <td style="display:none"><small>919x5, 305x20, 228x100, 226x50</small></td>
                                <td><button class="btn btn-success btn-sm btn-buy-promo" data-type="gold" data-package="1"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                            </tr>
                            <tr>
                                <td><strong>Gold Pack 2</strong></td><td><strong>$50</strong></td>
                                <td style="display:none" class="text-yellow">120,000,000</td><td>+1,000</td>
                                <td style="display:none"><small>919x50, 917x50, 295x50, 227x50</small></td>
                                <td><button class="btn btn-success btn-sm btn-buy-promo" data-type="gold" data-package="2"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                            </tr>
                            <tr>
                                <td><strong>Gold Pack 3</strong></td><td><strong>$100</strong></td>
                                <td style="display:none" class="text-yellow">250,000,000</td><td>+2,000</td>
                                <td style="display:none"><small>919x100, 917x100, 296x25, 227x100</small></td>
                                <td><button class="btn btn-success btn-sm btn-buy-promo" data-type="gold" data-package="3"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                            </tr>
                        </tbody>
                    </table>
                    <div id="gold-result" style="display:none; margin-top:10px;"></div>
                </div>
            </div>

            {{-- Purchase Hero --}}
            <div class="box box-purple" style="border-top-color: #9b59b6;">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-shield"></i> Purchase Hero</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Hero ID <span class="text-red">*</span></label>
                                <div class="input-group">
                                    <input type="number" id="hero-id-input" class="form-control" min="1" placeholder="Enter Hero ID...">
                                    <span class="input-group-btn">
                                        <button id="btn-lookup-hero" class="btn btn-default" type="button">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9" id="hero-preview" style="display:none;">
                            <div class="row">
                                <div class="col-md-2 text-center">
                                    <img id="hp-avatar" src="" alt="Hero Avatar" style="width:80px; height:80px; border-radius:8px; border:2px solid #ddd; display:none;">
                                </div>
                                <div class="col-md-10">
                                    <table class="table table-bordered table-condensed" style="margin-bottom:0;">
                                        <tr>
                                            <th style="width:100px">Hero ID</th><td id="hp-hero-id"></td>
                                            <th style="width:100px">Skill ID</th><td id="hp-skill-id"></td>
                                        </tr>
                                        <tr>
                                            <th>Base Star</th><td id="hp-star"></td>
                                            <th>Hero Item</th><td id="hp-items" style="font-family:monospace; font-size:12px;"></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="hero-preview-section" style="display:none;">
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <table class="table table-bordered table-responsive">
                                    <thead>
                                        <tr>
                                            <th>Package</th>
                                            <th>Price</th>
                                            <th>Star</th>
                                            <th>VIP EXP</th>
                                            <th>If Owned (Soul Stones)</th>
                                            <th style="width:120px">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><i class="fa fa-star text-yellow"></i><i class="fa fa-star text-yellow"></i><i class="fa fa-star text-yellow"></i> <strong>3-Star Hero</strong></td>
                                            <td><strong>$9.99</strong></td>
                                            <td>3</td>
                                            <td>+200</td>
                                            <td>30 soul stones</td>
                                            <td><button class="btn btn-success btn-sm btn-purchase-hero" data-star="3"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                                        </tr>
                                        <tr>
                                            <td><i class="fa fa-star text-orange"></i><i class="fa fa-star text-orange"></i><i class="fa fa-star text-orange"></i><i class="fa fa-star text-orange"></i> <strong>4-Star Hero</strong></td>
                                            <td><strong>$29.99</strong></td>
                                            <td>4</td>
                                            <td>+800</td>
                                            <td>100 soul stones</td>
                                            <td><button class="btn btn-warning btn-sm btn-purchase-hero" data-star="4"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                                        </tr>
                                        <tr>
                                            <td><i class="fa fa-star text-red"></i><i class="fa fa-star text-red"></i><i class="fa fa-star text-red"></i><i class="fa fa-star text-red"></i><i class="fa fa-star text-red"></i> <strong>5-Star Hero</strong></td>
                                            <td><strong>$79.99</strong></td>
                                            <td>5</td>
                                            <td>+2,400</td>
                                            <td>300 soul stones</td>
                                            <td><button class="btn btn-danger btn-sm btn-purchase-hero" data-star="5"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div id="hero-result" style="display:none; margin-top:10px;"></div>
                </div>
            </div>

            {{-- Purchase 3 Heroes --}}
            <div class="box" style="border-top-color: #27ae60;">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-users"></i> Purchase 3 Heroes (3-Star) <small class="text-muted">($20 | +600 VIP EXP)</small></h3>
                </div>
                <div class="box-body">
                    <div id="heroes3-loading" class="text-center text-muted"><i class="fa fa-spinner fa-spin"></i> Loading heroes...</div>
                    <div id="heroes3-content" style="display:none;">
                        <div class="row">
                            <div class="col-md-9">
                                <div class="row" id="heroes3-cards"></div>
                            </div>
                            <div class="col-md-3 col-xs-12 text-center buy-btn-col" style="display:flex; align-items:center; justify-content:center;">
                                <button id="btn-buy-3heroes" class="btn btn-success btn-lg" disabled>
                                    <i class="fa fa-shopping-cart"></i> Buy ($20)
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="heroes3-result" style="display:none; margin-top:10px;"></div>
                </div>
            </div>

            {{-- Promotion Hero 5 Stars --}}
            <div class="box" style="border-top-color: #8e44ad;">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-star"></i> Purchase Promotion Hero 5 Stars <small class="text-muted">($30 | +10M Gold)</small></h3>
                </div>
                <div class="box-body">
                    <div id="promoh5-loading" class="text-center text-muted"><i class="fa fa-spinner fa-spin"></i> Loading...</div>
                    <div id="promoh5-content" style="display:none;">
                        <div class="row">
                            <div class="col-md-9">
                                <div class="row" id="promoh5-cards"></div>
                            </div>
                            <div class="col-md-3 col-xs-12 text-center buy-btn-col" style="display:flex; align-items:center; justify-content:center;">
                                <button id="btn-buy-promoh5" class="btn btn-lg" style="background-color:#8e44ad; color:#fff;" disabled>
                                    <i class="fa fa-shopping-cart"></i> Buy ($30)
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="promoh5-result" style="display:none; margin-top:10px;"></div>
                </div>
            </div>

            {{-- Growth Fund --}}
            <div class="box" style="border-top-color: #16a085;">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-line-chart"></i> Purchase Growth Fund <small class="text-muted">($19.99 each | +1,000 VIP EXP | One-time only)</small></h3>
                </div>
                <div class="box-body">
                    <table class="table table-bordered table-responsive">
                        <thead>
                            <tr>
                                <th>Package</th>
                                <th>Price</th>
                                <th>VIP EXP</th>
                                <th>Quest ID</th>
                                <th>Status</th>
                                <th style="width:120px">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr data-gf-id="1">
                                <td><strong>Growth Fund 1</strong></td>
                                <td><strong>$19.99</strong></td>
                                <td>+1,000</td>
                                <td><code>200011</code></td>
                                <td class="gf-status"></td>
                                <td class="gf-action"><button class="btn btn-success btn-sm btn-buy-growth" data-fund="1"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                            </tr>
                            <tr data-gf-id="2">
                                <td><strong>Growth Fund 2</strong></td>
                                <td><strong>$19.99</strong></td>
                                <td>+1,000</td>
                                <td><code>200021</code></td>
                                <td class="gf-status"></td>
                                <td class="gf-action"><button class="btn btn-success btn-sm btn-buy-growth" data-fund="2"><i class="fa fa-shopping-cart"></i> Buy</button></td>
                            </tr>
                        </tbody>
                    </table>
                    <div id="growth-result" style="display:none; margin-top:10px;"></div>
                </div>
            </div>

            {{-- Purchase Skin --}}
            <div class="box" style="border-top-color: #e67e22;">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-paint-brush"></i> Purchase Skin</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Hero ID <span class="text-red">*</span></label>
                                <div class="input-group">
                                    <input type="number" id="skin-hero-id-input" class="form-control" min="1" placeholder="Enter Hero ID...">
                                    <span class="input-group-btn">
                                        <button id="btn-lookup-skin" class="btn btn-default" type="button">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9" id="skin-preview" style="display:none;">
                            <div class="row">
                                <div class="col-md-2 text-center">
                                    <img id="skin-avatar" src="" style="width:80px; height:80px; border-radius:8px; border:2px solid #ddd; display:none;">
                                </div>
                                <div class="col-md-10">
                                    <p><strong>Hero #<span id="skin-hero-id-display"></span></strong> (<span id="skin-hero-star"></span> star)</p>
                                    <div id="skin-list"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12" id="skin-no-hero" style="display:none;">
                            <div class="alert alert-warning" style="margin-top:10px;">
                                <i class="fa fa-warning"></i> <span id="skin-no-hero-msg"></span>
                            </div>
                        </div>
                    </div>
                    <div id="skin-result" style="display:none; margin-top:10px;"></div>
                </div>
            </div>

            {{-- Purchase Mystery Hero --}}
            <div class="box" style="border-top-color: #2c3e50;">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-question-circle"></i> Purchase Mystery Hero <small class="text-muted">($100 | +3,000 VIP EXP)</small></h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Hero ID <span class="text-red">*</span></label>
                                <div class="input-group">
                                    <input type="number" id="mystery-hero-id-input" class="form-control" min="1" placeholder="Enter Hero ID...">
                                    <span class="input-group-btn">
                                        <button id="btn-lookup-mystery" class="btn btn-default" type="button">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9" id="mystery-preview" style="display:none;">
                            <div class="row">
                                <div class="col-md-2 text-center">
                                    <img id="mystery-avatar" src="" style="width:80px; height:80px; border-radius:8px; border:2px solid #ddd; display:none;">
                                </div>
                                <div class="col-md-7">
                                    <table class="table table-bordered table-condensed" style="margin-bottom:0;">
                                        <tr>
                                            <th style="width:100px">Hero ID</th>
                                            <td id="mystery-hero-id-display"></td>
                                        </tr>
                                        <tr>
                                            <th>Soul Stone</th>
                                            <td id="mystery-owned-status"></td>
                                        </tr>
                                        <tr>
                                            <th>Bonus Items</th>
                                            <td id="mystery-items"></td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-3">
                                    <button id="btn-buy-mystery" class="btn btn-lg btn-block" style="background-color:#2c3e50; color:#fff; margin-top:15px;" disabled>
                                        <i class="fa fa-shopping-cart"></i> Buy ($100)
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12" id="mystery-error" style="display:none;">
                            <div class="alert alert-warning" style="margin-top:10px;">
                                <i class="fa fa-warning"></i> <span id="mystery-error-msg"></span>
                            </div>
                        </div>
                    </div>
                    <div id="mystery-hero-list" style="margin-top:10px;">
                        <small class="text-muted"><i class="fa fa-info-circle"></i> Available heroes: <span id="mystery-heroes-display">-</span></small>
                    </div>
                    <div id="mystery-result" style="display:none; margin-top:10px;"></div>
                </div>
            </div>

            {{-- Purchase Ultimate Hero --}}
            <div class="box" style="border-top-color: #f39c12;">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-star"></i> Purchase Ultimate Hero <small class="text-muted">(5-star only | 750 soul stones | +3,000 VIP EXP)</small></h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Hero ID (5-star) <span class="text-red">*</span></label>
                                <div class="input-group">
                                    <input type="number" id="ultimate-hero-id-input" class="form-control" min="1" placeholder="Enter Hero ID...">
                                    <span class="input-group-btn">
                                        <button id="btn-lookup-ultimate" class="btn btn-default" type="button">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9" id="ultimate-preview" style="display:none;">
                            <div class="row">
                                <div class="col-md-2 text-center">
                                    <img id="ultimate-avatar" src="" style="width:80px; height:80px; border-radius:8px; border:2px solid #f39c12; display:none;">
                                </div>
                                <div class="col-md-7">
                                    <table class="table table-bordered table-condensed" style="margin-bottom:0;">
                                        <tr>
                                            <th style="width:100px">Hero ID</th>
                                            <td id="ultimate-hero-id-display"></td>
                                        </tr>
                                        <tr>
                                            <th>Status</th>
                                            <td id="ultimate-owned-status"></td>
                                        </tr>
                                        <tr>
                                            <th>Soul Stone</th>
                                            <td id="ultimate-soulstone"></td>
                                        </tr>
                                        <tr>
                                            <th>Price</th>
                                            <td><strong>$99.99</strong></td>
                                        </tr>
                                        <tr>
                                            <th>VIP EXP</th>
                                            <td><span class="text-orange"><strong>+3,000</strong></span></td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-3">
                                    <button id="btn-buy-ultimate" class="btn btn-lg btn-block btn-warning" style="margin-top:15px;" disabled>
                                        <i class="fa fa-star"></i> Buy
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12" id="ultimate-error" style="display:none;">
                            <div class="alert alert-warning" style="margin-top:10px;">
                                <i class="fa fa-warning"></i> <span id="ultimate-error-msg"></span>
                            </div>
                        </div>
                    </div>
                    <div id="ultimate-result" style="display:none; margin-top:10px;"></div>
                </div>
            </div>

            @foreach($parsedPackages as $package)
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title"><i class="fa fa-gift"></i> {{ $package->name }} Package <span class="label label-info">{{ $package->type ?? '' }}</span></h3>
                    </div>
                    <div class="box-body">
                        @if($package->reward && is_array($package->reward))
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover table-responsive">
                                    <thead>
                                        <tr>
                                            <th>Reward</th>
                                            <th>Price</th>
                                            <th>VIP EXP</th>
                                            <th>Gems</th>
                                            <th>Items</th>
                                            <th>Bought / Limit</th>
                                            <th style="width:120px">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($package->reward as $ri => $reward)
                                            @if(isset($reward->price) && floatval($reward->price) > 0)
                                            <tr data-pkg-key="{{ $package->_id }}_{{ $reward->reward_id ?? '' }}">
                                                <td><strong>{{ $reward->name ?? 'Reward ' . ($ri+1) }}</strong></td>
                                                <td><strong>${{ $reward->price ?? 0 }}</strong></td>
                                                <td>+{{ $reward->vip_exp ?? 0 }}</td>
                                                <td>
                                                    @if(isset($reward->gem))
                                                        @foreach((array)$reward->gem as $gemName => $gemVal)
                                                            @if($gemVal > 0)
                                                                <small>{{ $gemName }}: {{ number_format($gemVal) }}</small><br>
                                                            @endif
                                                        @endforeach
                                                    @endif
                                                </td>
                                                <td>
                                                    @if(isset($reward->items))
                                                        @foreach((array)$reward->items as $itemId => $itemQty)
                                                            <small>{{ $itemId }}x{{ $itemQty }}</small>
                                                            @if(!$loop->last), @endif
                                                        @endforeach
                                                    @endif
                                                </td>
                                                <td class="pkg-bought-limit">
                                                    <span class="pkg-bought">-</span> / {{ $reward->limit ?? '∞' }}
                                                </td>
                                                <td class="pkg-action">
                                                    @if(isset($reward->reward_id))
                                                        <button class="btn btn-primary btn-sm btn-apply-package"
                                                                data-package-id="{{ $package->_id }}"
                                                                data-reward-id="{{ $reward->reward_id }}">
                                                            <i class="fa fa-shopping-cart"></i> Buy
                                                        </button>
                                                    @endif
                                                </td>
                                            </tr>
                                            @endif
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <p class="text-muted">No rewards</p>
                        @endif
                    </div>
                </div>
            @endforeach
            <div id="package-result" style="display:none; margin-top:10px;"></div>
        </div>
    </div>
@stop

@section('js')
    <script type="text/javascript">
        var currentMemberId = null;
        var currentMemberName = '';
        var assetBase = '{{ asset("") }}';
        var heroAvatarBase = '{{ url("hero-avatar") }}/';

        function confirmPurchase(purchaseDesc) {
            return confirm('Account Id: #' + currentMemberId + '\nName: ' + currentMemberName + '\nPurchase ' + purchaseDesc);
        }

        // --- URL param persistence ---
        function getUrlParam(key) {
            var params = new URLSearchParams(window.location.search);
            return params.get(key);
        }
        function setUrlParam(key, value) {
            var url = new URL(window.location.href);
            url.searchParams.set(key, value);
            window.history.replaceState({}, '', url.toString());
        }

        function formatNumber(num) {
            if (!num) return '0';
            return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }

        function formatCardStatus(card) {
            if (!card || !card.active) {
                return '<span class="label label-default"><i class="fa fa-times"></i> Inactive</span>';
            }
            var expDate = new Date(card.expires_at * 1000);
            var now = new Date();
            var diffDays = Math.ceil((expDate - now) / (1000 * 60 * 60 * 24));
            var dateStr = expDate.toLocaleDateString('vi-VN');
            return '<span class="label label-success"><i class="fa fa-check"></i> Active</span>' +
                   '<br><small class="text-muted">' + diffDays + 'd - ' + dateStr + '</small>';
        }

        function updateMemberInfo(member) {
            $('#info-member-id').text(member.member_id);
            $('#info-member-name').text(member.member_name);
            $('#info-member-server').text(member.member_server);
            $('#info-member-level').text(member.member_level);
            $('#info-member-exp').text(formatNumber(member.member_exp));
            $('#info-member-diamond').text(formatNumber(member.member_diamond));
            $('#info-member-gold').text(formatNumber(member.member_gold));
            $('#info-member-stamina').text(formatNumber(member.member_stamina));
            $('#info-diamond-total-buy').text(formatNumber(member.diamond_total_buy));
            $('#info-diamond-total-use').text(formatNumber(member.diamond_total_use));
            $('#info-vip-level').text(member.member_vip_level || 0);
            $('#info-vip-exp').text(formatNumber(member.vip_exp));

            updateStaminaTable(member.member_level || 0);

            // Update quick-nav buttons
            var baseUrl = '{{ url("/") }}';
            $('#btn-diamond-log').attr('href', baseUrl + '/members/' + member.member_id + '/log-diamond').show();
            $('#btn-hero-visual').attr('href', baseUrl + '/members/' + member.member_id + '/hero-visual').show();
            $('#btn-member-info').attr('href', baseUrl + '/servers/' + member.member_server + '/members/' + member.member_id).show();

            if (member.card_status) {
                // Update both Member Info and Buy Cards table
                $('#card-status-weekly').html(formatCardStatus(member.card_status.weekly_card));
                $('#card-status-monthly').html(formatCardStatus(member.card_status.month_card));
                $('#card-status-season').html(formatCardStatus(member.card_status.season_card));
                $('#card-status-annual').html(formatCardStatus(member.card_status.annual_card));
                $('#card-status-ticket').html(formatCardStatus(member.card_status.month_ticket));
            }
        }

        function showAlert(selector, type, message) {
            $(selector).html('<div class="alert alert-' + type + ' alert-dismissible">' +
                '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
                message + '</div>').show();
        }

        function doSearch(memberId) {
            if (!memberId) return;

            $('#member-id-input').val(memberId);
            var btn = $('#btn-search');
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Searching...');
            $('#search-error').hide();
            $('#member-info-section').hide();

            $.ajax({
                url: '{{ route("recharge.search") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: memberId },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        currentMemberId = response.member.member_id;
                        currentMemberName = response.member.member_name;
                        setUrlParam('member_id', currentMemberId);
                        updateMemberInfo(response.member);
                        loadDiamondCounts();
                        loadKickStartStatus();
                        loadPackageStatus();
                        load3HeroesInfo();
                        loadPromotionH5();
                        loadGrowthFundStatus();
                        $('#member-info-section').fadeIn();
                        $('#diamond-result, #card-result, #package-result').hide();
                    } else {
                        $('#search-error').text(response.message).show();
                    }
                },
                error: function () { $('#search-error').text('Error connecting to server').show(); },
                complete: function () { btn.prop('disabled', false).html('<i class="fa fa-search"></i> Search'); }
            });
        }

        function apiCall(url, data, resultSelector, btn, originalHtml) {
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Processing...');
            data._token = '{{ csrf_token() }}';
            data.member_id = currentMemberId;

            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        showAlert(resultSelector, 'success', '<i class="fa fa-check"></i> ' + response.message);
                        updateMemberInfo(response.member);
                        loadDiamondCounts();
                    } else {
                        showAlert(resultSelector, 'danger', '<i class="fa fa-warning"></i> ' + response.message);
                    }
                },
                error: function (xhr) {
                    showAlert(resultSelector, 'danger', 'Error connecting to server');
                },
                complete: function () {
                    btn.prop('disabled', false).html(originalHtml);
                }
            });
        }

        // --- Init: auto-search if member_id in URL ---
        $(document).ready(function () {
            var savedId = getUrlParam('member_id');
            if (savedId) {
                doSearch(savedId);
            }
        });

        // Search Member
        $('#btn-search').on('click', function () {
            var memberId = $('#member-id-input').val().trim();
            if (!memberId) { $('#search-error').text('Please enter Member ID').show(); return; }
            doSearch(memberId);
        });

        $('#member-id-input').on('keypress', function (e) { if (e.which === 13) $('#btn-search').click(); });

        // Diamond package config
        var diamondPackages = {
            '0.99': 90, '4.99': 450, '9.99': 900,
            '19.99': 1800, '49.99': 4500, '99.99': 9000
        };
        var currentEventBonus = null; // will be set from API

        function getMultiplier(count) {
            if (count == 0) return 2;
            if (count == 1) return 1.5;
            return 1;
        }

        function loadDiamondCounts() {
            if (!currentMemberId) return;
            $.ajax({
                url: '{{ route("recharge.diamond_counts") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId },
                dataType: 'json',
                success: function (response) {
                    console.log('diamond counts response:', response);
                    if (response.success && response.counts) {
                        currentEventBonus = response.event ? response.event.bonus_map : null;
                        updateDiamondTable(response.counts);
                    }
                },
                error: function (xhr) {
                    console.error('diamond counts error:', xhr.status, xhr.responseText ? xhr.responseText.substring(0, 200) : '');
                }
            });
        }

        function getEventBonus(baseDiamond) {
            if (!currentEventBonus) return 1;
            return currentEventBonus[String(baseDiamond)] || 1;
        }

        function updateDiamondTable(counts) {
            $.each(diamondPackages, function (price, baseDiamond) {
                var count = counts[price] || 0;
                var mult = getMultiplier(count);
                var eventMult = getEventBonus(baseDiamond);
                // Event active: use event mult only. No event: use first-buy mult
                var actual = eventMult > 1 ? Math.floor(baseDiamond * eventMult) : Math.floor(baseDiamond * mult);
                var multLabel = 'x' + mult;
                if (mult > 1) multLabel = '<span class="text-green">' + multLabel + '</span>';

                var eventLabel = 'x' + eventMult;
                if (eventMult > 1) eventLabel = '<span class="text-red"><i class="fa fa-star"></i> x' + eventMult + '</span>';
                else eventLabel = '<span class="text-muted">x1</span>';

                var row = $('tr[data-price="' + price + '"]');
                row.find('.dp-count').text(count);
                row.find('.dp-multiply').html(multLabel);
                row.find('.dp-event').html(eventLabel);
                row.find('.dp-actual').text(formatNumber(actual));
            });
        }

        // Diamond Recharge
        $('.btn-buy-diamond').on('click', function () {
            if (!currentMemberId) return;
            var baseDiamond = parseInt($(this).data('diamond'));
            var money = parseFloat($(this).data('money'));
            var count = parseInt($(this).closest('tr').find('.dp-count').text()) || 0;
            var mult = getMultiplier(count);
            var eventMult = getEventBonus(baseDiamond);
            var actual = eventMult > 1 ? Math.floor(baseDiamond * eventMult) : Math.floor(baseDiamond * mult);

            var desc = formatNumber(actual) + ' diamonds ($' + money + ', base ' + formatNumber(baseDiamond);
            if (eventMult > 1) desc += ' x' + eventMult + ' event';
            else desc += ' x' + mult;
            desc += ')';

            if (!confirmPurchase(desc)) return;

            var btn = $(this);
            apiCall('{{ route("recharge.diamond") }}', {
                diamond_amount: baseDiamond, money: money
            }, '#diamond-result', btn, btn.html());
        });

        // Buy Card (weekly/season/annual)
        $('.btn-buy-card').on('click', function () {
            if (!currentMemberId) return;
            var type = $(this).data('type');
            var money = parseFloat($(this).data('money'));
            var diamond = parseInt($(this).data('diamond'));
            var names = {weekly: 'Weekly Card ($0.99, +100 diamonds)', season: 'Season Card ($8.99, +900 diamonds)', annual: 'Annual Card ($29.99, +3000 diamonds)'};
            if (!confirmPurchase(names[type])) return;

            apiCall('{{ route("recharge.buy_card") }}', {
                type_card: type, diamond: diamond, money: money
            }, '#card-result', $(this), $(this).html());
        });

        // Buy Month Card / Heroic Ticket
        $('.btn-buy-month').on('click', function () {
            if (!currentMemberId) return;
            var type = $(this).data('type');
            var money = parseFloat($(this).data('money'));
            var diamond = parseInt($(this).data('diamond'));
            var names = {card: 'Monthly Card ($2.99, +450 diamonds)', ticket: 'Heroic Summon Ticket ($9.99, +1000 VIP EXP)'};
            if (!confirmPurchase(names[type])) return;

            var data = { type_card: type, money: money, diamond: diamond };
            apiCall('{{ route("recharge.buy_month_card") }}', data, '#card-result', $(this), $(this).html());
        });

        // --- Promotion Stamina/Gold ---
        function updateStaminaTable(memberLevel) {
            if (memberLevel < 85) {
                $('#stamina-low').show();
                $('#stamina-high').hide();
                $('#stamina-level-note').text('(Level < 85)');
            } else {
                $('#stamina-low').hide();
                $('#stamina-high').show();
                $('#stamina-level-note').text('(Level >= 85)');
            }
        }

        $('.btn-buy-promo').on('click', function () {
            if (!currentMemberId) return;
            var type = $(this).data('type');
            var pkg = $(this).data('package');
            var typeName = type == 'stamina' ? 'Stamina' : 'Gold';
            var resultSel = type == 'stamina' ? '#stamina-result' : '#gold-result';
            if (!confirmPurchase('Promotion ' + typeName + ' Pack ' + pkg)) return;

            apiCall('{{ route("recharge.purchase_promotion") }}', {
                type: type, package: pkg
            }, resultSel, $(this), $(this).html());
        });

        // --- Growth Fund ---
        function loadGrowthFundStatus() {
            if (!currentMemberId) return;
            $.ajax({
                url: '{{ route("recharge.growth_fund_status") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        $('tr[data-gf-id]').each(function () {
                            var id = $(this).data('gf-id');
                            if (response.purchased[id]) {
                                $(this).find('.gf-status').html('<span class="label label-success"><i class="fa fa-check"></i> Purchased</span>');
                                $(this).find('.gf-action').html('<span class="text-muted">-</span>');
                            } else {
                                $(this).find('.gf-status').html('');
                                $(this).find('.gf-action').html('<button class="btn btn-success btn-sm btn-buy-growth" data-fund="' + id + '"><i class="fa fa-shopping-cart"></i> Buy</button>');
                            }
                        });
                    }
                }
            });
        }

        $(document).on('click', '.btn-buy-growth', function () {
            if (!currentMemberId) return;
            var fundId = parseInt($(this).data('fund'));
            if (!confirmPurchase('Growth Fund ' + fundId + ' ($19.99, +1,000 VIP exp)')) return;

            var btn = $(this);
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');

            $.ajax({
                url: '{{ route("recharge.purchase_growth_fund") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId, fund_id: fundId },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        showAlert('#growth-result', 'success', '<i class="fa fa-check"></i> ' + response.message);
                        updateMemberInfo(response.member);
                        loadGrowthFundStatus();
                        loadDiamondCounts();
                    } else {
                        showAlert('#growth-result', 'danger', '<i class="fa fa-warning"></i> ' + response.message);
                        btn.prop('disabled', false).html('<i class="fa fa-shopping-cart"></i> Buy');
                    }
                },
                error: function () {
                    showAlert('#growth-result', 'danger', 'Error connecting to server');
                    btn.prop('disabled', false).html('<i class="fa fa-shopping-cart"></i> Buy');
                }
            });
        });

        // --- Promotion Hero 5 Stars ---
        function loadPromotionH5() {
            if (!currentMemberId) return;
            $('#promoh5-loading').show();
            $('#promoh5-content').hide();

            $.ajax({
                url: '{{ route("recharge.promotion_h5_info") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        var html = '';
                        response.heroes.forEach(function (hero) {
                            var avatarSrc = hero.hero_id ? heroAvatarBase + hero.hero_id : '';
                            html += '<div class="col-xs-4 col-sm-2 text-center" style="margin-bottom:10px;">';
                            html += '<div style="border:2px solid #8e44ad; border-radius:10px; padding:8px;">';
                            if (avatarSrc) html += '<img src="' + avatarSrc + '" style="width:60px; height:60px; border-radius:6px;" onerror="this.style.display=\'none\'">';
                            html += '<br><small><strong>#' + (hero.hero_id || '?') + '</strong></small>';
                            html += '<br><small class="text-muted">x' + hero.quantity + ' stones</small>';
                            html += '</div></div>';
                        });
                        $('#promoh5-cards').html(html);
                        $('#btn-buy-promoh5').prop('disabled', false);
                        $('#promoh5-loading').hide();
                        $('#promoh5-content').show();
                    }
                },
                error: function () {
                    $('#promoh5-loading').html('<span class="text-red">Error loading</span>');
                }
            });
        }

        $('#btn-buy-promoh5').on('click', function () {
            if (!currentMemberId) return;
            if (!confirmPurchase('Promotion Hero 5-Star ($30, +10M gold)')) return;

            var btn = $(this);
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');

            $.ajax({
                url: '{{ route("recharge.purchase_promotion_h5") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        showAlert('#promoh5-result', 'success', '<i class="fa fa-check"></i> ' + response.message);
                        updateMemberInfo(response.member);
                        loadDiamondCounts();
                    } else {
                        showAlert('#promoh5-result', 'danger', '<i class="fa fa-warning"></i> ' + response.message);
                    }
                },
                error: function () { showAlert('#promoh5-result', 'danger', 'Error connecting to server'); },
                complete: function () { btn.prop('disabled', false).html('<i class="fa fa-shopping-cart"></i> Buy ($30)'); }
            });
        });

        // --- Purchase 3 Heroes ---
        function load3HeroesInfo() {
            if (!currentMemberId) return;
            $('#heroes3-loading').show();
            $('#heroes3-content').hide();

            $.ajax({
                url: '{{ route("recharge.3heroes_info") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        var html = '';
                        response.heroes.forEach(function (hero) {
                            var ownedLabel = hero.owned
                                ? '<span class="label label-warning"><i class="fa fa-check"></i> Owned</span><br><small class="text-muted">→ 30 soul stones</small>'
                                : '<span class="label label-success">New hero</span><br><small>→ Add 3-star</small>';

                            html += '<div class="col-md-4 col-xs-4 text-center" style="margin-bottom:15px;">';
                            html += '<div style="border:2px solid #ddd; border-radius:10px; padding:10px;">';
                            html += '<img src="' + heroAvatarBase + hero.hero_id + '" style="max-width:80px; width:100%; height:auto; border-radius:8px;" onerror="this.style.display=\'none\'">';
                            html += '<h4 style="font-size:14px;">Hero #' + hero.hero_id + '</h4>';
                            html += ownedLabel;
                            html += '</div></div>';
                        });
                        $('#heroes3-cards').html(html);
                        $('#btn-buy-3heroes').prop('disabled', false);
                        $('#heroes3-loading').hide();
                        $('#heroes3-content').show();
                    }
                },
                error: function () {
                    $('#heroes3-loading').html('<span class="text-red">Error loading heroes</span>');
                }
            });
        }

        $('#btn-buy-3heroes').on('click', function () {
            if (!currentMemberId) return;
            if (!confirmPurchase('3 Heroes (3-Star) for $20 (+600 VIP exp)')) return;

            var btn = $(this);
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Processing...');

            $.ajax({
                url: '{{ route("recharge.purchase_3heroes") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        showAlert('#heroes3-result', 'success', '<i class="fa fa-check"></i> ' + response.message);
                        updateMemberInfo(response.member);
                        loadDiamondCounts();
                        load3HeroesInfo();
                    } else {
                        showAlert('#heroes3-result', 'danger', '<i class="fa fa-warning"></i> ' + response.message);
                    }
                },
                error: function () { showAlert('#heroes3-result', 'danger', 'Error connecting to server'); },
                complete: function () { btn.prop('disabled', false).html('<i class="fa fa-shopping-cart"></i> Buy 3 Heroes ($20, +600 VIP EXP)'); }
            });
        });

        // --- Purchase Skin ---
        $('#btn-lookup-skin').on('click', function () {
            var heroId = $('#skin-hero-id-input').val().trim();
            if (!heroId || !currentMemberId) return;

            var btn = $(this);
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');
            $('#skin-preview, #skin-no-hero').hide();

            $.ajax({
                url: '{{ route("recharge.hero_skin_info") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId, hero_id: heroId },
                dataType: 'json',
                success: function (response) {
                    if (response.success && response.owned) {
                        $('#skin-hero-id-display').text(response.hero_id);
                        $('#skin-hero-star').text(response.hero_star);
                        var avatarUrl = heroAvatarBase + response.hero_id;
                        $('#skin-avatar').attr('src', avatarUrl).show().on('error', function() { $(this).hide(); });

                        var html = '<table class="table table-bordered table-condensed" style="margin-bottom:0;">';
                        html += '<tr><th>Skin</th><th>Status</th><th>Action</th></tr>';
                        response.skins.forEach(function (skin) {
                            html += '<tr>';
                            html += '<td><strong>Skin ' + skin.id + '</strong>' + (skin.id == 0 ? ' <small class="text-muted">(Default)</small>' : '') + '</td>';
                            if (skin.owned) {
                                html += '<td><span class="label label-success"><i class="fa fa-check"></i> Owned</span>';
                                if (skin.equipped) html += ' <span class="label label-primary">Equipped</span>';
                                html += '</td>';
                                html += '<td><span class="text-muted">-</span></td>';
                            } else {
                                html += '<td><span class="label label-default"><i class="fa fa-lock"></i> Locked</span></td>';
                                html += '<td><button class="btn btn-warning btn-sm btn-buy-skin" data-hero-id="' + response.hero_id + '" data-skin-id="' + skin.id + '"><i class="fa fa-unlock"></i> Unlock</button></td>';
                            }
                            html += '</tr>';
                        });
                        html += '</table>';
                        $('#skin-list').html(html);
                        $('#skin-preview').show();
                    } else {
                        $('#skin-no-hero-msg').text(response.message || 'Hero not found');
                        $('#skin-no-hero').show();
                    }
                },
                error: function () { showAlert('#skin-result', 'danger', 'Error connecting to server'); },
                complete: function () { btn.prop('disabled', false).html('<i class="fa fa-search"></i>'); }
            });
        });

        $('#skin-hero-id-input').on('keypress', function (e) { if (e.which === 13) $('#btn-lookup-skin').click(); });

        $(document).on('click', '.btn-buy-skin', function () {
            if (!currentMemberId) return;
            var heroId = $(this).data('hero-id');
            var skinId = $(this).data('skin-id');
            if (!confirmPurchase('Unlock Skin ' + skinId + ' for Hero #' + heroId)) return;

            var btn = $(this);
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');

            $.ajax({
                url: '{{ route("recharge.purchase_skin") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId, hero_id: heroId, skin_id: skinId },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        showAlert('#skin-result', 'success', '<i class="fa fa-check"></i> ' + response.message);
                        updateMemberInfo(response.member);
                        // Refresh skin list
                        $('#btn-lookup-skin').click();
                    } else {
                        showAlert('#skin-result', 'danger', '<i class="fa fa-warning"></i> ' + response.message);
                        btn.prop('disabled', false).html('<i class="fa fa-unlock"></i> Unlock');
                    }
                },
                error: function () {
                    showAlert('#skin-result', 'danger', 'Error connecting to server');
                    btn.prop('disabled', false).html('<i class="fa fa-unlock"></i> Unlock');
                }
            });
        });

        // --- Mystery Hero ---
        var currentMysteryData = null;

        $('#btn-lookup-mystery').on('click', function () {
            var heroId = $('#mystery-hero-id-input').val().trim();
            if (!heroId || !currentMemberId) return;

            var btn = $(this);
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');
            $('#mystery-preview, #mystery-error').hide();
            $('#btn-buy-mystery').prop('disabled', true);
            currentMysteryData = null;

            $.ajax({
                url: '{{ route("recharge.mystery_hero_info") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId, hero_id: heroId },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        currentMysteryData = response;
                        $('#mystery-hero-id-display').html(response.hero.hero_id);
                        var avatarUrl = heroAvatarBase + response.hero.hero_id;
                        $('#mystery-avatar').attr('src', avatarUrl).show().on('error', function() { $(this).hide(); });

                        var ownedLabel = response.owned
                            ? '<span class="label label-warning"><i class="fa fa-check"></i> Owned</span> '
                            : '<span class="label label-success">Not owned</span> ';
                        $('#mystery-owned-status').html(ownedLabel + 'Soul stone #' + response.hero.soul_stone_id + ' x330');

                        var itemsHtml = '';
                        $.each(response.package.items, function (id, qty) {
                            itemsHtml += id + 'x' + qty + ' ';
                        });
                        $('#mystery-items').html(itemsHtml);

                        // Show hero list
                        $('#mystery-heroes-display').text(response.package.hero_list.join(', '));

                        $('#btn-buy-mystery').prop('disabled', false);
                        $('#mystery-preview').show();
                    } else {
                        $('#mystery-error-msg').text(response.message);
                        $('#mystery-error').show();
                    }
                },
                error: function () { showAlert('#mystery-result', 'danger', 'Error connecting to server'); },
                complete: function () { btn.prop('disabled', false).html('<i class="fa fa-search"></i>'); }
            });
        });

        $('#mystery-hero-id-input').on('keypress', function (e) { if (e.which === 13) $('#btn-lookup-mystery').click(); });

        $('#btn-buy-mystery').on('click', function () {
            if (!currentMemberId || !currentMysteryData) return;
            var heroId = currentMysteryData.hero.hero_id;
            var desc = 'Mystery Hero #' + heroId + ' ($100, +3000 VIP exp)\nSoul stone #' + currentMysteryData.hero.soul_stone_id + ' x330 + bonus items';
            if (!confirmPurchase(desc)) return;

            var btn = $(this);
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Processing...');

            $.ajax({
                url: '{{ route("recharge.purchase_mystery_hero") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId, hero_id: heroId },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        showAlert('#mystery-result', 'success', '<i class="fa fa-check"></i> ' + response.message);
                        updateMemberInfo(response.member);
                        loadDiamondCounts();
                        // Refresh lookup
                        $('#btn-lookup-mystery').click();
                    } else {
                        showAlert('#mystery-result', 'danger', '<i class="fa fa-warning"></i> ' + response.message);
                    }
                },
                error: function () { showAlert('#mystery-result', 'danger', 'Error connecting to server'); },
                complete: function () { btn.prop('disabled', false).html('<i class="fa fa-shopping-cart"></i> Buy ($100)'); }
            });
        });

        // --- Ultimate Hero ---
        var currentUltimateData = null;

        $('#btn-lookup-ultimate').on('click', function () {
            var heroId = $('#ultimate-hero-id-input').val().trim();
            if (!heroId || !currentMemberId) return;

            var btn = $(this);
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');
            $('#ultimate-preview, #ultimate-error').hide();
            $('#btn-buy-ultimate').prop('disabled', true);
            currentUltimateData = null;

            $.ajax({
                url: '{{ route("recharge.ultimate_hero_info") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId, hero_id: heroId },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        currentUltimateData = response;
                        var stars = '';
                        for (var i = 0; i < response.current_star; i++) stars += '<i class="fa fa-star text-yellow"></i>';
                        $('#ultimate-hero-id-display').html(response.hero.hero_id + ' ' + stars);
                        var avatarUrl = heroAvatarBase + response.hero.hero_id;
                        $('#ultimate-avatar').attr('src', avatarUrl).show().on('error', function() { $(this).hide(); });

                        var ownedLabel = response.owned
                            ? '<span class="label label-warning"><i class="fa fa-check"></i> Owned</span>'
                            : '<span class="label label-success">Not owned</span>';
                        $('#ultimate-owned-status').html(ownedLabel);
                        $('#ultimate-soulstone').text('#' + response.hero.soul_stone_id + ' x750');
                        $('#btn-buy-ultimate').prop('disabled', false);
                        $('#ultimate-preview').show();
                    } else {
                        $('#ultimate-error-msg').text(response.message);
                        $('#ultimate-error').show();
                    }
                },
                error: function () { showAlert('#ultimate-result', 'danger', 'Error connecting to server'); },
                complete: function () { btn.prop('disabled', false).html('<i class="fa fa-search"></i>'); }
            });
        });

        $('#ultimate-hero-id-input').on('keypress', function (e) { if (e.which === 13) $('#btn-lookup-ultimate').click(); });

        $('#btn-buy-ultimate').on('click', function () {
            if (!currentMemberId || !currentUltimateData) return;
            var heroId = currentUltimateData.hero.hero_id;
            if (!confirmPurchase('Ultimate Hero #' + heroId + '\nSoul stone #' + currentUltimateData.hero.soul_stone_id + ' x750 | +3,000 VIP exp')) return;

            var btn = $(this);
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');

            $.ajax({
                url: '{{ route("recharge.purchase_ultimate_hero") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId, hero_id: heroId },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        showAlert('#ultimate-result', 'success', '<i class="fa fa-check"></i> ' + response.message);
                        updateMemberInfo(response.member);
                        loadDiamondCounts();
                    } else {
                        showAlert('#ultimate-result', 'danger', '<i class="fa fa-warning"></i> ' + response.message);
                    }
                },
                error: function () { showAlert('#ultimate-result', 'danger', 'Error connecting to server'); },
                complete: function () { btn.prop('disabled', false).html('<i class="fa fa-star"></i> Buy'); }
            });
        });

        // --- Package Status ---
        function loadPackageStatus() {
            if (!currentMemberId) return;
            $.ajax({
                url: '{{ route("recharge.package_status") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId },
                dataType: 'json',
                success: function (response) {
                    if (response.success && response.quantities) {
                        $('tr[data-pkg-key]').each(function () {
                            var key = $(this).data('pkg-key');
                            var qty = response.quantities[key] || 0;
                            $(this).find('.pkg-bought').text(qty);
                        });
                    }
                }
            });
        }

        // Apply Purchase Package
        $(document).on('click', '.btn-apply-package', function () {
            if (!currentMemberId) return;
            var packageId = $(this).data('package-id');
            var rewardId = $(this).data('reward-id');
            var row = $(this).closest('tr');
            var rewardName = row.find('td:first').text().trim();
            if (!confirmPurchase('"' + rewardName + '"')) return;

            var btn = $(this);
            var origHtml = btn.html();
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');

            $.ajax({
                url: '{{ route("recharge.package") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId, package_id: packageId, reward_id: rewardId },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        showAlert('#package-result', 'success', '<i class="fa fa-check"></i> ' + response.message);
                        updateMemberInfo(response.member);
                        loadPackageStatus();
                    } else {
                        showAlert('#package-result', 'danger', '<i class="fa fa-warning"></i> ' + response.message);
                    }
                },
                error: function () {
                    showAlert('#package-result', 'danger', 'Error connecting to server');
                },
                complete: function () {
                    btn.prop('disabled', false).html(origHtml);
                }
            });
        });

        // Buy + Promote Card
        $('.btn-buy-promote').on('click', function () {
            if (!currentMemberId) return;
            var type = $(this).data('type');
            var money = parseFloat($(this).data('money'));
            var diamond = parseInt($(this).data('diamond'));
            var names = {weekly: 'Weekly Card', monthly: 'Monthly Card', season: 'Season Card', annual: 'Annual Card'};
            if (!confirmPurchase(names[type] + ' + Promote items ($' + money + ', +' + diamond + ' diamonds)')) return;

            apiCall('{{ route("recharge.buy_promote_card") }}', {
                type_card: type, diamond: diamond, money: money
            }, '#card-result', $(this), $(this).html());
        });

        // --- Kick Start ---
        var kickStartNames = {
            622: 'Kick Start 1 ($4.99)',
            623: 'Kick Start 2 ($9.99)',
            624: 'Kick Start 3 ($19.99)',
            625: 'Kick Start 4 ($49.99)',
            626: 'Kick Start 5 ($99.99)'
        };

        function loadKickStartStatus() {
            if (!currentMemberId) return;
            $.ajax({
                url: '{{ route("recharge.kick_start_status") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        // Reset all
                        $('tr[data-ks-id]').each(function () {
                            $(this).find('.ks-status').html('');
                            $(this).find('.ks-action .btn-kick-start').show();
                        });
                        // Mark purchased
                        (response.purchased || []).forEach(function (id) {
                            var row = $('tr[data-ks-id="' + id + '"]');
                            row.find('.ks-status').html('<span class="label label-success"><i class="fa fa-check"></i> Purchased</span>');
                            row.find('.ks-action').html('<span class="text-muted">-</span>');
                        });
                    }
                }
            });
        }

        $('.btn-kick-start').on('click', function () {
            if (!currentMemberId) return;
            var packageId = parseInt($(this).data('package'));
            if (!confirmPurchase(kickStartNames[packageId])) return;

            var btn = $(this);
            var origHtml = btn.html();
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');

            $.ajax({
                url: '{{ route("recharge.kick_start") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', member_id: currentMemberId, package_id: packageId },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        showAlert('#kickstart-result', 'success', '<i class="fa fa-check"></i> ' + response.message);
                        updateMemberInfo(response.member);
                        loadKickStartStatus();
                        loadDiamondCounts();
                    } else {
                        showAlert('#kickstart-result', 'danger', '<i class="fa fa-warning"></i> ' + response.message);
                        btn.prop('disabled', false).html(origHtml);
                    }
                },
                error: function () {
                    showAlert('#kickstart-result', 'danger', 'Error connecting to server');
                    btn.prop('disabled', false).html(origHtml);
                }
            });
        });

        // --- Purchase Hero ---
        var currentHeroData = null;

        $('#btn-lookup-hero').on('click', function () {
            var heroId = $('#hero-id-input').val().trim();
            if (!heroId) return;
            var btn = $(this);
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');
            $('#hero-preview, #hero-preview-section').hide();
            currentHeroData = null;

            $.ajax({
                url: '{{ route("recharge.hero_info") }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', hero_id: heroId, member_id: currentMemberId },
                dataType: 'json',
                success: function (response) {
                    if (response.success && response.hero) {
                        currentHeroData = response.hero;
                        $('#hp-hero-id').html(response.hero.hero_id +
                            (response.hero.owned
                                ? ' <span class="label label-warning"><i class="fa fa-check"></i> Owned - will convert to soul stones</span>'
                                : ' <span class="label label-success">New hero</span>'));
                        $('#hp-skill-id').text(response.hero.skill_hero_id);
                        $('#hp-star').text(response.hero.hero_star + ' star');
                        $('#hp-items').text(JSON.stringify(response.hero.hero_item));
                        // Show avatar
                        var avatarUrl = heroAvatarBase + response.hero.hero_id;
                        $('#hp-avatar').attr('src', avatarUrl).show().on('error', function() { $(this).hide(); });
                        $('#hero-preview, #hero-preview-section').show();
                    } else {
                        showAlert('#hero-result', 'danger', response.message || 'Hero not found');
                    }
                },
                error: function () { showAlert('#hero-result', 'danger', 'Error connecting to server'); },
                complete: function () { btn.prop('disabled', false).html('<i class="fa fa-search"></i>'); }
            });
        });

        $('#hero-id-input').on('keypress', function (e) { if (e.which === 13) $('#btn-lookup-hero').click(); });

        // Purchase Hero
        $('.btn-purchase-hero').on('click', function () {
            if (!currentMemberId || !currentHeroData) return;
            var star = parseInt($(this).data('star'));
            var heroId = currentHeroData.hero_id;
            var prices = {3: '$9.99', 4: '$29.99', 5: '$79.99'};
            var vipExps = {3: 200, 4: 800, 5: 2400};
            var soulstones = {3: 30, 4: 100, 5: 300};

            var desc = 'Hero #' + heroId + ' as ' + star + '-star (' + prices[star] + ', +' + vipExps[star] + ' VIP exp)';
            if (currentHeroData.owned) {
                desc += '\n\nHero already owned! Will convert to ' + soulstones[star] + ' soul stones instead.';
            }

            if (!confirmPurchase(desc)) return;

            apiCall('{{ route("recharge.purchase_hero") }}', {
                hero_id: heroId, star_pack: star
            }, '#hero-result', $(this), $(this).html());
        });
    </script>
@endsection