<?=link_tag('assets/css/kalkulator-huruf-timbul.css?v='.asset_version('assets/css/kalkulator-huruf-timbul.css')); ?>

<div class="ht-page" id="htCalculator">
  <div class="ht-header" style="background:var(--app-theme-color, #195ab4);color:var(--app-theme-text-color, #fff);">
    <div class="ht-header-copy">
      <span class="ht-eyebrow"><i class="fa fa-magic"></i> Estimator Produksi</span>
      <h1><i class="fa fa-font"></i> Kalkulator Huruf Timbul</h1>
      <p>Susun spesifikasi, hitung HPP, dan tentukan harga jual dalam satu alur.</p>
    </div>
    <div class="ht-actions no-print">
      <button type="button" class="ht-btn ht-btn-ghost" id="htReset"><i class="fa fa-refresh"></i> Reset</button>
      <button type="button" class="ht-btn ht-btn-solid" id="htPrint"><i class="fa fa-print"></i> Cetak Estimasi</button>
    </div>
  </div>

  <div class="ht-layout">
    <section class="ht-card">
      <div class="ht-card-title"><span>1</span><div><strong>Spesifikasi Huruf</strong><small>Tentukan bentuk dasar pekerjaan</small></div></div>
      <div class="ht-grid">
        <label class="ht-field ht-wide">
          <span>Teks / nama pekerjaan</span>
          <input type="text" id="htText" value="CONTOH USAHA" maxlength="100">
          <small>Jumlah huruf dapat dihitung otomatis dari teks tanpa spasi.</small>
        </label>
        <label class="ht-field">
          <span>Jumlah huruf</span>
          <div class="ht-input-unit"><input type="number" id="htCount" min="1" step="1" value="11"><b>huruf</b></div>
        </label>
        <label class="ht-field">
          <span>Tinggi huruf</span>
          <div class="ht-input-unit"><input type="number" id="htHeight" min="1" step="1" value="30"><b>cm</b></div>
        </label>
        <label class="ht-field">
          <span>Bahan</span>
          <select id="htMaterial">
            <option value="akrilik">Akrilik</option>
            <option value="galvanis">Galvanis cat duco</option>
            <option value="stainless_hairline">Stainless hairline</option>
            <option value="stainless_mirror">Stainless mirror</option>
            <option value="kuningan">Kuningan</option>
            <option value="lainnya">Lainnya / harga manual</option>
          </select>
        </label>
        <label class="ht-field">
          <span>Ketebalan bahan</span>
          <select id="htThickness"></select>
          <small>Harga per cm akan mengikuti bahan dan ketebalan.</small>
        </label>
        <label class="ht-field">
          <span>Finishing</span>
          <select id="htFinishing">
            <option value="0">Standar (tanpa tambahan)</option>
            <option value="10">Cat duco (+10%)</option>
            <option value="10">Hairline (+10%)</option>
            <option value="15">Mirror/poles (+15%)</option>
            <option value="15">Powder coating (+15%)</option>
          </select>
        </label>
        <label class="ht-field">
          <span>Tingkat kesulitan</span>
          <select id="htDifficulty">
            <option value="0">Standar (tanpa tambahan)</option>
            <option value="10">Sedang (+10%)</option>
            <option value="20">Rumit (+20%)</option>
          </select>
        </label>
      </div>
    </section>

    <section class="ht-card">
      <div class="ht-card-title"><span>2</span><div><strong>Komponen Biaya</strong><small>Lengkapi biaya produksi dan keuntungan</small></div></div>
      <div class="ht-grid">
        <label class="ht-field ht-wide">
          <span>Harga per cm per huruf</span>
          <div class="ht-money"><b>Rp</b><input type="text" inputmode="numeric" id="htBaseRate" value="2.500"></div>
          <small>Nilai rekomendasi bahan dapat diedit sesuai harga aktual usaha Anda.</small>
        </label>
        <label class="ht-field">
          <span>Jenis pencahayaan</span>
          <select id="htLighting">
            <option value="0">Tanpa lampu</option>
            <option value="1">LED depan</option>
            <option value="1">LED belakang</option>
            <option value="1">LED depan + belakang</option>
          </select>
        </label>
        <label class="ht-field">
          <span>Biaya lampu per huruf</span>
          <div class="ht-money"><b>Rp</b><input type="text" inputmode="numeric" id="htLightRate" value="25.000"></div>
        </label>
        <label class="ht-field">
          <span>Biaya produksi tambahan</span>
          <div class="ht-money"><b>Rp</b><input type="text" inputmode="numeric" id="htProduction" value="0"></div>
        </label>
        <label class="ht-field">
          <span>Biaya pemasangan</span>
          <div class="ht-money"><b>Rp</b><input type="text" inputmode="numeric" id="htInstall" value="250.000"></div>
        </label>
        <label class="ht-field">
          <span>Biaya transportasi</span>
          <div class="ht-money"><b>Rp</b><input type="text" inputmode="numeric" id="htTransport" value="0"></div>
        </label>
        <label class="ht-field">
          <span>Biaya lain-lain</span>
          <div class="ht-money"><b>Rp</b><input type="text" inputmode="numeric" id="htOther" value="0"></div>
        </label>
        <label class="ht-field">
          <span>Metode keuntungan</span>
          <select id="htProfitMethod">
            <option value="markup">Markup dari HPP</option>
            <option value="margin">Margin dari harga jual</option>
          </select>
          <small id="htProfitHint">Markup dihitung sebagai persentase tambahan dari HPP.</small>
        </label>
        <label class="ht-field">
          <span>Persentase keuntungan</span>
          <div class="ht-input-unit"><input type="number" id="htMargin" min="0" max="99" step="1" value="30"><b>%</b></div>
        </label>
        <label class="ht-field">
          <span>Pembulatan harga</span>
          <select id="htRounding">
            <option value="1">Tanpa pembulatan</option>
            <option value="1000" selected>Rp1.000</option>
            <option value="5000">Rp5.000</option>
            <option value="10000">Rp10.000</option>
          </select>
        </label>
      </div>
    </section>

    <aside class="ht-card ht-result">
      <div class="ht-card-title"><span><i class="fa fa-calculator"></i></span><div><strong>Hasil Perhitungan</strong><small>Diperbarui otomatis dari input</small></div><i class="ht-live-dot"></i></div>
      <div class="ht-result-intro">
        <div><small>Nama pekerjaan</small><div class="ht-job" id="htJobName">CONTOH USAHA</div></div>
        <span class="ht-live-badge">LIVE</span>
      </div>
      <div class="ht-summary-chips">
        <span id="htSpecSummary">11 huruf • 30 cm</span>
        <span id="htMaterialSummary">Akrilik • 3 mm</span>
      </div>
      <dl class="ht-breakdown">
        <div><dt>Biaya huruf</dt><dd id="htLetterCost">Rp0</dd></div>
        <div><dt>Biaya lampu</dt><dd id="htLightCost">Rp0</dd></div>
        <div><dt>Produksi tambahan</dt><dd id="htProductionCost">Rp0</dd></div>
        <div><dt>Pemasangan</dt><dd id="htInstallCost">Rp0</dd></div>
        <div><dt>Transportasi</dt><dd id="htTransportCost">Rp0</dd></div>
        <div><dt>Biaya lain-lain</dt><dd id="htOtherCost">Rp0</dd></div>
        <div class="ht-subtotal"><dt>Subtotal biaya</dt><dd id="htSubtotal">Rp0</dd></div>
        <div><dt>Keuntungan</dt><dd id="htProfit">Rp0</dd></div>
      </dl>
      <div class="ht-grand-total"><div><span>Estimasi Harga Jual</span><small>Harga akhir setelah keuntungan</small></div><strong id="htGrandTotal">Rp0</strong></div>
      <div class="ht-per-letter">Harga jual per huruf: <b id="htPerLetter">Rp0</b></div>
      <div class="ht-formula" id="htFormula"></div>
      <p class="ht-note"><i class="fa fa-info-circle"></i> Estimasi mengikuti nilai yang dimasukkan. Sesuaikan harga bahan, tingkat kesulitan, transportasi, dan kondisi pemasangan sebelum memberi penawaran final.</p>
    </aside>
  </div>
</div>

<script src="<?=base_url('assets/js/kalkulator-huruf-timbul.js?v='.asset_version('assets/js/kalkulator-huruf-timbul.js')); ?>"></script>
