<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analisis Portofolio Saham Pro</title>
    <!-- Chart.js CDN untuk Pie Chart -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary: #2563eb;
            --bg: #f8fafc;
            --card-bg: #ffffff;
            --text-main: #1e293b;
            --text-sub: #64748b;
            --red-loss: #ef4444;
            --green-gain: #22c55e;
            --border: #e2e8f0;
        }

        body {
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg);
            color: var(--text-main);
            margin: 0;
            padding: 20px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        h1, h2, h3 { margin-top: 0; }
        
        /* Utility Classes for Colors */
        .text-red { color: var(--red-loss); }
        .text-green { color: var(--green-gain); }
        .text-bold { font-weight: bold; }

        /* Cards */
        .card {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            border: 1px solid var(--border);
        }

        /* Dashboard Summary */
        .dashboard-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 20px;
        }
        .stat-box {
            background: #f1f5f9;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
        }
        .stat-box h4 { margin: 0 0 5px 0; color: var(--text-sub); font-size: 0.9em; }
        .stat-box .value { font-size: 1.2em; font-weight: bold; }

        /* Input Form */
        .input-group {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr auto;
            gap: 10px;
            align-items: end;
            margin-bottom: 20px;
        }
        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 6px;
            box-sizing: border-box;
        }
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            transition: 0.2s;
        }
        .btn-primary { background: var(--primary); color: white; }
        .btn-primary:hover { background: #1d4ed8; }
        .btn-danger { background: var(--red-loss); color: white; padding: 5px 10px; font-size: 0.8em;}

        /* Stock List Table */
        .stock-item {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr auto;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid var(--border);
        }
        .stock-item:last-child { border-bottom: none; }
        .stock-header {
            font-weight: bold;
            font-size: 0.85em;
            color: var(--text-sub);
            padding-bottom: 10px;
            border-bottom: 2px solid var(--border);
        }

        /* Analysis Section */
        .contributor-list {
            list-style: none;
            padding: 0;
        }
        .contributor-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px dashed var(--border);
        }
        .progress-bar {
            height: 6px;
            background: var(--red-loss);
            border-radius: 3px;
            margin-top: 5px;
            width: 100%;
        }

        /* Tools (Avg Down & BEP) */
        .tool-section {
            background: #eff6ff;
            padding: 15px;
            border-radius: 8px;
            margin-top: 10px;
        }
        .result-box {
            margin-top: 10px;
            padding: 10px;
            background: white;
            border: 1px solid #bfdbfe;
            border-radius: 6px;
        }

        /* Responsive */
        @media (max-width: 600px) {
            .input-group { grid-template-columns: 1fr; }
            .stock-item { grid-template-columns: 1fr 1fr; gap: 10px; }
            .stock-header { display: none; }
        }
    </style>
