{% extends "settings/_layout.html" %}
{% block title %}Settings - Capital{% endblock %}

{% block settings_content %}
<div class="space-y-6" x-data="capitalSettings()">
    <h1 class="text-2xl font-bold text-white">Capital Allocation</h1>

    <!-- ==================== Section 1: Modal Global ==================== -->
    <div class="glass rounded-xl border border-gray-800 p-6">
        <h3 class="text-lg font-semibold text-white mb-1">💰 Modal Global</h3>
        <p class="text-xs text-gray-500 mb-4">Total modal investasi Anda. Akan dibagi antara Kripto, Saham IDX, dan Saham US di bawah.</p>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div>
                <label class="block text-sm text-gray-400 mb-2">Total Modal (IDR)</label>
                <input type="number" step="100000" min="0" x-model.number="globalCapital"
                       class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:ring-1 focus:ring-koin-500 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-2">Alokasi Kripto (%)</label>
                <input type="number" step="1" min="0" max="100" x-model.number="cryptoPct"
                       class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:ring-1 focus:ring-koin-500 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-2">Alokasi Saham IDX (%)</label>
                <input type="number" step="1" min="0" max="100" x-model.number="stockPct"
                       class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:ring-1 focus:ring-emerald-500 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-2">Alokasi Saham US (%)</label>
                <input type="number" step="1" min="0" max="100" x-model.number="usPct"
                       class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:ring-1 focus:ring-purple-500 focus:outline-none">
            </div>
        </div>

        <!-- Validation -->
        <p x-show="cryptoPct + stockPct + usPct !== 100" x-cloak class="text-sm text-red-400 mt-3">
            ⚠ Kripto + Saham IDX + Saham US harus = 100% (sekarang: <span x-text="cryptoPct + stockPct + usPct"></span>%)
        </p>

        <!-- Visual split bar -->
        <div class="mt-4">
            <div class="w-full h-3 bg-gray-800 rounded-full overflow-hidden flex">
                <div class="bg-koin-500 h-full transition-all duration-300" :style="'width:' + cryptoPct + '%'"></div>
                <div class="bg-emerald-500 h-full transition-all duration-300" :style="'width:' + stockPct + '%'"></div>
                <div class="bg-purple-500 h-full transition-all duration-300" :style="'width:' + usPct + '%'"></div>
            </div>
            <div class="flex justify-between text-xs text-gray-500 mt-1">
                <span>🟣 Kripto: Rp <span x-text="formatRp(globalCapital * cryptoPct / 100)"></span> (<span x-text="cryptoPct"></span>%)</span>
                <span>🟢 Saham IDX: Rp <span x-text="formatRp(globalCapital * stockPct / 100)"></span> (<span x-text="stockPct"></span>%)</span>
                <span>🟣 Saham US: Rp <span x-text="formatRp(globalCapital * usPct / 100)"></span> (<span x-text="usPct"></span>%)</span>
            </div>
        </div>

        <!-- Save button -->
        <div class="mt-4 flex items-center gap-4">
            <button @click="saveGlobalSplit()"
                    :disabled="cryptoPct + stockPct + usPct !== 100 || savingGlobalSplit"
                    :class="(cryptoPct + stockPct + usPct !== 100 || savingGlobalSplit) ? 'opacity-50 cursor-not-allowed' : 'hover:bg-koin-700'"
                    class="px-5 py-2 bg-koin-600 text-white rounded-lg text-sm transition flex items-center gap-2">
                <svg x-show="savingGlobalSplit" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                <span x-text="savingGlobalSplit ? 'Menyimpan...' : 'Simpan Pembagian'"></span>
            </button>
        </div>
    </div>

    <!-- ==================== Section 2: Modal Kripto ==================== -->
    <div class="glass rounded-xl border border-koin-900/50 p-6">
        <div class="flex items-center gap-2 mb-1">
            <h3 class="text-lg font-semibold text-white">🟣 Modal Kripto</h3>
            <span class="text-xs px-2 py-0.5 rounded-full bg-koin-900/50 text-koin-400 border border-koin-700/50">
                Rp <span x-text="formatRp(cryptoTotalCapital)"></span>
            </span>
        </div>
        <p class="text-xs text-gray-500 mb-4">Pembagian dana aktif & cadangan untuk trading kripto.</p>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm text-gray-400 mb-2">Dana Aktif (%)</label>
                <input type="number" step="1" min="0" max="100" x-model.number="cryptoActivePct"
                       class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:ring-1 focus:ring-koin-500 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-2">Dana Cadangan (%)</label>
                <input type="number" step="1" min="0" max="100" x-model.number="cryptoReservePct"
                       class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:ring-1 focus:ring-koin-500 focus:outline-none">
            </div>
        </div>

        <p x-show="cryptoActivePct + cryptoReservePct !== 100" x-cloak class="text-sm text-red-400 mt-3">
            ⚠ Aktif + Cadangan harus = 100%
        </p>

        <!-- Visual split bar -->
        <div class="mt-4">
            <div class="w-full h-3 bg-gray-800 rounded-full overflow-hidden flex">
                <div class="bg-koin-500 h-full transition-all duration-300" :style="'width:' + cryptoActivePct + '%'"></div>
                <div class="bg-amber-500 h-full transition-all duration-300" :style="'width:' + cryptoReservePct + '%'"></div>
            </div>
            <div class="flex justify-between text-xs text-gray-500 mt-1">
                <span>🟣 Aktif: Rp <span x-text="formatRp(cryptoTotalCapital * cryptoActivePct / 100)"></span></span>
                <span>🟡 Cadangan: Rp <span x-text="formatRp(cryptoTotalCapital * cryptoReservePct / 100)"></span></span>
            </div>
        </div>

        <div class="mt-4">
            <button @click="saveCryptoCapital()"
                    :disabled="cryptoActivePct + cryptoReservePct !== 100 || savingCrypto"
                    :class="(cryptoActivePct + cryptoReservePct !== 100 || savingCrypto) ? 'opacity-50 cursor-not-allowed' : 'hover:bg-koin-700'"
                    class="px-5 py-2 bg-koin-600 text-white rounded-lg text-sm transition flex items-center gap-2">
                <svg x-show="savingCrypto" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                <span x-text="savingCrypto ? 'Menyimpan...' : 'Simpan Modal Kripto'"></span>
            </button>
        </div>
        <p class="text-xs text-gray-500 mt-3">
            Fixed Fractional: <span x-text="cryptoActivePct"></span>% dana aktif untuk trading,
            <span x-text="cryptoReservePct"></span>% cadangan untuk average down / black swan.
        </p>
    </div>

    <!-- ==================== Section 3: Modal Saham ==================== -->
    <div class="glass rounded-xl border border-emerald-900/50 p-6">
        <div class="flex items-center gap-2 mb-1">
            <h3 class="text-lg font-semibold text-white">🟢 Modal Saham</h3>
            <span class="text-xs px-2 py-0.5 rounded-full bg-emerald-900/50 text-emerald-400 border border-emerald-700/50">
                Rp <span x-text="formatRp(stockTotalCapital)"></span>
            </span>
        </div>
        <p class="text-xs text-gray-500 mb-4">Pembagian dana aktif & cadangan untuk trading saham IDX.</p>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm text-gray-400 mb-2">Dana Aktif (%)</label>
                <input type="number" step="1" min="0" max="100" x-model.number="stockActivePct"
                       class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:ring-1 focus:ring-emerald-500 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-2">Dana Cadangan (%)</label>
                <input type="number" step="1" min="0" max="100" x-model.number="stockReservePct"
                       class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:ring-1 focus:ring-emerald-500 focus:outline-none">
            </div>
        </div>

        <p x-show="stockActivePct + stockReservePct !== 100" x-cloak class="text-sm text-red-400 mt-3">
            ⚠ Aktif + Cadangan harus = 100%
        </p>

        <!-- Visual split bar -->
        <div class="mt-4">
            <div class="w-full h-3 bg-gray-800 rounded-full overflow-hidden flex">
                <div class="bg-emerald-500 h-full transition-all duration-300" :style="'width:' + stockActivePct + '%'"></div>
                <div class="bg-amber-500 h-full transition-all duration-300" :style="'width:' + stockReservePct + '%'"></div>
            </div>
            <div class="flex justify-between text-xs text-gray-500 mt-1">
                <span>🟢 Aktif: Rp <span x-text="formatRp(stockTotalCapital * stockActivePct / 100)"></span></span>
                <span>🟡 Cadangan: Rp <span x-text="formatRp(stockTotalCapital * stockReservePct / 100)"></span></span>
            </div>
        </div>

        <div class="mt-4">
            <button @click="saveStockCapital()"
                    :disabled="stockActivePct + stockReservePct !== 100 || savingStock"
                    :class="(stockActivePct + stockReservePct !== 100 || savingStock) ? 'opacity-50 cursor-not-allowed' : 'hover:bg-emerald-700'"
                    class="px-5 py-2 bg-emerald-600 text-white rounded-lg text-sm transition flex items-center gap-2">
                <svg x-show="savingStock" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                <span x-text="savingStock ? 'Menyimpan...' : 'Simpan Modal Saham'"></span>
            </button>
        </div>
        <p class="text-xs text-gray-500 mt-3">
            Fixed Fractional: <span x-text="stockActivePct"></span>% dana aktif untuk trading,
            <span x-text="stockReservePct"></span>% cadangan. Lot size IDX = 100 lembar.
        </p>
    </div>

    <!-- ==================== Section 3b: Modal Saham US ==================== -->
    <div class="glass rounded-xl border border-purple-900/50 p-6">
        <div class="flex items-center gap-2 mb-1">
            <h3 class="text-lg font-semibold text-white">🟣 Modal Saham US</h3>
            <span class="text-xs px-2 py-0.5 rounded-full bg-purple-900/50 text-purple-400 border border-purple-700/50">
                Rp <span x-text="formatRp(usTotalCapital)"></span>
            </span>
        </div>
        <p class="text-xs text-gray-500 mb-4">Pembagian dana aktif & cadangan untuk trading saham US (NYSE/NASDAQ).</p>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm text-gray-400 mb-2">Dana Aktif (%)</label>
                <input type="number" step="1" min="0" max="100" x-model.number="usActivePct"
                       class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:ring-1 focus:ring-purple-500 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-2">Dana Cadangan (%)</label>
                <input type="number" step="1" min="0" max="100" x-model.number="usReservePct"
                       class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:ring-1 focus:ring-purple-500 focus:outline-none">
            </div>
        </div>

        <p x-show="usActivePct + usReservePct !== 100" x-cloak class="text-sm text-red-400 mt-3">
            ⚠ Aktif + Cadangan harus = 100%
        </p>

        <!-- Visual split bar -->
        <div class="mt-4">
            <div class="w-full h-3 bg-gray-800 rounded-full overflow-hidden flex">
                <div class="bg-purple-500 h-full transition-all duration-300" :style="'width:' + usActivePct + '%'"></div>
                <div class="bg-amber-500 h-full transition-all duration-300" :style="'width:' + usReservePct + '%'"></div>
            </div>
            <div class="flex justify-between text-xs text-gray-500 mt-1">
                <span>🟣 Aktif: Rp <span x-text="formatRp(usTotalCapital * usActivePct / 100)"></span></span>
                <span>🟡 Cadangan: Rp <span x-text="formatRp(usTotalCapital * usReservePct / 100)"></span></span>
            </div>
        </div>

        <div class="mt-4">
            <button @click="saveUsCapital()"
                    :disabled="usActivePct + usReservePct !== 100 || savingUs"
                    :class="(usActivePct + usReservePct !== 100 || savingUs) ? 'opacity-50 cursor-not-allowed' : 'hover:bg-purple-700'"
                    class="px-5 py-2 bg-purple-600 text-white rounded-lg text-sm transition flex items-center gap-2">
                <svg x-show="savingUs" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                <span x-text="savingUs ? 'Menyimpan...' : 'Simpan Modal Saham US'"></span>
            </button>
        </div>
        <p class="text-xs text-gray-500 mt-3">
            Fixed Fractional: <span x-text="usActivePct"></span>% dana aktif untuk trading,
            <span x-text="usReservePct"></span>% cadangan. Lot size US = 1 lembar.
        </p>
    </div>

    <!-- ==================== Section 4: Alokasi Per Koin (Kripto) ==================== -->
    <div class="glass rounded-xl border border-koin-900/50 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-white">📊 Alokasi Per Koin <span class="text-koin-400 text-sm font-normal">(Kripto)</span></h3>
            <button @click="showAddCryptoForm = !showAddCryptoForm"
                    class="px-3 py-1.5 bg-koin-600 hover:bg-koin-700 text-white rounded-lg text-sm transition flex items-center gap-1">
                <span x-text="showAddCryptoForm ? '✕ Tutup' : '+ Tambah Alokasi'"></span>
            </button>
        </div>

        <!-- Add Form (collapsible) -->
        <div x-show="showAddCryptoForm" x-transition class="border border-gray-700 rounded-lg p-4 mb-4 bg-gray-900/50">
            <h4 class="text-sm font-medium text-gray-300 mb-3">Tambah Alokasi Kripto Baru</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- Coin search -->
                <div class="relative">
                    <label class="block text-xs text-gray-500 mb-1">Cari Coin</label>
                    <input type="text" x-model="addCryptoForm.searchQuery"
                           @input.debounce.300ms="searchCoins('crypto')"
                           @focus="if(addCryptoForm.searchQuery.length >= 1) searchCoins('crypto')"
                           placeholder="Ketik nama/simbol coin..."
                           class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:ring-1 focus:ring-koin-500 focus:outline-none">
                    <div x-show="cryptoCoinResults.length > 0" x-cloak
                         @click.outside="cryptoCoinResults = []"
                         class="absolute z-10 w-full mt-1 bg-gray-900 border border-gray-700 rounded-lg shadow-lg max-h-48 overflow-y-auto">
                        <template x-for="coin in cryptoCoinResults" :key="coin.id">
                            <button @click="selectCoin(coin, 'crypto')"
                                    class="w-full px-3 py-2 text-left text-sm hover:bg-gray-800 flex items-center gap-2 transition">
                                <img :src="coin.icon_thumb_url || coin.image_url || ''" class="w-5 h-5 rounded-full" onerror="this.style.display='none'">
                                <span class="text-white font-medium" x-text="coin.symbol.toUpperCase()"></span>
                                <span class="text-gray-500 text-xs truncate" x-text="coin.name"></span>
                            </button>
                        </template>
                    </div>
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Budget (IDR)</label>
                    <input type="number" step="100000" min="0" x-model.number="addCryptoForm.allocatedCapital"
                           class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:ring-1 focus:ring-koin-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Dana Aktif (%)</label>
                    <input type="number" step="1" min="0" max="100" x-model.number="addCryptoForm.activePct"
                           class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:ring-1 focus:ring-koin-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Dana Cadangan (%)</label>
                    <input type="number" step="1" min="0" max="100" x-model.number="addCryptoForm.reservePct"
                           class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:ring-1 focus:ring-koin-500 focus:outline-none">
                </div>
            </div>
            <p x-show="addCryptoForm.activePct + addCryptoForm.reservePct !== 100" x-cloak class="text-xs text-red-400 mt-2">Aktif + Cadangan harus = 100%</p>
            <div class="mt-3 flex items-center gap-3">
                <button @click="saveAllocation('crypto')"
                        :disabled="!addCryptoForm.coinId || addCryptoForm.activePct + addCryptoForm.reservePct !== 100 || savingAlloc"
                        :class="(!addCryptoForm.coinId || addCryptoForm.activePct + addCryptoForm.reservePct !== 100 || savingAlloc) ? 'opacity-50 cursor-not-allowed' : 'hover:bg-koin-700'"
                        class="px-4 py-1.5 bg-koin-600 text-white rounded-lg text-sm transition flex items-center gap-2">
                    <svg x-show="savingAlloc" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    <span x-text="savingAlloc ? 'Menyimpan...' : 'Simpan Alokasi'"></span>
                </button>
                <button @click="showAddCryptoForm = false" class="px-4 py-1.5 bg-gray-700 hover:bg-gray-600 text-gray-300 rounded-lg text-sm transition">Batal</button>
            </div>
        </div>

        <!-- Allocation Table -->
        <div x-show="cryptoAllocations.length > 0" class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-gray-500 text-xs uppercase border-b border-gray-800">
                        <th class="text-left py-2 px-2">{{ item_label }}</th>
                        <th class="text-right py-2 px-2">Budget (IDR)</th>
                        <th class="text-right py-2 px-2">Aktif %</th>
                        <th class="text-right py-2 px-2">Cadangan %</th>
                        <th class="text-right py-2 px-2">Modal Aktif</th>
                        <th class="text-right py-2 px-2">Modal Cadangan</th>
                        <th class="text-center py-2 px-2">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="alloc in cryptoAllocations" :key="alloc.asset_id">
                        <tr class="border-b border-gray-800/50 hover:bg-gray-800/30">
                            <td class="py-2.5 px-2">
                                <div class="flex items-center gap-2">
                                    <img :src="alloc.coin_icon" class="w-5 h-5 rounded-full" onerror="this.style.display='none'">
                                    <span class="text-white font-medium" x-text="alloc.coin_symbol"></span>
                                    <span class="text-gray-500 text-xs hidden md:inline" x-text="alloc.coin_name"></span>
                                </div>
                            </td>
                            <td class="py-2.5 px-2 text-right">
                                <span x-show="!alloc.editing" class="text-white" x-text="'Rp ' + formatRp(alloc.allocated_capital_idr)"></span>
                                <input x-show="alloc.editing" x-cloak type="number" step="100000"
                                       x-model.number="alloc.allocated_capital_idr"
                                       class="w-32 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm text-white text-right focus:ring-1 focus:ring-koin-500 focus:outline-none">
                            </td>
                            <td class="py-2.5 px-2 text-right">
                                <span x-show="!alloc.editing" class="text-koin-400" x-text="alloc.active_capital_pct + '%'"></span>
                                <input x-show="alloc.editing" x-cloak type="number" step="1" min="0" max="100"
                                       x-model.number="alloc.active_capital_pct"
                                       class="w-16 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm text-white text-right focus:ring-1 focus:ring-koin-500 focus:outline-none">
                            </td>
                            <td class="py-2.5 px-2 text-right">
                                <span x-show="!alloc.editing" class="text-amber-400" x-text="alloc.reserve_capital_pct + '%'"></span>
                                <input x-show="alloc.editing" x-cloak type="number" step="1" min="0" max="100"
                                       x-model.number="alloc.reserve_capital_pct"
                                       class="w-16 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm text-white text-right focus:ring-1 focus:ring-koin-500 focus:outline-none">
                            </td>
                            <td class="py-2.5 px-2 text-right text-gray-400 text-xs" x-text="'Rp ' + formatRp(alloc.allocated_capital_idr * alloc.active_capital_pct / 100)"></td>
                            <td class="py-2.5 px-2 text-right text-gray-400 text-xs" x-text="'Rp ' + formatRp(alloc.allocated_capital_idr * alloc.reserve_capital_pct / 100)"></td>
                            <td class="py-2.5 px-2 text-center">
                                <div class="flex items-center justify-center gap-1">
                                    <template x-if="alloc.editing">
                                        <div class="flex items-center gap-1">
                                            <button @click="saveEdit(alloc)" title="Simpan" :disabled="alloc.active_capital_pct + alloc.reserve_capital_pct !== 100" :class="alloc.active_capital_pct + alloc.reserve_capital_pct !== 100 ? 'opacity-50' : ''" class="p-1 text-emerald-400 hover:text-emerald-300 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></button>
                                            <button @click="cancelEdit(alloc)" title="Batal" class="p-1 text-gray-500 hover:text-gray-300 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
                                        </div>
                                    </template>
                                    <template x-if="!alloc.editing">
                                        <div class="flex items-center gap-1">
                                            <button @click="startEdit(alloc)" title="Edit" class="p-1 text-gray-600 hover:text-koin-400 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg></button>
                                            <button @click="deleteAllocation(alloc.asset_id, alloc.coin_symbol, 'crypto')" title="Hapus" class="p-1 text-gray-600 hover:text-red-400 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button>
                                        </div>
                                    </template>
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
        <div x-show="cryptoAllocations.length === 0" class="text-center py-6">
            <p class="text-gray-500 text-sm">Belum ada alokasi per koin kripto.</p>
            <p class="text-gray-600 text-xs mt-1">Semua koin menggunakan modal kripto default (Rp <span x-text="formatRp(cryptoTotalCapital)"></span>).</p>
        </div>
    </div>

    <!-- ==================== Section 5: Alokasi Per Emiten (Saham) ==================== -->
    <div class="glass rounded-xl border border-emerald-900/50 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-white">📈 Alokasi Per Emiten <span class="text-emerald-400 text-sm font-normal">(Saham)</span></h3>
            <button @click="showAddStockForm = !showAddStockForm"
                    class="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm transition flex items-center gap-1">
                <span x-text="showAddStockForm ? '✕ Tutup' : '+ Tambah Alokasi'"></span>
            </button>
        </div>

        <!-- Add Form (collapsible) -->
        <div x-show="showAddStockForm" x-transition class="border border-emerald-800/50 rounded-lg p-4 mb-4 bg-gray-900/50">
            <h4 class="text-sm font-medium text-gray-300 mb-3">Tambah Alokasi Emiten Baru</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="relative">
                    <label class="block text-xs text-gray-500 mb-1">Cari Emiten</label>
                    <input type="text" x-model="addStockForm.searchQuery"
                           @input.debounce.300ms="searchCoins('stock')"
                           @focus="if(addStockForm.searchQuery.length >= 1) searchCoins('stock')"
                           placeholder="Ketik kode/nama emiten..."
                           class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:ring-1 focus:ring-emerald-500 focus:outline-none">
                    <div x-show="stockCoinResults.length > 0" x-cloak
                         @click.outside="stockCoinResults = []"
                         class="absolute z-10 w-full mt-1 bg-gray-900 border border-gray-700 rounded-lg shadow-lg max-h-48 overflow-y-auto">
                        <template x-for="coin in stockCoinResults" :key="coin.id">
                            <button @click="selectCoin(coin, 'stock')"
                                    class="w-full px-3 py-2 text-left text-sm hover:bg-gray-800 flex items-center gap-2 transition">
                                <img :src="coin.icon_thumb_url || coin.image_url || ''" class="w-5 h-5 rounded-full" onerror="this.style.display='none'">
                                <span class="text-white font-medium" x-text="coin.symbol.toUpperCase()"></span>
                                <span class="text-gray-500 text-xs truncate" x-text="coin.name"></span>
                            </button>
                        </template>
                    </div>
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Budget (IDR)</label>
                    <input type="number" step="100000" min="0" x-model.number="addStockForm.allocatedCapital"
                           class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:ring-1 focus:ring-emerald-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Dana Aktif (%)</label>
                    <input type="number" step="1" min="0" max="100" x-model.number="addStockForm.activePct"
                           class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:ring-1 focus:ring-emerald-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Dana Cadangan (%)</label>
                    <input type="number" step="1" min="0" max="100" x-model.number="addStockForm.reservePct"
                           class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:ring-1 focus:ring-emerald-500 focus:outline-none">
                </div>
            </div>
            <p x-show="addStockForm.activePct + addStockForm.reservePct !== 100" x-cloak class="text-xs text-red-400 mt-2">Aktif + Cadangan harus = 100%</p>
            <div class="mt-3 flex items-center gap-3">
                <button @click="saveAllocation('stock')"
                        :disabled="!addStockForm.coinId || addStockForm.activePct + addStockForm.reservePct !== 100 || savingAlloc"
                        :class="(!addStockForm.coinId || addStockForm.activePct + addStockForm.reservePct !== 100 || savingAlloc) ? 'opacity-50 cursor-not-allowed' : 'hover:bg-emerald-700'"
                        class="px-4 py-1.5 bg-emerald-600 text-white rounded-lg text-sm transition flex items-center gap-2">
                    <svg x-show="savingAlloc" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    <span x-text="savingAlloc ? 'Menyimpan...' : 'Simpan Alokasi'"></span>
                </button>
                <button @click="showAddStockForm = false" class="px-4 py-1.5 bg-gray-700 hover:bg-gray-600 text-gray-300 rounded-lg text-sm transition">Batal</button>
            </div>
        </div>

        <!-- Stock Allocation Table -->
        <div x-show="stockAllocations.length > 0" class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-gray-500 text-xs uppercase border-b border-gray-800">
                        <th class="text-left py-2 px-2">Emiten</th>
                        <th class="text-right py-2 px-2">Budget (IDR)</th>
                        <th class="text-right py-2 px-2">Aktif %</th>
                        <th class="text-right py-2 px-2">Cadangan %</th>
                        <th class="text-right py-2 px-2">Modal Aktif</th>
                        <th class="text-right py-2 px-2">Modal Cadangan</th>
                        <th class="text-center py-2 px-2">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="alloc in stockAllocations" :key="alloc.asset_id">
                        <tr class="border-b border-gray-800/50 hover:bg-gray-800/30">
                            <td class="py-2.5 px-2">
                                <div class="flex items-center gap-2">
                                    <img :src="alloc.coin_icon" class="w-5 h-5 rounded-full" onerror="this.style.display='none'">
                                    <span class="text-white font-medium" x-text="alloc.coin_symbol"></span>
                                    <span class="text-gray-500 text-xs hidden md:inline" x-text="alloc.coin_name"></span>
                                </div>
                            </td>
                            <td class="py-2.5 px-2 text-right">
                                <span x-show="!alloc.editing" class="text-white" x-text="'Rp ' + formatRp(alloc.allocated_capital_idr)"></span>
                                <input x-show="alloc.editing" x-cloak type="number" step="100000"
                                       x-model.number="alloc.allocated_capital_idr"
                                       class="w-32 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm text-white text-right focus:ring-1 focus:ring-emerald-500 focus:outline-none">
                            </td>
                            <td class="py-2.5 px-2 text-right">
                                <span x-show="!alloc.editing" class="text-emerald-400" x-text="alloc.active_capital_pct + '%'"></span>
                                <input x-show="alloc.editing" x-cloak type="number" step="1" min="0" max="100"
                                       x-model.number="alloc.active_capital_pct"
                                       class="w-16 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm text-white text-right focus:ring-1 focus:ring-emerald-500 focus:outline-none">
                            </td>
                            <td class="py-2.5 px-2 text-right">
                                <span x-show="!alloc.editing" class="text-amber-400" x-text="alloc.reserve_capital_pct + '%'"></span>
                                <input x-show="alloc.editing" x-cloak type="number" step="1" min="0" max="100"
                                       x-model.number="alloc.reserve_capital_pct"
                                       class="w-16 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm text-white text-right focus:ring-1 focus:ring-emerald-500 focus:outline-none">
                            </td>
                            <td class="py-2.5 px-2 text-right text-gray-400 text-xs" x-text="'Rp ' + formatRp(alloc.allocated_capital_idr * alloc.active_capital_pct / 100)"></td>
                            <td class="py-2.5 px-2 text-right text-gray-400 text-xs" x-text="'Rp ' + formatRp(alloc.allocated_capital_idr * alloc.reserve_capital_pct / 100)"></td>
                            <td class="py-2.5 px-2 text-center">
                                <div class="flex items-center justify-center gap-1">
                                    <template x-if="alloc.editing">
                                        <div class="flex items-center gap-1">
                                            <button @click="saveEdit(alloc)" title="Simpan" :disabled="alloc.active_capital_pct + alloc.reserve_capital_pct !== 100" :class="alloc.active_capital_pct + alloc.reserve_capital_pct !== 100 ? 'opacity-50' : ''" class="p-1 text-emerald-400 hover:text-emerald-300 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></button>
                                            <button @click="cancelEdit(alloc)" title="Batal" class="p-1 text-gray-500 hover:text-gray-300 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
                                        </div>
                                    </template>
                                    <template x-if="!alloc.editing">
                                        <div class="flex items-center gap-1">
                                            <button @click="startEdit(alloc)" title="Edit" class="p-1 text-gray-600 hover:text-emerald-400 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg></button>
                                            <button @click="deleteAllocation(alloc.asset_id, alloc.coin_symbol, 'stock')" title="Hapus" class="p-1 text-gray-600 hover:text-red-400 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button>
                                        </div>
                                    </template>
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
        <div x-show="stockAllocations.length === 0" class="text-center py-6">
            <p class="text-gray-500 text-sm">Belum ada alokasi per emiten saham.</p>
            <p class="text-gray-600 text-xs mt-1">Semua emiten menggunakan modal saham default (Rp <span x-text="formatRp(stockTotalCapital)"></span>).</p>
        </div>
    </div>

    <!-- ==================== Section 5b: Alokasi Per Emiten (Saham US) ==================== -->
    <div class="glass rounded-xl border border-purple-900/50 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-white">📊 Alokasi Per Emiten <span class="text-purple-400 text-sm font-normal">(Saham US)</span></h3>
            <button @click="showAddUsForm = !showAddUsForm"
                    class="px-3 py-1.5 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm transition flex items-center gap-1">
                <span x-text="showAddUsForm ? '✕ Tutup' : '+ Tambah Alokasi'"></span>
            </button>
        </div>

        <!-- Add Form (collapsible) -->
        <div x-show="showAddUsForm" x-transition class="border border-gray-700 rounded-lg p-4 mb-4 bg-gray-900/50">
            <h4 class="text-sm font-medium text-gray-300 mb-3">Tambah Alokasi Saham US Baru</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="relative">
                    <label class="block text-xs text-gray-500 mb-1">Cari Saham US</label>
                    <input type="text" x-model="addUsForm.searchQuery"
                           @input.debounce.300ms="searchCoins('stock_us')"
                           @focus="if(addUsForm.searchQuery.length >= 1) searchCoins('stock_us')"
                           placeholder="Ketik simbol/nama saham US..."
                           class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:ring-1 focus:ring-purple-500 focus:outline-none">
                    <div x-show="usCoinResults.length > 0" x-cloak
                         @click.outside="usCoinResults = []"
                         class="absolute z-10 w-full mt-1 bg-gray-900 border border-gray-700 rounded-lg shadow-lg max-h-48 overflow-y-auto">
                        <template x-for="coin in usCoinResults" :key="coin.id">
                            <button @click="selectCoin(coin, 'stock_us')"
                                    class="w-full px-3 py-2 text-left text-sm hover:bg-gray-800 flex items-center gap-2 transition">
                                <img :src="coin.icon_thumb_url || coin.image_url || ''" class="w-5 h-5 rounded-full" onerror="this.style.display='none'">
                                <span class="text-white font-medium" x-text="coin.symbol.toUpperCase()"></span>
                                <span class="text-gray-500 text-xs truncate" x-text="coin.name"></span>
                            </button>
                        </template>
                    </div>
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Budget (IDR)</label>
                    <input type="number" step="100000" min="0" x-model.number="addUsForm.allocatedCapital"
                           class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:ring-1 focus:ring-purple-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Dana Aktif (%)</label>
                    <input type="number" step="1" min="0" max="100" x-model.number="addUsForm.activePct"
                           class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:ring-1 focus:ring-purple-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Dana Cadangan (%)</label>
                    <input type="number" step="1" min="0" max="100" x-model.number="addUsForm.reservePct"
                           class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:ring-1 focus:ring-purple-500 focus:outline-none">
                </div>
            </div>
            <p x-show="addUsForm.activePct + addUsForm.reservePct !== 100" x-cloak class="text-xs text-red-400 mt-2">Aktif + Cadangan harus = 100%</p>
            <div class="mt-3 flex items-center gap-3">
                <button @click="saveAllocation('stock_us')"
                        :disabled="!addUsForm.coinId || addUsForm.activePct + addUsForm.reservePct !== 100 || savingAlloc"
                        :class="(!addUsForm.coinId || addUsForm.activePct + addUsForm.reservePct !== 100 || savingAlloc) ? 'opacity-50 cursor-not-allowed' : 'hover:bg-purple-700'"
                        class="px-4 py-1.5 bg-purple-600 text-white rounded-lg text-sm transition flex items-center gap-2">
                    <svg x-show="savingAlloc" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    <span x-text="savingAlloc ? 'Menyimpan...' : 'Simpan Alokasi'"></span>
                </button>
                <button @click="showAddUsForm = false" class="px-4 py-1.5 bg-gray-700 hover:bg-gray-600 text-gray-300 rounded-lg text-sm transition">Batal</button>
            </div>
        </div>

        <!-- Allocation Table -->
        <div x-show="usAllocations.length > 0" class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-gray-500 text-xs uppercase border-b border-gray-800">
                        <th class="text-left py-2 px-2">Saham</th>
                        <th class="text-right py-2 px-2">Budget (IDR)</th>
                        <th class="text-right py-2 px-2">Aktif %</th>
                        <th class="text-right py-2 px-2">Cadangan %</th>
                        <th class="text-right py-2 px-2">Modal Aktif</th>
                        <th class="text-right py-2 px-2">Modal Cadangan</th>
                        <th class="text-center py-2 px-2">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="alloc in usAllocations" :key="alloc.asset_id">
                        <tr class="border-b border-gray-800/50 hover:bg-gray-800/30">
                            <td class="py-2.5 px-2">
                                <div class="flex items-center gap-2">
                                    <img :src="alloc.coin_icon" class="w-5 h-5 rounded-full" onerror="this.style.display='none'">
                                    <span class="text-white font-medium" x-text="alloc.coin_symbol"></span>
                                    <span class="text-gray-500 text-xs hidden md:inline" x-text="alloc.coin_name"></span>
                                </div>
                            </td>
                            <td class="py-2.5 px-2 text-right">
                                <span x-show="!alloc.editing" class="text-white" x-text="'Rp ' + formatRp(alloc.allocated_capital_idr)"></span>
                                <input x-show="alloc.editing" x-cloak type="number" step="100000"
                                       x-model.number="alloc.allocated_capital_idr"
                                       class="w-32 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm text-white text-right focus:ring-1 focus:ring-purple-500 focus:outline-none">
                            </td>
                            <td class="py-2.5 px-2 text-right">
                                <span x-show="!alloc.editing" class="text-purple-400" x-text="alloc.active_capital_pct + '%'"></span>
                                <input x-show="alloc.editing" x-cloak type="number" step="1" min="0" max="100"
                                       x-model.number="alloc.active_capital_pct"
                                       class="w-16 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm text-white text-right focus:ring-1 focus:ring-purple-500 focus:outline-none">
                            </td>
                            <td class="py-2.5 px-2 text-right">
                                <span x-show="!alloc.editing" class="text-amber-400" x-text="alloc.reserve_capital_pct + '%'"></span>
                                <input x-show="alloc.editing" x-cloak type="number" step="1" min="0" max="100"
                                       x-model.number="alloc.reserve_capital_pct"
                                       class="w-16 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm text-white text-right focus:ring-1 focus:ring-purple-500 focus:outline-none">
                            </td>
                            <td class="py-2.5 px-2 text-right text-gray-400 text-xs" x-text="'Rp ' + formatRp(alloc.allocated_capital_idr * alloc.active_capital_pct / 100)"></td>
                            <td class="py-2.5 px-2 text-right text-gray-400 text-xs" x-text="'Rp ' + formatRp(alloc.allocated_capital_idr * alloc.reserve_capital_pct / 100)"></td>
                            <td class="py-2.5 px-2 text-center">
                                <div class="flex items-center justify-center gap-1">
                                    <template x-if="alloc.editing">
                                        <div class="flex items-center gap-1">
                                            <button @click="saveEdit(alloc)" title="Simpan" :disabled="alloc.active_capital_pct + alloc.reserve_capital_pct !== 100" :class="alloc.active_capital_pct + alloc.reserve_capital_pct !== 100 ? 'opacity-50' : ''" class="p-1 text-purple-400 hover:text-purple-300 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></button>
                                            <button @click="cancelEdit(alloc)" title="Batal" class="p-1 text-gray-500 hover:text-gray-300 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
                                        </div>
                                    </template>
                                    <template x-if="!alloc.editing">
                                        <div class="flex items-center gap-1">
                                            <button @click="startEdit(alloc)" title="Edit" class="p-1 text-gray-600 hover:text-purple-400 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg></button>
                                            <button @click="deleteAllocation(alloc.asset_id, alloc.coin_symbol, 'stock_us')" title="Hapus" class="p-1 text-gray-600 hover:text-red-400 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button>
                                        </div>
                                    </template>
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
        <div x-show="usAllocations.length === 0" class="text-center py-6">
            <p class="text-gray-500 text-sm">Belum ada alokasi per emiten saham US.</p>
            <p class="text-gray-600 text-xs mt-1">Semua emiten menggunakan modal saham US default (Rp <span x-text="formatRp(usTotalCapital)"></span>).</p>
        </div>
    </div>

    <!-- ==================== Section 6: Ringkasan Alokasi ==================== -->
    <div class="glass rounded-xl border border-gray-800 p-6">
        <h3 class="text-lg font-semibold text-white mb-4">📋 Ringkasan Alokasi</h3>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
            <div>
                <label class="block text-xs text-gray-500 mb-1">Total Modal Global</label>
                <p class="text-xl font-bold text-white">Rp <span x-text="formatRp(globalCapital)"></span></p>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Total Dialokasikan (Kripto)</label>
                <p class="text-lg font-bold" :class="cryptoTotalAllocated > cryptoTotalCapital ? 'text-red-400' : 'text-koin-400'"
                   x-text="'Rp ' + formatRp(cryptoTotalAllocated)"></p>
                <p class="text-xs text-gray-500">dari Rp <span x-text="formatRp(cryptoTotalCapital)"></span></p>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Total Dialokasikan (Saham IDX)</label>
                <p class="text-lg font-bold" :class="stockTotalAllocated > stockTotalCapital ? 'text-red-400' : 'text-emerald-400'"
                   x-text="'Rp ' + formatRp(stockTotalAllocated)"></p>
                <p class="text-xs text-gray-500">dari Rp <span x-text="formatRp(stockTotalCapital)"></span></p>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Total Dialokasikan (Saham US)</label>
                <p class="text-lg font-bold" :class="usTotalAllocated > usTotalCapital ? 'text-red-400' : 'text-purple-400'"
                   x-text="'Rp ' + formatRp(usTotalAllocated)"></p>
                <p class="text-xs text-gray-500">dari Rp <span x-text="formatRp(usTotalCapital)"></span></p>
            </div>
        </div>

        <!-- Triple progress bars -->
        <div class="space-y-3">
            <div>
                <div class="flex justify-between text-xs text-gray-500 mb-1">
                    <span>🟣 Kripto (<span x-text="cryptoAllocations.length"></span> koin)</span>
                    <span x-text="cryptoTotalCapital > 0 ? KK.fmtPct(cryptoTotalAllocated / cryptoTotalCapital * 100, 1) : '0%'"></span>
                </div>
                <div class="w-full h-3 bg-gray-800 rounded-full overflow-hidden">
                    <div class="h-full rounded-full transition-all duration-500"
                         :class="cryptoTotalAllocated > cryptoTotalCapital ? 'bg-red-500' : 'bg-koin-500'"
                         :style="'width:' + Math.min(100, cryptoTotalCapital > 0 ? (cryptoTotalAllocated / cryptoTotalCapital * 100) : 0) + '%'"></div>
                </div>
            </div>
            <div>
                <div class="flex justify-between text-xs text-gray-500 mb-1">
                    <span>🟢 Saham IDX (<span x-text="stockAllocations.length"></span> emiten)</span>
                    <span x-text="stockTotalCapital > 0 ? KK.fmtPct(stockTotalAllocated / stockTotalCapital * 100, 1) : '0%'"></span>
                </div>
                <div class="w-full h-3 bg-gray-800 rounded-full overflow-hidden">
                    <div class="h-full rounded-full transition-all duration-500"
                         :class="stockTotalAllocated > stockTotalCapital ? 'bg-red-500' : 'bg-emerald-500'"
                         :style="'width:' + Math.min(100, stockTotalCapital > 0 ? (stockTotalAllocated / stockTotalCapital * 100) : 0) + '%'"></div>
                </div>
            </div>
            <div>
                <div class="flex justify-between text-xs text-gray-500 mb-1">
                    <span>🟣 Saham US (<span x-text="usAllocations.length"></span> emiten)</span>
                    <span x-text="usTotalCapital > 0 ? KK.fmtPct(usTotalAllocated / usTotalCapital * 100, 1) : '0%'"></span>
                </div>
                <div class="w-full h-3 bg-gray-800 rounded-full overflow-hidden">
                    <div class="h-full rounded-full transition-all duration-500"
                         :class="usTotalAllocated > usTotalCapital ? 'bg-red-500' : 'bg-purple-500'"
                         :style="'width:' + Math.min(100, usTotalCapital > 0 ? (usTotalAllocated / usTotalCapital * 100) : 0) + '%'"></div>
                </div>
            </div>
        </div>

        <!-- Warnings -->
        <div x-show="cryptoTotalAllocated > cryptoTotalCapital" x-cloak
             class="flex items-center gap-2 p-3 bg-red-900/30 border border-red-800/50 rounded-lg mt-4">
            <span class="text-red-400 text-sm">⚠ Alokasi kripto melebihi modal sebesar Rp <span x-text="formatRp(cryptoTotalAllocated - cryptoTotalCapital)"></span>!</span>
        </div>
        <div x-show="stockTotalAllocated > stockTotalCapital" x-cloak
             class="flex items-center gap-2 p-3 bg-red-900/30 border border-red-800/50 rounded-lg mt-4">
            <span class="text-red-400 text-sm">⚠ Alokasi saham IDX melebihi modal sebesar Rp <span x-text="formatRp(stockTotalAllocated - stockTotalCapital)"></span>!</span>
        </div>
        <div x-show="usTotalAllocated > usTotalCapital" x-cloak
             class="flex items-center gap-2 p-3 bg-red-900/30 border border-red-800/50 rounded-lg mt-4">
            <span class="text-red-400 text-sm">⚠ Alokasi saham US melebihi modal sebesar Rp <span x-text="formatRp(usTotalAllocated - usTotalCapital)"></span>!</span>
        </div>

        <!-- Per-item mini breakdowns -->
        <div x-show="cryptoAllocations.length > 0" class="mt-4">
            <p class="text-xs text-gray-500 font-medium mb-2">Kripto</p>
            <div class="space-y-1.5">
                <template x-for="alloc in cryptoAllocations" :key="alloc.asset_id + '-cs'">
                    <div class="flex items-center gap-3 text-xs">
                        <span class="w-16 text-gray-400 font-medium truncate" x-text="alloc.coin_symbol"></span>
                        <div class="flex-1 h-2 bg-gray-800 rounded-full overflow-hidden">
                            <div class="h-full bg-koin-500/60 rounded-full transition-all duration-300"
                                 :style="'width:' + (cryptoTotalCapital > 0 ? Math.min(100, alloc.allocated_capital_idr / cryptoTotalCapital * 100) : 0) + '%'"></div>
                        </div>
                        <span class="w-24 text-right text-gray-500" x-text="'Rp ' + formatRp(alloc.allocated_capital_idr)"></span>
                    </div>
                </template>
            </div>
        </div>
        <div x-show="stockAllocations.length > 0" class="mt-4">
            <p class="text-xs text-gray-500 font-medium mb-2">Saham IDX</p>
            <div class="space-y-1.5">
                <template x-for="alloc in stockAllocations" :key="alloc.asset_id + '-ss'">
                    <div class="flex items-center gap-3 text-xs">
                        <span class="w-16 text-gray-400 font-medium truncate" x-text="alloc.coin_symbol"></span>
                        <div class="flex-1 h-2 bg-gray-800 rounded-full overflow-hidden">
                            <div class="h-full bg-emerald-500/60 rounded-full transition-all duration-300"
                                 :style="'width:' + (stockTotalCapital > 0 ? Math.min(100, alloc.allocated_capital_idr / stockTotalCapital * 100) : 0) + '%'"></div>
                        </div>
                        <span class="w-24 text-right text-gray-500" x-text="'Rp ' + formatRp(alloc.allocated_capital_idr)"></span>
                    </div>
                </template>
            </div>
        </div>
        <div x-show="usAllocations.length > 0" class="mt-4">
            <p class="text-xs text-gray-500 font-medium mb-2">Saham US</p>
            <div class="space-y-1.5">
                <template x-for="alloc in usAllocations" :key="alloc.asset_id + '-us'">
                    <div class="flex items-center gap-3 text-xs">
                        <span class="w-16 text-gray-400 font-medium truncate" x-text="alloc.coin_symbol"></span>
                        <div class="flex-1 h-2 bg-gray-800 rounded-full overflow-hidden">
                            <div class="h-full bg-purple-500/60 rounded-full transition-all duration-300"
                                 :style="'width:' + (usTotalCapital > 0 ? Math.min(100, alloc.allocated_capital_idr / usTotalCapital * 100) : 0) + '%'"></div>
                        </div>
                        <span class="w-24 text-right text-gray-500" x-text="'Rp ' + formatRp(alloc.allocated_capital_idr)"></span>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block settings_scripts %}
