<?=link_tag('assets/css/hpp-calculator.css?v='.asset_version('assets/css/hpp-calculator.css')); ?>

<?php
$hpp_tooltip = static function ($title, $description) {
    $tooltip_id = 'hpp-tip-'.substr(md5($title.$description), 0, 10);
    ?>
    <span class="hpp-tooltip">
        <button type="button" class="hpp-tooltip-trigger no-print" aria-label="Petunjuk <?=html_escape($title); ?>" aria-describedby="<?=$tooltip_id; ?>">
            i
        </button>
        <span class="hpp-tooltip-content" id="<?=$tooltip_id; ?>" role="tooltip">
            <strong><?=html_escape($title); ?></strong>
            <span><?=nl2br(html_escape($description)); ?></span>
        </span>
    </span>
    <?php
};
?>

<div class="hpp-page" id="hppCalculator">
    <div class="hpp-toolbar no-print">
        <div>
            <h1><i class="fa fa-calculator"></i> HPP Calculator</h1>
            <p>Distribusi HPP, harga jual, margin, dan keuntungan dalam satu tampilan.</p>
        </div>
        <div class="hpp-toolbar-actions">
            <button type="button" class="hpp-action-btn" id="hppReset"><i class="fa fa-refresh"></i> Reset</button>
            <button type="button" class="hpp-action-btn hpp-action-primary" id="hppPrint"><i class="fa fa-print"></i> Cetak</button>
        </div>
    </div>

    <div class="hpp-sheet">
        <header class="hpp-sheet-title">
            <div>
                <span class="hpp-sheet-icon"><i class="fa fa-cubes"></i></span>
                <span>
                    <strong>HPP CALCULATOR</strong>
                    <small>Perencanaan biaya produksi dan harga jual</small>
                </span>
            </div>
            <span class="hpp-live-badge"><i></i> Perhitungan real-time</span>
        </header>

        <div class="hpp-sheet-body">
            <section class="hpp-top-left">
                <div class="hpp-panel-heading">
                    <span class="hpp-panel-icon"><i class="fa fa-cube"></i></span>
                    <div><strong>Informasi Produk</strong><small>Spesifikasi dan jumlah produksi</small></div>
                </div>
                <div class="hpp-meta-grid">
                    <label><span>NAMA PRODUK</span><input type="text" id="hppProductName" value="Dus Mug Full Color"></label>
                    <label><span>UKURAN JADI</span><input type="text" id="hppFinishedSize" value="11 x 10 x 8 cm"></label>
                    <label><span>BAHAN / KERTAS</span><input type="text" id="hppMaterial" value="duplex 250gsm"></label>
                    <label><span>FINISHING</span><input type="text" id="hppFinishing" value="Glosy"></label>
                    <label>
                        <span class="hpp-field-label">UKURAN GAMBAR CETAK
                            <?php $hpp_tooltip('Area Cetak Image :', 'Masukan ukuran area cetak gambar, sudah termasuk di lebihkan utk garis bleed saat masuk mesin pond / potong'); ?>
                        </span>
                        <input type="text" id="hppPrintSize" value="40 x 27">
                    </label>
                    <label class="hpp-meta-note">
                        <span class="hpp-field-label hpp-field-label-note">
                            <?php $hpp_tooltip('ISI DALAM 1 LEMBAR CETAK:', 'Dalam 1 lembar area cetak, isi ny berapa gambar jadi pesanan'); ?>
                        </span>
                        <input type="text" id="hppPrintYieldNote" value="SEKALI CETAK DAPAT 1">
                    </label>
                    <label>
                        <span class="hpp-field-label">UKURAN POTONG KERTAS
                            <?php $hpp_tooltip('Ukuran Potong Kertas :', "ukuran potong kertas sudan termasuk di lebihkan\n3 cm utk bawah, utk anleh atau tarikan griper mesin,\n1 cm utk atas dan kanan kiri,"); ?>
                        </span>
                        <input type="text" id="hppCutSize" value="41 x 28">
                    </label>
                    <label>
                        <span class="hpp-field-label">UKURAN PLANO YG DI PAKAI
                            <?php $hpp_tooltip('Ukuran Plano yang akan di pakai :', "ukuran plano yang tersedia yaitu :\n65 x 90\n65 x 100\n79 x 109\n90 x 120"); ?>
                        </span>
                        <input type="text" id="hppPlanoSize" value="90 x 120">
                    </label>
                    <label>
                        <span class="hpp-field-label">SATU LEMBAR PLANO DAPAT
                            <?php $hpp_tooltip('Ukuran Plano yang akan di pakai :', "ukuran plano yang tersedia yaitu :\n65 x 90\n65 x 100\n79 x 109\n90 x 120"); ?>
                        </span>
                        <input class="hpp-derived-input" type="number" min="0" step="1" id="hppYield" value="8" readonly aria-label="Hasil otomatis jumlah potongan per plano">
                    </label>
                    <label>
                        <span class="hpp-field-label">TOTAL OPLAH
                            <?php $hpp_tooltip('Total Oplah :', 'total oplah / jumlah kertas yang masuk atau naik ke mesin cetak'); ?>
                        </span>
                        <input class="hpp-number-input" type="text" inputmode="numeric" id="hppPrintRun" value="10.100" data-number-format="integer">
                    </label>
                    <label>
                        <span class="hpp-field-label">TOTAL PEMBUATAN
                            <?php $hpp_tooltip('Total Pembuatan:', 'masukan qty total order'); ?>
                        </span>
                        <input class="hpp-number-input" type="text" inputmode="numeric" id="hppProductionQty" value="10.000" data-number-format="integer">
                    </label>
                </div>

                <div class="hpp-product-photo">
                    <div class="hpp-product-photo-heading">
                        <span>FOTO PRODUK</span>
                        <small>JPG, PNG, atau WEBP · maksimal 4 MB</small>
                    </div>
                    <div class="hpp-image-panel hpp-product-image-panel">
                        <input class="hpp-image-input" type="file" id="hppProductImageInput" accept="image/jpeg,image/png,image/webp" hidden>
                        <button class="hpp-image-button" type="button" data-input="hppProductImageInput" aria-label="Unggah foto produk">
                            <img id="hppProductImagePreview" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="Pratinjau foto produk">
                            <span class="hpp-product-image-placeholder">
                                <i class="fa fa-cloud-upload"></i>
                                <strong>Unggah Foto Produk</strong>
                                <small>Klik untuk memilih gambar</small>
                            </span>
                            <span class="hpp-image-hint"><i class="fa fa-camera"></i> Ganti gambar</span>
                        </button>
                        <button class="hpp-image-reset" type="button" data-preview="hppProductImagePreview" data-default="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" aria-label="Hapus foto produk" title="Hapus foto produk">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>

            </section>

            <div class="hpp-summary-column">
                <aside class="hpp-summary-card">
                    <div class="hpp-kpi-grid">
                        <div class="hpp-kpi-card hpp-kpi-blue">
                            <span class="hpp-kpi-icon"><i class="fa fa-tag"></i></span>
                            <small>RENCANA HARGA JUAL / PCS</small>
                            <strong id="hppSellingPrice">Rp 0</strong>
                            <p>Rekomendasi harga jual per produk</p>
                        </div>
                        <div class="hpp-kpi-card hpp-kpi-green">
                            <span class="hpp-kpi-icon"><i class="fa fa-calculator"></i></span>
                            <small>TOTAL HPP PER PCS</small>
                            <strong id="hppPerPiece">Rp 0</strong>
                            <p>Biaya produksi setiap produk</p>
                        </div>
                        <div class="hpp-kpi-card hpp-kpi-orange">
                            <span class="hpp-kpi-icon"><i class="fa fa-shield"></i></span>
                            <small>COST MARGIN</small>
                            <div class="hpp-kpi-margin-input hpp-margin-input"><input type="number" min="0" max="999" step="0.01" id="hppMargin" value="50" aria-label="Cost Margin"><b>%</b></div>
                            <p>Atur persentase keuntungan</p>
                        </div>
                        <div class="hpp-kpi-card hpp-kpi-purple">
                            <span class="hpp-kpi-icon"><i class="fa fa-line-chart"></i></span>
                            <small>PROFIT / PCS</small>
                            <strong id="hppProfitPerPiece">Rp 0</strong>
                            <p>Keuntungan setiap produk</p>
                        </div>
                    </div>

                    <div class="hpp-summary-card-body">
                        <section class="hpp-summary-distribution">
                            <div class="hpp-summary-section-title">
                                <span><i class="fa fa-pie-chart"></i> Distribusi Biaya</span>
                                <small>Proporsi komponen HPP</small>
                            </div>
                            <div class="hpp-summary-distribution-body">
                                <div class="hpp-cost-legends">
                                    <div class="hpp-cost-legend hpp-cost-legend-raw">
                                        <span><i></i>Bahan Baku<small id="hppRawAmount">Rp 0</small></span>
                                        <strong id="hppRawPercent">0%</strong>
                                    </div>
                                    <div class="hpp-cost-legend hpp-cost-legend-operational">
                                        <span><i></i>Operasional<small id="hppOperationalAmount">Rp 0</small></span>
                                        <strong id="hppOperationalPercent">0%</strong>
                                    </div>
                                </div>
                                <div class="hpp-pie-area">
                                    <div class="hpp-pie3d" id="hppPie"></div>
                                    <div class="hpp-donut-center">
                                        <span>Total HPP</span>
                                        <strong id="hppDonutTotal">Rp 0</strong>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <section class="hpp-summary-pricing">
                            <div class="hpp-summary-section-title">
                                <span><i class="fa fa-bar-chart"></i> Ringkasan Total</span>
                                <small>Nilai keseluruhan produksi</small>
                            </div>
                            <div class="hpp-price-grid hpp-price-card-grid">
                                <label class="hpp-price-strong"><span>TOTAL HPP</span><output id="hppGrandTotal">Rp 0</output></label>
                                <label class="hpp-profit-row"><span>PROFIT</span><output id="hppTotalProfit">Rp 0</output></label>
                                <label><span>COST MARGIN</span><output id="hppMarginSummary">0%</output></label>
                                <label><span>HARGA JUAL</span><output id="hppTotalSelling">Rp 0</output></label>
                            </div>
                        </section>
                    </div>
                </aside>
            </div>

            <div class="hpp-cost-area">
                <div id="hppCostSections"></div>
            </div>

            <div class="hpp-reference-column">
                <section class="hpp-paper-map-card">
                    <header class="hpp-paper-map-head">
                        <div class="hpp-panel-heading hpp-panel-heading-compact">
                            <span class="hpp-panel-icon"><i class="fa fa-th"></i></span>
                            <div><strong>Peta Pembagian Kertas</strong></div>
                        </div>
                        <div class="hpp-paper-map-sizes">
                            <span id="hppMapCutSize">Potong: 41 x 28 cm</span>
                            <i aria-hidden="true"></i>
                            <span id="hppMapPlanoSize">Plano: 90 x 120 cm</span>
                        </div>
                    </header>

                    <div class="hpp-paper-stats">
                        <div><span>HASIL PER PLANO</span><strong id="hppMapPieces">8</strong><small>pcs potongan</small></div>
                        <div><span>PEMANFAATAN AREA</span><strong id="hppMapUsed">85,0%</strong><small>kertas terpakai</small></div>
                        <div><span>KERTAS TERBUANG</span><strong id="hppMapWaste">15,0%</strong><small id="hppMapWasteArea">sisa 0 cm²</small></div>
                    </div>

                    <div class="hpp-paper-mode">
                        <span>Mode Orientasi &amp; Optimasi Sisa</span>
                        <div class="hpp-paper-mode-buttons" role="group" aria-label="Mode orientasi pembagian kertas">
                            <button type="button" class="hpp-paper-mode-btn is-active" data-paper-mode="auto"><i class="fa fa-random"></i> Campur</button>
                            <button type="button" class="hpp-paper-mode-btn" data-paper-mode="portrait"><i class="fa fa-arrows-v"></i> Potret</button>
                            <button type="button" class="hpp-paper-mode-btn" data-paper-mode="landscape"><i class="fa fa-arrows-h"></i> Lanskap</button>
                        </div>
                    </div>

                    <div class="hpp-plano-simulation" aria-live="polite">
                        <div class="hpp-plano-simulation-head">
                            <span><i class="fa fa-calculator"></i> Simulasi Kebutuhan Plano</span>
                            <small>Berdasarkan total oplah</small>
                        </div>
                        <div class="hpp-plano-simulation-main">
                            <div>
                                <span>TOTAL TARGET / OPLAH</span>
                                <strong id="hppPlanoTarget">0 pcs</strong>
                            </div>
                            <output id="hppPlanoNeeded">BUTUH 0 PLANO</output>
                        </div>
                        <p id="hppPlanoSimulationInfo">Masukkan total oplah dan ukuran kertas yang valid.</p>
                    </div>

                    <div class="hpp-paper-layout-title hpp-paper-layout-title-compact">
                        <strong id="hppMapTitle" class="hpp-visually-hidden" hidden>Potret Saja (Grid Tegak)</strong>
                        <span class="hpp-paper-auto-badge"><i></i><b id="hppMapModeBadge">Otomatis</b></span>
                    </div>
                    <div class="hpp-paper-stage">
                        <svg id="hppPaperMap" role="img" aria-label="Peta pembagian kertas plano"></svg>
                    </div>
                    <div class="hpp-paper-legend">
                        <span><i class="hpp-legend-box hpp-legend-portrait"></i>Portrait</span>
                        <span><i class="hpp-legend-box hpp-legend-landscape"></i>Landscape</span>
                        <span><i class="hpp-legend-box hpp-legend-waste"></i>Sisa / Waste</span>
                    </div>
                    <div class="hpp-paper-info" id="hppMapInfo">
                        Masukkan ukuran dengan format lebar × tinggi, misalnya 41 × 28 dan 90 × 120.
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

<script src="<?=base_url('assets/js/hpp-calculator.js?v='.asset_version('assets/js/hpp-calculator.js')); ?>"></script>