</head>
<body>

    <h1>ߓʠPortfolio Analyzer</h1>

    <!-- 1. DASHBOARD TOTAL -->
    <div class="dashboard-grid">
        <div class="stat-box">
            <h4>Total Modal</h4>
            <div class="value" id="totalModal">Rp 0</div>
        </div>
        <div class="stat-box">
            <h4>Nilai Pasar</h4>
            <div class="value" id="totalMarket">Rp 0</div>
        </div>
        <div class="stat-box">
            <h4>Total P&L (Nominal)</h4>
            <div class="value" id="totalPL">Rp 0</div>
        </div>
        <div class="stat-box">
            <h4>Total P&L (%)</h4>
            <div class="value" id="totalPLPercent">0%</div>
        </div>
    </div>

    <!-- PIE CHART ASSET ALLOCATION -->
    <div class="card">
        <h3>ߍРAlokasi Aset (Berdasarkan Modal)</h3>
        <div style="height: 250px; width: 100%;">
            <canvas id="allocationChart"></canvas>
        </div>
    </div>

    <!-- 2. INPUT STOCK -->
    <div class="card">
        <h3>➕ Input Saham</h3>
        <div class="input-group">
            <div>
                <label>Kode Saham</label>
                <input type="text" id="inCode" class="form-control" placeholder="BBCA">
            </div>
            <div>
                <label>Avg Price (Beli)</label>
                <input type="number" id="inAvg" class="form-control" placeholder="7166">
            </div>
            <div>
                <label>Last Price (Pasar)</label>
                <input type="number" id="inLast" class="form-control" placeholder="6075">
            </div>
            <div>
                <label>Jml Lot</label>
                <input type="number" id="inLots" class="form-control" placeholder="65">
            </div>
            <div>
                <button onclick="addStock()" class="btn btn-primary">Add</button>
            </div>
        </div>

        <!-- TABLE HEADER -->
        <div class="stock-item stock-header">
            <span>SAHAM</span>
            <span>AVG / LAST</span>
            <span>LOTS</span>
            <span>P&L (NOMINAL)</span>
            <span>AKSI</span>
        </div>
        <div id="stockList">
            <!-- Rows will be injected here via JS -->
        </div>
    </div>

    <!-- 3. ANALISIS KONTRIBUSI -->
    <div class="card">
        <h3> Analisa Kontributor Penurunan</h3>
        <p style="font-size: 0.9em; color: var(--text-sub);">Saham mana yang paling membuat portofolio "berdarah"?</p>
        <ul id="contributorList" class="contributor-list">
            <li style="color:var(--text-sub); text-align:center;">Belum ada data kerugian.</li>
        </ul>
    </div>

    <!-- 4. TOOLS (Avg Down & BEP) -->
    <div class="card">
        <h3>ߛ/؏ Calculator Tools</h3>
        
        <!-- Avg Down -->
        <div class="tool-section">
            <h4>Average Down Calculator</h4>
            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;">
                <input type="number" id="adOldPrice" placeholder="Avg Lama" class="form-control">
                <input type="number" id="adOldLots" placeholder="Lot Lama" class="form-control">
                <input type="number" id="adNewLots" placeholder="Lot Baru (Serok)" class="form-control">
                <input type="number" id="adNewPrice" placeholder="Harga Serok" class="form-control">
            </div>
            <button onclick="calcAvgDown()" class="btn btn-primary" style="margin-top:10px; width:100%;">Hitung Avg Baru</button>
            <div id="avgDownResult" class="result-box" style="display:none;"></div>
        </div>

        <!-- BEP -->
        <div class="tool-section" style="background-color: #f0fdf4;">
            <h4>Break Even Point (BEP) Calculator</h4>
            <p style="font-size:0.8em;">Termasuk estimasi Fee Beli (0.15%) & Fee Jual (0.25%) + Pajak.</p>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                <input type="number" id="bepAvg" placeholder="Avg Price Beli" class="form-control">
                <input type="number" id="bepTargetPrice" placeholder="Target Harga Jual" class="form-control">
            </div>
            <button onclick="calcBEP()" class="btn btn-primary" style="margin-top:10px; width:100%;">Hitung BEP</button>
            <div id="bepResult" class="result-box" style="display:none;"></div>
        </div>
    </div>

    <script>
        // Data Store
        let stocks = [];
        let chartInstance = null;

        // Fungsi Format Rupiah
        const formatRupiah = (num) => {
            return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(num);
        };

        // 1. FUNGSI ADD STOCK
        function addStock() {
            const code = document.getElementById('inCode').value.toUpperCase();
            const avg = parseFloat(document.getElementById('inAvg').value);
            const last = parseFloat(document.getElementById('inLast').value);
            const lots = parseFloat(document.getElementById('inLots').value);

            if (!code || isNaN(avg) || isNaN(last) || isNaN(lots)) {
                alert("Mohon isi semua data dengan benar.");
                return;
            }

            // 1 Lot = 100 Lembar
            const lembar = lots * 100;
            
            // Kalkulasi per saham
            const modal = avg * lembar;
            const marketVal = last * lembar;
            const pl = marketVal - modal;
            const plPercent = (pl / modal) * 100;

            const stockObj = {
                id: Date.now(),
                code,
                avg,
                last,
                lots,
                lembar,
                modal,
                marketVal,
                pl,
                plPercent
            };

            stocks.push(stockObj);
            renderStocks();
            updateDashboard();
            clearInputs();
        }

        function clearInputs() {
            document.getElementById('inCode').value = '';
            document.getElementById('inAvg').value = '';
            document.getElementById('inLast').value = '';
            document.getElementById('inLots').value = '';
        }

        function removeStock(id) {
            stocks = stocks.filter(s => s.id !== id);
            renderStocks();
            updateDashboard();
        }

        // 2. RENDER TABEL
        function renderStocks() {
            const container = document.getElementById('stockList');
            container.innerHTML = '';

            stocks.forEach(s => {
                const plClass = s.pl >= 0 ? 'text-green' : 'text-red';
                const sign = s.pl >= 0 ? '+' : '';
                
                const html = `
                    <div class="stock-item">
                        <div>
                            <strong>${s.code}</strong><br>
                            <small style="color:#888;">Lot: ${s.lots}</small>
                        </div>
                        <div>
                            Avg: ${s.avg}<br>
                            Last: <b>${s.last}</b>
                        </div>
                        <div>
                            ${formatRupiah(s.modal)}
                        </div>
                        <div class="${plClass}">
                            <b>${sign}${formatRupiah(s.pl)}</b><br>
                            <small>(${s.plPercent.toFixed(2)}%)</small>
                        </div>
                        <div>
                            <button onclick="removeStock(${s.id})" class="btn btn-danger">X</button>
                        </div>
                    </div>
                `;
                container.innerHTML += html;
            });
        }

        // 3. UPDATE DASHBOARD & PIE CHART
        function updateDashboard() {
            let totalModal = 0;
            let totalMarket = 0;
            let totalPL = 0;

            stocks.forEach(s => {
                totalModal += s.modal;
                totalMarket += s.marketVal;
                totalPL += s.pl;
            });

            const totalPLPercent = totalModal > 0 ? (totalPL / totalModal) * 100 : 0;

            // Update DOM
            document.getElementById('totalModal').innerText = formatRupiah(totalModal);
            document.getElementById('totalMarket').innerText = formatRupiah(totalMarket);
            
            const plEl = document.getElementById('totalPL');
            plEl.innerText = formatRupiah(totalPL);
            plEl.className = `value ${totalPL >= 0 ? 'text-green' : 'text-red'}`;

            const plPercEl = document.getElementById('totalPLPercent');
            plPercEl.innerText = totalPLPercent.toFixed(2) + '%';
            plPercEl.className = `value ${totalPL >= 0 ? 'text-green' : 'text-red'}`;

            updateContributorAnalysis();
            updateChart();
        }

        // 4. ANALISIS KONTRIBUSI
        function updateContributorAnalysis() {
            const listEl = document.getElementById('contributorList');
            listEl.innerHTML = '';

            // Filter hanya saham yang rugi
            const losers = stocks.filter(s => s.pl < 0);
            
            if (losers.length === 0) {
                listEl.innerHTML = '<li style="text-align:center; padding:10px;">Alhamdulillah, tidak ada kontributor kerugian (Semua Profit/Impas)</li>';
                return;
            }

            // Hitung total rugi absolut (agar persentase加起来 = 100% dari kerugian)
            const totalLossAbsolute = losers.reduce((sum, s) => sum + Math.abs(s.pl), 0);

            // Sort berdasarkan kerugian nominal terbesar
            losers.sort((a, b) => a.pl - b.pl); // Ascending (paling minus di atas)

            losers.forEach(s => {
                const contribution = (Math.abs(s.pl) / totalLossAbsolute) * 100;
                const html = `
                    <li class="contributor-item" style="flex-direction:column; align-items:flex-start;">
                        <div style="display:flex; justify-content:space-between; width:100%;">
                            <span><strong>${s.code}</strong></span>
                            <span class="text-red">${formatRupiah(s.pl)} (${contribution.toFixed(1)}%)</span>
                        </div>
                        <div class="progress-bar" style="width: ${contribution}%"></div>
                    </li>
                `;
                listEl.innerHTML += html;
            });
        }

        // 5. PIE CHART
        function updateChart() {
            const ctx = document.getElementById('allocationChart').getContext('2d');
            
            const labels = stocks.map(s => s.code);
            const data = stocks.map(s => s.modal); // Alokasi berdasarkan modal
            const colors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899'];

            if (chartInstance) {
                chartInstance.destroy();
            }

            chartInstance = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        data: data,
                        backgroundColor: colors,
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'bottom' }
                    }
                }
            });
        }

        // 6. TOOLS: AVERAGE DOWN
        function calcAvgDown() {
            const oldPrice = parseFloat(document.getElementById('adOldPrice').value);
            const oldLots = parseFloat(document.getElementById('adOldLots').value);
            const newLots = parseFloat(document.getElementById('adNewLots').value);
            const newPrice = parseFloat(document.getElementById('adNewPrice').value);

            if (isNaN(oldPrice) || isNaN(oldLots) || isNaN(newLots) || isNaN(newPrice)) {
                alert("Isi semua field Avg Down"); return;
            }

            // Rumus: ((HargaLama * LotLama) + (HargaBaru * LotBaru)) / (LotLama + LotBaru)
            const totalCostOld = oldPrice * oldLots;
            const totalCostNew = newPrice * newLots;
            const totalLots = oldLots + newLots;
            
            const newAvg = (totalCostOld + totalCostNew) / totalLots;

            const resBox = document.getElementById('avgDownResult');
            resBox.style.display = 'block';
            resBox.innerHTML = `
                <strong>Hasil Average Down:</strong><br>
                Harga Rata-rata Baru: <span class="text-bold text-red">${newAvg.toFixed(2)}</span><br>
                <small>Anda perlu harga naik ke <b>${(newAvg * 1.006).toFixed(2)}</b> (estimasi +0.6% fee) untuk balik modal.</small>
            `;
        }

        // 7. TOOLS: BEP
        function calcBEP() {
            const avg = parseFloat(document.getElementById('bepAvg').value);
            const targetPrice = parseFloat(document.getElementById('bepTargetPrice').value);
            
            // Asumsi 1 Lot untuk perhitungan unit
            const lots = 1;
            const lembar = 100;

            // Biaya Transaksi (Estimasi kasar Indonesia)
            // Fee Beli ~ 0.15% (Broker fee varies, min 0.1%)
            // Fee Jual ~ 0.25% (Broker fee varies, min 0.15% + Pajak 0.1%)
            // Total drag cost sekitar 0.4% - 0.5% dari nilai transaksi
            
            const feeBuyRate = 0.0015; // 0.15%
            const feeSellRate = 0.0025; // 0.25%

            // Nilai Beli
            const valBuy = avg * lembar * lots;
            const costBuy = valBuy + (valBuy * feeBuyRate);

            // Jika kita jual di Harga Target
            // Nilai Jual Kotor
            const valSell = targetPrice * lembar * lots;
            // Biaya Jual
            const costSellFee = valSell * feeSellRate;
            
            // Net Receive (Duit yang masuk kantong)
            const netReceive = valSell - costSellFee;

            const profit = netReceive - costBuy;
            const profitPercent = (profit / costBuy) * 100;

            const resBox = document.getElementById('bepResult');
            resBox.style.display = 'block';
            
            let statusText = profit >= 0 ? "PROFIT" : "RUGI";
            let statusColor = profit >= 0 ? "text-green" : "text-red";

            resBox.innerHTML = `
                <strong>Simulasi Jual di ${targetPrice}:</strong><br>
                Estimasi Biaya Beli: ${formatRupiah(valBuy * feeBuyRate)}<br>
                Estimasi Biaya Jual: ${formatRupiah(valSell * feeSellRate)}<br>
                <hr>
                Modal Bersih (termasuk fee beli): <b>${formatRupiah(costBuy)}</b><br>
                Diterima Bersih (setelah fee jual): <b>${formatRupiah(netReceive)}</b><br>
                <div style="margin-top:5px; font-size:1.1em;" class="${statusColor}">
                    Status: <b>${statusText} ${formatRupiah(profit)} (${profitPercent.toFixed(2)}%)</b>
                </div>
            `;
        }

        // Initialize with dummy data from screenshot for demo purposes
        window.onload = function() {
            // Contoh data dari screenshot user
            const demoData = [
                { code: 'BBCA', avg: 7166.52, last: 6075, lots: 65 },
                { code: 'BBRI', avg: 4685, last: 3180, lots: 15 },
                { code: 'BMRI', avg: 4370, last: 4230, lots: 10 },
                { code: 'BRIS', avg: 2600, last: 1835, lots: 10 }
            ];

            demoData.forEach(d => {
                document.getElementById('inCode').value = d.code;
                document.getElementById('inAvg').value = d.avg;
                document.getElementById('inLast').value = d.last;
                document.getElementById('inLots').value = d.lots;
                addStock();
            });
        };

    </script>
</body>
</html>