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

{% block settings_content %}
<div class="space-y-6" x-data="{
    buyFee: {{ buy_fee }},
    sellFee: {{ sell_fee }},
    stockBuyFee: {{ stock_buy_fee }},
    stockSellFee: {{ stock_sell_fee }},
    stockSellTax: {{ stock_sell_tax }},
    stockBroker: '{{ stock_broker }}',
    usBuyFee: {{ us_buy_fee }},
    usSellFee: {{ us_sell_fee }},
    usBroker: '{{ us_broker }}',
    saving: false,
    savingStock: false,
    savingUs: false,
    get roundTripFee() { return parseFloat(this.buyFee || 0) + parseFloat(this.sellFee || 0); },
    get stockRoundTripFee() { return parseFloat(this.stockBuyFee || 0) + parseFloat(this.stockSellFee || 0) + parseFloat(this.stockSellTax || 0); },
    get usRoundTripFee() { return parseFloat(this.usBuyFee || 0) + parseFloat(this.usSellFee || 0); },
    get buyValid() { return this.buyFee >= 0 && this.buyFee <= 100; },
    get sellValid() { return this.sellFee >= 0 && this.sellFee <= 100; },
    save() {
        if (!this.buyValid || !this.sellValid) { KKToast.error('Fee harus antara 0 - 100%'); return; }
        this.saving = true;
        fetch('/api/v1/settings/fees', {
            method: 'POST',
            headers: {'Content-Type':'application/json'},
            body: JSON.stringify({type: 'crypto', buy_fee_pct: parseFloat(this.buyFee), sell_fee_pct: parseFloat(this.sellFee)})
        }).then(r => r.json()).then(d => {
            KKToast.success('Biaya transaksi kripto tersimpan!');
        }).catch(() => {
            KKToast.error('Gagal menyimpan, coba lagi.');
        }).finally(() => { this.saving = false; });
    },
    saveStock() {
        this.savingStock = true;
        fetch('/api/v1/settings/fees', {
            method: 'POST',
            headers: {'Content-Type':'application/json'},
            body: JSON.stringify({
                type: 'stock',
                stock_buy_fee_pct: parseFloat(this.stockBuyFee),
                stock_sell_fee_pct: parseFloat(this.stockSellFee),
                stock_sell_tax_pct: parseFloat(this.stockSellTax),
                stock_broker: this.stockBroker
            })
        }).then(r => r.json()).then(d => {
            KKToast.success('Biaya transaksi saham IDX tersimpan!');
        }).catch(() => {
            KKToast.error('Gagal menyimpan, coba lagi.');
        }).finally(() => { this.savingStock = false; });
    },
    saveUs() {
        this.savingUs = true;
        fetch('/api/v1/settings/fees', {
            method: 'POST',
            headers: {'Content-Type':'application/json'},
            body: JSON.stringify({
                type: 'stock_us',
                stock_us_buy_fee_pct: parseFloat(this.usBuyFee),
                stock_us_sell_fee_pct: parseFloat(this.usSellFee),
                stock_us_broker: this.usBroker
            })
        }).then(r => r.json()).then(d => {
            KKToast.success('Biaya transaksi saham US tersimpan!');
        }).catch(() => {
            KKToast.error('Gagal menyimpan, coba lagi.');
        }).finally(() => { this.savingUs = false; });
    },
    setPreset(broker) {
        const presets = {
            growin: {buy: 0.15, sell: 0.25, tax: 0.10},
            stockbit: {buy: 0.15, sell: 0.25, tax: 0.10},
            ajaib: {buy: 0.15, sell: 0.25, tax: 0.10},
            ipot: {buy: 0.19, sell: 0.29, tax: 0.10},
            bibit: {buy: 0.15, sell: 0.25, tax: 0.10},
        };
        const p = presets[broker] || presets.growin;
        this.stockBuyFee = p.buy;
        this.stockSellFee = p.sell;
        this.stockSellTax = p.tax;
        this.stockBroker = broker;
    },
    setUsPreset(broker) {
        const presets = {
            gotrade: {buy: 0, sell: 0},
            ibkr: {buy: 0.005, sell: 0.005},
            webull: {buy: 0, sell: 0},
            td_ameritrade: {buy: 0, sell: 0},
        };
        const p = presets[broker] || presets.gotrade;
        this.usBuyFee = p.buy;
        this.usSellFee = p.sell;
        this.usBroker = broker;
    }
}">
    <h1 class="text-2xl font-bold text-white">Transaction Fees</h1>

    <!-- ═══ CRYPTO FEES ═══ -->
    <div class="glass rounded-xl border border-gray-800 p-6">
        <h3 class="text-lg font-semibold text-white mb-4">
            <span class="inline-flex items-center gap-2">
                <span class="w-2 h-2 rounded-full bg-koin-500"></span>
                Biaya Transaksi Kripto
            </span>
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm text-gray-400 mb-2">Fee Beli (%)</label>
                <input type="number" step="0.01" min="0" max="100" x-model="buyFee"
                       :class="!buyValid ? 'border-red-500 focus:ring-red-500' : 'border-gray-700 focus:ring-koin-500'"
                       class="w-full bg-gray-800 border rounded-lg px-4 py-2 text-white focus:ring-1 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-2">Fee Jual (%)</label>
                <input type="number" step="0.01" min="0" max="100" x-model="sellFee"
                       :class="!sellValid ? 'border-red-500 focus:ring-red-500' : 'border-gray-700 focus:ring-koin-500'"
                       class="w-full bg-gray-800 border rounded-lg px-4 py-2 text-white focus:ring-1 focus:outline-none">
            </div>
        </div>
        <div class="mt-3 flex items-center justify-between">
            <p class="text-xs text-gray-500">Round trip: <span class="text-koin-400 font-medium" x-text="KK.fmtPct(roundTripFee, 2)"></span></p>
            <button @click="save()" :disabled="saving || !buyValid || !sellValid"
                    class="px-5 py-2 bg-koin-600 hover:bg-koin-700 disabled:opacity-50 text-white rounded-lg text-sm transition flex items-center gap-2">
                <svg x-show="saving" 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="saving ? 'Menyimpan...' : 'Simpan Kripto'"></span>
            </button>
        </div>
    </div>

    <!-- ═══ STOCK FEES ═══ -->
    <div class="glass rounded-xl border border-emerald-900/50 p-6">
        <h3 class="text-lg font-semibold text-white mb-4">
            <span class="inline-flex items-center gap-2">
                <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                Biaya Transaksi Saham
            </span>
        </h3>

        <!-- Broker presets -->
        <div class="mb-4">
            <label class="block text-sm text-gray-400 mb-2">Preset Broker</label>
            <div class="flex flex-wrap gap-2">
                <template x-for="b in ['growin','stockbit','ajaib','ipot','bibit']">
                    <button @click="setPreset(b)"
                            :class="stockBroker === b ? 'bg-emerald-600 text-white' : 'bg-gray-800 text-gray-400 hover:bg-gray-700'"
                            class="px-3 py-1.5 rounded-lg text-xs font-medium capitalize transition" x-text="b"></button>
                </template>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
                <label class="block text-sm text-gray-400 mb-2">Fee Beli (%)</label>
                <input type="number" step="0.01" min="0" max="100" x-model="stockBuyFee"
                       class="w-full bg-gray-800 border border-gray-700 focus:ring-emerald-500 rounded-lg px-4 py-2 text-white focus:ring-1 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-2">Fee Jual (%)</label>
                <input type="number" step="0.01" min="0" max="100" x-model="stockSellFee"
                       class="w-full bg-gray-800 border border-gray-700 focus:ring-emerald-500 rounded-lg px-4 py-2 text-white focus:ring-1 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-2">PPh Final Jual (%)</label>
                <input type="number" step="0.01" min="0" max="100" x-model="stockSellTax"
                       class="w-full bg-gray-800 border border-gray-700 focus:ring-emerald-500 rounded-lg px-4 py-2 text-white focus:ring-1 focus:outline-none">
                <p class="text-xs text-gray-600 mt-1">Pajak Penghasilan Final atas penjualan saham</p>
            </div>
        </div>
        <div class="mt-3 flex items-center justify-between">
            <p class="text-xs text-gray-500">Round trip: <span class="text-emerald-400 font-medium" x-text="KK.fmtPct(stockRoundTripFee, 2)"></span></p>
            <button @click="saveStock()" :disabled="savingStock"
                    class="px-5 py-2 bg-emerald-600 hover:bg-emerald-700 disabled:opacity-50 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 Saham'"></span>
            </button>
        </div>
    </div>

    <!-- ═══ US STOCK FEES ═══ -->
    <div class="glass rounded-xl border border-purple-900/50 p-6">
        <h3 class="text-lg font-semibold text-white mb-4">
            <span class="inline-flex items-center gap-2">
                <span class="w-2 h-2 rounded-full bg-purple-500"></span>
                Biaya Transaksi Saham US
            </span>
        </h3>

        <!-- Broker presets -->
        <div class="mb-4">
            <label class="block text-sm text-gray-400 mb-2">Preset Broker</label>
            <div class="flex flex-wrap gap-2">
                <template x-for="b in ['gotrade','ibkr','webull','td_ameritrade']">
                    <button @click="setUsPreset(b)"
                            :class="usBroker === b ? 'bg-purple-600 text-white' : 'bg-gray-800 text-gray-400 hover:bg-gray-700'"
                            class="px-3 py-1.5 rounded-lg text-xs font-medium capitalize transition"
                            x-text="b === 'td_ameritrade' ? 'TD Ameritrade' : b === 'ibkr' ? 'IBKR' : b.charAt(0).toUpperCase() + b.slice(1)"></button>
                </template>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm text-gray-400 mb-2">Fee Beli (%)</label>
                <input type="number" step="0.001" min="0" max="100" x-model="usBuyFee"
                       class="w-full bg-gray-800 border border-gray-700 focus:ring-purple-500 rounded-lg px-4 py-2 text-white focus:ring-1 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-2">Fee Jual (%)</label>
                <input type="number" step="0.001" min="0" max="100" x-model="usSellFee"
                       class="w-full bg-gray-800 border border-gray-700 focus:ring-purple-500 rounded-lg px-4 py-2 text-white focus:ring-1 focus:outline-none">
            </div>
        </div>
        <p class="text-xs text-gray-600 mt-2">Sebagian besar broker US menawarkan $0 commission (0%). IBKR mengenakan biaya per-share.</p>
        <div class="mt-3 flex items-center justify-between">
            <p class="text-xs text-gray-500">Round trip: <span class="text-purple-400 font-medium" x-text="KK.fmtPct(usRoundTripFee, 3)"></span></p>
            <button @click="saveUs()" :disabled="savingUs"
                    class="px-5 py-2 bg-purple-600 hover:bg-purple-700 disabled:opacity-50 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 Saham US'"></span>
            </button>
        </div>
    </div>

    <!-- Fee Summary -->
    <div class="glass rounded-xl border border-gray-800 p-6">
        <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Fee Summary</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Crypto summary -->
            <div>
                <p class="text-xs text-koin-400 font-semibold mb-3">Kripto</p>
                <div class="grid grid-cols-3 gap-3">
                    <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                        <p class="text-xs text-gray-500 mb-1">Beli</p>
                        <p class="text-sm font-bold text-white" x-text="KK.fmtPct(parseFloat(buyFee || 0), 2)"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                        <p class="text-xs text-gray-500 mb-1">Jual</p>
                        <p class="text-sm font-bold text-white" x-text="KK.fmtPct(parseFloat(sellFee || 0), 2)"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3 text-center border border-koin-900/50">
                        <p class="text-xs text-koin-400 mb-1">Total</p>
                        <p class="text-sm font-bold text-koin-300" x-text="KK.fmtPct(roundTripFee, 2)"></p>
                    </div>
                </div>
            </div>
            <!-- Stock IDX summary -->
            <div>
                <p class="text-xs text-emerald-400 font-semibold mb-3">Saham IDX (<span x-text="stockBroker" class="capitalize"></span>)</p>
                <div class="grid grid-cols-4 gap-3">
                    <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                        <p class="text-xs text-gray-500 mb-1">Beli</p>
                        <p class="text-sm font-bold text-white" x-text="KK.fmtPct(parseFloat(stockBuyFee || 0), 2)"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                        <p class="text-xs text-gray-500 mb-1">Jual</p>
                        <p class="text-sm font-bold text-white" x-text="KK.fmtPct(parseFloat(stockSellFee || 0), 2)"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                        <p class="text-xs text-gray-500 mb-1">PPh</p>
                        <p class="text-sm font-bold text-white" x-text="KK.fmtPct(parseFloat(stockSellTax || 0), 2)"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3 text-center border border-emerald-900/50">
                        <p class="text-xs text-emerald-400 mb-1">Total</p>
                        <p class="text-sm font-bold text-emerald-300" x-text="KK.fmtPct(stockRoundTripFee, 2)"></p>
                    </div>
                </div>
            </div>
            <!-- Stock US summary -->
            <div>
                <p class="text-xs text-purple-400 font-semibold mb-3">Saham US (<span x-text="usBroker === 'td_ameritrade' ? 'TD Ameritrade' : usBroker === 'ibkr' ? 'IBKR' : usBroker.charAt(0).toUpperCase() + usBroker.slice(1)"></span>)</p>
                <div class="grid grid-cols-3 gap-3">
                    <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                        <p class="text-xs text-gray-500 mb-1">Beli</p>
                        <p class="text-sm font-bold text-white" x-text="KK.fmtPct(parseFloat(usBuyFee || 0), 3)"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                        <p class="text-xs text-gray-500 mb-1">Jual</p>
                        <p class="text-sm font-bold text-white" x-text="KK.fmtPct(parseFloat(usSellFee || 0), 3)"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3 text-center border border-purple-900/50">
                        <p class="text-xs text-purple-400 mb-1">Total</p>
                        <p class="text-sm font-bold text-purple-300" x-text="KK.fmtPct(usRoundTripFee, 3)"></p>
                    </div>
                </div>
            </div>
        </div>
        <p class="text-xs text-gray-500 mt-4">
            Net-of-Fee Calculation: Semua prediksi harga sudah memperhitungkan biaya transaksi.
            Untuk saham IDX, PPh Final 0.10% dikenakan atas penjualan saham sesuai peraturan pajak Indonesia.
            Sebagian besar broker saham US menawarkan 0% commission.
        </p>
    </div>
</div>
{% endblock %}