<script>
function capitalSettings() {
    return {
        // Global split (3-way: crypto + stock IDX + stock US = 100%)
        globalCapital: {{ default_capital + stock_capital + us_capital }},
        cryptoPct: {% set total_cap = default_capital + stock_capital + us_capital %}{{ ((default_capital / total_cap * 100) | round(0)) if total_cap > 0 else 34 }},
        stockPct: {{ ((stock_capital / total_cap * 100) | round(0)) if total_cap > 0 else 33 }},
        usPct: {{ ((us_capital / total_cap * 100) | round(0)) if total_cap > 0 else 33 }},
        savingGlobalSplit: false,

        // Crypto capital
        cryptoActivePct: {{ active_pct }},
        cryptoReservePct: {{ reserve_pct }},
        savingCrypto: false,

        // Stock IDX capital
        stockActivePct: {{ stock_active_pct }},
        stockReservePct: {{ stock_reserve_pct }},
        savingStock: false,

        // US Stock capital
        usActivePct: {{ us_active_pct }},
        usReservePct: {{ us_reserve_pct }},
        savingUs: false,

        // Per-asset allocations
        cryptoAllocations: {{ crypto_alloc_list | tojson }},
        stockAllocations: {{ stock_alloc_list | tojson }},
        usAllocations: {{ us_alloc_list | tojson }},

        // Add forms
        showAddCryptoForm: false,
        showAddStockForm: false,
        showAddUsForm: false,
        savingAlloc: false,
        addCryptoForm: {
            coinId: '', coinSymbol: '', coinName: '', coinIcon: '',
            searchQuery: '',
            allocatedCapital: {{ default_capital }},
            activePct: {{ active_pct }},
            reservePct: {{ reserve_pct }},
        },
        addStockForm: {
            coinId: '', coinSymbol: '', coinName: '', coinIcon: '',
            searchQuery: '',
            allocatedCapital: {{ stock_capital }},
            activePct: {{ stock_active_pct }},
            reservePct: {{ stock_reserve_pct }},
        },
        addUsForm: {
            coinId: '', coinSymbol: '', coinName: '', coinIcon: '',
            searchQuery: '',
            allocatedCapital: {{ us_capital }},
            activePct: {{ us_active_pct }},
            reservePct: {{ us_reserve_pct }},
        },
        cryptoCoinResults: [],
        stockCoinResults: [],
        usCoinResults: [],

        // Computed
        get cryptoTotalCapital() { return this.globalCapital * this.cryptoPct / 100; },
        get stockTotalCapital() { return this.globalCapital * this.stockPct / 100; },
        get usTotalCapital() { return this.globalCapital * this.usPct / 100; },
        get cryptoTotalAllocated() {
            return this.cryptoAllocations.reduce((s, a) => s + (parseFloat(a.allocated_capital_idr) || 0), 0);
        },
        get stockTotalAllocated() {
            return this.stockAllocations.reduce((s, a) => s + (parseFloat(a.allocated_capital_idr) || 0), 0);
        },
        get usTotalAllocated() {
            return this.usAllocations.reduce((s, a) => s + (parseFloat(a.allocated_capital_idr) || 0), 0);
        },

        formatRp(n) { return KK.fmtIdr(Math.round(n)); },

        // ---- Save Global Split (3-way) ----
        async saveGlobalSplit() {
            if (this.cryptoPct + this.stockPct + this.usPct !== 100) return;
            this.savingGlobalSplit = true;
            try {
                const cryptoCapital = Math.round(this.globalCapital * this.cryptoPct / 100);
                const stockCapital = Math.round(this.globalCapital * this.stockPct / 100);
                const usCapital = Math.round(this.globalCapital * this.usPct / 100);
                const saves = [
                    { key: 'default_capital', value: cryptoCapital, category: 'capital' },
                    { key: 'stock_default_capital', value: stockCapital, category: 'capital' },
                    { key: 'us_stock_default_capital', value: usCapital, category: 'capital' },
                    { key: 'global_capital', value: this.globalCapital, category: 'capital' },
                    { key: 'crypto_capital_pct', value: this.cryptoPct, category: 'capital' },
                    { key: 'stock_capital_pct', value: this.stockPct, category: 'capital' },
                    { key: 'us_stock_capital_pct', value: this.usPct, category: 'capital' },
                ];
                for (const s of saves) {
                    await fetch('/api/v1/settings/', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(s),
                    });
                }
                KKToast.success('Pembagian modal tersimpan!');
            } catch (e) {
                KKToast.error('Gagal menyimpan: ' + e.message);
            } finally { this.savingGlobalSplit = false; }
        },

        // ---- Save Crypto Capital ----
        async saveCryptoCapital() {
            if (this.cryptoActivePct + this.cryptoReservePct !== 100) return;
            this.savingCrypto = true;
            try {
                const saves = [
                    { key: 'active_capital_pct', value: this.cryptoActivePct, category: 'capital' },
                    { key: 'reserve_capital_pct', value: this.cryptoReservePct, category: 'capital' },
                ];
                for (const s of saves) {
                    await fetch('/api/v1/settings/', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(s),
                    });
                }
                KKToast.success('Modal kripto tersimpan!');
            } catch (e) {
                KKToast.error('Gagal menyimpan: ' + e.message);
            } finally { this.savingCrypto = false; }
        },

        // ---- Save Stock Capital ----
        async saveStockCapital() {
            if (this.stockActivePct + this.stockReservePct !== 100) return;
            this.savingStock = true;
            try {
                const saves = [
                    { key: 'stock_active_capital_pct', value: this.stockActivePct, category: 'capital' },
                    { key: 'stock_reserve_capital_pct', value: this.stockReservePct, category: 'capital' },
                ];
                for (const s of saves) {
                    await fetch('/api/v1/settings/', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(s),
                    });
                }
                KKToast.success('Modal saham IDX tersimpan!');
            } catch (e) {
                KKToast.error('Gagal menyimpan: ' + e.message);
            } finally { this.savingStock = false; }
        },

        // ---- Save US Stock Capital ----
        async saveUsCapital() {
            if (this.usActivePct + this.usReservePct !== 100) return;
            this.savingUs = true;
            try {
                const saves = [
                    { key: 'us_stock_active_capital_pct', value: this.usActivePct, category: 'capital' },
                    { key: 'us_stock_reserve_capital_pct', value: this.usReservePct, category: 'capital' },
                ];
                for (const s of saves) {
                    await fetch('/api/v1/settings/', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(s),
                    });
                }
                KKToast.success('Modal saham US tersimpan!');
            } catch (e) {
                KKToast.error('Gagal menyimpan: ' + e.message);
            } finally { this.savingUs = false; }
        },

        // ---- Coin Search (mode-aware) ----
        _getForm(mode) {
            if (mode === 'stock_us') return this.addUsForm;
            if (mode === 'stock') return this.addStockForm;
            return this.addCryptoForm;
        },
        _getResults(mode) {
            if (mode === 'stock_us') return 'usCoinResults';
            if (mode === 'stock') return 'stockCoinResults';
            return 'cryptoCoinResults';
        },
        async searchCoins(mode) {
            const form = this._getForm(mode);
            const resultsKey = this._getResults(mode);
            const q = form.searchQuery.trim();
            if (q.length < 1) { this[resultsKey] = []; return; }
            try {
                const res = await fetch(`/api/v1/market/search?q=${encodeURIComponent(q)}&asset_type=${mode}`);
                this[resultsKey] = await res.json();
            } catch (e) { this[resultsKey] = []; }
        },

        selectCoin(coin, mode) {
            const form = this._getForm(mode);
            form.coinId = coin.id;
            form.coinSymbol = coin.symbol.toUpperCase();
            form.coinName = coin.name;
            form.coinIcon = coin.icon_thumb_url || coin.image_url || '';
            form.searchQuery = coin.symbol.toUpperCase() + ' - ' + coin.name;
            this[this._getResults(mode)] = [];
        },

        // ---- Save New Allocation ----
        _getAllocList(mode) {
            if (mode === 'stock_us') return this.usAllocations;
            if (mode === 'stock') return this.stockAllocations;
            return this.cryptoAllocations;
        },
        async saveAllocation(mode) {
            const form = this._getForm(mode);
            const list = this._getAllocList(mode);
            if (!form.coinId || form.activePct + form.reservePct !== 100) return;

            if (list.find(a => a.asset_id === form.coinId)) {
                KKToast.warning('Alokasi untuk ' + form.coinSymbol + ' sudah ada. Edit dari tabel.');
                return;
            }

            this.savingAlloc = true;
            try {
                const res = await fetch(`/api/v1/settings/capital/${form.coinId}`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        allocated_capital_idr: form.allocatedCapital,
                        active_capital_pct: form.activePct,
                        reserve_capital_pct: form.reservePct,
                    }),
                });
                const data = await res.json();
                data.coin_name = form.coinName;
                data.coin_symbol = form.coinSymbol;
                data.coin_icon = form.coinIcon;
                data.asset_type = mode;
                data.editing = false;
                list.push(data);

                // Reset form with mode-appropriate defaults
                let defaults;
                if (mode === 'stock_us') {
                    defaults = { allocatedCapital: this.usTotalCapital, activePct: this.usActivePct, reservePct: this.usReservePct };
                } else if (mode === 'stock') {
                    defaults = { allocatedCapital: this.stockTotalCapital, activePct: this.stockActivePct, reservePct: this.stockReservePct };
                } else {
                    defaults = { allocatedCapital: this.cryptoTotalCapital, activePct: this.cryptoActivePct, reservePct: this.cryptoReservePct };
                }
                Object.assign(form, { coinId: '', coinSymbol: '', coinName: '', coinIcon: '', searchQuery: '', ...defaults });
                if (mode === 'stock_us') this.showAddUsForm = false;
                else if (mode === 'stock') this.showAddStockForm = false;
                else this.showAddCryptoForm = false;
                KKToast.success('Alokasi berhasil ditambahkan!');
            } catch (e) {
                KKToast.error('Gagal menyimpan alokasi: ' + e.message);
            } finally { this.savingAlloc = false; }
        },

        // ---- Inline Edit ----
        startEdit(alloc) {
            alloc.editing = true;
            alloc._backup = {
                allocated_capital_idr: alloc.allocated_capital_idr,
                active_capital_pct: alloc.active_capital_pct,
                reserve_capital_pct: alloc.reserve_capital_pct,
            };
        },
        cancelEdit(alloc) {
            alloc.allocated_capital_idr = alloc._backup.allocated_capital_idr;
            alloc.active_capital_pct = alloc._backup.active_capital_pct;
            alloc.reserve_capital_pct = alloc._backup.reserve_capital_pct;
            alloc.editing = false;
        },
        async saveEdit(alloc) {
            if (alloc.active_capital_pct + alloc.reserve_capital_pct !== 100) return;
            try {
                await fetch(`/api/v1/settings/capital/${alloc.asset_id}`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        allocated_capital_idr: alloc.allocated_capital_idr,
                        active_capital_pct: alloc.active_capital_pct,
                        reserve_capital_pct: alloc.reserve_capital_pct,
                    }),
                });
                alloc.editing = false;
                KKToast.success('Alokasi ' + alloc.coin_symbol + ' diperbarui!');
            } catch (e) {
                KKToast.error('Gagal menyimpan: ' + e.message);
            }
        },

        // ---- Delete ----
        async deleteAllocation(coinId, symbol, mode) {
            const label = (mode === 'stock' || mode === 'stock_us') ? 'emiten' : 'koin';
            if (!confirm('Hapus alokasi ' + symbol + '? ' + label.charAt(0).toUpperCase() + label.slice(1) + ' ini akan menggunakan modal default.')) return;
            try {
                await fetch(`/api/v1/settings/capital/${coinId}`, { method: 'DELETE' });
                if (mode === 'stock_us') {
                    this.usAllocations = this.usAllocations.filter(a => a.asset_id !== coinId);
                } else if (mode === 'stock') {
                    this.stockAllocations = this.stockAllocations.filter(a => a.asset_id !== coinId);
                } else {
                    this.cryptoAllocations = this.cryptoAllocations.filter(a => a.asset_id !== coinId);
                }
                KKToast.success('Alokasi ' + symbol + ' dihapus.');
            } catch (e) {
                KKToast.error('Gagal menghapus: ' + e.message);
            }
        },
    };
}
</script>
{% endblock %}